This is a bit of a bigger one, I’ve been doing a lottt of tinkering to the site instead of ya know, playtesting the game.
Mobile Contents
Well, as there was already an inbuilt scrollspy contents (one that tracks which heading you’re up to on the way down your page) for desktop inbuilt to this theme, I thought there must be a way to display that simply (enough). There was.
I started banging my head against the wall when I couldn’t easily pull .rightsidebar up from the bottom…then I realised I’d already done the hard work in my previous site https://mechanicalpencil.art. All I needed to do is reenable it and make it display the contents not the tags and categories.
I’m pretty happy with how it’s working. Currently takes up 50% of the screen, debating doing a little more, but also want it to still show enough content you can quickly judge if it’s the right info.
I haven’t decided whether the ‘Back to top’ buttons are now a bit redundant. Maybe.
Mobile Search
Well. This was certainly not something I thought I would pump out in the past two days but look, here we are. I love using the ol’ ctrl+find on a web page, but unless you go looking for it in a mobile browser, you mightn’t think to use it. I dunno. I’ve never used it on a mobile browser before, I have just checked - it’s definitely there, it is. Ah well. I made a thing that does that without having to press two extra buttons.
First up, I got it to search the entire body of the article.
Then add a highlight to all of the elements it found.
Prettify the css and styling to make sure the highlight stayed in place of where the original element was.
This included saving then replacing the article content text.
Add search for headings and lists (ul and li elements).
Added buttons to jump up and down once items were found. I decided the upper third was a good centering area.
Made sure the buttons only appeared after you’d selected the search box.
Only start highlighting once 3 or more letters have been typed.
Fix up everything that had broken when the search starts replacing elements on screen. Most notably:
- .img
- .svg
- href
Made the script skip any elements that had a ‘rect’ size of 0 (e.g. hidden elements etc)

Oh and a bit more styling on the buttons and positioning with the contents button etc.
I’m pretty stoked with it. Moving on:
The code
You know you want it. Here it is, free for use though please attribute. Yes it was mostly coded by AI, but it took a fair bit of prompting to add and refine all the above things:
The code
|
|
SVG Descriptions
So I could’ve sworn I added this a while back, but then working between two laptops sometimes causes some sync issues every now and again and I’ll close a file without hitting save and/or push.
Anyway, the svg.html file now looks like this:
|
|
And using the shortcode to embed the svg image looks like this:
|
|
Then, as long an image with that name is in the assets/img/svgs folder, it’ll be rendered inline on the page, wrapped in the class with the attached description. I’ve got my Export For Screens from Illustrator targeting that exact folder, so can make updates pretty quick and easy.
This is great for accessibility and ease of use.
Colours
I need to fix these. Realised this when my phone went into greyscale mode before bed. It’s almost impossible to distinguish the blue and pink I’ve been using.
Should probably go like a 10, 50, 90 in greyscale for my 3 biomes, then a 30, 60 in greyscale for my playing pieces.
Then dogs can play! Or whichever animals it is that are colourblind. I swear it’s famously dogs. ANYWAY.
I’ll get back to that and properly layering them at some point.
There’s a lot of diagrams (almost 50) now.
I think they’re useful.
Github Mobile
One thing that had been bugging me about my current workflow, was that if I had an idea, I wasn’t able to quickly update a rule or write a blog post directly on my phone.
I then had the gen10u5 idea of checking whether there was a version of Github for Mobile - There is. Probably adds another potential layer of security flaws to my site, but hey, what can ya do, I just hope no one is feeling too malicious.


Ok, so it doesn’t have a rich code editor, I can’t copy and paste full folders/select multiple items and copy around. But adding a # for headings and a - for lists is easy enough!
There’s probably a hacky way to add this in, but it’s more for jotting down a quick note in the same place I work off my laptop. I’ll try it for a bit, may revert back to Google Keep as I have that widgetted up to type a quick note.
Oh and another reason
Well that’s it really, I love the version control I can run. Particularly to check across multiple pages and see line for line what wording I’ve changed if I’ve accidentally pushed to versions at any one point.
Keep is very impressive at updating in the blink of an eye across all devices so it’s much of a muchness there.
VS Code Extensions
Here’s a few cheeky things I’ve added onto my VS Code just to make things a little easier - I have no idea why I hadn’t tried searching Hugo before. This is the third proper site I’ve built here, these could have saved a few headaches in the past:
Hugo Language and Syntax Support budparr
Hugo Themer Elio Struyf
Hugo Shortcode Syntax Highlighting https://marketplace.visualstudio.com/items?itemName=kaellarkin.hugo-shortcode-syntax
This has just made viewing the md files so much cleaner. I like things to be in obvious different colours, helps me stay focused on the things I need to focus on.
Other Extensions
The other main ones I use are for Markdown files and HTML. Just makes everything wayyy nicer. If anyone is ever interested I’m sure I can compile a list easily.
Lava your comments here
Loading comments...