Build cards sit in a grid laid out by container queries
Explore this workspace.
Technical background
In cards view each card stretched across the whole pane. Cards now fill as many columns of at least 460px as the pane allows, each capped at 720px, and the page and every card answer to their own width rather than the window's. A build's kind is a chip with its icon, because colour could not tell five kinds apart, and every run of text on the page reads at AA in both schemes.
The problem
The Builds page opts out of the settings column's width cap so its table has room, and in cards view that let each card stretch across the whole pane. At a 2400px pane a card was 2401px wide with its facts packed against the left edge. Secondary text was dimmed with opacity, and two kinds of build wore the same blue.
How it works
The page and every card are size containers, so layout answers to the pane and to the card rather than to the window, which cannot see the settings nav or a docked panel. Cards fill as many columns of at least 460px as fit, each capped at 720px. Under a 640px page the filter buttons come apart and wrap, and under a 284px card each fact becomes a label beside its value. A build's kind is a neutral chip carrying its icon, and filled colours are left to mean status.
Measured, both schemes
pane 700px 1 column card 700px pane 1100px 2 columns card 544px pane 1600px 3 columns card 525px pane 2400px 5 columns card 470px
Details
- A size container is a stacking context, so a tooltip left inside a card painted under the card after it. Every tooltip on the page renders into the document body.
- The theme's primary and info colours are the same, a dark fill disappears on a light scheme, and the remaining fills already mean active, this window, stale or will not start. That is why a kind is told apart by its icon and word.
- Status badges carry a one-pixel inset ring in their own text colour, because the light scheme's stale badge otherwise had no edge against the card.
What this does not claim
- The narrowest layouts were measured by pinning the page's width, because the window itself cannot shrink to a 300px pane.
- The card outline and the idle card's left border are decorative and sit below 3:1.