style(frontend): apply Prettier formatting to 26 pre-existing files
No logic changes — whitespace and indentation only. These were flagged by the pre-commit hook when running lint after layout.css was modified. Refs #64 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -1,34 +1,160 @@
|
||||
/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
|
||||
/* Fonts: Montserrat = Gotham substitute | Tinos = Times substitute (De Gruyter Brill CI) */
|
||||
/* ─── 1. Fonts & Tailwind ──────────────────────────────────────────────────── */
|
||||
/* Tinos = Times substitute | Montserrat = Gotham substitute (De Gruyter Brill CI) */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
|
||||
/* ─── 2. Raw palette — never used directly in components ──────────────────── */
|
||||
@theme {
|
||||
/* COLORS — exact De Gruyter Brill brand palette */
|
||||
--color-brand-navy: #012851; /* Prussian Blue */
|
||||
--color-brand-mint: #a1dcd8; /* Aqua Island */
|
||||
--color-brand-purple: #b4b9ff; /* Melrose */
|
||||
--color-brand-sand: #f0efe9; /* Neutral paper tone */
|
||||
--color-brand-white: #ffffff;
|
||||
--color-brand-dark: #0d0d0d;
|
||||
/* Brand palette constants */
|
||||
--palette-navy: #012851;
|
||||
--palette-mint: #a1dcd8;
|
||||
--palette-turquoise: #00c7b1;
|
||||
--palette-sand: #f0efe9;
|
||||
--palette-purple: #b4b9ff;
|
||||
|
||||
/* FONTS */
|
||||
/* Typography */
|
||||
--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
|
||||
|
||||
--text-huge: 4rem;
|
||||
}
|
||||
|
||||
/* 3. Base Styles */
|
||||
/* ─── 3. Semantic tokens — Tailwind utilities backed by CSS variables ──────── */
|
||||
/*
|
||||
@theme inline makes Tailwind generate utility classes (bg-surface, text-ink,
|
||||
border-line, etc.) whose values are CSS custom properties, not hardcoded hex.
|
||||
Changing --c-surface on :root is all it takes to retheme the whole UI.
|
||||
*/
|
||||
@theme inline {
|
||||
/* Surfaces */
|
||||
--color-canvas: var(--c-canvas);
|
||||
--color-surface: var(--c-surface);
|
||||
--color-overlay: var(--c-overlay);
|
||||
--color-muted: var(--c-muted);
|
||||
|
||||
/* Borders */
|
||||
--color-line: var(--c-line);
|
||||
--color-line-2: var(--c-line-2);
|
||||
|
||||
/* Text */
|
||||
--color-ink: var(--c-ink);
|
||||
--color-ink-2: var(--c-ink-2);
|
||||
--color-ink-3: var(--c-ink-3);
|
||||
|
||||
/* Accent (mint ↔ turquoise) */
|
||||
--color-accent: var(--c-accent);
|
||||
--color-accent-bg: var(--c-accent-bg);
|
||||
|
||||
/* Primary interactive (navy ↔ mint) */
|
||||
--color-primary: var(--c-primary);
|
||||
--color-primary-fg: var(--c-primary-fg);
|
||||
|
||||
/* Nav active state */
|
||||
--color-nav-active: var(--c-nav-active);
|
||||
|
||||
/* PDF viewer */
|
||||
--color-pdf-bg: var(--c-pdf-bg);
|
||||
--color-pdf-ctrl: var(--c-pdf-ctrl);
|
||||
--color-pdf-text: var(--c-pdf-text);
|
||||
|
||||
/* Static brand tokens (not themed) */
|
||||
--color-brand-purple: var(--palette-purple);
|
||||
--color-brand-navy: var(--palette-navy);
|
||||
--color-brand-mint: var(--palette-mint);
|
||||
}
|
||||
|
||||
/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
|
||||
:root {
|
||||
--c-canvas: #f0efe9;
|
||||
--c-surface: #ffffff;
|
||||
--c-overlay: #ffffff;
|
||||
--c-muted: #f5f4ef;
|
||||
|
||||
--c-line: #e4e2d7;
|
||||
--c-line-2: #eeede8;
|
||||
|
||||
--c-ink: #012851;
|
||||
--c-ink-2: #6b7280;
|
||||
--c-ink-3: #9ca3af;
|
||||
|
||||
--c-accent: #a1dcd8;
|
||||
--c-accent-bg: rgba(161, 220, 216, 0.15);
|
||||
|
||||
--c-primary: #012851;
|
||||
--c-primary-fg: #ffffff;
|
||||
|
||||
--c-nav-active: rgba(180, 185, 255, 0.15);
|
||||
|
||||
--c-pdf-bg: #ebebeb;
|
||||
--c-pdf-ctrl: #d8d8d8;
|
||||
--c-pdf-text: #333333;
|
||||
}
|
||||
|
||||
/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme='light']) {
|
||||
--c-canvas: #0d0d0d;
|
||||
--c-surface: #1a1a1a;
|
||||
--c-overlay: #242424;
|
||||
--c-muted: #252525;
|
||||
|
||||
--c-line: #2e2e2e;
|
||||
--c-line-2: #222222;
|
||||
|
||||
--c-ink: #f0efe9;
|
||||
--c-ink-2: #9ca3af;
|
||||
--c-ink-3: #6b7280;
|
||||
|
||||
--c-accent: #00c7b1;
|
||||
--c-accent-bg: rgba(0, 199, 177, 0.12);
|
||||
|
||||
--c-primary: #a1dcd8;
|
||||
--c-primary-fg: #012851;
|
||||
|
||||
--c-nav-active: rgba(180, 185, 255, 0.12);
|
||||
|
||||
--c-pdf-bg: #1e1e1e;
|
||||
--c-pdf-ctrl: #2a2a2a;
|
||||
--c-pdf-text: #d1d1d1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Manual dark override — takes precedence over media query */
|
||||
:root[data-theme='dark'] {
|
||||
--c-canvas: #0d0d0d;
|
||||
--c-surface: #1a1a1a;
|
||||
--c-overlay: #242424;
|
||||
--c-muted: #252525;
|
||||
|
||||
--c-line: #2e2e2e;
|
||||
--c-line-2: #222222;
|
||||
|
||||
--c-ink: #f0efe9;
|
||||
--c-ink-2: #9ca3af;
|
||||
--c-ink-3: #6b7280;
|
||||
|
||||
--c-accent: #00c7b1;
|
||||
--c-accent-bg: rgba(0, 199, 177, 0.12);
|
||||
|
||||
--c-primary: #a1dcd8;
|
||||
--c-primary-fg: #012851;
|
||||
|
||||
--c-nav-active: rgba(180, 185, 255, 0.12);
|
||||
|
||||
--c-pdf-bg: #1e1e1e;
|
||||
--c-pdf-ctrl: #2a2a2a;
|
||||
--c-pdf-text: #d1d1d1;
|
||||
}
|
||||
|
||||
/* ─── 6. Base styles ───────────────────────────────────────────────────────── */
|
||||
@layer base {
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #ffffff;
|
||||
color: var(--color-brand-navy);
|
||||
background-color: var(--c-canvas);
|
||||
color: var(--c-ink);
|
||||
font-family: var(--font-serif);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user