The above screenshots are some old looks that I’ve forgotten to document here. I like to save these because it’s fun to see how the site has evolved stylistically over time. I update my sites frequently, sometimes compulsively… to learn a new technique, relieve stress, alleviate boredom, and sometimes just for fun. Here is the thought process behind some of the changes…
I may have shared a similar look in an older Always a Work in Progress post, but back then, the nav bar was in a lighter shade. I really liked the newspaper look and feel of the background texture and how the content was nicely framed in gray.
I fell in love with the simplicity of Basic Commercial and this infatuation compelled me to give the blog a minimal look to match. I changed the body text to a serif font, Georgia, because I read somewhere that serif fonts are more legible than sans-serif fonts of the same size (but don’t quote me on that!).
For the life of me, I can’t find screenshots of the blog when I first switched over to a single column layout in the Fall of 2012. At the time, I remember changing my logo to Cooper Black and I stripped away the sidebar. The dominant style feature was a single thick black border separating posts. Although sidebars can be immensely useful (hello navigation!), it was also a great source of frustration for me. Selecting my sidebar content was always tough, but more importantly, I felt that it looked cluttered no matter how I arranged it. Admittedly, it took some time to get used to the narrowness of the layout, but I’ve grown to like it.
Above are some variations of my single column layout. Over the Summer I grew weary of switching between white and gray backgrounds. Yawn. To inject a little thrill into my life, I added some CSS gradients to my stylesheet and the effect turned out to be pretty neat. The hardest part was to choose a color saturation that wouldn’t be too distracting or overwhelming. Also, around the same time, intrigued by the CSS involved with site-takeovers, I continued to experiment with clickable backgrounds.
Currently, I’ve tweaked the background to have a fade-in-fade-out effect starting with white dissolving into pink dissolving into peach and fading back to white at the bottom. Also, with the background getting a bit wild, I replaced the banner font Trend with Futura Medium to give the overall layout good balance. And finally, I decided to affix the navigation bar to the top of the page to keep important links always in view (disabled for small devices, i.e. iPhone, iPod, iPad). In case you’re wondering, I haven’t abandoned my chocolate cupcake logo.
It’s just taking me a while to figure out where to put it! ETA 10/12/13: Got it. Look up! :)
I’ve also changed my landing page. If you want to try some of these effects on your blog and don’t know how to get started, check out these CSS tutorials (enumerated above). Have fun!