bar.css

/* The audiojs site's chrome, the same on every page: its header (scripts/bar.mjs writes it into each), the links'
 * ticks (bar.js), the dot grid the pages lie on. Colours, sizes and motion are the audio design system's tokens
 * (/audio/assets/tokens.css, loaded before this); one type family, Geist, served beside them, its mono this site's own
 * (/fonts/, the design system's mono being the system's). */
@font-face { font-family: 'Geist'; src: url('/audio/assets/geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, monospace;
  /* the field the header sits on (the home's top too), and its inks */
  --field: var(--color-bezel); --on-field: var(--color-screen-ink); --on-field-2: var(--color-screen-muted); --on-field-3: var(--color-screen-dim);
  --field-rule: var(--color-screen-rule);
  --gutter: clamp(var(--space-md), 4vw, var(--space-2xl));
  /* the audio site's dot grid, a page's ground; what lies on it is filled, the dots stopping a dot short of it (--sheet) */
  --dots: radial-gradient(circle, var(--color-grid) 1px, var(--color-transparent) 1px) 50% calc(var(--dot) / -2) / var(--dot) var(--dot);
  --sheet: 0 0 0 var(--dot) var(--color-paper);
}

/* Header: the name, the sections in the middle, GitHub */
/* (over a page's filled column, whose fill reaches a dot past it) */
.site-bar { position: relative; z-index: 1; background: var(--field); color: var(--on-field); color-scheme: dark; font-family: var(--font-display); -webkit-font-smoothing: antialiased; }
.site-bar a { color: inherit; text-decoration: none; }
.site-bar :focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; }
.site-top { box-sizing: border-box; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px var(--space-xl); max-width: 1440px; min-height: 96px; margin-inline: auto; padding-inline: var(--gutter); border-bottom: 1px solid var(--field-rule); }
.site-bar nav { display: flex; gap: clamp(20px, 3.4vw, 52px); font: 500 17px/1 var(--font-display); letter-spacing: -.01em; }
.site-bar nav a { padding-block: 10px; color: var(--on-field-2); transition: color var(--dur-micro); }
.site-bar nav a:is(:hover, [aria-current]) { color: var(--on-field); }
.site-bar nav .ticks { top: auto; bottom: 0; height: 4px; margin: 0; }
.site-gh { justify-self: end; padding: 10px 0 10px 10px; color: var(--on-field-2); transition: color var(--dur-micro); }
.site-gh:hover { color: var(--on-field); }
.site-gh svg { display: block; width: 22px; height: 22px; }
/* An embedded playground (/audio/playground/embed.js) before its script comes: its room kept, its text (for where scripts
 * don't run) out of sight; the script puts a waveform's bars there till the playground's sound is in */
audio-repl:not(:defined) { display: block; height: var(--audio-repl-height, 320px); }
@media (scripting: enabled) { audio-repl:not(:defined) > pre { visibility: hidden; } }
/* the mark's shapes, drawn by every still mark on the page (<use href="#mark">) */
.site-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The name: the mark (the logo page's look, a sine through a Hann window filled with Bartlett's gradient, drawn live
 * by bar.js over its still), the word, and JS after it, close, on its baseline, the letters' outline only, as tall as
 * the word's x: Geist's capitals are .71 of its size and its x .535, so at .732 the capitals and the outline's outer
 * half (.03em of the word's size) make the x's height. Its size is the word's: 24px, the header's 30px */
.site-brand { display: inline-flex; align-items: center; color: var(--on-field); font: 650 24px/1 var(--font-display); text-decoration: none; user-select: none; }
.site-brand .logo { position: relative; flex: none; width: 19px; aspect-ratio: 2 / 1.88; margin-right: 10px; }
.site-brand .logo svg { display: block; width: 100%; height: 100%; }
/* the live mark: taller than the still one, for the room its motion takes */
.site-brand .logo canvas { position: absolute; top: 50%; left: 0; width: 100%; height: 168%; translate: 0 -50%; pointer-events: none; }
.site-brand .word { letter-spacing: -.05em; }
.site-brand :is(.word, .js) { align-self: baseline; }
.site-brand .js { margin-left: .082em; font-size: .732em; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: .041em var(--on-field); }
.site-top .site-brand { justify-self: start; font-size: 30px; }
.site-top .site-brand .logo { width: 34px; margin-right: 12px; }

@media (max-width: 720px) {
  .site-top { grid-template-columns: 1fr auto; min-height: 0; padding-block: var(--space-md) 4px; }
  .site-top .site-brand { font-size: 24px; }
  .site-top .site-brand .logo { width: 27px; }
  .site-bar nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 12px; font-size: 15px; }
}

