Rebooting The Homepage
After killing off my latest attempt to launch a Mastodon instance and then having to pull a bunch of sites off my DigitalOcean droplet to try to keep it from regularly load-spiking into inaccessibility, I needed something to distract me. Since I’d moved my single-page sites back over to Carrd, on a lark I decided to try to spruce up my homepage without undermining my minimalist aesthetic.
The first part was comparatively easy: I dug through unDraw Handcrafts for illustrations I could use to replace the emoji for each section of the page. Some of this necessitated struggling against my cognitive rigidity, since there weren’t always one-to-one correlations. For instance, there was no illustration of a brain for the mental health section; I ended up using an illustration of a battery, since that section really is about the competition between resources and demands. In the end, I slightly reworded that section to match.
(Also, I did away with my penchant for fully-justified text, because the blocky symmetry didn’t mesh well with my use of unDraw’s hand-drawn illustrations.)
Then came the hard part: figuring out how to make the dark mode version without simply resorting to my default which is to use CSS filters to invert elements. This time around, I wanted to hand-code the CSS but that doesn’t address the fact that I couldn’t use illustrations whose primary color is black.
At first, I’d assumed it would be as simple as providing two different versions of each illustration—one black with my highlight color, one white with my highlight color—and using CSS to render each set visible or not depending on the color-scheme. Alas, because of the way the Carrd template was constructed, using a number of first-child pseudo-classes, while I could get the relevant image sets displayed, the layout would break in dark mode.
Most of today was spent fighting with potential jQuery solutions. Understand here that I do not code. I do not understand how to code. Sometimes, though, I can understand the narrative of a given piece of code to bang it into the usefulness at hand. In the end, this went nowhere because of the vagaries of how elements can be removed or detached from the DOM versus how you can or cannot put them back again as a user switched to dark mode and back again.
It came down first to giving every element in both image sets its own CSS selector and then using the inspector in Safari to figure out how the layout was being constructed, then methodically constructing new CSS statements to compensate between modes.
As near as I can tell, this now is working as intended: both the default, light color-scheme and the one that kicks in when your device switches to dark mode should be rendering exactly the same layout, but the latter using variants of the illustrations that actually match that color-scheme.
The flip-side of this success is that now I don’t have anything interesting to work on.