Idea for changing type hierarchy in cards

[davidpmccormick]

What does this change?

Out current responsive typography rules make it such that as the viewport gets larger, each piece of type will get larger. However, this doesn't take into account we have components that might end up being wider at smaller viewport widths (e.g. when cards are on a medium screen, there might be two of them side-by-side, each wider than when there are three side-by-side on a larger screen).

Container queries are relatively new but now supported in all modern browsers and allow you to make css decisions based on the size of a containing element rather than the width of the whole viewport.

This PR allows our font classes to behave differently when they are in a card context.

How to test

Visit the homepage and see that the font sizes in cards is larger when the browser is 500px wide (when there is only one card in a column) than when it is 1200px wide

How can we measure success?

Cards have more appropriate use of available space – easier to process visually?

Have we considered potential risks?

It complicates the css and possibly makes it a bit less easy to reason about. This implementation requires !important for the @container to take precedence over the @media query. Looping through all the @containers inside each @media felt like a lot of duplication to avoid using !important. There might be a way to use :has() and :not() to check if we're in a card for the @media queries, but I didn't want to get too deep into it.