BAG + CSS
How I made the biggest design changes to my site in five years, despite not knowing how to code.
I've dipped my toes into coding and web design more times than I can count. I've started the courses, followed the tutorials, and even made a few brave attempts of my own. But at this point, I'm convinced I'm a lost cause. My brain seems determined not to retain any of it.
This puts me at a real disadvantage, as understanding code feels as essential as speaking the language of the place you live in. This was one of the reasons I run this website through a provider rather than try to design it myself: the site takes care of all coding and under-the-hood stuff, while I get a friendly WYSIWYG editor. But seeing as the site has been around for half a decade, I wanted to make some design changes that I realized were outside the host's standard features, and to remedy that, I needed to figure out some custom CSS.
We all have opinions about AI, not only whether using it is defensible but also where and how. One area where it has proven incredibly helpful is guiding and troubleshooting me through adding new features to the site. Using AI, specifically ChatGPT, I was able to request changes I wanted to make, it would suggest code, and we would dialogue and troubleshoot about whether the code worked. The process, as much as troubleshooting can ever be, was almost fun. The process was was almost like having a dedicated teacher in the room who could interactively offer suggestions based on my requests for feedback. I can't say I am much more proficient at web design, but the hours I spent learning through AI taught me more about it than any previous instruction.
As a result of all my tinkering through the first part of the summer, I have five changes to the aesthetic of the blog that I am excited to share below. These changes help modernize and refine the overall look while staying true to the original design it launched with.
1. Rounded Corners
Thumbnails now have rounded corners and drop shadows.
Beginning in 2022, I started rounding the corners (10 px) of images across my blog posts. But there was no system way of doing this to thumbnails on the main blog page. My first small step into AI-assisted CSS editing fixed that, bringing the rounded look to images on the homepage, the Haberdashery, and the post archives.
2. Drop Shadow
At the same time that I added the rounded corners, I also added a subtle drop shadow underneath the images of the homepage, the Haberdashery, and the post archives.
3. Funky Pop
Subtle drop shadows, rounded corners, and a slight pop over hovered thumbnails improves the liveliness of the site.
It's subtle, but another change I implemented around the time of WWDC25 was to have images on the homepage feel a bit more lively, which was achieved by adding a slight animated pop and increasing the drop shadow when the mouse hovers over them. This helped give an otherwise static-feeling page a more lively appearance and feeling.
4. Liquid Glass(ish) List
Old v. New dropdown list inspired by Liquid Glass.
This change relied less on AI and more on good old-fashioned internet sleuthing: digging through forums, copying snippets of code from here and there, and using a fair bit of brute force to make it all work. The old list in the menu bar felt a bit drab, so I gave it a refresh to match the rest of the design better. It now features a frosted, opaque look that complements the menu bar, rounded corners for consistency, and subtle contrast highlights to indicate which item you're hovering over.
It's important to state here that my successful implementation of the first three pieces above, with the assistance of AI, did begin to give me the confidence and rudimentary understanding to cobble together this more complicated piece myself. It's not something I created from scratch. Still, through previous interactions with AI, I had begun to understand enough to take pieces from other projects to modify and formulate this menubar myself.
5. Dark Mode
Retina’s Rejoice! Dark Mode is here!
Gruber's recent social poll on how many people use Light and Dark Mode on their devices may have finally pushed me to bite the bullet and bring Dark Mode to the site. I've always been #TeamLightMode through and through, but according to his survey, 36% of respondents are Dark Mode purists, and another 49% switch based on the time of day. That means 85% of people are spending at least some of their day in Dark Mode, while my site has been out here assaulting their retinas with a blinding white (well, technically #FAFAFA) background for years.
That changes now. And as of August 04, I have added Dark Mode to the site that users can manually toggle or which will change based on their device settings. I’m still working out a bit of the kinks across all my pages, but I am thrilled to finally offer this feature. Surprisingly, Squarespace does not have a native Dark Mode utility, and so I relied on the Dark Mode code kit by Fenix to enable Dark Mode on my site. Again, I didn't do anything except buy the plug-in, but previously I had so much fear around CSS and HTML editing that I never would've considered this. I think part of what ultimately led me here was seeing some small successes that didn't explode my site, and then venturing a little bit further out each time.
In Sum
I hope you enjoy the slightly refreshed site. These five updates mark the only real cosmetic changes I've made in the past half-decade, and all of them came together over the last three months. A big part of that is getting to play and dialogue with AI, which helps me better understand and use CSS, and from there, doing more independent creations, benefiting from acquired confidence.
