/* $Id$ */ /* @layer site, as the site's own style.css: this sheet is loaded * after it and after the theme, so within the layer source order * still gives it the last word. */ @layer site { /* page frame comes from the exhibition theme (the lit wall) */ /* Map & Chart */ /* The instrument column beside the map where there is room for both, the * three of them stacked where there is not. * * One threshold decides that, not two. The row used to wrap on its own * and a media query moved the map at a different width, so between the * two the map sat below the instruments at its beside-them height. The * query fires at 47rem, just above the 744px the row actually needs -- * a 480px instrument column, the gap, and the map at its minimum -- so * the row never gets the chance to wrap behind its back. * * Stacked, all three run the full width with one gap between them: the * row gap here and the column gap inside the panel are the same 1em. */ .flight-track { container: flight-track / inline-size; display: flex; flex-wrap: wrap; align-items: stretch; gap: 1em 1.5em; margin-block: 1em; /* The column carries the width for what it holds, so the chart * and the readout stretch to it and there is one width to change * when the three of them stack. 480px is stated here rather than * measured from the contents because that is what lets the panel * be a container at all -- inline-size containment tells it to * size itself WITHOUT looking at them, so a content-sized flex * base collapsed it to nothing. */ & .flight-instruments { flex: 0 1 480px; min-inline-size: 0; display: flex; flex-direction: column; gap: 1em; /* the readout picks its pair count from this panel */ container-type: inline-size; @container flight-track (inline-size < 47rem) { flex-basis: 100%; } } /* Beside the instruments the map takes their height exactly: * stretch does that by itself, so there is no minimum here to * fight it. Its basis is its minimum, so the only thing that can * put it on its own line is the query above. */ & #map { flex: 1 1 240px; min-inline-size: 240px; block-size: auto; @container flight-track (inline-size < 47rem) { flex-basis: 100%; block-size: 320px; } } } #chart { height: 200px; box-sizing: border-box; /* a dark instrument panel, framed like the map beside it */ background: #1c1813; border: 1px solid #0c0a08; box-shadow: var(--shadow-placard); } /* Flight data: an instrument readout, so name/value pairs rather than a * table -- which is what it always was, four columns of label and value * with the section names spanning. As a table it could not reflow: cells * do not wrap and eight cell paddings are 122px on their own, so with * the values in it wanted 495px inside a 480px panel and clipped the * longitude even on a desktop. Below that it pushed the page sideways, * by 144px at 320px. * * Pairs in a grid have neither problem: the gaps are between columns * only, and the pair count per row comes from the panel, two where there * is room and one where there is not. The zebra striping went with the * table -- with three pairs to a group under a labelled band there is * nothing left for it to help you scan. */ .flight-data { border: var(--line); /* it's a data readout, not prose: don't let the theme's * hyphens:auto break labels like "Vol d'oiseau" mid-word */ hyphens: none; /* the section band, as the table's full-width header rows were */ & h3 { margin: 0; padding: 0.35em 0.9em; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-align: start; color: var(--color-label); background-color: #241f1a; border-block-end: 2px solid var(--color-brass); } & dl { display: grid; /* One pair to a row; the panel says when there is room * for two, since the same readout would sit in a * narrower column just as happily. 29rem is measured, * not chosen: two pairs of the widest label and a * coordinate need 469px, so anything narrower than the * 480px panel has to take them one at a time. */ grid-template-columns: auto 1fr; gap: 0.35em 0.75em; /* label and value are set in different faces, so align * them by the baseline they share rather than letting * each sit at the top of a cell the other one sized */ align-items: baseline; margin: 0; padding: 0.5em 0.6em; @container (inline-size > 29rem) { grid-template-columns: auto 1fr auto 1fr; } } & dt { white-space: nowrap; } /* The pairs come in groups, and the seam is where a value is * followed by the next label. That space used to arrive from a * `dl dd + dt` in the site stylesheet, which reached every * definition list on the site to give it to this one; now that * the sheets are layered it would have reached them harder, * outranking the theme's own dt spacing instead of losing to it. * It belongs to the readout, so it is stated on the readout. */ & dd + dt { margin-block-start: 1ex; } /* live readouts (coords, altitude, distances, times) in a * monospace face with tabular figures, so the digits sit in * fixed columns and don't jitter as the values tick */ & dd { margin: 0; font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; } } /* The operator's logo: a small white card on the wall, on the end of the * heading's line. .beside-heading in the theme gives it that place and * holds it to a third of the line; what is left here is the card itself. * * It used to float, which the prose beside it could not live with once * that prose became a multicol block: multicol is a formatting context * root, so it lines up BESIDE a float rather than flowing round it. */ .operator-logo { inline-size: fit-content; padding: 1ex; background: white; box-shadow: var(--shadow-placard); & img { display: block; inline-size: auto; block-size: auto; max-inline-size: 100%; max-block-size: var(--figure-heading-height, 4.5em); } } } /* @layer site */