update 2026-09-25 06:56:42

luci-theme-footstrap/styles/base/20-typography.css

@@ -0,0 +1,166 @@
+@layer base {
+	/* The body box, links, and the type scale a view inherits from plain markup.
+	 * body background/padding/font-family: theme/20-shell.css — absorbed.
+	 * Every size and gutter here reads the scale in 02-tokens.css rather than stating a literal. */
+	body {
+		font-size: var(--fs-type);
+		font-weight: var(--fs-weight-normal);
+		/* unitless: it inherits as a FACTOR, so a 20px heading gets 30px of leading instead of the
+		 * flat length that would clip it */
+		line-height: var(--fs-leading);
+		color: var(--fs-text);
+		min-height: 100%;
+		display: flex;
+		flex-direction: column;
+		/* gutter, not `overflow-y: scroll`: the same no-reflow guarantee without a dead scrollbar
+		 * down every short page */
+		scrollbar-gutter: stable;
+	}
+
+	a {
+		color: var(--fs-accent);
+		text-decoration: none;
+		line-height: inherit;
+		font-weight: inherit;
+	}
+
+	a:hover {
+		color: var(--fs-accent);
+		text-decoration: underline;
+	}
+
+	.nowrap:not(span) {
+	/*	:not(span) — a badge must be free to wrap on a narrow screen, and nowrap
+		defeats every other width constraint on it */
+		white-space: nowrap;
+	}
+
+	p,
+	.cbi-map-descr,
+	.cbi-section-descr,
+	.table .tr.cbi-section-table-descr .th {
+		font-size: var(--fs-type);
+		font-weight: var(--fs-weight-normal);
+		margin-bottom: var(--fs-space-2);
+		/* prose, so no orphans: a single trailing word on its own line reads as a rendering fault.
+		 * `pretty`, not `balance` — balance is capped at a few lines and re-flows the whole block,
+		 * which is for headings. An unsupporting browser ignores it. */
+		text-wrap: pretty;
+	}
+
+	p small {
+		font-size: var(--fs-type-xs);
+		color: var(--fs-dim);
+	}
+
+	/* The heading ramp lives in theme/45-misc.css — absorbed whole (weights, sizes, ink);
+	 * theme/30-tables.css owns `legend`. Only the `<h_ small>` treatment remains here. */
+
+	/* one rule for every `<h_ small>`, relative so it tracks whatever step its heading sits on */
+	h1 small,
+	h2 small,
+	h3 small,
+	h4 small,
+	h5 small,
+	h6 small {
+		font-size: .7em;
+		font-weight: var(--fs-weight-normal);
+		color: var(--fs-dim);
+	}
+
+	ul, ol {
+		margin: 0 0 var(--fs-space-4) var(--fs-space-6);
+	}
+
+	ul ul,
+	ul ol,
+	ol ol,
+	ol ul {
+		margin-bottom: 0;
+	}
+
+	ul {
+		list-style: disc;
+	}
+
+	ol {
+		list-style: decimal;
+	}
+
+	li {
+		color: var(--fs-dim);
+	}
+
+	dl {
+		margin-bottom: var(--fs-space-4);
+	}
+
+	dl dt {
+		font-weight: var(--fs-weight-bold);
+	}
+
+	dl dd {
+		margin-inline-start: var(--fs-space-2);
+	}
+
+	hr {
+		margin: var(--fs-space-5) 0;
+		border: 0;
+		border-bottom: var(--fs-hairline);
+	}
+
+	strong {
+		font-style: inherit;
+		font-weight: var(--fs-weight-bold);
+	}
+
+	em {
+		font-style: italic;
+		font-weight: inherit;
+		line-height: inherit;
+	}
+
+	small { font-size: var(--fs-type) }
+
+	address {
+		display: block;
+		margin-bottom: var(--fs-space-4);
+	}
+
+	/* no shared padding: both members set their own below (code a chip's inset, pre a block's) */
+	code, pre {
+		font-family: var(--fs-font-mono);
+		font-size: var(--fs-type);
+		border-radius: var(--fs-radius-sm);
+	}
+
+	code {
+		/* panel2 (6.45:1), not a border-level surface: --fs-text on the latter is 4.40:1 in dark,
+		 * under AA */
+		background-color: var(--fs-panel2);
+		color: var(--fs-text);
+		padding: 1px var(--fs-space-1);
+		/* task 0162: a WireGuard public key (`admin/status/wireguard`, one 44-char base64 run, no
+		 * space or hyphen anywhere in it) sits inside an inline `<code>` with no width of its own —
+		 * `white-space` stays `normal` (inherited), so the run never finds a space to wrap at and
+		 * measured 64px past the content column at 320px. `overflow-wrap: anywhere`, the same
+		 * escape hatch every other opaque, user-supplied token in this sheet already carries
+		 * (a MAC in pages/60-assoclist.css, a hostname in pages/10-login.css): it only ever fires
+		 * once a line would otherwise overflow, so a short inline snippet that already fits wraps
+		 * nowhere differently. */
+		overflow-wrap: anywhere;
+	}
+
+	pre {
+		--border-color: color-mix(in srgb, var(--fs-border) 15%, transparent);
+
+		background-color: var(--fs-panel2);
+		display: block;
+		padding: var(--fs-space-2);
+		margin: 0 0 var(--fs-space-4);
+		border: 1px solid var(--border-color);
+		border-radius: var(--fs-radius-sm);
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+}