I’ve yet again redesigned the layout of this site and this time it’s a hell of a lot different. I grew tired of the old look since it in all honestly looked boring and decided to give it some colors. I found the typeface Roboto a few weeks ago and I like it so much that I decided to use it, which was the first step.
Hey, what is THAT theme?
The theme is based on Noah Frederick’s beautiful Peppermint theme for the OS X’s terminal. I remember stumbling onto his Hemisu colorscheme for Vim and for some reason I also found Peppermint. I even liked it so much that I hacked together a Vim colorscheme for it that I use quite a lot.
Sass + Compass = ♥
I also used Sass and Compass exclusively for the CSS writing. I’ve been wanting to use it for a long time and I even tried to convert the old design’s CSS to it, but I gave up pretty quickly. This time I didn’t and I of course used Smallwork as a base which made the process a lot more easier and faster. Redesigning this site was also one of the things that made me re-write Smallwork.
using Compass with Jekyll is also relatively easy by the way. I first tried out
a couple of plugins, but I decided to implement it in my Rake task instead.
While the plugins worked great it really bugged me that I couldn’t decide when
compass compile and when to use
compass watch. All I had to do was to
add this to my
build task in my
jekyll is run:
Simple and effective!
- I started the redesign on March 1st and I’ve made a total of 28 commits1 to the git repository I used for the development.
- I “skipped” support for Internet Explorer 8 in favor of using
[class^="column-"]:last-childto remove the
margin-righton the grid system2.
- I also found a pretty cool Sass function called
darken(), which made it easy finding a good background color for my
pretags and the subtle text shadow. All of the color functions for Sass are pretty cool, in fact.
- The pink line at the bottom of the site uses the “James Dean Sticky Footer” approach, which is a nice little hack. I love the name too!
- I tried to change as little as possible when I did the CSS for the media queries. I pratically just changed the font size and some margins. That’s it.