theme.css

/*
 * Cyrillic for the site's fonts.
 *
 * Blume self-hosts Inter, Inter Tight and JetBrains Mono through Astro's Fonts API, and
 * that API downloads the "latin" subset only - its default, with no knob for it in
 * blume.config.ts. Cyrillic text misses the webfont and drops to the metric fallback
 * Astro builds from a locally installed family: Russian prose was rendered in Arial and
 * Russian identifiers inside code in Courier New - small and thin next to the Latin
 * around them.
 *
 * The faces below are the Cyrillic subsets of those same families, taken from Google
 * Fonts and served from public/fonts. Their unicode-range covers Cyrillic and nothing
 * else, so Latin still comes from Astro's subset (its metric fallbacks intact) and these
 * faces only fill the hole. The files are variable, so one of them covers every weight
 * of a role. Inter Tight and Geist Mono get no italic file: headings and code are not set
 * in italics, and the odd one is synthesized from the upright face - which still keeps
 * the typeface right.
 *
 * The tokens name the family variables Astro fills for the roles of blume.config.ts, so
 * a font changed there has to be renamed here too - otherwise the role silently falls
 * back to the stack in the last argument.
 *
 * To refresh: take the cyrillic block of
 * https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900 (and of
 * the same for Inter+Tight and Geist+Mono) and re-download the woff2 it points at.
 * The font licenses (SIL OFL 1.1) lie next to the files in public/fonts.
 */

@font-face {
  font-family: "Inter Cyrillic";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("/xbsl/fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Cyrillic";
  font-display: swap;
  font-style: italic;
  font-weight: 100 900;
  src: url("/xbsl/fonts/inter-cyrillic-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter Tight Cyrillic";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("/xbsl/fonts/inter-tight-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Geist Mono Cyrillic";
  font-display: swap;
  font-style: normal;
  font-weight: 100 900;
  src: url("/xbsl/fonts/geist-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --blume-font-body: "Inter Cyrillic",
    var(--blume-ff-inter, ui-sans-serif, system-ui, sans-serif);
  --blume-font-display: "Inter Tight Cyrillic",
    var(--blume-ff-inter-tight, ui-sans-serif, system-ui, sans-serif);
  --blume-font-mono: "Geist Mono Cyrillic",
    var(--blume-ff-geist-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
}

/*
 * The width of the text column and line breaks inside tables.
 *
 * Blume sets the column at 42rem, a measure made for prose. Many pages of this site carry
 * tables of rules, settings and commands, and at 42rem the widest of them, the tier D rules
 * table, did not fit: its last column scrolled sideways on every screen. At 60rem that table
 * fits on a 1920-pixel screen with both side panels open. A narrower screen caps the column
 * anyway, because the grid between the panels leaves about 49rem at 1440 pixels, so the
 * value only decides how far a wide screen goes.
 *
 * A table overflows when a code chip has no space in it: a call chain or a qualified name of
 * eighty characters. Blume gives code in a cell `overflow-wrap: break-word`, which allows a
 * break inside the chip but still sizes the column to the whole chip. `anywhere` allows the
 * same break and also lets the column shrink to the room there is.
 *
 * Only the last column gets it. The tables here keep their descriptions there, in the widest
 * column, and that column takes the space it frees. A narrow column would lose instead: an
 * auto table gives each column its least width plus a share of the rest in proportion to its
 * text, so a short value such as `onType` would drop to the width of one letter and break
 * apart. For the same reason a rule id in the first column keeps wrapping only at its hyphens.
 */
:root {
  --blume-content-width: 60rem;
}

.prose td:last-child > code,
.prose td:last-child :not(pre) > code {
  overflow-wrap: anywhere;
}