For some unknown reason, I haven’t been using a spacer when creating all of my diagrams. Just eyeballing it. I hadn’t noticed much in light mode on the site unless I really stuffed it, but when put against the darker background of Photoswipe (more on that below), it was painfully apparent.

Incomes the spacer to slowly but surely fix all of my diagrams:

I just wanted to zoom in

The advantage of using svgs was a fast page load and you could zoom in, kind of forever. The disadvantage that I’d ignored up until this moment was that you couldn’t open them in fullscreen easily on desktop.

Turns out the theme I’ve been using has its own implementation of a Javascript image viewing library (Photoswipe) that - probably due to the way I’ve implemented it (poorly), isn’t running the latest version of Photoswipe.

Long long story short, I rewrote a custom photoswipe component that handles all images I use on this website including svgs, webps and pngs.

Now you can click through happily and it sizes dynamically based on your screen. Lots of fiddling to get that one right.

138 diagrams

This is probably too many, I’m thinking I might turn some in to gifs/animations now I’ve seen them play through quickly through photoswipe.

They’re also 1000 words each right? 138000 word rulebook. Nice.

It also also means that whenever I noticed something wrong (like slight clipping through of edges of underneath hexagons…really only noticeable on a dark background). I have to make 138 small adjustments. Kicking myself on that one. Thankfully I’m pairing that with my spacer and have been putting good music on before work and chugging through them.

Anyway, that’s about all. Thanks for reading 🌋