/* A page under the header: as wide as the home, on the dot grid. On a wide screen a rail beside its column, kept in
 * sight as the page scrolls: the way through the section (families, tools, an article's parts), where the reader is
 * marked (bar.js marks the part in sight). Rail and column each filled, the dots stopping a dot short of them. Narrower,
 * the rail is a row over the column, scrolled sideways */
.site-page { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-lg) clamp(var(--space-xl), 4vw, 72px); max-width: 1440px; margin-inline: auto; padding: var(--space-2xl) var(--gutter) var(--space-4xl); }
.site-page > :is(.site-rail, .site-main) { box-sizing: border-box; min-width: 0; background: var(--color-paper); box-shadow: var(--sheet); }
.site-rail { font: 400 14px/1.35 var(--font-display); color: var(--color-soft-ink); }
.site-rail h2 { margin: 0 0 6px; font: 500 12px/1.4 var(--font-display); letter-spacing: .02em; color: var(--color-muted); }
.site-rail ul { margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.site-rail a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-block: 5px; color: inherit; text-decoration: none; transition: color var(--dur-micro); }
.site-rail a:hover, .site-rail a[aria-current] { color: var(--color-ink); }
.site-rail a[aria-current] { font-weight: 600; }
.site-rail small { font-size: 12px; font-weight: 400; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.site-rail :focus-visible { outline: 1.5px solid currentColor; outline-offset: 3px; }
@media (min-width: 1100px) {
  .site-page:has(> .site-rail) { grid-template-columns: 220px minmax(0, 1fr); }
  .site-rail { position: sticky; top: var(--space-lg); max-height: calc(100dvh - 2 * var(--space-lg)); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--color-rule) transparent; }
}
@media (max-width: 1099px) {
  .site-rail { display: flex; gap: 20px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .site-rail h2 { display: none; }
  .site-rail ul { display: contents; }
  .site-rail a { padding-block: 6px; }
}

/* Links: under the pointer or the focus, a row of ticks under the label (.ticked), one in each 4 px of it (bar.js
 * makes it the first time it is reached), 1 px tall in a page, 4 px in the header's menu. The one under the pointer (--x,
 * its middle; the middle one when the keys reached the link) swells to fill its 4 px, alone; the others thin with
 * their distance from it, e-fold every 8 px, down to a hairline (.1 px): the crest goes where the pointer goes, gliding
 * tick to tick, the ticks themselves never moving. They grow in from nothing and go back. */
.ticked { position: relative; }
.ticks { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: center; height: 1px; margin-top: 4px; pointer-events: none; }
.ticks i { flex: none; width: 4px; background: currentColor; transform: scaleX(0); transition: transform var(--dur-short) var(--ease-out); }
/* (each tick on a layer of its own while shown: drawn the same at rest as gliding, where a layer let go when its glide
 * ends is drawn again at its own width, thinner) */
:is(a, button, label):is(:hover, :focus-visible) .ticks i, .ticked:is(:hover, :focus-visible, :focus-within) .ticks i { transform: scaleX(calc(.025 + .975 * exp(max(var(--x) - var(--c), var(--c) - var(--x)) / -8))); will-change: transform; }
/* a row made as the pointer arrives grows in as one made before does */
@starting-style { :is(a, button, label):is(:hover, :focus-visible) .ticks i, .ticked:is(:hover, :focus-visible, :focus-within) .ticks i { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .ticks i { transition: none; } }