diff options
Diffstat (limited to 'themes/modern-dark.css')
| -rw-r--r-- | themes/modern-dark.css | 546 |
1 files changed, 546 insertions, 0 deletions
diff --git a/themes/modern-dark.css b/themes/modern-dark.css new file mode 100644 index 0000000..be8d4f6 --- /dev/null +++ b/themes/modern-dark.css @@ -0,0 +1,546 @@ +@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap"); + +/* ─── Design Tokens ─────────────────────────────────────── */ +:root { + --bg: #0a0a0b; + --surface: #111113; + --surface-2: #18181c; + --border: #232328; + --border-soft: rgba(255, 255, 255, 0.06); + --text: #e8e8e4; + --text-dim: #7a7a80; + --text-muted: #3e3e46; + --accent: #c8f23a; /* electric lime – sharp single accent */ + --accent-dim: rgba(200, 242, 58, 0.12); + --accent-glow: rgba(200, 242, 58, 0.08); + --serif: "Instrument Serif", Georgia, serif; + --sans: "Syne", system-ui, sans-serif; + --mono: "DM Mono", ui-monospace, monospace; + --radius: 4px; + --max-w: 720px; + --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +/* ─── Reset & Base ──────────────────────────────────────── */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: 0; + padding: 4rem 2rem 6rem; + background-color: var(--bg); + background-image: + radial-gradient( + ellipse 80% 50% at 50% -20%, + rgba(200, 242, 58, 0.05) 0%, + transparent 60% + ), + url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/g%3E%3C/svg%3E"); + color: var(--text); + font-family: var(--serif); + line-height: 1.8; + font-size: 19px; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +body > * { + max-width: var(--max-w); + margin-left: auto; + margin-right: auto; +} + +/* ─── Headings ──────────────────────────────────────────── */ +h1, +h2, +h3, +h4 { + font-family: var(--sans); + font-weight: 700; + line-height: 1.15; + letter-spacing: -0.02em; + scroll-margin-top: 1.5rem; + color: #f0f0ec; +} + +h1 { + font-size: clamp(2.2rem, 5vw, 3rem); + font-weight: 800; + margin-bottom: 1.2rem; + /* Subtle accent underline on the first line */ + background: linear-gradient(135deg, #f0f0ec 60%, var(--accent) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +h2 { + font-size: 1.5rem; + margin-top: 3.5rem; + padding-top: 2rem; + border-top: 1px solid var(--border); + color: var(--text); +} + +h3 { + font-size: 1.15rem; + font-weight: 600; + margin-top: 2.2rem; + color: var(--text); +} + +/* ─── Paragraphs ────────────────────────────────────────── */ +p { + margin: 1.4rem 0; + color: #c8c8c4; + font-size: 1.2rem; +} + +/* Drop cap for first paragraph after h1 */ +h1 + p::first-letter { + font-family: var(--serif); + font-size: 3.6rem; + font-style: italic; + float: left; + line-height: 0.82; + margin: 0.08em 0.1em 0 0; + color: var(--accent); +} + +/* ─── Article Meta / Byline ─────────────────────────────── */ +.meta, +time, +.byline { + display: block; + font-family: var(--mono); + font-size: 0.75rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-dim); + margin-bottom: 2.5rem; +} + +/* ─── Links ─────────────────────────────────────────────── */ +a { + color: var(--text); + text-decoration: none; + border-bottom: 1px solid var(--border); + transition: + color var(--transition), + border-color var(--transition); +} + +a:hover { + color: var(--accent); + border-bottom-color: var(--accent); +} + +/* ─── Lists ─────────────────────────────────────────────── */ +ul, +ol { + margin: 1.4rem 0 1.4rem 0; + padding-left: 0; + list-style: none; +} + +ul li, +ol li { + position: relative; + padding-left: 1.5rem; + margin: 0.55rem 0; + color: #c8c8c4; +} + +ul li::before { + content: "–"; + position: absolute; + left: 0; + color: var(--accent); + font-family: var(--mono); +} + +ol { + counter-reset: ol-counter; +} + +ol li { + counter-increment: ol-counter; +} + +ol li::before { + content: counter(ol-counter, decimal-leading-zero); + position: absolute; + left: 0; + font-family: var(--mono); + font-size: 0.72rem; + color: var(--text-dim); + top: 0.22em; +} + +/* ─── Horizontal Rule ───────────────────────────────────── */ +hr { + border: none; + margin: 3.5rem auto; + height: 1px; + background: linear-gradient( + 90deg, + transparent, + var(--border) 20%, + var(--border) 80%, + transparent + ); + position: relative; +} + +hr::after { + content: "✦"; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + font-size: 0.65rem; + color: var(--text-muted); + background: var(--bg); + padding: 0 0.5rem; +} + +/* ─── Blockquote ────────────────────────────────────────── */ +blockquote { + margin: 2.5rem 0; + padding: 1.5rem 1.8rem; + background: var(--surface); + border-left: 2px solid var(--accent); + border-radius: 0 var(--radius) var(--radius) 0; + position: relative; +} + +blockquote p { + margin: 0; + font-style: italic; + font-size: 1.1rem; + color: #d8d8d4; +} + +blockquote cite { + display: block; + margin-top: 0.8rem; + font-family: var(--mono); + font-size: 0.72rem; + letter-spacing: 0.06em; + color: var(--text-dim); + font-style: normal; +} + +/* ─── Tables ────────────────────────────────────────────── */ +table { + width: 100%; + border-collapse: collapse; + margin: 2rem 0; + font-size: 0.9rem; + font-family: var(--mono); + background: var(--surface); + border-radius: var(--radius); + overflow: hidden; + border: 1px solid var(--border); +} + +thead { + background: var(--surface-2); +} + +th { + text-align: left; + padding: 0.75rem 1rem; + font-size: 0.7rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-dim); + border-bottom: 1px solid var(--border); + font-weight: 500; +} + +td { + padding: 0.65rem 1rem; + border-bottom: 1px solid var(--border-soft); + color: #c0c0bc; +} + +tr:last-child td { + border-bottom: none; +} + +tr:hover td { + background: var(--border-soft); +} + +/* ─── Inline Code ───────────────────────────────────────── */ +code { + font-family: var(--mono); + font-size: 0.83rem; + background: var(--surface-2); + color: var(--accent); + padding: 0.18rem 0.4rem; + border-radius: var(--radius); + border: 1px solid var(--border); + word-break: break-word; +} + +/* ─── Code Blocks ───────────────────────────────────────── */ +pre { + background: var(--surface); + border: 1px solid var(--border); + border-left: 2px solid var(--accent); + padding: 1.4rem 1.6rem; + overflow-x: auto; + border-radius: var(--radius); + margin: 2rem 0; + position: relative; +} + +pre::before { + content: attr(data-lang); + position: absolute; + top: 0.6rem; + right: 0.8rem; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--text-muted); +} + +pre code { + background: none; + border: none; + padding: 0; + color: #d0d0cc; + font-size: 0.87rem; + line-height: 1.65; +} + +/* ─── Images ────────────────────────────────────────────── */ +img { + max-width: 100%; + height: auto; + display: block; + border-radius: var(--radius); + border: 1px solid var(--border); + margin: 2rem auto; +} + +figure { + margin: 2.5rem 0; +} + +figcaption { + font-family: var(--mono); + font-size: 0.72rem; + color: var(--text-dim); + text-align: center; + margin-top: 0.75rem; + letter-spacing: 0.04em; +} + +/* ─── Footnotes / Aside ─────────────────────────────────── */ +aside, +.note, +.callout { + background: var(--accent-dim); + border: 1px solid rgba(200, 242, 58, 0.2); + border-radius: var(--radius); + padding: 1rem 1.2rem; + margin: 2rem 0; + font-size: 0.88rem; + color: #c0c0bc; +} + +aside strong, +.callout strong { + color: var(--accent); + font-family: var(--mono); + font-size: 0.7rem; + letter-spacing: 0.1em; + text-transform: uppercase; + display: block; + margin-left: 3px; + margin-bottom: 0.4rem; +} + +/* ─── Tags / Badges ─────────────────────────────────────── */ +.tag { + display: inline-block; + font-family: var(--mono); + font-size: 0.65rem; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: 0.25rem 0.6rem; + border: 1px solid var(--border); + border-radius: 2px; + color: var(--text-dim); + margin-right: 0.4rem; + text-decoration: none; + border-bottom: none; + transition: all var(--transition); +} + +.tag:hover { + border-color: var(--accent); + color: var(--accent); + background: var(--accent-dim); +} + +/* ─── Navigation ───────────────────────────────────────── */ +nav { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.2rem 0 3rem; + border-bottom: 1px solid var(--border); + margin-bottom: 3.5rem; +} + +nav .logo { + font-family: var(--sans); + font-weight: 800; + font-size: 1.1rem; + letter-spacing: -0.02em; + color: var(--text); + border-bottom: none; +} + +nav .logo span { + color: var(--accent); +} + +nav ul { + display: flex; + gap: 2rem; + margin: 0; + padding: 0; + list-style: none; +} + +nav ul li { + padding: 0; + margin: 0; +} + +nav ul li::before { + display: none; +} + +nav a { + font-family: var(--mono); + font-size: 0.72rem; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-dim); + border-bottom: none; + transition: color var(--transition); +} + +nav a:hover { + color: var(--accent); + border-bottom: none; +} + +/* ─── Footer ───────────────────────────────────────────── */ +footer { + margin-top: 5rem; + padding-top: 2rem; + border-top: 1px solid var(--border); + font-family: var(--mono); + font-size: 0.72rem; + letter-spacing: 0.05em; + color: var(--text-muted); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; +} + +/* ─── Reading Progress Bar ─────────────────────────────── */ +.progress-bar { + position: fixed; + top: 0; + left: 0; + height: 2px; + background: var(--accent); + z-index: 999; + transform-origin: left; + width: 0%; + box-shadow: 0 0 8px var(--accent-glow); + transition: width 0.1s linear; +} + +/* ─── Selection ────────────────────────────────────────── */ +::selection { + background: rgba(200, 242, 58, 0.2); + color: var(--text); +} + +/* ─── Scrollbar ────────────────────────────────────────── */ +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: var(--bg); +} +::-webkit-scrollbar-thumb { + background: var(--border); + border-radius: 3px; +} +::-webkit-scrollbar-thumb:hover { + background: var(--text-muted); +} + +/* ─── Abbr ─────────────────────────────────────────────── */ +abbr[title] { + border-bottom: 1px dotted var(--text-dim); + cursor: help; + text-decoration: none; +} + +/* ─── Responsive ───────────────────────────────────────── */ +@media (max-width: 700px) { + body { + padding: 2rem 1.2rem 4rem; + font-size: 17px; + } + + h1 { + font-size: 2rem; + } + h2 { + font-size: 1.35rem; + } + + nav ul { + gap: 1.2rem; + } + nav { + flex-wrap: wrap; + gap: 1rem; + } + footer { + flex-direction: column; + text-align: center; + } +} + +/* ─── Focus Accessibility ──────────────────────────────── */ +:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 3px; + border-radius: var(--radius); +} |