Remove the .figure__container element. According to Tess, putting a <figcaption>
inside a child of a <figure> "doesn't obey the content model" or some shit.
Fiiiiine.
Getting small figures to lay out the way I want them to without the container
was a bit of a trick. Instead of letting the figure span the entire width of the
grid column, let it fit the size of its contents, and then set margin-inline to
auto so it centers.
Doing this also allowed me to remove the .figure--image, etc styles because the
styles and markup are a lot more similar among figures containing different
kinds of elements. Nice!
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.
This has been bothering me for a little while. The spacing is too big. Squish them
together and give it secondary text color so it doesn't compete with the title
or body text.
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.
