style: switch site font to Cascadia Code
This commit is contained in:
parent
5e4e75dfb3
commit
69d0986dc9
3 changed files with 20 additions and 11 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>`
|
||||
|
|
|
|||
|
|
@ -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>`
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue