Though I don’t write here as often as I wish - mainly because there’s little to write home about most days - I’ve actually done quite a lot of technical improvements after moving to Hugo earlier this year. Who would’ve guessed that editing CSS and HTML templates is easier than writing something interesting! This page showcases some notable additions implemented since February. I know it hasn’t been a full year yet, but I’m posting this now because I’d like to implement a “feature freeze” and force myself to actually write instead of tinkering with shortcodes if I want to add something to the site. Therefore, if all is well and good there shouldn’t be radical changes before 2025.

Themes

Okay, this one is pretty cool. If you go to some of my reviews (last one’s a To the Moon spoiler, watch out!), you might notice that they look unlike the rest of the site. That’s because this summer, I added per-page themes! How they work is I have a bunch of files in /css/themes, and specify the one to use with (optional) “theme” front matter tag. There is also a “colour” to make the social media embed match.

Now, some might say that breaking consistency is bad. I say, that’s boring! I already have a dry style by personal webpage standards, and this lets me compensate by making some of the pages stand out. Think of it like those fancy articles with scrolling animations and their own colourways big news sites occasionally publish, but on a budget. And instead of political analytics it’s game reviews.

Speaking of themes, a funny trend I noticed is that after switching to warm, low-contrast colours back in February, I’ve been slowly turning up the contrast. I wonder if in a year, I’ll have pinch black and blinding white as the two main colours…

Russian language

This one should be apparent if you’re reading this in Russian. The problem is, I’ll have to translate this page for that to be a possibility, and that’s not a given. Laziness aside, I finally added a second language. It was ridiculous for someone like me to have a site exclusively in English.

I’m finding it both tedious and hard to translate, so a backlog of content is exclusive to English, with it being a coin toss whether a new page has Russian. I try to delay posts until they are i18n’d, but then I’d never publish anything at all.

There is a link between the languages on the home page, and, if an article has alternative version, a switch is shown at the top right.

Font shenanigans

Ladies and gentlemen, I have terrible news: the webfont is back. Almost a year since I removed any custom fonts from here, I made the difficult decision to bring the practice back. The culprit is Android, or, rather, its default serif font.

Over the past couple of months I’ve been trying to ensure lists of links (i.e. notes section or “latest posts” on the homepage) fit in single line - otherwise, the date doesn’t float: right and instead floats off somewhere not-right, ruining the formatting in the process. The problem is, even when I optimised for tiny viewports (open this with 320px width, I dare you), my phone would still have overflowing lines. Finally, I realised it was cause by the default serif font - it was just too damn wide compared to ones on my mac and desktop. The funny part is the font in question being Noto Serif, which I used to have on this site by default!

So, in the name of compatibility, there is now an Official™ Andrew71 Font®. And it’s… Times New Roman and Liberation Serif - two, technically! Though only the latter is actually provided on the site, for obvious reasons. I very much want the retro/minimal look, and these feel like THE Serifs in that regard. In addition, I still wish to avoid users downloading something that weights more than entirety of the site when possible. Times New Roman is pre-installed on Window$ and Mac/iOS, meaning they don’t have to do anything. And Liberation Serif is common enough on Linux that I assume a big chunk of us won’t be fetching it from my site either. This leaves Android, (and super-minimal distros, I suppose). And while I still believe that a 400kb file for a 20kb page is silly, perhaps it’s better than battling mobile layout for the rest of eternity.

Post links improvements

This short section is about the aforementioned lists of links. I moved the date of publishing from before the title to right side of the screen. I think article links starting at consistent point looks cleaner. I then added a neat “Latest posts” section to the home page, making it easy to find the last thing I wrote if you somehow stumbled upon my blog web-page™. Not much else to say here, but it improves the site’s look in a big way.

Look, I can even insert it here!

1. Back online Nov 19, 2024
2. Site Updates: 2024 Edition Oct 30, 2024
3. Half a decade of memories Oct 26, 2024

Shortcodes

Making use of Hugo, I added a couple basic shortcodes (I’ve been calling them “shorthands” this whole time…). They aren’t the most impressive or functional, but get the job done. For the most part.

Spoilers

Spoilers conceal their contents until hovered over (or tapped on mobile) - Dumbledore kills Spiderman on page 326. An issue with these is they obviously don’t work with reader views or screenreaders, and are in general pretty wonky. The silver lining is realistically, I only ever need them in video-game reviews. And chances someone will be reading one while completely blind or lacking a mouse/finger are… well, pretty slim. And if you’re using reader view, too bad, should’ve admired my fancy themes.

Expanded sections

Context

Sometimes, you want to add a little tangent. Like, really tiny. Too small for an expanded section, too insignificant for a footnote. I previously used <abbr> for these, but it turns out using things for unintended purpose isn’t a good idea from accessibility standpoint! (audience gasps). Context notes act similar to abbreviations, except they aren’t marked as such. Hover over me!. Like spoilers, it has some issues - in this case, mobile support. I might do something in that regard, but honestly, I mostly use these for little jokes you could skip.

Steam game

I’m gonna be real, I hacked this one together while writing this. Really wanted to play around with shorthands more, and this was the first that came to mind. Right now it just receives an app id and outputs relevant Steam game’s capsule image that redirects to store page on click. In theory, I could show anything from the appdetails Steam api endpoint. Doubt I’ll actually add these to reviews as they might be too disruptive. Just a nice little homage to a similar “shorthandcode” I had in an earlier iteration of the site. In the meantime, you know the drill. Fly me… :)

Misc

I covered the most significant & fun ones, so let’s just speed through smaller additions.

• Support for hidden pages (good luck finding ’em)
• Now page that compliments /about
• Images are now a thing sometimes

Thanks for reading, until next time!