Ideas can be annoying sticky things that latch on to your brain and wont let go. This one came to me in the auspicious surrounds of the London Design Museum. In this cavernous building the visitors are presented with smorgasbord of beautifully made items most of which have this sort of disarming simplicity about them.

It’s here where I had the realisation that it might be fun to rekindle my web-dev skills and see how lightweight and essential I could make this blog. Why can’t a C# Unity blog be simple and appealing?

Enter Jekyll

My first blog ran on Wordpress and since working with various other CMS such as Drupal I’ve increasingly realised they are best avoided for personal sites. Who wants the constant hassle of updates and security issues? There is something inherently appealing about a technology that for all its flaws will spit out inscrutable unhackable static HTML. Jekyll is mature and popular and doesn’t try to do anything clever.

Getting Jekyll to work in Windows proved to be a challenge. If you’re looking to do the same I recommend Davy De Waele’s tutorial on running it inside a Docker container.

Design

It’s meant to be essential right? How do 99.9% of developers find a blog post? They end up on it via Googling a few keywords or they saw a link somewhere. So do we need search, newsletters, and categories? An essential approach says bin this sidebar clutter.

Typography

I chose Roboto for the body font its clean modern look. There’s a tendency for development blogs to use tiny font-sizes as if trying to mimic the look of code in an IDE. Roboto has been worked over enough to look great at larger font-sizes.

The monospaced “Static” has been forced into heading duty, I’ve come to love this quirky little font for its equal doses of presence and personality. Something just feels right about making monospaced headings work in a development blog.

Handling Widowers

One annoying thing (to me) about online publications is when article titles have the last word broken off into the next line. This anomaly is know as a ‘widower’.

There is CSS support for handling widowers but sadly it has sporadic browser support. Fortunately Stephen Howells has created an excellent jekyll plugin that handles widowers by automatically adding linebreaks.

Gooey Titles

The heading effect is achieved via SVG filters and maxing out the Gaussian blur matrix like so:

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"/>
      <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
    </filter>
  </defs>
</svg>

.post-header .title-inner {
  -webkit-filter: url(#goo);
  filter: url(#goo);
}

The filter can be added to any element by providing it’s ID in the CSS. The filter automatically affects all children of the parent element. I chose to apply the to buttons to give a more organic look than the typical border radius effect provides: Importing from a material