From c77582a90fa4cdd2d2222ec1b2898754612728d2 Mon Sep 17 00:00:00 2001 From: dzonerzy Date: Wed, 21 Jan 2026 23:35:04 +0100 Subject: [PATCH] Complete site redesign: Intelligence Dossier theme Typography: - Playfair Display for headings (elegant serif) - Source Sans 3 for body text (professional sans-serif) - JetBrains Mono for code (industry standard) Layout & UX: - Control bar header with integrated theme/accent buttons - Fluid content width: clamp(50rem, 75vw, 72rem) - Hierarchical TOC numbering (1., 1.1, 1.2, etc.) - Collapsible TOC for articles with 12+ sections - Gold/amber default accent color scheme Visual improvements: - Refined color palette for light/dark modes - Better code block styling with dark backgrounds - Improved blockquote and table styling - Gradient fade on collapsed TOC --- src/libdzonerzy.so.c | 834 ++++++++++++++++++++++++++----------------- 1 file changed, 502 insertions(+), 332 deletions(-) diff --git a/src/libdzonerzy.so.c b/src/libdzonerzy.so.c index ec50af9..dfcda07 100644 --- a/src/libdzonerzy.so.c +++ b/src/libdzonerzy.so.c @@ -21,131 +21,151 @@ Copyright: // this is a shared object library #define MAIN_CSS \ - CSS_COMMENT("main.css - Terminal Noir Theme") \ + CSS_COMMENT("main.css - Intelligence Dossier Theme") \ CSS_NEWLINE() \ CSS_COMMENT("Light mode variables") \ CSS_SELECTOR(":root") \ - CSS_PROPERTY("--bg", "#f7f5f2") \ + CSS_PROPERTY("--bg", "#faf9f7") \ CSS_PROPERTY("--bg-surface", "#ffffff") \ - CSS_PROPERTY("--text", "#1a1a1a") \ - CSS_PROPERTY("--text-muted", "#5c5c5c") \ - CSS_PROPERTY("--accent", "#0969da") \ - CSS_PROPERTY("--accent-hover", "#0550ae") \ - CSS_PROPERTY("--accent-glow", "rgba(9,105,218,0.15)") \ - CSS_PROPERTY("--border", "#d1cdc7") \ - CSS_PROPERTY("--code-bg", "#f6f1eb") \ - CSS_PROPERTY("--code-text", "#24292f") \ - CSS_PROPERTY("--strong", "#9d174d") \ + CSS_PROPERTY("--bg-elevated", "#f5f3f0") \ + CSS_PROPERTY("--text", "#1c1917") \ + CSS_PROPERTY("--text-muted", "#78716c") \ + CSS_PROPERTY("--accent", "#b45309") \ + CSS_PROPERTY("--accent-hover", "#92400e") \ + CSS_PROPERTY("--accent-subtle", "rgba(180,83,9,0.08)") \ + CSS_PROPERTY("--border", "#e7e5e4") \ + CSS_PROPERTY("--border-strong", "#d6d3d1") \ + CSS_PROPERTY("--code-bg", "#292524") \ + CSS_PROPERTY("--code-text", "#fafaf9") \ + CSS_PROPERTY("--strong", "#9a3412") \ CSS_PROPERTY("--heart", "#dc2626") \ - CSS_PROPERTY("--shadow", "0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05)") \ - CSS_PROPERTY("--shadow-lg", "0 4px 20px rgba(0,0,0,0.12)") \ - CSS_PROPERTY("--table-header", "#f0ece6") \ - CSS_PROPERTY("--table-row-alt", "#faf8f5") \ - CSS_PROPERTY("--table-hover", "#e8f4fd") \ - CSS_PROPERTY("--scrollbar-bg", "#f0ece6") \ - CSS_PROPERTY("--scrollbar-thumb", "#c4bfb6") \ - CSS_COMMENT("Syntax highlighting - light mode") \ - CSS_PROPERTY("--syn-keyword", "#cf222e") \ - CSS_PROPERTY("--syn-string", "#0a3069") \ - CSS_PROPERTY("--syn-comment", "#6e7781") \ - CSS_PROPERTY("--syn-number", "#0550ae") \ - CSS_PROPERTY("--syn-function", "#8250df") \ - CSS_PROPERTY("--syn-variable", "#953800") \ - CSS_PROPERTY("--syn-operator", "#24292f") \ - CSS_PROPERTY("--syn-type", "#0550ae") \ - CSS_PROPERTY("--syn-constant", "#0550ae") \ - CSS_PROPERTY("--syn-builtin", "#8250df") \ - CSS_PROPERTY("--syn-control", "#cf222e") \ - CSS_PROPERTY("--syn-char", "#0a3069") \ - CSS_PROPERTY("--syn-special", "#cf222e") \ + CSS_PROPERTY("--shadow", "0 1px 2px rgba(0,0,0,0.04)") \ + CSS_PROPERTY("--shadow-lg", "0 4px 12px rgba(0,0,0,0.08)") \ + CSS_PROPERTY("--table-header", "#f5f3f0") \ + CSS_PROPERTY("--table-row-alt", "#faf9f7") \ + CSS_PROPERTY("--table-hover", "#fef3c7") \ + CSS_PROPERTY("--scrollbar-bg", "#292524") \ + CSS_PROPERTY("--scrollbar-thumb", "#57534e") \ + CSS_PROPERTY("--font-display", "\"Playfair Display\", Georgia, \"Times New Roman\", serif") \ + CSS_PROPERTY("--font-body", "\"Source Sans 3\", \"Segoe UI\", system-ui, sans-serif") \ + CSS_PROPERTY("--font-mono", "\"JetBrains Mono\", \"Fira Code\", \"SF Mono\", monospace") \ + CSS_COMMENT("Syntax highlighting - light mode (on dark code bg)") \ + CSS_PROPERTY("--syn-keyword", "#f97316") \ + CSS_PROPERTY("--syn-string", "#a3e635") \ + CSS_PROPERTY("--syn-comment", "#a8a29e") \ + CSS_PROPERTY("--syn-number", "#60a5fa") \ + CSS_PROPERTY("--syn-function", "#c084fc") \ + CSS_PROPERTY("--syn-variable", "#fbbf24") \ + CSS_PROPERTY("--syn-operator", "#e7e5e4") \ + CSS_PROPERTY("--syn-type", "#22d3ee") \ + CSS_PROPERTY("--syn-constant", "#60a5fa") \ + CSS_PROPERTY("--syn-builtin", "#c084fc") \ + CSS_PROPERTY("--syn-control", "#f97316") \ + CSS_PROPERTY("--syn-char", "#a3e635") \ + CSS_PROPERTY("--syn-special", "#fb923c") \ CSS_END_SELECTOR() \ CSS_COMMENT("Dark mode variables") \ CSS_SELECTOR("html.dark") \ - CSS_PROPERTY("--bg", "#0d1117") \ - CSS_PROPERTY("--bg-surface", "#161b22") \ - CSS_PROPERTY("--text", "#e6edf3") \ - CSS_PROPERTY("--text-muted", "#7d8590") \ - CSS_PROPERTY("--accent", "#58a6ff") \ - CSS_PROPERTY("--accent-hover", "#79c0ff") \ - CSS_PROPERTY("--accent-glow", "rgba(88,166,255,0.15)") \ - CSS_PROPERTY("--border", "#30363d") \ - CSS_PROPERTY("--code-bg", "#161b22") \ - CSS_PROPERTY("--code-text", "#e6edf3") \ - CSS_PROPERTY("--strong", "#f472b6") \ + CSS_PROPERTY("--bg", "#0c0a09") \ + CSS_PROPERTY("--bg-surface", "#1c1917") \ + CSS_PROPERTY("--bg-elevated", "#292524") \ + CSS_PROPERTY("--text", "#fafaf9") \ + CSS_PROPERTY("--text-muted", "#a8a29e") \ + CSS_PROPERTY("--accent", "#f59e0b") \ + CSS_PROPERTY("--accent-hover", "#fbbf24") \ + CSS_PROPERTY("--accent-subtle", "rgba(245,158,11,0.1)") \ + CSS_PROPERTY("--border", "#292524") \ + CSS_PROPERTY("--border-strong", "#44403c") \ + CSS_PROPERTY("--code-bg", "#1c1917") \ + CSS_PROPERTY("--code-text", "#fafaf9") \ + CSS_PROPERTY("--strong", "#fb923c") \ CSS_PROPERTY("--heart", "#f87171") \ - CSS_PROPERTY("--shadow", "0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2)") \ - CSS_PROPERTY("--shadow-lg", "0 4px 20px rgba(0,0,0,0.4)") \ - CSS_PROPERTY("--table-header", "#21262d") \ - CSS_PROPERTY("--table-row-alt", "#161b22") \ - CSS_PROPERTY("--table-hover", "#1c2631") \ - CSS_PROPERTY("--scrollbar-bg", "#21262d") \ - CSS_PROPERTY("--scrollbar-thumb", "#484f58") \ + CSS_PROPERTY("--shadow", "0 1px 3px rgba(0,0,0,0.4)") \ + CSS_PROPERTY("--shadow-lg", "0 4px 20px rgba(0,0,0,0.5)") \ + CSS_PROPERTY("--table-header", "#292524") \ + CSS_PROPERTY("--table-row-alt", "#1c1917") \ + CSS_PROPERTY("--table-hover", "#44403c") \ + CSS_PROPERTY("--scrollbar-bg", "#1c1917") \ + CSS_PROPERTY("--scrollbar-thumb", "#57534e") \ CSS_COMMENT("Syntax highlighting - dark mode") \ - CSS_PROPERTY("--syn-keyword", "#ff7b72") \ - CSS_PROPERTY("--syn-string", "#a5d6ff") \ - CSS_PROPERTY("--syn-comment", "#8b949e") \ - CSS_PROPERTY("--syn-number", "#79c0ff") \ - CSS_PROPERTY("--syn-function", "#d2a8ff") \ - CSS_PROPERTY("--syn-variable", "#ffa657") \ - CSS_PROPERTY("--syn-operator", "#e6edf3") \ - CSS_PROPERTY("--syn-type", "#79c0ff") \ - CSS_PROPERTY("--syn-constant", "#79c0ff") \ - CSS_PROPERTY("--syn-builtin", "#d2a8ff") \ - CSS_PROPERTY("--syn-control", "#ff7b72") \ - CSS_PROPERTY("--syn-char", "#a5d6ff") \ - CSS_PROPERTY("--syn-special", "#ff7b72") \ + CSS_PROPERTY("--syn-keyword", "#fb923c") \ + CSS_PROPERTY("--syn-string", "#a3e635") \ + CSS_PROPERTY("--syn-comment", "#78716c") \ + CSS_PROPERTY("--syn-number", "#60a5fa") \ + CSS_PROPERTY("--syn-function", "#c084fc") \ + CSS_PROPERTY("--syn-variable", "#fcd34d") \ + CSS_PROPERTY("--syn-operator", "#d6d3d1") \ + CSS_PROPERTY("--syn-type", "#22d3ee") \ + CSS_PROPERTY("--syn-constant", "#60a5fa") \ + CSS_PROPERTY("--syn-builtin", "#c084fc") \ + CSS_PROPERTY("--syn-control", "#fb923c") \ + CSS_PROPERTY("--syn-char", "#a3e635") \ + CSS_PROPERTY("--syn-special", "#fbbf24") \ CSS_END_SELECTOR() \ - CSS_COMMENT("Accent theme: Terminal Green") \ + CSS_COMMENT("Accent theme: Emerald") \ CSS_SELECTOR("html.accent-green") \ - CSS_PROPERTY("--accent", "#22c55e") \ - CSS_PROPERTY("--accent-hover", "#16a34a") \ - CSS_PROPERTY("--accent-glow", "rgba(34,197,94,0.15)") \ - CSS_PROPERTY("--table-hover", "#ecfdf5") \ + CSS_PROPERTY("--accent", "#059669") \ + CSS_PROPERTY("--accent-hover", "#047857") \ + CSS_PROPERTY("--accent-subtle", "rgba(5,150,105,0.08)") \ + CSS_PROPERTY("--table-hover", "#d1fae5") \ CSS_END_SELECTOR() \ CSS_SELECTOR("html.dark.accent-green") \ - CSS_PROPERTY("--accent", "#4ade80") \ - CSS_PROPERTY("--accent-hover", "#86efac") \ - CSS_PROPERTY("--accent-glow", "rgba(74,222,128,0.15)") \ - CSS_PROPERTY("--table-hover", "#14352a") \ + CSS_PROPERTY("--accent", "#34d399") \ + CSS_PROPERTY("--accent-hover", "#6ee7b7") \ + CSS_PROPERTY("--accent-subtle", "rgba(52,211,153,0.1)") \ + CSS_PROPERTY("--table-hover", "#064e3b") \ CSS_END_SELECTOR() \ - CSS_COMMENT("Accent theme: Amber") \ + CSS_COMMENT("Accent theme: Gold (default)") \ CSS_SELECTOR("html.accent-amber") \ CSS_PROPERTY("--accent", "#d97706") \ CSS_PROPERTY("--accent-hover", "#b45309") \ - CSS_PROPERTY("--accent-glow", "rgba(217,119,6,0.15)") \ + CSS_PROPERTY("--accent-subtle", "rgba(217,119,6,0.08)") \ CSS_PROPERTY("--table-hover", "#fef3c7") \ CSS_END_SELECTOR() \ CSS_SELECTOR("html.dark.accent-amber") \ CSS_PROPERTY("--accent", "#fbbf24") \ CSS_PROPERTY("--accent-hover", "#fcd34d") \ - CSS_PROPERTY("--accent-glow", "rgba(251,191,36,0.15)") \ - CSS_PROPERTY("--table-hover", "#352a14") \ + CSS_PROPERTY("--accent-subtle", "rgba(251,191,36,0.1)") \ + CSS_PROPERTY("--table-hover", "#451a03") \ CSS_END_SELECTOR() \ - CSS_COMMENT("Accent theme: Cyan") \ + CSS_COMMENT("Accent theme: Sky") \ CSS_SELECTOR("html.accent-cyan") \ - CSS_PROPERTY("--accent", "#0891b2") \ - CSS_PROPERTY("--accent-hover", "#0e7490") \ - CSS_PROPERTY("--accent-glow", "rgba(8,145,178,0.15)") \ - CSS_PROPERTY("--table-hover", "#ecfeff") \ + CSS_PROPERTY("--accent", "#0284c7") \ + CSS_PROPERTY("--accent-hover", "#0369a1") \ + CSS_PROPERTY("--accent-subtle", "rgba(2,132,199,0.08)") \ + CSS_PROPERTY("--table-hover", "#e0f2fe") \ CSS_END_SELECTOR() \ CSS_SELECTOR("html.dark.accent-cyan") \ - CSS_PROPERTY("--accent", "#22d3ee") \ - CSS_PROPERTY("--accent-hover", "#67e8f9") \ - CSS_PROPERTY("--accent-glow", "rgba(34,211,238,0.15)") \ - CSS_PROPERTY("--table-hover", "#143535") \ + CSS_PROPERTY("--accent", "#38bdf8") \ + CSS_PROPERTY("--accent-hover", "#7dd3fc") \ + CSS_PROPERTY("--accent-subtle", "rgba(56,189,248,0.1)") \ + CSS_PROPERTY("--table-hover", "#0c4a6e") \ CSS_END_SELECTOR() \ CSS_COMMENT("Accent theme: Rose") \ CSS_SELECTOR("html.accent-rose") \ - CSS_PROPERTY("--accent", "#e11d48") \ - CSS_PROPERTY("--accent-hover", "#be123c") \ - CSS_PROPERTY("--accent-glow", "rgba(225,29,72,0.15)") \ - CSS_PROPERTY("--table-hover", "#fff1f2") \ + CSS_PROPERTY("--accent", "#be123c") \ + CSS_PROPERTY("--accent-hover", "#9f1239") \ + CSS_PROPERTY("--accent-subtle", "rgba(190,18,60,0.08)") \ + CSS_PROPERTY("--table-hover", "#ffe4e6") \ CSS_END_SELECTOR() \ CSS_SELECTOR("html.dark.accent-rose") \ CSS_PROPERTY("--accent", "#fb7185") \ CSS_PROPERTY("--accent-hover", "#fda4af") \ - CSS_PROPERTY("--accent-glow", "rgba(251,113,133,0.15)") \ - CSS_PROPERTY("--table-hover", "#35141c") \ + CSS_PROPERTY("--accent-subtle", "rgba(251,113,133,0.1)") \ + CSS_PROPERTY("--table-hover", "#4c0519") \ + CSS_END_SELECTOR() \ + CSS_COMMENT("Accent theme: Classic Blue") \ + CSS_SELECTOR("html.accent-blue") \ + CSS_PROPERTY("--accent", "#2563eb") \ + CSS_PROPERTY("--accent-hover", "#1d4ed8") \ + CSS_PROPERTY("--accent-subtle", "rgba(37,99,235,0.08)") \ + CSS_PROPERTY("--table-hover", "#dbeafe") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("html.dark.accent-blue") \ + CSS_PROPERTY("--accent", "#60a5fa") \ + CSS_PROPERTY("--accent-hover", "#93c5fd") \ + CSS_PROPERTY("--accent-subtle", "rgba(96,165,250,0.1)") \ + CSS_PROPERTY("--table-hover", "#1e3a5f") \ CSS_END_SELECTOR() \ CSS_COMMENT("Base styles") \ CSS_SELECTOR("*, *::before, *::after") \ @@ -160,87 +180,124 @@ Copyright: CSS_END_SELECTOR() \ CSS_SELECTOR("body") \ CSS_PROPERTY("margin", "0 auto") \ - CSS_PROPERTY("padding", "0 1.5rem") \ - CSS_PROPERTY("max-width", "52rem") \ + CSS_PROPERTY("padding", "0 2rem") \ + CSS_PROPERTY("padding-top", "4.5rem") \ + CSS_PROPERTY("max-width", "clamp(50rem, 75vw, 72rem)") \ CSS_PROPERTY("min-height", "100vh") \ - CSS_PROPERTY("font-family", "\"Fira Code\", \"SF Mono\", Monaco, \"Cascadia Code\", monospace") \ - CSS_PROPERTY("font-size", "1rem") \ - CSS_PROPERTY("line-height", "1.7") \ + CSS_PROPERTY("font-family", "var(--font-body)") \ + CSS_PROPERTY("font-size", "1.0625rem") \ + CSS_PROPERTY("line-height", "1.75") \ CSS_PROPERTY("background-color", "var(--bg)") \ CSS_PROPERTY("color", "var(--text)") \ CSS_PROPERTY("display", "flex") \ CSS_PROPERTY("flex-direction", "column") \ - CSS_PROPERTY("transition", "background-color 0.3s ease, color 0.3s ease") \ + CSS_PROPERTY("transition", "background-color 0.25s ease, color 0.25s ease") \ + CSS_PROPERTY("-webkit-font-smoothing", "antialiased") \ + CSS_PROPERTY("-moz-osx-font-smoothing", "grayscale") \ CSS_END_SELECTOR() \ - CSS_COMMENT("Theme toggle button") \ - CSS_SELECTOR(".theme-toggle") \ + CSS_COMMENT("Top control bar") \ + CSS_SELECTOR(".control-bar") \ CSS_PROPERTY("position", "fixed") \ - CSS_PROPERTY("top", "1.25rem") \ - CSS_PROPERTY("right", "1.25rem") \ - CSS_PROPERTY("width", "2.75rem") \ - CSS_PROPERTY("height", "2.75rem") \ - CSS_PROPERTY("border-radius", "50%") \ - CSS_PROPERTY("border", "1px solid var(--border)") \ + CSS_PROPERTY("top", "0") \ + CSS_PROPERTY("left", "0") \ + CSS_PROPERTY("right", "0") \ + CSS_PROPERTY("height", "3.5rem") \ CSS_PROPERTY("background", "var(--bg-surface)") \ + CSS_PROPERTY("border-bottom", "1px solid var(--border)") \ + CSS_PROPERTY("display", "flex") \ + CSS_PROPERTY("align-items", "center") \ + CSS_PROPERTY("justify-content", "space-between") \ + CSS_PROPERTY("padding", "0 2rem") \ + CSS_PROPERTY("z-index", "1000") \ + CSS_PROPERTY("transition", "background-color 0.25s ease, border-color 0.25s ease") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR(".control-bar__brand") \ + CSS_PROPERTY("font-family", "var(--font-display)") \ + CSS_PROPERTY("font-size", "1.125rem") \ + CSS_PROPERTY("font-weight", "600") \ CSS_PROPERTY("color", "var(--text)") \ + CSS_PROPERTY("text-decoration", "none") \ + CSS_PROPERTY("letter-spacing", "-0.01em") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR(".control-bar__brand:hover") \ + CSS_PROPERTY("color", "var(--accent)") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR(".control-bar__actions") \ + CSS_PROPERTY("display", "flex") \ + CSS_PROPERTY("align-items", "center") \ + CSS_PROPERTY("gap", "0.5rem") \ + CSS_END_SELECTOR() \ + CSS_COMMENT("Control buttons") \ + CSS_SELECTOR(".ctrl-btn") \ + CSS_PROPERTY("width", "2.25rem") \ + CSS_PROPERTY("height", "2.25rem") \ + CSS_PROPERTY("border-radius", "6px") \ + CSS_PROPERTY("border", "1px solid var(--border)") \ + CSS_PROPERTY("background", "transparent") \ + CSS_PROPERTY("color", "var(--text-muted)") \ CSS_PROPERTY("cursor", "pointer") \ CSS_PROPERTY("display", "flex") \ CSS_PROPERTY("align-items", "center") \ CSS_PROPERTY("justify-content", "center") \ - CSS_PROPERTY("font-size", "1.25rem") \ - CSS_PROPERTY("box-shadow", "var(--shadow)") \ - CSS_PROPERTY("transition", "all 0.2s ease") \ - CSS_PROPERTY("z-index", "1000") \ + CSS_PROPERTY("font-size", "1rem") \ + CSS_PROPERTY("transition", "all 0.15s ease") \ CSS_END_SELECTOR() \ - CSS_SELECTOR(".theme-toggle:hover") \ - CSS_PROPERTY("transform", "scale(1.1)") \ - CSS_PROPERTY("box-shadow", "var(--shadow-lg)") \ + CSS_SELECTOR(".ctrl-btn:hover") \ + CSS_PROPERTY("background", "var(--accent-subtle)") \ + CSS_PROPERTY("border-color", "var(--accent)") \ + CSS_PROPERTY("color", "var(--accent)") \ CSS_END_SELECTOR() \ - CSS_SELECTOR(".theme-toggle .icon-sun, .theme-toggle .icon-moon") \ + CSS_SELECTOR(".ctrl-btn--accent") \ + CSS_PROPERTY("background", "var(--accent)") \ + CSS_PROPERTY("border-color", "var(--accent)") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR(".ctrl-btn .icon-sun, .ctrl-btn .icon-moon") \ CSS_PROPERTY("line-height", "1") \ CSS_PROPERTY("display", "flex") \ CSS_PROPERTY("align-items", "center") \ CSS_PROPERTY("justify-content", "center") \ - CSS_PROPERTY("transition", "opacity 0.2s ease, transform 0.2s ease") \ CSS_END_SELECTOR() \ - CSS_SELECTOR(".theme-toggle .icon-sun") \ + CSS_SELECTOR(".ctrl-btn .icon-sun") \ CSS_PROPERTY("display", "flex") \ CSS_END_SELECTOR() \ - CSS_SELECTOR(".theme-toggle .icon-moon") \ + CSS_SELECTOR(".ctrl-btn .icon-moon") \ CSS_PROPERTY("display", "none") \ CSS_END_SELECTOR() \ - CSS_SELECTOR("html.dark .theme-toggle .icon-sun") \ + CSS_SELECTOR("html.dark .ctrl-btn .icon-sun") \ CSS_PROPERTY("display", "none") \ CSS_END_SELECTOR() \ - CSS_SELECTOR("html.dark .theme-toggle .icon-moon") \ - CSS_PROPERTY("display", "block") \ + CSS_SELECTOR("html.dark .ctrl-btn .icon-moon") \ + CSS_PROPERTY("display", "flex") \ CSS_END_SELECTOR() \ CSS_COMMENT("Typography") \ CSS_SELECTOR("h1, h2, h3, h4, h5, h6") \ - CSS_PROPERTY("font-family", "inherit") \ - CSS_PROPERTY("font-weight", "600") \ - CSS_PROPERTY("line-height", "1.3") \ - CSS_PROPERTY("margin-top", "2rem") \ + CSS_PROPERTY("font-family", "var(--font-display)") \ + CSS_PROPERTY("font-weight", "700") \ + CSS_PROPERTY("line-height", "1.25") \ + CSS_PROPERTY("margin-top", "2.5rem") \ CSS_PROPERTY("margin-bottom", "1rem") \ CSS_PROPERTY("color", "var(--text)") \ CSS_PROPERTY("clear", "both") \ + CSS_PROPERTY("letter-spacing", "-0.02em") \ CSS_END_SELECTOR() \ CSS_SELECTOR("h1") \ - CSS_PROPERTY("font-size", "1.75rem") \ + CSS_PROPERTY("font-size", "2.25rem") \ CSS_END_SELECTOR() \ CSS_SELECTOR("h2") \ - CSS_PROPERTY("font-size", "1.4rem") \ + CSS_PROPERTY("font-size", "1.75rem") \ CSS_PROPERTY("padding-bottom", "0.5rem") \ - CSS_PROPERTY("border-bottom", "1px solid var(--border)") \ + CSS_PROPERTY("border-bottom", "2px solid var(--accent)") \ + CSS_PROPERTY("display", "inline-block") \ + CSS_PROPERTY("padding-right", "2rem") \ CSS_END_SELECTOR() \ CSS_SELECTOR("h3") \ - CSS_PROPERTY("font-size", "1.2rem") \ + CSS_PROPERTY("font-size", "1.375rem") \ CSS_END_SELECTOR() \ CSS_SELECTOR("h4, h5, h6") \ - CSS_PROPERTY("font-size", "1.05rem") \ + CSS_PROPERTY("font-size", "1.125rem") \ CSS_END_SELECTOR() \ CSS_SELECTOR("p") \ - CSS_PROPERTY("margin", "0 0 1.25rem 0") \ + CSS_PROPERTY("margin", "0 0 1.5rem 0") \ CSS_END_SELECTOR() \ CSS_SELECTOR("strong") \ CSS_PROPERTY("font-weight", "600") \ @@ -250,11 +307,12 @@ Copyright: CSS_SELECTOR("a") \ CSS_PROPERTY("color", "var(--accent)") \ CSS_PROPERTY("text-decoration", "none") \ - CSS_PROPERTY("transition", "color 0.15s ease") \ + CSS_PROPERTY("border-bottom", "1px solid transparent") \ + CSS_PROPERTY("transition", "color 0.15s ease, border-color 0.15s ease") \ CSS_END_SELECTOR() \ CSS_SELECTOR("a:hover") \ CSS_PROPERTY("color", "var(--accent-hover)") \ - CSS_PROPERTY("text-decoration", "underline") \ + CSS_PROPERTY("border-bottom-color", "var(--accent-hover)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("a:visited") \ CSS_PROPERTY("color", "var(--accent)") \ @@ -262,71 +320,143 @@ Copyright: CSS_SELECTOR("a > strong") \ CSS_PROPERTY("color", "inherit") \ CSS_END_SELECTOR() \ - CSS_COMMENT("Header and TOC") \ + CSS_COMMENT("Header and title block") \ CSS_SELECTOR("#title-block-header") \ - CSS_PROPERTY("background", "var(--bg-surface)") \ - CSS_PROPERTY("border", "1px solid var(--border)") \ - CSS_PROPERTY("border-radius", "8px") \ - CSS_PROPERTY("padding", "1.5rem 2rem") \ - CSS_PROPERTY("margin", "2rem 0") \ - CSS_PROPERTY("box-shadow", "var(--shadow)") \ - CSS_PROPERTY("transition", "background-color 0.3s ease, border-color 0.3s ease") \ + CSS_PROPERTY("margin", "0 0 3rem 0") \ + CSS_PROPERTY("padding", "0") \ + CSS_PROPERTY("background", "transparent") \ + CSS_PROPERTY("border", "none") \ CSS_END_SELECTOR() \ - CSS_SELECTOR("#TOC") \ - CSS_PROPERTY("background", "var(--bg-surface)") \ - CSS_PROPERTY("border", "1px solid var(--border)") \ - CSS_PROPERTY("border-radius", "8px") \ - CSS_PROPERTY("padding", "1.25rem 1.5rem") \ - CSS_PROPERTY("margin", "1.5rem 0") \ - CSS_PROPERTY("box-shadow", "var(--shadow)") \ - CSS_PROPERTY("transition", "background-color 0.3s ease, border-color 0.3s ease") \ - CSS_END_SELECTOR() \ - CSS_SELECTOR("nav#TOC > ul") \ - CSS_PROPERTY("list-style-type", "decimal") \ - CSS_PROPERTY("padding-left", "1.5rem") \ - CSS_PROPERTY("margin", "0") \ - CSS_END_SELECTOR() \ - CSS_SELECTOR("nav#TOC ul li") \ - CSS_PROPERTY("margin-bottom", "0.6rem") \ - CSS_PROPERTY("color", "var(--text-muted)") \ - CSS_END_SELECTOR() \ - CSS_SELECTOR("nav#TOC ul li a") \ - CSS_PROPERTY("color", "var(--text)") \ - CSS_END_SELECTOR() \ - CSS_SELECTOR("nav#TOC ul li a:hover") \ - CSS_PROPERTY("color", "var(--accent)") \ - CSS_END_SELECTOR() \ - CSS_COMMENT("Title block styling") \ CSS_SELECTOR("h1.title") \ - CSS_PROPERTY("text-align", "center") \ + CSS_PROPERTY("font-size", "2.75rem") \ CSS_PROPERTY("margin-top", "0") \ CSS_PROPERTY("margin-bottom", "1rem") \ - CSS_PROPERTY("font-size", "1.6rem") \ CSS_PROPERTY("border-bottom", "none") \ CSS_PROPERTY("padding-bottom", "0") \ + CSS_PROPERTY("line-height", "1.15") \ CSS_END_SELECTOR() \ CSS_SELECTOR("p.author") \ - CSS_PROPERTY("text-align", "center") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ CSS_PROPERTY("text-transform", "uppercase") \ - CSS_PROPERTY("font-size", "0.85rem") \ - CSS_PROPERTY("letter-spacing", "0.05em") \ - CSS_PROPERTY("color", "var(--text-muted)") \ + CSS_PROPERTY("font-size", "0.8125rem") \ + CSS_PROPERTY("letter-spacing", "0.1em") \ + CSS_PROPERTY("color", "var(--accent)") \ CSS_PROPERTY("margin-bottom", "0.25rem") \ CSS_END_SELECTOR() \ CSS_SELECTOR("p.author::before") \ - CSS_PROPERTY("content", "\"by \"") \ - CSS_PROPERTY("text-transform", "lowercase") \ - CSS_PROPERTY("font-weight", "normal") \ + CSS_PROPERTY("content", "\"// \"") \ + CSS_PROPERTY("opacity", "0.5") \ CSS_END_SELECTOR() \ CSS_SELECTOR("p.date") \ - CSS_PROPERTY("text-align", "center") \ - CSS_PROPERTY("font-size", "0.85rem") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ + CSS_PROPERTY("font-size", "0.8125rem") \ CSS_PROPERTY("color", "var(--text-muted)") \ CSS_PROPERTY("margin-bottom", "0") \ CSS_END_SELECTOR() \ CSS_SELECTOR("p.date::before") \ CSS_PROPERTY("content", "\"\"") \ CSS_END_SELECTOR() \ + CSS_COMMENT("Table of Contents") \ + CSS_SELECTOR("#TOC") \ + CSS_PROPERTY("background", "transparent") \ + CSS_PROPERTY("border", "none") \ + CSS_PROPERTY("border-left", "3px solid var(--border-strong)") \ + CSS_PROPERTY("padding", "0 0 0 1.5rem") \ + CSS_PROPERTY("margin", "0 0 3rem 0") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("#TOC::before") \ + CSS_PROPERTY("content", "\"CONTENTS\"") \ + CSS_PROPERTY("display", "block") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ + CSS_PROPERTY("font-size", "0.6875rem") \ + CSS_PROPERTY("letter-spacing", "0.15em") \ + CSS_PROPERTY("color", "var(--text-muted)") \ + CSS_PROPERTY("margin-bottom", "0.75rem") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC > ul") \ + CSS_PROPERTY("list-style-type", "none") \ + CSS_PROPERTY("padding-left", "0") \ + CSS_PROPERTY("margin", "0") \ + CSS_PROPERTY("counter-reset", "toc-h1") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC > ul > li") \ + CSS_PROPERTY("margin-bottom", "0.5rem") \ + CSS_PROPERTY("counter-increment", "toc-h1") \ + CSS_PROPERTY("counter-reset", "toc-h2") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC > ul > li::before") \ + CSS_PROPERTY("content", "counter(toc-h1) \".\"") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ + CSS_PROPERTY("font-size", "0.75rem") \ + CSS_PROPERTY("color", "var(--text-muted)") \ + CSS_PROPERTY("margin-right", "0.75rem") \ + CSS_END_SELECTOR() \ + CSS_COMMENT("Nested TOC items") \ + CSS_SELECTOR("nav#TOC ul ul") \ + CSS_PROPERTY("list-style-type", "none") \ + CSS_PROPERTY("padding-left", "1.5rem") \ + CSS_PROPERTY("margin", "0.5rem 0 0 0") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC ul ul li") \ + CSS_PROPERTY("margin-bottom", "0.35rem") \ + CSS_PROPERTY("counter-increment", "toc-h2") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC ul ul li::before") \ + CSS_PROPERTY("content", "counter(toc-h1) \".\" counter(toc-h2)") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ + CSS_PROPERTY("font-size", "0.6875rem") \ + CSS_PROPERTY("color", "var(--text-muted)") \ + CSS_PROPERTY("margin-right", "0.625rem") \ + CSS_PROPERTY("opacity", "0.7") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC ul li a") \ + CSS_PROPERTY("color", "var(--text)") \ + CSS_PROPERTY("font-size", "0.9375rem") \ + CSS_PROPERTY("border-bottom", "none") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC ul ul li a") \ + CSS_PROPERTY("font-size", "0.875rem") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("nav#TOC ul li a:hover") \ + CSS_PROPERTY("color", "var(--accent)") \ + CSS_END_SELECTOR() \ + CSS_COMMENT("Collapsible TOC") \ + CSS_SELECTOR("#TOC.is-collapsible") \ + CSS_PROPERTY("position", "relative") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("#TOC.is-collapsible.is-collapsed > ul") \ + CSS_PROPERTY("max-height", "14rem") \ + CSS_PROPERTY("overflow", "hidden") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("#TOC.is-collapsible.is-collapsed::after") \ + CSS_PROPERTY("content", "\"\"") \ + CSS_PROPERTY("position", "absolute") \ + CSS_PROPERTY("bottom", "2.5rem") \ + CSS_PROPERTY("left", "0") \ + CSS_PROPERTY("right", "0") \ + CSS_PROPERTY("height", "4rem") \ + CSS_PROPERTY("background", "linear-gradient(to bottom, transparent, var(--bg))") \ + CSS_PROPERTY("pointer-events", "none") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR(".toc-toggle") \ + CSS_PROPERTY("display", "block") \ + CSS_PROPERTY("margin-top", "0.75rem") \ + CSS_PROPERTY("padding", "0.5rem 1rem") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ + CSS_PROPERTY("font-size", "0.75rem") \ + CSS_PROPERTY("letter-spacing", "0.05em") \ + CSS_PROPERTY("text-transform", "uppercase") \ + CSS_PROPERTY("color", "var(--accent)") \ + CSS_PROPERTY("background", "var(--accent-subtle)") \ + CSS_PROPERTY("border", "1px solid var(--accent)") \ + CSS_PROPERTY("border-radius", "4px") \ + CSS_PROPERTY("cursor", "pointer") \ + CSS_PROPERTY("transition", "all 0.15s ease") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR(".toc-toggle:hover") \ + CSS_PROPERTY("background", "var(--accent)") \ + CSS_PROPERTY("color", "var(--bg)") \ + CSS_END_SELECTOR() \ CSS_COMMENT("Main content") \ CSS_SELECTOR("section") \ CSS_PROPERTY("flex", "1 0 auto") \ @@ -340,15 +470,15 @@ Copyright: CSS_SELECTOR("img") \ CSS_PROPERTY("max-width", "100%") \ CSS_PROPERTY("height", "auto") \ - CSS_PROPERTY("border-radius", "6px") \ - CSS_PROPERTY("border", "1px solid var(--border)") \ + CSS_PROPERTY("border-radius", "4px") \ + CSS_PROPERTY("border", "none") \ CSS_PROPERTY("background", "var(--bg-surface)") \ CSS_PROPERTY("float", "right") \ CSS_PROPERTY("clear", "right") \ - CSS_PROPERTY("margin-left", "1.5rem") \ + CSS_PROPERTY("margin-left", "2rem") \ CSS_PROPERTY("margin-bottom", "1rem") \ - CSS_PROPERTY("max-height", "16rem") \ - CSS_PROPERTY("transition", "border-color 0.3s ease") \ + CSS_PROPERTY("max-height", "14rem") \ + CSS_PROPERTY("box-shadow", "var(--shadow-lg)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("figcaption") \ CSS_PROPERTY("display", "none") \ @@ -356,46 +486,54 @@ Copyright: CSS_SELECTOR("blockquote img") \ CSS_PROPERTY("float", "none") \ CSS_PROPERTY("clear", "none") \ - CSS_PROPERTY("max-height", "28rem") \ + CSS_PROPERTY("max-height", "24rem") \ CSS_PROPERTY("margin", "0 auto") \ CSS_PROPERTY("display", "block") \ CSS_END_SELECTOR() \ CSS_SELECTOR(".zoomable") \ CSS_PROPERTY("cursor", "zoom-in") \ CSS_PROPERTY("max-width", "100%") \ - CSS_PROPERTY("max-height", "24rem") \ + CSS_PROPERTY("max-height", "22rem") \ + CSS_PROPERTY("transition", "transform 0.2s ease, box-shadow 0.2s ease") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR(".zoomable:hover") \ + CSS_PROPERTY("transform", "scale(1.01)") \ + CSS_PROPERTY("box-shadow", "0 8px 30px rgba(0,0,0,0.15)") \ CSS_END_SELECTOR() \ CSS_COMMENT("Blockquotes") \ CSS_SELECTOR("blockquote") \ - CSS_PROPERTY("margin", "1.5rem 0") \ - CSS_PROPERTY("padding", "0.75rem 1.25rem") \ - CSS_PROPERTY("border-left", "3px solid var(--accent)") \ - CSS_PROPERTY("background", "var(--bg-surface)") \ - CSS_PROPERTY("border-radius", "0 6px 6px 0") \ + CSS_PROPERTY("margin", "2rem 0") \ + CSS_PROPERTY("padding", "1.25rem 1.5rem") \ + CSS_PROPERTY("border-left", "4px solid var(--accent)") \ + CSS_PROPERTY("background", "var(--accent-subtle)") \ + CSS_PROPERTY("border-radius", "0 8px 8px 0") \ CSS_PROPERTY("color", "var(--text)") \ CSS_PROPERTY("clear", "both") \ + CSS_PROPERTY("font-style", "italic") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("blockquote p:last-child") \ + CSS_PROPERTY("margin-bottom", "0") \ CSS_END_SELECTOR() \ CSS_COMMENT("Code blocks") \ CSS_SELECTOR("code") \ - CSS_PROPERTY("font-family", "\"Fira Code\", \"SF Mono\", Monaco, monospace") \ - CSS_PROPERTY("font-size", "0.9em") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ + CSS_PROPERTY("font-size", "0.875em") \ CSS_PROPERTY("background", "var(--code-bg)") \ CSS_PROPERTY("color", "var(--code-text)") \ - CSS_PROPERTY("padding", "0.15em 0.4em") \ + CSS_PROPERTY("padding", "0.2em 0.4em") \ CSS_PROPERTY("border-radius", "4px") \ - CSS_PROPERTY("transition", "background-color 0.3s ease") \ CSS_END_SELECTOR() \ CSS_SELECTOR("pre") \ CSS_PROPERTY("background", "var(--code-bg)") \ - CSS_PROPERTY("border", "1px solid var(--border)") \ - CSS_PROPERTY("border-radius", "6px") \ - CSS_PROPERTY("padding", "1rem 1.25rem") \ - CSS_PROPERTY("margin", "1.25rem 0") \ + CSS_PROPERTY("border", "none") \ + CSS_PROPERTY("border-radius", "8px") \ + CSS_PROPERTY("padding", "1.25rem 1.5rem") \ + CSS_PROPERTY("margin", "1.5rem 0") \ CSS_PROPERTY("overflow-x", "auto") \ CSS_PROPERTY("max-height", "500px") \ - CSS_PROPERTY("font-size", "0.88rem") \ - CSS_PROPERTY("line-height", "1.6") \ - CSS_PROPERTY("transition", "background-color 0.3s ease, border-color 0.3s ease") \ + CSS_PROPERTY("font-size", "0.875rem") \ + CSS_PROPERTY("line-height", "1.65") \ + CSS_PROPERTY("box-shadow", "var(--shadow-lg)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("pre code") \ CSS_PROPERTY("background", "transparent") \ @@ -405,12 +543,12 @@ Copyright: CSS_END_SELECTOR() \ CSS_SELECTOR("div.sourceCode") \ CSS_PROPERTY("background", "var(--code-bg)") \ - CSS_PROPERTY("border", "1px solid var(--border)") \ - CSS_PROPERTY("border-radius", "6px") \ - CSS_PROPERTY("margin", "1.25rem 0") \ + CSS_PROPERTY("border", "none") \ + CSS_PROPERTY("border-radius", "8px") \ + CSS_PROPERTY("margin", "1.5rem 0") \ CSS_PROPERTY("overflow", "auto") \ CSS_PROPERTY("max-height", "500px") \ - CSS_PROPERTY("transition", "background-color 0.3s ease, border-color 0.3s ease") \ + CSS_PROPERTY("box-shadow", "var(--shadow-lg)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("div.sourceCode pre") \ CSS_PROPERTY("margin", "0") \ @@ -418,6 +556,7 @@ Copyright: CSS_PROPERTY("border-radius", "0") \ CSS_PROPERTY("max-height", "none") \ CSS_PROPERTY("overflow", "visible") \ + CSS_PROPERTY("box-shadow", "none") \ CSS_END_SELECTOR() \ CSS_SELECTOR("pre.numberSource") \ CSS_PROPERTY("padding-left", "3.5em") \ @@ -431,16 +570,17 @@ Copyright: CSS_PROPERTY("margin-right", "1em") \ CSS_PROPERTY("color", "var(--text-muted)") \ CSS_PROPERTY("text-align", "right") \ + CSS_PROPERTY("opacity", "0.5") \ CSS_END_SELECTOR() \ CSS_COMMENT("Scrollbar styling") \ CSS_SELECTOR("pre::-webkit-scrollbar, code::-webkit-scrollbar, div.sourceCode::-webkit-scrollbar") \ - CSS_PROPERTY("width", "10px") \ - CSS_PROPERTY("height", "10px") \ - CSS_PROPERTY("background", "var(--scrollbar-bg)") \ + CSS_PROPERTY("width", "8px") \ + CSS_PROPERTY("height", "8px") \ + CSS_PROPERTY("background", "transparent") \ CSS_END_SELECTOR() \ CSS_SELECTOR("pre::-webkit-scrollbar-thumb, code::-webkit-scrollbar-thumb, div.sourceCode::-webkit-scrollbar-thumb") \ CSS_PROPERTY("background", "var(--scrollbar-thumb)") \ - CSS_PROPERTY("border-radius", "5px") \ + CSS_PROPERTY("border-radius", "4px") \ CSS_END_SELECTOR() \ CSS_SELECTOR("pre::-webkit-scrollbar-track, code::-webkit-scrollbar-track, div.sourceCode::-webkit-scrollbar-track") \ CSS_PROPERTY("background", "var(--scrollbar-bg)") \ @@ -449,25 +589,28 @@ Copyright: CSS_SELECTOR("table") \ CSS_PROPERTY("width", "100%") \ CSS_PROPERTY("border-collapse", "collapse") \ - CSS_PROPERTY("margin", "1.5rem 0") \ - CSS_PROPERTY("font-size", "0.92rem") \ + CSS_PROPERTY("margin", "2rem 0") \ + CSS_PROPERTY("font-size", "0.9375rem") \ CSS_PROPERTY("background", "var(--bg-surface)") \ CSS_PROPERTY("border", "1px solid var(--border)") \ - CSS_PROPERTY("border-radius", "6px") \ + CSS_PROPERTY("border-radius", "8px") \ CSS_PROPERTY("overflow", "hidden") \ - CSS_PROPERTY("transition", "background-color 0.3s ease, border-color 0.3s ease") \ CSS_END_SELECTOR() \ CSS_SELECTOR("thead") \ CSS_PROPERTY("background", "var(--table-header)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("th, td") \ - CSS_PROPERTY("padding", "0.7rem 1rem") \ + CSS_PROPERTY("padding", "0.875rem 1.25rem") \ CSS_PROPERTY("text-align", "left") \ CSS_PROPERTY("border-bottom", "1px solid var(--border)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("th") \ + CSS_PROPERTY("font-family", "var(--font-mono)") \ CSS_PROPERTY("font-weight", "600") \ - CSS_PROPERTY("color", "var(--text)") \ + CSS_PROPERTY("font-size", "0.75rem") \ + CSS_PROPERTY("text-transform", "uppercase") \ + CSS_PROPERTY("letter-spacing", "0.05em") \ + CSS_PROPERTY("color", "var(--text-muted)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("tbody tr:nth-child(even)") \ CSS_PROPERTY("background", "var(--table-row-alt)") \ @@ -477,15 +620,14 @@ Copyright: CSS_END_SELECTOR() \ CSS_COMMENT("Footer") \ CSS_SELECTOR("footer") \ - CSS_PROPERTY("margin-top", "3rem") \ - CSS_PROPERTY("padding", "1.5rem") \ + CSS_PROPERTY("margin-top", "4rem") \ + CSS_PROPERTY("padding", "2rem 0") \ CSS_PROPERTY("border-top", "1px solid var(--border)") \ CSS_PROPERTY("background", "transparent") \ CSS_PROPERTY("color", "var(--text-muted)") \ - CSS_PROPERTY("font-size", "0.85rem") \ + CSS_PROPERTY("font-size", "0.875rem") \ CSS_PROPERTY("text-align", "center") \ CSS_PROPERTY("flex-shrink", "0") \ - CSS_PROPERTY("transition", "border-color 0.3s ease") \ CSS_END_SELECTOR() \ CSS_SELECTOR("footer > span") \ CSS_PROPERTY("display", "flex") \ @@ -496,14 +638,15 @@ Copyright: CSS_END_SELECTOR() \ CSS_SELECTOR("footer a") \ CSS_PROPERTY("color", "var(--text-muted)") \ + CSS_PROPERTY("border-bottom", "none") \ CSS_END_SELECTOR() \ CSS_SELECTOR("footer a:hover") \ CSS_PROPERTY("color", "var(--accent)") \ CSS_END_SELECTOR() \ - CSS_SELECTOR(".hearth") \ + CSS_SELECTOR(".hearth") \ CSS_PROPERTY("display", "inline-flex") \ CSS_PROPERTY("color", "var(--heart)") \ - CSS_PROPERTY("margin", "0 0.15rem") \ + CSS_PROPERTY("margin", "0 0.25rem") \ CSS_PROPERTY("animation", "pulse 1.5s ease-in-out infinite") \ CSS_END_SELECTOR() \ CSS_SELECTOR("b.author") \ @@ -514,19 +657,17 @@ Copyright: CSS_KEYFRAMES("pulse") \ CSS_KEYFRAME("0%, 100%") \ CSS_KEYFRAME_PROPERTY("transform", "scale(1)") \ - CSS_KEYFRAME_PROPERTY("opacity", "1") \ CSS_KEYFRAME_END() \ CSS_KEYFRAME("50%") \ - CSS_KEYFRAME_PROPERTY("transform", "scale(1.15)") \ - CSS_KEYFRAME_PROPERTY("opacity", "0.8") \ + CSS_KEYFRAME_PROPERTY("transform", "scale(1.2)") \ CSS_KEYFRAME_END() \ CSS_KEYFRAMES_END() \ CSS_COMMENT("Image modal") \ CSS_SELECTOR(".modal") \ CSS_PROPERTY("position", "fixed") \ CSS_PROPERTY("inset", "0") \ - CSS_PROPERTY("background", "rgba(0, 0, 0, 0.85)") \ - CSS_PROPERTY("backdrop-filter", "blur(4px)") \ + CSS_PROPERTY("background", "rgba(0, 0, 0, 0.9)") \ + CSS_PROPERTY("backdrop-filter", "blur(8px)") \ CSS_PROPERTY("z-index", "10000") \ CSS_PROPERTY("cursor", "zoom-out") \ CSS_PROPERTY("display", "flex") \ @@ -537,8 +678,8 @@ Copyright: CSS_SELECTOR(".modal img") \ CSS_PROPERTY("max-height", "90vh") \ CSS_PROPERTY("max-width", "95vw") \ - CSS_PROPERTY("border-radius", "8px") \ - CSS_PROPERTY("box-shadow", "0 8px 32px rgba(0,0,0,0.4)") \ + CSS_PROPERTY("border-radius", "4px") \ + CSS_PROPERTY("box-shadow", "0 25px 50px rgba(0,0,0,0.5)") \ CSS_PROPERTY("border", "none") \ CSS_PROPERTY("float", "none") \ CSS_PROPERTY("margin", "0") \ @@ -554,26 +695,29 @@ Copyright: CSS_COMMENT("Horizontal rule") \ CSS_SELECTOR("hr") \ CSS_PROPERTY("border", "none") \ - CSS_PROPERTY("height", "1px") \ - CSS_PROPERTY("background", "var(--border)") \ - CSS_PROPERTY("margin", "2.5rem 0") \ + CSS_PROPERTY("height", "2px") \ + CSS_PROPERTY("background", "linear-gradient(90deg, var(--accent) 0%, transparent 100%)") \ + CSS_PROPERTY("margin", "3rem 0") \ CSS_END_SELECTOR() \ CSS_COMMENT("Lists") \ CSS_SELECTOR("ul, ol") \ CSS_PROPERTY("padding-left", "1.5rem") \ - CSS_PROPERTY("margin", "1rem 0") \ + CSS_PROPERTY("margin", "1.5rem 0") \ CSS_END_SELECTOR() \ CSS_SELECTOR("li") \ - CSS_PROPERTY("margin-bottom", "0.4rem") \ + CSS_PROPERTY("margin-bottom", "0.5rem") \ + CSS_END_SELECTOR() \ + CSS_SELECTOR("li::marker") \ + CSS_PROPERTY("color", "var(--accent)") \ CSS_END_SELECTOR() \ CSS_COMMENT("Syntax highlighting - Pandoc classes") \ CSS_SELECTOR("code span.kw") \ CSS_PROPERTY("color", "var(--syn-keyword)") \ - CSS_PROPERTY("font-weight", "600") \ + CSS_PROPERTY("font-weight", "500") \ CSS_END_SELECTOR() \ CSS_SELECTOR("code span.cf") \ CSS_PROPERTY("color", "var(--syn-control)") \ - CSS_PROPERTY("font-weight", "600") \ + CSS_PROPERTY("font-weight", "500") \ CSS_END_SELECTOR() \ CSS_SELECTOR("code span.dt") \ CSS_PROPERTY("color", "var(--syn-type)") \ @@ -607,11 +751,11 @@ Copyright: CSS_PROPERTY("color", "var(--syn-constant)") \ CSS_END_SELECTOR() \ CSS_SELECTOR("code span.al, code span.er") \ - CSS_PROPERTY("color", "#dc2626") \ + CSS_PROPERTY("color", "#ef4444") \ CSS_PROPERTY("font-weight", "600") \ CSS_END_SELECTOR() \ CSS_SELECTOR("code span.wa") \ - CSS_PROPERTY("color", "#ca8a04") \ + CSS_PROPERTY("color", "#eab308") \ CSS_PROPERTY("font-style", "italic") \ CSS_END_SELECTOR() \ CSS_SELECTOR("code span.an, code span.in, code span.do") \ @@ -621,65 +765,53 @@ Copyright: CSS_SELECTOR("code span.ot, code span.at, code span.pp") \ CSS_PROPERTY("color", "var(--syn-special)") \ CSS_END_SELECTOR() \ - CSS_COMMENT("Accent color picker button") \ - CSS_SELECTOR(".accent-picker") \ - CSS_PROPERTY("position", "fixed") \ - CSS_PROPERTY("top", "1.25rem") \ - CSS_PROPERTY("right", "4.5rem") \ - CSS_PROPERTY("width", "2.75rem") \ - CSS_PROPERTY("height", "2.75rem") \ - CSS_PROPERTY("border-radius", "50%") \ - CSS_PROPERTY("border", "1px solid var(--border)") \ - CSS_PROPERTY("background", "var(--accent)") \ - CSS_PROPERTY("cursor", "pointer") \ - CSS_PROPERTY("box-shadow", "var(--shadow)") \ - CSS_PROPERTY("transition", "all 0.2s ease") \ - CSS_PROPERTY("z-index", "1000") \ - CSS_END_SELECTOR() \ - CSS_SELECTOR(".accent-picker:hover") \ - CSS_PROPERTY("transform", "scale(1.1)") \ - CSS_PROPERTY("box-shadow", "var(--shadow-lg)") \ - CSS_END_SELECTOR() \ CSS_COMMENT("Responsive - Tablet") \ "@media (max-width: 900px) {\\n" \ - " body { padding: 0 1rem; }\\n" \ - " img { max-height: 14rem; }\\n" \ - " .zoomable { max-height: 20rem; }\\n" \ - " #title-block-header, #TOC { padding: 1rem 1.25rem; }\\n" \ - " .accent-picker { right: 4rem; width: 2.5rem; height: 2.5rem; }\\n" \ + " body { padding: 4.5rem 1.5rem 0; }\\n" \ + " .control-bar { padding: 0 1.5rem; }\\n" \ + " h1.title { font-size: 2.25rem; }\\n" \ + " img { max-height: 12rem; }\\n" \ + " .zoomable { max-height: 18rem; }\\n" \ "}\\n" \ CSS_COMMENT("Responsive - Mobile") \ "@media (max-width: 640px) {\\n" \ - " body { font-size: 0.92rem; padding: 0 0.75rem; }\\n" \ - " h1 { font-size: 1.4rem; }\\n" \ - " h2 { font-size: 1.2rem; }\\n" \ - " h3 { font-size: 1.05rem; }\\n" \ - " h1.title { font-size: 1.3rem; }\\n" \ - " img { float: none; margin: 1rem auto; display: block; max-height: 12rem; }\\n" \ - " blockquote img { max-height: 18rem; }\\n" \ - " .zoomable { max-height: 16rem; max-width: 100%; }\\n" \ - " pre { font-size: 0.8rem; padding: 0.75rem; }\\n" \ - " code { font-size: 0.85em; }\\n" \ - " table { font-size: 0.85rem; }\\n" \ - " th, td { padding: 0.5rem 0.6rem; }\\n" \ - " #title-block-header, #TOC { margin: 1rem 0; padding: 1rem; }\\n" \ - " footer { margin-top: 2rem; padding: 1rem; }\\n" \ - " .theme-toggle { top: 0.6rem; right: 0.6rem; width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }\\n" \ - " .accent-picker { top: 0.6rem; right: 3.25rem; width: 2.25rem; height: 2.25rem; }\\n" \ - " nav#TOC ul { padding-left: 1.25rem; }\\n" \ - " nav#TOC ul li { font-size: 0.9rem; margin-bottom: 0.5rem; }\\n" \ + " body { font-size: 1rem; padding: 4rem 1rem 0; }\\n" \ + " .control-bar { padding: 0 1rem; height: 3.25rem; }\\n" \ + " .control-bar__brand { font-size: 1rem; }\\n" \ + " .ctrl-btn { width: 2rem; height: 2rem; font-size: 0.875rem; }\\n" \ + " h1 { font-size: 1.75rem; }\\n" \ + " h1.title { font-size: 1.75rem; }\\n" \ + " h2 { font-size: 1.375rem; padding-right: 0; display: block; }\\n" \ + " h3 { font-size: 1.125rem; }\\n" \ + " img { float: none; margin: 1.5rem auto; display: block; max-height: 10rem; }\\n" \ + " blockquote img { max-height: 16rem; }\\n" \ + " .zoomable { max-height: 14rem; max-width: 100%; }\\n" \ + " pre { font-size: 0.8125rem; padding: 1rem; }\\n" \ + " code { font-size: 0.8125em; }\\n" \ + " table { font-size: 0.875rem; }\\n" \ + " th, td { padding: 0.625rem 0.875rem; }\\n" \ + " footer { margin-top: 3rem; padding: 1.5rem 0; }\\n" \ + " #TOC { padding-left: 1rem; }\\n" \ + " nav#TOC ul li a { font-size: 0.875rem; }\\n" \ + " nav#TOC ul ul li a { font-size: 0.8125rem; }\\n" \ "}\\n" \ CSS_COMMENT("Responsive - Small mobile") \ "@media (max-width: 380px) {\\n" \ - " body { font-size: 0.88rem; }\\n" \ - " h1 { font-size: 1.25rem; }\\n" \ - " h1.title { font-size: 1.15rem; }\\n" \ + " body { font-size: 0.9375rem; padding: 3.75rem 0.75rem 0; }\\n" \ + " .control-bar { padding: 0 0.75rem; height: 3rem; }\\n" \ + " .control-bar__brand { font-size: 0.9375rem; }\\n" \ + " h1 { font-size: 1.5rem; }\\n" \ + " h1.title { font-size: 1.5rem; }\\n" \ " pre { font-size: 0.75rem; }\\n" \ - " .theme-toggle, .accent-picker { width: 2rem; height: 2rem; font-size: 1rem; }\\n" \ - " .accent-picker { right: 2.75rem; }\\n" \ "}\\n" #define HEAD_HTML \ + HTML_RAWTEXT("") \ + HTML_NEWLINE() \ + HTML_RAWTEXT("") \ + HTML_NEWLINE() \ + HTML_RAWTEXT("") \ + HTML_NEWLINE() \ HTML_RAWTEXT("") \ HTML_NEWLINE() \ HTML_RAWTEXT("") \ @@ -698,7 +830,7 @@ Copyright: HTML_RAWTEXT("var a=localStorage.getItem('accent-preference');") \ HTML_RAWTEXT("if(!t)t=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';") \ HTML_RAWTEXT("if(t==='dark')document.documentElement.classList.add('dark');") \ - HTML_RAWTEXT("if(a&&a!=='blue')document.documentElement.classList.add('accent-'+a);") \ + HTML_RAWTEXT("if(a)document.documentElement.classList.add('accent-'+a);") \ HTML_RAWTEXT("})();") \ HTML_TAG_CLOSE("script") \ HTML_NEWLINE() @@ -736,13 +868,11 @@ Copyright: #define MAIN_JS \ HTML_RAWTEXT("(function() {") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Theme management") \ - HTML_NEWLINE() \ HTML_RAWTEXT(" var THEME_KEY = 'theme-preference';") \ HTML_NEWLINE() \ HTML_RAWTEXT(" var ACCENT_KEY = 'accent-preference';") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" var ACCENTS = ['blue', 'green', 'amber', 'cyan', 'rose'];") \ + HTML_RAWTEXT(" var ACCENTS = ['green', 'amber', 'cyan', 'rose', 'blue'];") \ HTML_NEWLINE() \ HTML_RAWTEXT(" function getThemePreference() {") \ HTML_NEWLINE() \ @@ -772,11 +902,9 @@ Copyright: HTML_NEWLINE() \ HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Accent color management") \ - HTML_NEWLINE() \ HTML_RAWTEXT(" function getAccentPreference() {") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" return localStorage.getItem(ACCENT_KEY) || 'blue';") \ + HTML_RAWTEXT(" return localStorage.getItem(ACCENT_KEY);") \ HTML_NEWLINE() \ HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ @@ -790,13 +918,17 @@ Copyright: HTML_NEWLINE() \ HTML_RAWTEXT(" });") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" if (accent !== 'blue') {") \ + HTML_RAWTEXT(" if (accent) {") \ HTML_NEWLINE() \ HTML_RAWTEXT(" html.classList.add('accent-' + accent);") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" }") \ + HTML_RAWTEXT(" localStorage.setItem(ACCENT_KEY, accent);") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" localStorage.setItem(ACCENT_KEY, accent);") \ + HTML_RAWTEXT(" } else {") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" localStorage.removeItem(ACCENT_KEY);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ @@ -804,62 +936,76 @@ Copyright: HTML_NEWLINE() \ HTML_RAWTEXT(" var current = getAccentPreference();") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" var idx = ACCENTS.indexOf(current);") \ + HTML_RAWTEXT(" var idx = current ? ACCENTS.indexOf(current) : -1;") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" var next = ACCENTS[(idx + 1) % ACCENTS.length];") \ + HTML_RAWTEXT(" var nextIdx = (idx + 1) % (ACCENTS.length + 1);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var next = nextIdx < ACCENTS.length ? ACCENTS[nextIdx] : null;") \ HTML_NEWLINE() \ HTML_RAWTEXT(" setAccent(next);") \ HTML_NEWLINE() \ HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Apply preferences immediately") \ - HTML_NEWLINE() \ HTML_RAWTEXT(" setTheme(getThemePreference());") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" setAccent(getAccentPreference());") \ + HTML_RAWTEXT(" var acc = getAccentPreference();") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Create theme toggle button") \ + HTML_RAWTEXT(" if (acc) setAccent(acc);") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" function createToggle() {") \ + HTML_RAWTEXT(" function createControlBar() {") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" var btn = document.createElement('button');") \ + HTML_RAWTEXT(" var bar = document.createElement('div');") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.className = 'theme-toggle';") \ + HTML_RAWTEXT(" bar.className = 'control-bar';") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.setAttribute('aria-label', 'Toggle theme');") \ + HTML_RAWTEXT(" var brand = document.createElement('a');") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.setAttribute('title', 'Toggle dark/light mode (Alt+T)');") \ + HTML_RAWTEXT(" brand.className = 'control-bar__brand';") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.innerHTML = '☀'") \ + HTML_RAWTEXT(" brand.href = '/index.html';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" brand.textContent = 'DZONERZY';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var actions = document.createElement('div');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" actions.className = 'control-bar__actions';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var accentBtn = document.createElement('button');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" accentBtn.className = 'ctrl-btn ctrl-btn--accent';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" accentBtn.setAttribute('aria-label', 'Change accent color');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" accentBtn.setAttribute('title', 'Cycle accent color (Alt+A)');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" accentBtn.addEventListener('click', cycleAccent);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var themeBtn = document.createElement('button');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" themeBtn.className = 'ctrl-btn';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" themeBtn.setAttribute('aria-label', 'Toggle theme');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" themeBtn.setAttribute('title', 'Toggle dark/light mode (Alt+T)');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" themeBtn.innerHTML = '☀'") \ HTML_NEWLINE() \ HTML_RAWTEXT(" + '☾';") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.addEventListener('click', toggleTheme);") \ + HTML_RAWTEXT(" themeBtn.addEventListener('click', toggleTheme);") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" document.body.appendChild(btn);") \ + HTML_RAWTEXT(" actions.appendChild(accentBtn);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" actions.appendChild(themeBtn);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" bar.appendChild(brand);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" bar.appendChild(actions);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" document.body.insertBefore(bar, document.body.firstChild);") \ HTML_NEWLINE() \ HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Create accent picker button") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" function createAccentPicker() {") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" var btn = document.createElement('button');") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.className = 'accent-picker';") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.setAttribute('aria-label', 'Change accent color');") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.setAttribute('title', 'Cycle accent color (Alt+A)');") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" btn.addEventListener('click', cycleAccent);") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" document.body.appendChild(btn);") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" }") \ - HTML_NEWLINE() \ - HTML_RAWTEXT(" // Listen for system theme changes") \ - HTML_NEWLINE() \ HTML_RAWTEXT(" window.matchMedia('(prefers-color-scheme: dark)')") \ HTML_NEWLINE() \ HTML_RAWTEXT(" .addEventListener('change', function(e) {") \ @@ -872,7 +1018,35 @@ Copyright: HTML_NEWLINE() \ HTML_RAWTEXT(" });") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Image zoom functionality") \ + HTML_RAWTEXT(" function setupCollapsibleTOC() {") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var toc = document.getElementById('TOC');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" if (!toc) return;") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var items = toc.querySelectorAll('li').length;") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" if (items < 12) return;") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" toc.classList.add('is-collapsible', 'is-collapsed');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var btn = document.createElement('button');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" btn.className = 'toc-toggle';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" btn.textContent = 'Show all ' + items + ' sections';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" btn.addEventListener('click', function() {") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" var collapsed = toc.classList.toggle('is-collapsed');") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" btn.textContent = collapsed ? 'Show all ' + items + ' sections' : 'Collapse';") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" });") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" toc.appendChild(btn);") \ + HTML_NEWLINE() \ + HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ HTML_RAWTEXT(" function zoomImages() {") \ HTML_NEWLINE() \ @@ -906,8 +1080,6 @@ Copyright: HTML_NEWLINE() \ HTML_RAWTEXT(" }") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Keyboard shortcuts") \ - HTML_NEWLINE() \ HTML_RAWTEXT(" document.addEventListener('keydown', function(e) {") \ HTML_NEWLINE() \ HTML_RAWTEXT(" if (e.altKey && e.key === 't') toggleTheme();") \ @@ -916,13 +1088,11 @@ Copyright: HTML_NEWLINE() \ HTML_RAWTEXT(" });") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" // Initialize on DOM ready") \ - HTML_NEWLINE() \ HTML_RAWTEXT(" document.addEventListener('DOMContentLoaded', function() {") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" createToggle();") \ + HTML_RAWTEXT(" createControlBar();") \ HTML_NEWLINE() \ - HTML_RAWTEXT(" createAccentPicker();") \ + HTML_RAWTEXT(" setupCollapsibleTOC();") \ HTML_NEWLINE() \ HTML_RAWTEXT(" zoomImages();") \ HTML_NEWLINE() \