init
This commit is contained in:
192
static/css/base.css
Normal file
192
static/css/base.css
Normal file
@@ -0,0 +1,192 @@
|
||||
/*
|
||||
* static/css/base.css
|
||||
* Design tokens, reset, and typographic foundation.
|
||||
*
|
||||
* Aesthetic: Industrial Ops Terminal
|
||||
* Dark graphite workspace with electric cyan as the primary action colour
|
||||
* and amber for warnings/consumed state. Syne for UI chrome, JetBrains Mono
|
||||
* for instruction content. Strong structure, decisive whitespace.
|
||||
*/
|
||||
|
||||
/* ── Fonts ─────────────────────────────────────────────────────────────── */
|
||||
@font-face {
|
||||
font-family: 'Syne';
|
||||
src: url('/static/assets/fonts/syne.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
src: url('/static/assets/fonts/jetbrains-mono.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* ── Design tokens ──────────────────────────────────────────────────────── */
|
||||
:root {
|
||||
/* Surfaces */
|
||||
--bg-void: #080b0d;
|
||||
--bg-base: #0d1117;
|
||||
--bg-raised: #131920;
|
||||
--bg-overlay: #1a2230;
|
||||
--bg-hover: #1f2a3a;
|
||||
--bg-active: #243040;
|
||||
|
||||
/* Borders */
|
||||
--border-subtle: #1e2c3a;
|
||||
--border-muted: #253345;
|
||||
--border-strong: #2e4058;
|
||||
|
||||
/* Text */
|
||||
--text-primary: #e8edf2;
|
||||
--text-secondary:#8da0b3;
|
||||
--text-muted: #4a6175;
|
||||
--text-disabled: #2e4a5e;
|
||||
|
||||
/* Brand / accent */
|
||||
--cyan: #00d4ff;
|
||||
--cyan-dim: #007fa8;
|
||||
--cyan-glow: rgba(0, 212, 255, 0.15);
|
||||
|
||||
/* Status */
|
||||
--green: #00e676;
|
||||
--green-dim: #00703a;
|
||||
--green-glow: rgba(0, 230, 118, 0.15);
|
||||
|
||||
--amber: #ffbe0b;
|
||||
--amber-dim: #8a6500;
|
||||
--amber-glow: rgba(255, 190, 11, 0.12);
|
||||
|
||||
--red: #ff4f4f;
|
||||
--red-dim: #8a0000;
|
||||
--red-glow: rgba(255, 79, 79, 0.15);
|
||||
|
||||
/* Typography */
|
||||
--font-ui: 'Syne', system-ui, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
|
||||
|
||||
--text-xs: 0.6875rem; /* 11px */
|
||||
--text-sm: 0.75rem; /* 12px */
|
||||
--text-base: 0.875rem; /* 14px */
|
||||
--text-md: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.375rem; /* 22px */
|
||||
--text-2xl: 1.75rem; /* 28px */
|
||||
--text-3xl: 2.25rem; /* 36px */
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
|
||||
/* Radius */
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
/* Shadows */
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.5);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
|
||||
--shadow-cyan: 0 0 20px var(--cyan-glow), 0 0 40px rgba(0,212,255,0.06);
|
||||
|
||||
/* Animation */
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--duration-fast: 120ms;
|
||||
--duration-normal: 240ms;
|
||||
--duration-slow: 400ms;
|
||||
}
|
||||
|
||||
/* ── Light theme overrides ───────────────────────────────────────────────── */
|
||||
/* Applied when <html data-theme="light"> is set by theme.js */
|
||||
[data-theme="light"] {
|
||||
--bg-void: #e8e8e3;
|
||||
--bg-base: #f2f2ed;
|
||||
--bg-raised: #ffffff;
|
||||
--bg-overlay: #ebebe6;
|
||||
--bg-hover: #e2e2dc;
|
||||
--bg-active: #d8d8d2;
|
||||
|
||||
--border-subtle: #d0d0ca;
|
||||
--border-muted: #c0c0b8;
|
||||
--border-strong: #a8a8a0;
|
||||
|
||||
--text-primary: #1a1f2e;
|
||||
--text-secondary:#4a5568;
|
||||
--text-muted: #718096;
|
||||
--text-disabled: #a0aec0;
|
||||
|
||||
/* Slightly desaturated accents so they work on a light surface */
|
||||
--cyan: #007fa8;
|
||||
--cyan-dim: #005c7a;
|
||||
--cyan-glow: rgba(0, 127, 168, 0.14);
|
||||
|
||||
--green: #166534;
|
||||
--green-dim: #14532d;
|
||||
--green-glow: rgba(22, 101, 52, 0.12);
|
||||
|
||||
--amber: #92400e;
|
||||
--amber-dim: #78350f;
|
||||
--amber-glow: rgba(146, 64, 14, 0.1);
|
||||
|
||||
--red: #b91c1c;
|
||||
--red-dim: #7f1d1d;
|
||||
--red-glow: rgba(185, 28, 28, 0.1);
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.1);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
|
||||
--shadow-cyan: 0 0 20px rgba(0,127,168,0.1);
|
||||
}
|
||||
|
||||
/* ── Reset ──────────────────────────────────────────────────────────────── */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-base);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg-base); }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
||||
|
||||
/* Focus ring */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--cyan);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
/* ── Typography helpers ──────────────────────────────────────────────────── */
|
||||
.mono { font-family: var(--font-mono); }
|
||||
.label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
.muted { color: var(--text-muted); }
|
||||
.subtle { color: var(--text-secondary); }
|
||||
|
||||
Reference in New Issue
Block a user