Bring on the seasonal doodles! ⛄️

…until the linter issues from v2.31 are sorted out.

- Add Geomanist Regular, Medium, Black, and italic variants
- Reinstate the RGBSplitter component on the main title
- Don't align the homepage‘s ContentGrid to a specified row size
- Add a doodle to the homepage; adjust layout accordingly
- Spot changes to various type styles across the site

There goes the last Class Component on this website! This change is a
huge plus for consistency (eg. the page can now use hooks like
useStickyState), it opens up possibilities for better linter/prettier
options, and it fixes a few performance issues on /lab along the way.
Good change!

Makes page loads snappier, and lets folks opt into Google’s tracking
empire

This change prevents unwanted layout shifts on initial load.

Adheres to the prefers-reduced-motion and prefers-contrast settings for
the animated RGB header, and removes smooth scroll / lifts focus for the
GoUp button

`fallback` also hides fonts for 100ms like `optional`, but adds a 3s
grace period in case the fonts load a bit late. I’d prefer occasional
layout shifts over occasional Arial Black.

[I improved the tool and moved it to its own
repo](https://github.com/rileyjshaw/palette-test-tool)

I am no-longer using this for public accountability, and I have an
updated version in the scraps directory

Gecko and Blink _both_ have bugs with their `overscroll-behavior`
implementations right now, and it’s not fully adopted across all major
browsers yet. But rather than adding in some janky scroll-blocking
script, this will slowly start to work in more and more browsers, until
scrolling from behind the modal won’t happen at all. I also added a
final “BYE!” for folks who don’t want to be online anymore :)

Dark themes are something I’ve sought since my early days on a computer. I remember finding a way to apply a black background to Microsoft Word 2003, then being horrified when I accidentally printed the document. In uni I scripted my desktop to boot into [f.lux](https://justgetflux.com/)’s darkroom mode. One of my only lasting contributions to [Signal](https://rileyjshaw.com/blog/the-pool-on-the-roof-must-have-a-leak) was loudly advocating for dark mode on iOS and Desktop, not just Android. I even [made a browser extension in 2015](https://chrome.google.com/webstore/detail/dark-theme-everywhere/nibjplbnmmklkfnkpecgbffkifmdbjed) to apply a dark theme to the entire Internet.

It’s not the most pressing or exciting work, but I decided my site should have a dark theme of its own. I took a lot of inspiration from my former Khan Academy teammate [Josh W. Comeau’s dark mode post](https://www.joshwcomeau.com/react/dark-mode/), with a few differences.

UI-wise, I decided to go a different route than a binary toggle between dark and light. There were three motivations behind this. From most to least important:

- I wanted to include a “system” option. Theming is still a fresh concept for most web users, so I think it’s worthwhile to expose a way to control theme, motion, brightness etc from within the webpage. But [there should _always_ be a simple way to revert back to your system’s display preferences](https://kilianvalkhof.com/2020/design/your-dark-mode-toggle-is-broken).
- I may add more options later (greyscale? low-res? melty??) and this leaves my options open and unlimited.
- I liked the animated eyeball idea.

Speaking of the animated eyeball… I’m happy with how it turned out! It was quite a deep dive, since I didn’t want to include a heavy animation library like [react-spring](https://www.react-spring.io/) (>25kb) or [Framer Motion](https://www.framer.com/motion/) (>90kb). **Thankfully, the coolest thing I learned while working on this feature is that [SVG has a declarative animation specification called SMIL](https://css-tricks.com/guide-svg-animations-smil/)!** It didn’t take long to pick up, and it’s very easy to work with. I’m really happy to add it to my toolkit.

Animations were the _coolest_ deep dive, but they weren’t the deepest. Back when I started building this website, I split the header into Cyan, Magenta, and Yellow (CMY) channels. They [combined subtractively](https://rileyjshaw.com/blog/your-art-teacher-lied) to make a black-ish color, which I used across the site for text. I removed that feature in late 2019, but recently added it back.

With a single theme, that’s three combinations, for a total of 7 colors. With two themes… the combinations explode a bit.

I use [mix-blend-modes](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) to combine colors, of which there are limited options. For my initial color palettes, I wanted to pick three pretty primary colors (light: CMY, dark: RGB) that would blend into three pretty secondary colors (light: RGB, dark: CMY), and all blend together into something with enough contrast from the background to use as body text. Tall order! [So I built a tool for that](https://github.com/rileyjshaw/palette-test-tool), and spent a few idle hours tweaking settings until I was happy.

And the initial palettes are… pretty good? I wish I was more thrilled with the result, but there are so many conflicting requirements that it’s impossible to get a result as good as if I’d hand-picked the colors independently. I’ve done an initial a11y pass of the colors, and there are some areas of the site where I want to improve the contrast. So I’ll probably end up with a palette split between the “true” colors, and their slightly modified, more attractive cousins.

I also needed to add a global settings provider in this commit. Now that I’ve done the work for that, look forward to more settings (reduce motion, contrast preference, block embeds… cheat codes??) coming soon!

I made a few minor changes while working on this commit:

- Update a bunch of the site doodles to fit either theme.
- Share theme colors between CSS-land and JS-land. No more mismatches!
- Keep the `<Layout>` component mounted between pages. Transitions and performance will be just _sliiightly_ smoother.
- Clarify the color variables a bit; `--cb` is now `--color-blue`.
- Add theme-dynamic color variables. For instance, `--color-p1` (“primary one”) maps to `--color-red` in dark mode and `--color-cyan` in light mode.
- Update some non-standard colors (eg. scaling faders demo) to fit the new palettes.
- Super simplify state-handling in the site nav (fixes a persistent console error).
- Standardize the handling of `localStorage` and `sessionStorage`.

Hope you enjoy!

See streamich/git-cz#227 for details

This commit moves the header color channel offsets from React state into
CSS custom properties, so React doesn’t need to recalculate and rerender
the header onmousemove. It also switches the animated properties from
top/left to transform.

A few changes in here; most notably, added the `withSettings` HOC, which
blocks render until the proper settings are available. Also reworked
/lab’s treatment of localStorage state, and improved the
`useStickyState` hook to handle SSR. Finally, I changed the page name
top-level classes from the `SEO` component (delay after first render) to
the `Layout` component (immediately available).

(CLS = Cumulative Layout Shift)

It ain’t pretty, but it works…

…instead of using `body` no-matter what. oooooomg.

Clearing the path for a tagging utility to allow ALL project types* to
have associated tags. Next stop: reviving `tagger.html` :)

*All types… except for blog posts :(

Tags have been a part of this site – somewhat – since the beginning. But
most content was untagged, and the ratio has gotten worse over time.
This tool provides a quick way for me to apply the standard list of list
of tags to new content, and add tags. It’s the first of a few similar
curation tools I have planned, but hopefully I resist the urge to build
them all at once, and my next few curation commits are just from using
this tool :)

Leading up to Tagageddon, this should make upcoming tag diffs easier to
read