2025-05-04 15:14:48 +01:00 by Mark Smith
Just a quick post about the recent site redesign. I have been wanting to do a bit of an overhaul of the site design for a long time at this point. That wasn't possible until now because I was coding everything on a very small screen. Now that I have a laptop, the redesign became possible, and also somewhat more urgent because (1) I could see how bad the site looked on desktop browsers and (2) I'm looking for a job. The fact that it was quite a painless redesign is confirmation that my static site generator is working well, and perhaps my long term vision might be possible.
Here's a couple of screenshots that show the before and after for prostherity:
The biggest annoyance with the old design was that the text was too wide on desktop browsers. Though it looked okay on mobile, it spanned the entire screen on desktop. Second to that was the top of the page looked very empty and bare, and the menu items were confusing, but also far too minimalist. That's the best I could do without being able to open up devtools.
The new design takes a traditional blog layout approach, with a sidebar on desktop that contains the menu items. That frees up the header section considerably, cleaning it up, making it look neat and tidy. The main content now has text that doesn't span the entire page, making it much easier to read. I also added some borders around the different posts so it's completely clear where each one starts and finishes, even when the page displays posts of different types.
Along with the visual redesign I re-organised all the pages, updating the breadcrumbs making it less confusing when browsing the archives. It's often a good idea to cleanup things both visually but also logically. Hopefully the site is a lot easier to read on desktop now.
I've added some javascript and CSS to create a hamburger menu button that appears in the top right of the screen on small screens. That way there is no need for a wasteful sidebar taking up valuable screen space on those devices. Clicking / taping the hamburger menu opens a centered list of menu items. Clicking / taping it a second time closes the menu. Load the page on a mobile device or resize your browser window to test it out.
That's it really, it's still quite minimalist but is a good foundation to build on. At some point in the future I plan to make some more frontend changes to give it a more styled look. I just need to decide what direction to take it in design wise. For now it's good enough.
Thanks to Gemini for helping with some of the trickier CSS and javascript. It was actually very fun pair programming with an AI. #