I buy the minimalist vibe, and its got me this far. But I wanted to add some funkiness and get away from the monochrome - the answer being some colour splashiness across the site.

With a million colours to choose from, I took inspiration from the interior design of my house and settled on 70's pastel. I had a browse on Color Hunt and found this pleasing palette with credit to Gal Shir.

Playing about just in the chrome inspector I quite quickly found a blocky style I was quite happy with on the titles. As simple as setting a background colour to a nice pastel red, making the style inline so the block doesn't continue beyond the text and adding a tiny bit of right padding so the text isn't cut off so violently.

Another thing I played with was setting the header section to a block colour when on a post page, to give some differentiation from the home page which can in certain cases look remarkably similar. This was slightly more involved as it required assigning the header tag a class, but the header section was defined in a base template so I needed to feed-back what this class should be from the article template. This was nothing new and something I've used blocks for before, but found the set keyword to set a fixed variable useful in this regard.

Rest assured I have bigger plans for my pastel block titles - I'm thinking a different colour based on post category. This requires some posts first though.

In terms of adding extra funk I wanted to try some CSS animations. I thought the occasional pulsing/gradient in the 'W' of the logo would look pretty cool. First things first I needed to actually make the 'W' cut-out transparent so I could use CSS to modify the background underneath. I do all my graphics in Inkscape, for the record. I've always loved this as a product, and although it can be a bit clunky to begin with (compared to say Adobe's expensive offerings) I have found nothing it is incapable of doing.

Unfortunately this didn't turn out as impressive as I hoped so binned the idea - plus I'm not sure how broad the browser support would be. In a somewhat brash turn, with my brother looking over my shoulder and commenting he liked the 'W' but not the 'S' and myself personally liking a squarer logo - in the process we've ended up with a new take on the old logo.

All screenshots were captured in an automated tool, in this case Selenium. In my setup Chromedriver was used with mobile emulation of the Nexus 5. This was a bit of an after thought in this case, but hope to use this kind of automation more in the future.

Sticky header

The good 'ol sticky header is a Web2.0 favourite. As you scroll a small header stays at the top of the page on top of the content. I wanted to give this a go, but don't love it as a feature - these are notorious for eating up way too much of the page (particularly on mobile) and being a generally a frustrating experience.

As per, w3 sorted me with a basic place to start. The sticky header is easy enough - use CSS to set the position to fixed and pin to the top; the transition between normal and sticky header is more nuanced. We set a Javascript callback that fires when the user scrolls, and here we look at the window pageYOffset which tells us the offset of the top of the viewport to the top of the content (which obviously changes as we scroll). When the offset passes a pre-defined value (which we find based on an element's offsetTop property) we switch to sticky mode, and do this by applying a top level 'sticky' class that modifies child element styles appropriately.

Maybe it was because it was in the evening, but it genuinely took me some serious head scratching to get the transition right. It requires knowledge of the absolute height of both the main header, and the sticky header - and this can be pragmatically worked out through knowledge of the elements within each. This is where SASS and its use of variables (and arithmetic on them) really comes in to its own. I've managed to implement this without ruining the generic nature of the template. The only annoyance is that you need to store the height of the sticky header in the Javascript (rather than CSS where everything else is stored), because you need to determine its top edge for the transition, and you can't grab this from the element as it hasn't been rendered yet - I can't think of a robust way around this at the moment.

Long story short, when I first played with the sticky header and hadn't got the transition right I hated it, but actually once I got it smooth it grew on me - so for now it stays...