Remove the main intermediate container. It wasn't acutally serving a purpose.
Remove some of the BEM-style classes that also weren't really doing anything.
Write styles and templates for a more generic tag/value component. Use this component
for the taxonomy lists, draft tag, and page dates in the summary template.
Do not allow any element to wrap (white-space: nowrap) but do allow the flexbox
to wrap.
Shift the colon separators to the ::before pseudoelement so the colon appears
on the leading side of the taxonomy item when it wraps.
Remove the vertical gap from the flexbox.
These elements are created with the figures/image shortcodes from the old site.
Make them wide, and give them XL block margins.
Along the way, make sure that any element with only an <img> child has a line height
of 1 to avoid a weird gap below the image.
This is an (annoying) quirk of how Hugo renders Markdown. Sometimes images
are embedded in <p> tags, even if the <img> element is produced by a shortcode.
Bring over the youtube shortcode from the old theme, and add styles for the figures
it creates. Add the .figure--youtube class to the <figure> element.
In addition to the color scheme changing based on the system setting, enable
setting the color scheme explicitly by adding a color-scheme="light | dark" attribute
on the <html> element.
Doing this was a bit tricky. I originally implemented the grayscale ramp by
reversing it when prefers-color-scheme: dark. This was convenient, but meant that
setting the color scheme explicitly didn't work.
Along the way I discovered the light-dark() CSS function. Deploy that as the preferred
style if the browser supports it. Otherwise, fall back on the prefers-color-scheme
media queries. This function only works if color-scheme: light dark is set on the
:root element.
Draw only one hash for headings, and place them in the gutter in wide layouts,
or trailing the heading text in narrow layouts. Do this with grid in the wide
version, and flexbox in the narrow layout.
Add a --text-color-light CSS variable for content that should be lighter than
--text-color-secondary.
Give <sup> elements a line height of 1 and set vertical-align to text-top instead
of sup so it bumps up against the top of the line, rather than pushing above it.
Use a computed text size, rather than a relative percentage too.
