149 lines
3.6 KiB
CSS
149 lines
3.6 KiB
CSS
/* ============================================================
|
|
nychthemeron.css
|
|
Toggle themes by setting data-theme on <html>:
|
|
<html data-theme="hades">
|
|
<html data-theme="apollo">
|
|
============================================================ */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap');
|
|
|
|
/* ── HADES ───────────────────────────────────────────────── */
|
|
[data-theme='hades'] {
|
|
/* surfaces */
|
|
--surface-0: #18160f;
|
|
--surface-1: #28241a;
|
|
--surface-2: #2e2a1e;
|
|
--surface-3: #322e22;
|
|
--track: #32302a;
|
|
|
|
/* borders */
|
|
--border: #4a4538;
|
|
--border-hi: #5a5040;
|
|
--border-lo: #38342a;
|
|
|
|
/* primary */
|
|
--primary: #d4b278;
|
|
--primary-fg: #0e0c08;
|
|
|
|
/* semantic */
|
|
--warn: #e08840; /* phlegethon */
|
|
--warn-subtle: #281808;
|
|
--warn-border: #4a2c10;
|
|
|
|
--danger: #9ab4c8; /* styx */
|
|
--danger-subtle: #141a22;
|
|
--danger-border: #2a3848;
|
|
|
|
--info: #88aec8; /* cocytus */
|
|
--info-subtle: #101e2c;
|
|
--info-border: #1e3850;
|
|
|
|
--muted: #c8c0a8; /* lethe */
|
|
--muted-subtle: #201e18;
|
|
--muted-border: #403c30;
|
|
|
|
--neutral: #7a6e60; /* acheron */
|
|
|
|
--success: #6aaa7a; /* laurel */
|
|
--success-subtle: #0e2214;
|
|
--success-border: #1e4228;
|
|
|
|
/* text */
|
|
--text-high: #f4f0e8;
|
|
--text-body: #d0c8b8;
|
|
--text-muted: #908878;
|
|
--text-dim: #807868;
|
|
--text-label: #c0b8a8;
|
|
|
|
/* focus ring */
|
|
--focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.18);
|
|
|
|
/* fonts */
|
|
--font-serif: 'Cinzel', Georgia, serif;
|
|
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
/* ── APOLLO ──────────────────────────────────────────────── */
|
|
[data-theme='apollo'] {
|
|
/* surfaces */
|
|
--surface-0: #faf7f2;
|
|
--surface-1: #f4f0e8;
|
|
--surface-2: #eee9df;
|
|
--surface-3: #e4ddd0;
|
|
--track: #e4ddd0;
|
|
|
|
/* borders */
|
|
--border: #bab2a0;
|
|
--border-hi: #c0b8a8;
|
|
--border-lo: #ccc4b4;
|
|
|
|
/* primary */
|
|
--primary: #b8860b;
|
|
--primary-fg: #fff8e8;
|
|
|
|
/* semantic */
|
|
--warn: #9a6020; /* harmony */
|
|
--warn-subtle: #fdf3e0;
|
|
--warn-border: #e8d0a0;
|
|
|
|
--danger: #7a1a1a; /* plague */
|
|
--danger-subtle: #faeaea;
|
|
--danger-border: #c8a0a0;
|
|
|
|
--info: #3a5a8a; /* oracle */
|
|
--info-subtle: #e8eef8;
|
|
--info-border: #b0c4e0;
|
|
|
|
--muted: #a09080; /* lethe */
|
|
--muted-subtle: #ede8de;
|
|
--muted-border: #d4cdc0;
|
|
|
|
--neutral: #8a8070; /* marble */
|
|
|
|
--success: #5a7a40; /* laurel */
|
|
--success-subtle: #eef4e8;
|
|
--success-border: #c0d4a8;
|
|
|
|
/* text */
|
|
--text-high: #1a1610;
|
|
--text-body: #3a3020;
|
|
--text-muted: #5a5040;
|
|
--text-dim: #8a8070;
|
|
--text-label: #5a5040;
|
|
|
|
/* focus ring */
|
|
--focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.12);
|
|
|
|
/* fonts */
|
|
--font-serif: 'Cinzel', Georgia, serif;
|
|
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', monospace;
|
|
}
|
|
|
|
/* ── BASE RESET ──────────────────────────────────────────── */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--surface-0);
|
|
color: var(--text-body);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
*:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|