A new theme for the blog (now with 0% JavaScript!)

I've recently updated the blog's theme and I felt I should make a post not only to document the reason but also to archive pictures of the blog before and after the change for the future.

When I created this blog, I chose nikhil-theme as the theme because I found it minimalist and pretty. (Even prettier after I switched the fonts to be the same as the ones in the https://www.thirtythreeforty.net/ blog)

However, quite some time later as I was looking into the theme's template HTML files, I was surprised to discover that this very simple theme contained JavaScript. I tried loading the page with JavaScript removed and found that it was only required to get the hamburger menu to expand on mobile devices. That didn't sit well with me. A simple blog like this shouldn't require any JavaScript at all. And I found it even more annoying that it was only required because of one single feature.

At the time I had already been making other changes to the blog and was not looking forward to completely switching the theme, so this thought stayed in the back of my mind until recently, when I finally decided to do something about it.

In order to decide on the new theme for the blog, I started by looking through pelican-themes (the same place where I originally discovered nikhil-theme) but only found one or two themes that didn't use any JavaScript and they didn't really appeal to me.

Eventually I remembered about the seirdy.one blog. That's a blog I follow which has excellent write-ups, and there's a whole page about the design standards that the website adheres to. The standards focus on minimalism, compatibility and accessibility, which are all qualities that I would like for my blog, so I decided to adopt Seirdy's theme for my blog.

Looking through seirdy blog's source code I noticed it uses the Hugo static site generator whereas my blog uses pelican, so adapting this theme wouldn't be just a simple copy-paste.

Ideally I'd have gone through Seirdy's HTML templates and understood them all so I could adapt them to my HTML Jinja2 templates for pelican, but I honestly didn't have all that energy in me. So I went for the lazy solution: I copied over the CSS files and tweaked my templates until the website looked good enough. This means I'm probably not following many of Seirdy's standards, but at least the website is leaner, without any JS (and even external CSS), which was the main goal.

The resulting source code change can be seen in this commit (and also this and this for follow up fixes).

As for the resulting changes on the website itself, the pictures below show different pages before and after the theme change, respectively.

Home page:

A blog post:

Tags:

About:

I won't lie, I already feel nostalgic and a bit sad to see the old theme go, but I believe making the website more minimalist is worth it.

One thing lost in this transition was syntax highlighting for code snippets. I assume it's intentionally avoided by Seirdy due to accessibility concerns, but I should confirm that at some point and if it's not the case then consider adding it back.

Even though there are still a few details left to iron out, I'm quite happy with the change and particularly relieved there's no more JavaScript running when seeing this blog.