So according to the git history, I started this endeavor two weeks ago. It’s been quite the adventure - I’m a C++ / backend developer normally. So working on HTML/CSS has been challenging. I was vaguely familiar with the concepts, but the most I had done was futzing around with the Inspector in Chrome to do dirty mockups at my last job. Luckily, there isn’t really any need for JavaScript in a static site like this. I do use JS a little - for example the photo gallery pages - but that was really simple to pull in, I didn’t even have to muck with the JS more than changing some settings.

The worst part, though, was last night. I spent a few hours trying to figure out the CSS classes that Rouge outputs. (Rouge is the syntax highlighter plugin that Jekyll uses.) I eventually found a list of all of them and started tryng to tweak it to match the default dark VS Code theme. But things weren’t working right, things like “class” and class names and variables all were getting the same class! Turns out, Rouge is just bad at parsing C++ (understandable, since the C++ grammar is pretty complicated). So I spent another few hours scouring the internet for a different highlighter script. I eventually gave up after trying 4 different packages - I’m just gonna have to live with somewhat ugly C++ code on here. :’(

On a good note, I didn’t spend hours/days trying to write my own Jekyll plugin for image processing for the photo galleries. I did start writing some build scripting, but that didn’t get far before I found jekyll-responsive-image. That plugin ended up being almost exactly what I wanted.

I’m pretty happy with the theme I have now. It’s basically the default Minima theme, but with some small tweaks for colors and positioning. It even works decently well on mobile browsers.
I even learned a little trick!
When the browser window width is small enough (less than 600px wide), the navigation links in the top right collapse into a “hamburger” menu. I noticed this doesn’t use JavaScript, and I wanted to know HOW?! It’s pretty nifty - first the CSS uses media queries to determine if the width is above or below 600px. Above 600px is pretty straightforward - just lay out the <a> elements. Below 600px there’s a hidden <input> checkbox element. That checkbox element controls (via some kind of CSS selector, IDK what it’s called) whether the menu <div> is shown. Clicking on the hamburger icon toggles the checkbox which toggles the visibility of the menu.
If I’m feeling particularly adventerous, I might try extending that concept to more than one level deep.