style: switch site font to Cascadia Code

This commit is contained in:
Graham McIntire 2026-05-03 14:29:14 -05:00
parent 5e4e75dfb3
commit 69d0986dc9
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
3 changed files with 20 additions and 11 deletions

View file

@ -1,9 +1,9 @@
/* Leaflet map CSS (vendored) */
@import "../vendor/leaflet/leaflet.css";
/* Inter primary UI font. Design spec calls for weights 400/500/600/700.
JetBrains Mono kept as escape hatch for code blocks. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* Cascadia Code as the single project font. Google Fonts doesn't
ship it fonts.cdnfonts.com mirrors Microsoft's release. */
@import url('https://fonts.cdnfonts.com/css/cascadia-code');
/* See the Tailwind configuration guide for advanced usage
https://tailwindcss.com/docs/configuration */
@ -15,6 +15,15 @@
@source "../../deps/live_table/lib";
@source "../../deps/sutra_ui/lib";
/* Map both Tailwind font families onto Cascadia Code so any element
hard-coded to font-sans or font-mono picks up the project font.
Keep the system fallbacks so the page is still readable while the
webfont network request is in flight. */
@theme {
--font-sans: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--font-mono: "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* live_table / sutra_ui compat: maps shadcn tokens live_table uses to
daisyUI base colors and provides component CSS for the SutraUI
primitives wrapped by live_table (select, input-group, dropdown,
@ -166,13 +175,13 @@
--band-6mm: #0891B2;
}
/* Inter as the default UI font. JetBrains Mono reserved for code blocks.
Callsigns and grid squares are intentionally sans + uppercase (not mono)
to match product convention. */
/* Cascadia Code everywhere UI, body copy, and code. The font is
monospace by design; we tighten letter-spacing slightly so prose
blocks don't read excessively wide. */
html, body {
font-family:
"Inter", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, sans-serif;
"Cascadia Code", ui-monospace, SFMono-Regular, "Menlo", "Consolas",
monospace;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
@ -247,7 +256,7 @@ select.select {
}
.markdown-content code {
font-family: ui-monospace, monospace;
font-family: "Cascadia Code", ui-monospace, monospace;
font-size: 0.875em;
background: var(--color-base-300);
padding: 0.15em 0.35em;

View file

@ -55,7 +55,7 @@ function buildHTML(detail: PathForecastDetail): string {
const pct = Math.round(meta.weight * 100)
rows += `<tr>
<td style="padding:1px 6px 1px 0;white-space:nowrap;font-size:11px;">${meta.label}</td>
<td style="padding:1px 4px;font-family:monospace;font-size:11px;letter-spacing:-0.5px;">${factorBar(value)}</td>
<td style="padding:1px 4px;font-family:'Cascadia Code',monospace;font-size:11px;letter-spacing:-0.5px;">${factorBar(value)}</td>
<td style="padding:1px 4px;text-align:right;font-size:11px;font-weight:600;">${value}</td>
<td style="padding:1px 4px;font-size:10px;opacity:0.5;">(${pct}%)</td>
</tr>`

View file

@ -590,7 +590,7 @@ function buildPopupHTML(detail: PointDetail, viewshedLoading: boolean): string {
const pct = Math.round(meta.weight * 100)
rows += `<tr>
<td style="padding:1px 6px 1px 0;white-space:nowrap;font-size:11px;">${meta.label}</td>
<td style="padding:1px 4px;font-family:monospace;font-size:11px;letter-spacing:-0.5px;">${factorBar(value)}</td>
<td style="padding:1px 4px;font-family:'Cascadia Code',monospace;font-size:11px;letter-spacing:-0.5px;">${factorBar(value)}</td>
<td style="padding:1px 4px;text-align:right;font-size:11px;font-weight:600;">${value}</td>
<td style="padding:1px 4px;font-size:10px;opacity:0.5;">(${pct}%)</td>
</tr>`