There are two main sizes of figures: fullwidth and small. Full width figures take
the full content width. Usually they spread into the "wide" content area too.
Main size figures are also full width figures, but they stop at the edges of the
main content area. Small figures shrink to fit and are generally 480pts wide.
Break all these different types of figures down into separate templates for each
variant.
Add the ability for resources to specify a "source" with a link and title.
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.
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.
