jwright/bztmon-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

facelift: fleet constellation hero + Bat-Computer type/token layer

Browse Source 
Chakra Petch site-wide (300-700) + JetBrains Mono variable, all self-hosted (CSP zero-external
holds). Token layer gains the mock-exact text tiers, glass panel, cyan-tinted borders, glows,
tighter radii; light 'blueprint' variants included. New Constellation.astro: the six real nodes
as IC chips on dual-trace PCB paths (cyan out / magenta back, dasharray packets), radar ring on
the cave hub, vias at bends - pure SVG + scoped CSS keyframes, full reduced-motion fallback.
Hero rebuilt: scrim stack + masked grid over the board art, two-line gradient nameplate, typing
bar cycling six real fleet facts via the external site.js (facts from src/data/fleet.ts), scroll
indicator. Facts wrap, never clip.
This commit is contained in:
Jonathon Wright
2026-07-03 18:58:49 +10:00
parent 08bab080b1
commit 65ba1ec7dc
12 changed files with 736 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/tokens.css
+43 -9
View File
@@ -29,13 +29,13 @@
/* Grid / topology motif */
--grid-line: rgba(148, 163, 184, 0.06);
/* Fonts — system stacks (zero external requests) + one self-hosted display face. */
--font-sans: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono",
/* Fonts — ALL self-hosted (zero external requests). Facelift pairing:
Chakra Petch (300–700) is the site-wide face, display AND body;
JetBrains Mono carries the terminal register (nav, chips, eyebrows, receipt). */
--font-sans: "Chakra Petch", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono",
Menlo, Consolas, "Liberation Mono", monospace;
/* Display face — Chakra Petch (self-hosted woff2, OFL). Used ONLY on the hero
name + section titles; body stays in --font-sans for readability. */
--font-display: "Chakra Petch", var(--font-sans);
/* Fluid type scale */
@@ -58,13 +58,33 @@
--space-8: 4.5rem;
--space-9: 7rem;
/* Layout */
/* Layout — facelift geometry: tighter radii (3–4 chips, 6 buttons, 8–12 cards) */
--measure: 68rem;
--radius: 14px;
--radius-sm: 9px;
--radius: 12px;
--radius-sm: 8px;
--radius-btn: 6px;
--radius-chip: 4px;
--ring: 0 0 0 1px var(--border);
--shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* Facelift: text tiers (mock-exact) */
--text-strong: #eef5fd; /* headings */
--text-body-strong: #dbe6f4;
/* --text (#e7edf4) / --text-dim / --text-faint keep existing consumers working */
--text-secondary: #8fa2bd;
--text-label: #7e8ba1;
/* Facelift: glass panels + cyan-tinted borders + glows */
--panel: rgba(13, 19, 34, 0.72);
--panel-solid: #0d1322;
--panel-blur: blur(10px);
--border-accent: rgba(63, 186, 245, 0.14);
--border-accent-hover: rgba(63, 186, 245, 0.5);
--border-magenta: rgba(232, 121, 249, 0.18);
--glow-num: 0 0 12px rgba(63, 186, 245, 0.6);
--glow-card: 0 0 32px rgba(63, 186, 245, 0.14);
--glow-card-magenta: 0 0 32px rgba(232, 121, 249, 0.12);
}
[data-theme="light"] {
@@ -96,4 +116,18 @@
--grid-line: rgba(15, 23, 42, 0.05);
--shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
/* Facelift tiers, blueprint-adjusted for light */
--text-strong: #0b1422;
--text-body-strong: #1d2a3d;
--text-secondary: #3d4d63;
--text-label: #4a5a72;
--panel: rgba(255, 255, 255, 0.78);
--panel-solid: #ffffff;
--border-accent: rgba(12, 143, 206, 0.2);
--border-accent-hover: rgba(12, 143, 206, 0.55);
--border-magenta: rgba(192, 38, 211, 0.22);
--glow-num: 0 0 12px rgba(12, 143, 206, 0.35);
--glow-card: 0 0 32px rgba(12, 143, 206, 0.1);
--glow-card-magenta: 0 0 32px rgba(192, 38, 211, 0.08);
}