A Little Visual Personality

I'm a big fan of Matt Gemmell's website. Not only is the content fantastic, but the straight-forward design and excellent typography is a great inspiration anytime I need to lay out HTML. Both Matt's site and Jason Santa Maria's heavily influenced me to update my blog to it's current "pale blue" version. I took the "simple" idea a little farther than either of them, though, shucking almost all the site's navigation. Each individual blog article stands very much on its own...

But once in a while, I get an itch to style up the site a little more. Make it more "magazine cover" like, I guess? But changing the whole website to accommodate an occasional fancy seems extreme… especially since that fancy is usually brought on by a single article. The next blog article I write (whenever I finally get around to it) might be of a completely different feel, and that style change might no longer "fit" it.

As a compromise, I updated my blog editors and gave myself some extra fields. I can now inject custom CSS on an article-per-article basis. This takes the website's stand-alone blog article idea even farther, giving me the opportunity to give each individual article a little visual personality.

Here's that same article screenshot-ed above, tweaked with its own CSS

The custom CSS only fires if your browser width is 1000px or more, and its ayered on top of the default stylesheets. Lower than 1000px and my regular "pale blue" look kicks in again. This means I don't have to test these single-article visuals on tablets, smartphones, etc. I can indulge, and be confident that, if I have a change of heart, I haven't done anything permanent; I can any single article's custom CSS to set it back to normal. Or I can comment out a couple lines of code to disable all the custom visuals across all articles.

I expect many of these custom paint-jobs to look silly and garish, but what's the point of a personal website if you can't experiment and play a little :)

Advertising via Google