SqncBrk Redux

In May of 2014 I've launched a blog about metroidvanias. It was a hasty launch with a lot of tinkering afterwards. A year later I've decided to remake it from scratch.

This case study describes creation of 2015–2016 version of SqncBrk that was live until early 2019 when I re-designed it once again. Updated case study about that will be published some time in the future. Currently I'm planning yet another big update migrating from GRAV to Gatsby.

On page placement

Initial site used Wordpress as a backend with the Ink theme by CodeStag. I've made a few tweaks and ended up making a rather extensive child theme for a task that was actually more of removing clutter, than adding stuff.

So I tuned the typography, changed and added some animations, moved a few things around a bit. And every time there was something in need of fixing I got that feeling of inner panic that I have when I see someone else's code and have no idea what the fuck's going on there. I'm not a stranger to stuff like HTML and CSS, I've written a few lines of code here and there. But there's a huge difference between making JS prototype and writing production code.

That didn't stop me from adding fullscreen-width images (as seen above) to blog posts a few months before it became possible with a simple setting in original theme.

In May of 2014 I've ended up with something that was looking good, but was too much of a hassle to work with. There was still a lot to be done under the hood like removing the usage of Fontawesome (which is awesome, but too much of an overkill for a site with 3 icons).

Old design

I've started by making a basic HTML-boilerplate for all 4 (and a half) templates the site was using. I've loosely copied the existing site layout and started polishing various layout elements in no particular order.

At the same time I was working on something you could have noticed on the previous image. I've always liked Museo, high-legible low-contrast geometric font with nice cyrillic glyphs.


Based on that fancy new search I've made a new template for search results differentiating it from the homepage and providing some text description for blog entries.

Search results

There was also a matter of adding proper style for mobile and tablet.

At some point I started thinking that it would be actually a good idea to look for a different backend. Instead of a highly complex and feature-heavy Wordpress I would've prefer something simple, fast and flexible. I was in need of CMS where really important things like server-side image resizing (for mobiles) were taken care of. And this backend also should've been flexible to add few things missing in the base package. I've ended up choosing flat-file GRAV which is awesomely fast and extendable.

I've ended up writing a plugin for my image output serving it just right for bLazy.

There's tons of small stuff like refined text selection highlight (seen above) or 404 page. And many things just seemed hard for me, but turned out to be quite easy when I approached them. Loading more items ended up being nothing more than a special template and 20 lines of JS.

You can't really stop trying to make something better. SqncBrk since then had numerous new blog entries, design improvements, but the groundwork still holds up (even though I plan to eventually redesign it again).

Final results