Giving The Blog A Logo In CSS
This morning while lounging in bed because I managed to wrench my back, already lately plagued by aches and pains, I took to something I was going to do last night but didn’t want to stay up late.
You’ll notice that the site header no longer simply contains the site title. Instead, there’s a little bit of a site logo.
The long and the short of it is that I used this as a guide, although if I’d thought about it long enough I likely would have figured it out on my own, eventually.
It’s not complicated. The discs are the :link, :visited, and :active colors of my anchor tags, respectively, and a little bit of negative margin-right on each overlaps them.
The site initials get a larger font size than did the original site title, and are bolder to make the logo treatment pop just a slight bit more. Since it’s all just CSS, and my colors use variables, it renders theme-correctly in dark mode, too.
If you were browsing the site at all yesterday you might have caught me playing with icons from unDraw Handcrafts because I wanted to give the site some sort of non-textual design elements. In the end, I didn’t like that approach.
Instead, we get a minimal bit of flair that doesn’t overburden the look and feel, and has the advantage of keeping my approach of just using HTML and CSS with as little styling as possible.
Addenda
-
I’ve made one other, minor, design tweak. Links are now slightly bolder than the text, if still less bold than headers. I’m not sure if this will keep, but we’ll see.
-
I’d forgotten to mention it when I posted this, but I was partly motivated to find an element of visual flair for the blog by Nicolas Magand’s thoughts on visual identity, although the three-disc treatment doesn’t extend to the icon that appears with my RSS feed.