Andrey Listopadov

New look

@misc ~5 minutes read

About a year ago I’ve started thinking about changing the theme of the blog and hopefully designing my own theme. This didn’t go so well, as I had very little free time to actually sit and do the thing. So at the end of the last year, I’ve decided that I’ll prioritize this task at the start of 2022, as usually there’s not so much stuff to do at the year’s start, rather than mid-year.

Initially, I’ve decided to move away from Hugo to a pure Org Mode based static site generation via Org Publish. Not that Hugo doesn’t work, or has problems, I just wanted to try out something new. So I’ve created a new blog, where I’ve started experimenting, using my old posts, and the new publishing system. It didn’t work out, unfortunately.

There were two main problems I’ve encountered. The first one was that I was unsure how to properly organize pages. What I’m talking about specifically is that when you’re reading a post in my blog, you usually see the blogname.domain/posts/post_name/ in the address bar. However, pages generated with Org Publish were blogname.domain/posts/post_name/index.html and I couldn’t figure out how to make an automatic redirection, or edit links to automatically omit the index.html part. I’ve tried patching the code of Org Publish, couldn’t figure out where the link transformation happens. Of course, I could just use blogname.domain/posts/post_name.html format, but this would break all links referring to my posts in other blogs or social media. And for now, I’d like to avoid that.

Another problem was with generating RSS feeds. Hugo does a great job creating separate feeds for every category and tag, so readers can subscribe only to the topic they’re interested in. Same with blog aggregators - no need to filter posts via some regular expressions, just specify the correct feed URL. Org Publish can’t create RSS by itself, you need a separate package, called ox-rss for that. It was a bit hard to install, given that Org Mode removed the contrib packages to a separate repository, and unfortunately, ox-rss doesn’t seem capable of creating feeds similarly to how Hugo does it.

So ultimately I’ve decided to stay with Hugo for the time being, and, for now, simply change a theme. I’ve changed themes before, but that was mainly due to the fact that I came to dislike a certain theme, and wanted something different. Especially since (I believe) I’m the one who sees my blog the most, it’s important for me to have something I like looking at. Originally, I’ve started this blog with the Ezhil theme, but a month after that I’ve replaced it with a more cool-looking Hyde theme with its think black bar on the left and bold fonts. But around April 5th of 2020, I’ve moved to Hugo Primer, and tweaked it ever since, changing colors and templates.

It was a good theme, but it was still a bit too busy for my liking. It is designed to be visually similar to how GitHub looks, so it had a lot of small widgets, like circled numbers, tags were little rectangles that resemble badges found in most repositories, and so on. Overall the experience was solid, but one thing I disliked, in particular, was that there was an enormous CSS file, with 8k lines when un-minified. This made it harder to tweak the styling of the blog and obviously increased page load time a bit.

So I went to the Hugo themes page and searched for a nice and minimal theme that can work as a base. After quite a bit of searching, I’ve found several candidates: Anubis, Archie, Rocinante, and XMin.

Anubis was my first candidate, but I’ve ended up dropping it. It does feature automatic change to dark version, which happens synchronously with the change of system theme, which is a nice touch. But it also has some JavaScript, and I’d wanted to avoid it unless really necessary for a certain article to work. And with the dark mode came some problems, as the inline code snippets remained in their original color, thus being very bright. I could change that, but there were other variants to check before that.

The Archie theme didn’t work for me - it was too contrasting, and it also has JS. Overall, the Network page looked pretty busy for loading such a simple-looking theme.

XMin was very nice and minimal, I’ve considered it as a way to go for a while. However, after browsing different pages with it I’ve noticed some eye strain, perhaps due to the contrast, and relatively small fonts. Not that this can’t be tweaked, but I had one more theme to try.

Rocinante was a weird one. At first, I didn’t like it, but then I’ve decided to try and tweak it. And after some very small tweaks here and there, I’ve got what you’re looking at right now. I’ve kept the custom color I’ve used in my previous theme variant, removed some of the visual noise introduced by additional colors and separators, moved some elements around, and that’s it! I really like the result, and it’s very light as well. And now, that it’s not a huge minified CSS I’m working with, I can finally tweak things as I need, so maybe some changes will pop from time to time. I’ve also added a dark variant that is automatically selected via CSS @media(prefers-color-scheme: light|dark) media query, but it may need some tweaking. So Feel free to tell me if you like the new look, or preferred the old variant!

I won’t be releasing these tweaks as a standalone theme, as with those my blog has more chances of being a bit more individual. But nothing prevents you from grabbing the CSS and tweaking the theme’s templates a bit to achieve a similar look if you want.