/* Dose chart: the scannable block at the top of a report, so what, when and how much can be read without mining the prose for it. On wide screens it sits out in the right gutter, top-aligned to the prose. Below that it drops back into the flow. The th/border overrides simple.css needs live in style.css with the other one, so this file only styles the chart itself. */ /* Reports are long and first-person, so the prose gets its own settings instead of the site's. Serif rather than the site's Plex Sans: the page's frame is already machine -- pc6300 headings, a mono chart -- and the account underneath it shouldn't read as more of the same output. Plex Serif keeps it inside the same superfamily as the chart, so it lands as a change of register rather than a second typeface arguing with the first. It also has a real italic, which these reports lean on hard. On body, not main, so the footer comes with it. Everything that must stay mono -- .substance, .dose-chart, .chart-note, and the pre/details rules in style.css -- names its family outright and is unaffected. */ body { font-family: "IBM Plex Serif", Georgia, serif; /* Under simple.css's 1.5, against a larger apparent x-height at this measure. */ line-height: 1.47; /* 41.5rem against simple.css's 45rem: ~76 characters per line in this face at 1.15rem, down from ~83. Only the middle column changes; the gutters the chart lives in are still whatever's left over. */ grid-template-columns: 1fr min(41.5rem, 90%) 1fr; } /* Paragraph rhythm. The site's 0.8rem gives a 12.8px gap against a 27px line -- under half a line, and since nothing is indented that gap is the only signal a paragraph ended. A report is mostly a log of discrete events, so that break has to actually read. One full line: 1.7rem ~= 27.05px. */ main > p { margin: 0 0 1.7rem; /* Evens the rag and keeps a lone word off the last line. Dropped silently where unsupported, which leaves the default behaviour. */ text-wrap: pretty; } /* The ==== rules carry the only structure a report has -- preface, trip, reflection. At paragraph spacing they read as two stray lines instead of act breaks, so they get two lines of air on each side. Class rather than the text itself because CSS can't select on content. */ main > .break { margin: 3.4rem 0; } /* An image wants more room than a paragraph break, and simple.css zeroes figure's margin outright, so without this it gets only what the paragraph above happens to give back. The top margin is restated in the grid regime at the bottom of this file, where margins stop collapsing -- same dance as h2/h3. Both routes land on 2.5rem. */ main > figure { margin: 2.5rem 0; } /* Long compounds ("thoughts-I-cannot-think") wreck the rag once the measure drops to phone width. Needs lang on to pick a dictionary. */ @media only screen and (max-width: 720px) { main > p { -webkit-hyphens: auto; hyphens: auto; /* Left alone, auto will break off two letters -- dos-es, support-ed -- which costs more in reading than the ragged line it saves. 7 4 4 is measured, not derived. 6 3 3 is the value usually quoted and it changed nothing at all in Chrome 150 -- byte-identical to auto. 7 4 4 clears every fragment while still allowing a real break like effec-tive; 9 5 5 suppresses hyphenation outright and the rag opens back up. Falls back to plain auto where unsupported, which is what we had. */ hyphenate-limit-chars: 7 4 4; } } h1, h2, h3 { font-family: pc6300, var(--mono-font), monospace; } main > h1 { font-size: 48px; line-height: 1.25; /* The UA default, written down: the grid regime at the bottom of this file zeroes the top margin on everything in main, and this is the one that was doing visible work. In em so it tracks the size drop below. */ margin-top: 0.67em; margin-bottom: 0.4rem; margin-left: -0.2rem; } @media only screen and (max-width: 720px) { main > h1 { font-size: 32px; } } /* The substance line names the whole report, not a section of it, so it's a label rather than a heading -- that keeps h2 free for the divisions a longer report actually has, and keeps the outline from claiming the piece has a section when it doesn't. Set in the chart's mono rather than the title face, so the top of the page reads as one band: name, then what it was, then the numbers. */ .substance { margin: 0; font-family: "IBM Plex Mono", var(--mono-font), monospace; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-light); } .dose-chart-wrap { margin: 1.5rem 0 2rem; /* Last resort only: the cells wrap to fit, so this bites just below ~380px of viewport, where the header row alone outgrows the measure. When it does bite it scrolls the chart, not the page. */ overflow-x: auto; } .dose-chart { margin: 0; border-collapse: collapse; font-family: "IBM Plex Mono", var(--mono-font), monospace; font-size: 0.75rem; line-height: 1.9; } .dose-chart th, .dose-chart td { border: none; padding: 0 1.2rem 0 0; text-align: left; vertical-align: baseline; } /* anywhere, not break-word: only anywhere lowers a cell's min-content width, which is what lets the table shrink into the gutter instead of overflowing it. Kept off the headers -- a column label broken across two lines is a worse read than a wrapped value, and they're short enough to hold. */ .dose-chart td { overflow-wrap: anywhere; } .dose-chart thead th { color: var(--text-light); font-weight: normal; font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; padding-bottom: 0.5rem; } .dose-chart tbody td { color: var(--text); } .dose-chart .amt { text-align: right; } /* Letter-spacing trails the last letter too, so a right-aligned label hangs that much short of the column it labels. Take it back out of the padding and the label's edge lands on the values' edge. */ .dose-chart thead .amt { padding-right: calc(1.2rem - 0.18em); } .dose-chart .tplus { font-variant-numeric: tabular-nums; } /* The three columns a line break would misread: a clock time, an offset and a dose are each one token however tight the box gets. The name and method columns absorb the wrapping instead. */ .dose-chart .t, .dose-chart .tplus, .dose-chart .amt { white-space: nowrap; } .dose-chart th:last-child, .dose-chart td:last-child { padding-right: 0; } .dose-chart .t-unknown { color: var(--text-light); } .dose-chart tfoot td { border-top: 1px solid color-mix(in srgb, var(--text-light) 30%, transparent); color: var(--text-light); padding-top: 0.5rem; } .dose-chart tbody tr:last-child td { padding-bottom: 0.5rem; } .chart-note { margin: 0.75rem 0 0; font-family: "IBM Plex Mono", var(--mono-font), monospace; font-size: 0.75rem; line-height: 1.9; color: var(--text-light); } /* Out in the right gutter, top-aligned to the prose. The body is already a three-column grid (gutter, 41.5rem of measure, gutter), so the chart just takes the right-hand column -- the same move the asides make in eyes.css and the sidebar makes in style.css. main dissolves so the chart and the prose are siblings in that grid rather than nested a level down; the prose keeps the middle column and the chart costs it no measure. The gate is arithmetic, not taste. The gutter is (100vw - 41.5rem)/2, and the chart needs its 341px header row plus the 2rem gap to sit in there, which the gutter covers from 88rem of viewport. Narrower than that and the chart stays in the flow where it already reads fine. 93rem is deliberately past that. It was the tight number back when the measure was 45rem; narrowing the measure widened the gutters and bought 5rem of slack, which is left in rather than spent -- it's the margin that keeps a scrollbar eating 15px of layout width from tipping the chart back out. Drop it toward 89rem only if the chart in the gutter is worth more than that cushion. */ @media (min-width: 93rem) { main { display: contents; } main > * { grid-column: 2; /* Grid items don't collapse margins the way blocks in normal flow do, so each gap is left to the bottom margin alone -- otherwise every space between paragraphs would be the sum of two and read twice as loose. */ margin-top: 0; } /* Except where a top margin is deliberately bigger than the rhythm: give back the part the previous element's bottom margin doesn't cover. */ main > :is(h2, h3) { margin-top: 1.5rem; } /* 1.7rem from the paragraph above plus 0.8rem here is the 2.5rem a figure gets by collapsing everywhere else. */ main > figure { margin-top: 0.8rem; } /* Likewise, and it matters more here: an act break sitting closer to the text after it than the text before it reads as belonging to the wrong side. 1.7rem from the paragraph above plus 1.7rem here is the 3.4rem it collapses to elsewhere, so the air stays even on both edges. */ main > .break { margin-top: 1.7rem; } /* And the substance line, which has no bottom margin at all -- in the flow it was the first paragraph reaching up that opened this gap. */ main > .substance { margin-bottom: 1.5rem; } .dose-chart-wrap { grid-column: 3; /* 22rem where the gutter can pay for it, the rest of the gutter where it can't -- so the chart is out here for every window past the gate rather than only the ones wide enough for one fixed number. It bottoms out at the header row's 341px, which is where the gate is set. */ width: min(22rem, 100% - 2rem); /* Top margin drops the chart from its own row (the .substance one) down to where the prose starts, so the header row's caps sit on the same line as the first paragraph's. It pays for everything between: the .substance line box (1.47 x 0.8rem), its 1.5rem bottom margin, and the difference between the two faces' cap-top insets -- 0.4738rem for Plex Serif at 1.15rem/1.47, 0.4076rem for the header's Plex Mono at 0.65rem/1.9. Retune it if any of those five numbers move. */ margin: 2.74rem 0 1rem 2rem; /* Auto-placement lands the chart on the .substance row, not the first paragraph's -- .substance leaves the cursor in column 3, the chart asks for column 3, so the cursor never advances a row. Spanning the rest of the page from there keeps its height out of that row, so a long chart never stretches the line the substance sits on. */ grid-row-end: span 99; align-self: start; /* Stays auto out here, not visible: the chart sits in the gutter with the viewport edge just past it, so anything that did overrun would leave the page and scroll the whole document sideways rather than itself. */ overflow-x: auto; } } .diveye { filter: contrast(4) drop-shadow(0px 2px 3px red) drop-shadow(0px 0px 6px red); alignment-baseline: middle; }