From 11fbf2f331d00a17d269ca38579c48fd2cf813ae Mon Sep 17 00:00:00 2001 From: Zaine Arch Date: Thu, 7 May 2026 00:12:39 +0100 Subject: [PATCH] retro --- assets/scripts/zhd.js | 25 +++++++ assets/styles/style.css | 149 ++++++++++++++++++++++++++++++++++++++++ assets/styles/zhd.css | 112 ++++++++++++++++++++++++++++++ build-site.el | 6 ++ 4 files changed, 292 insertions(+) diff --git a/assets/scripts/zhd.js b/assets/scripts/zhd.js index 2d6ed9a..90cf590 100644 --- a/assets/scripts/zhd.js +++ b/assets/scripts/zhd.js @@ -151,11 +151,36 @@ }); } + function initModeToggle() { + const root = document.documentElement; + const button = document.getElementById("db-mode-toggle"); + const label = document.getElementById("db-mode-label"); + if (!root || !button) return; + + const storageKey = "db-mode"; + const saved = localStorage.getItem(storageKey); + + const setMode = (mode) => { + const isRetro = mode === "retro"; + root.dataset.mode = isRetro ? "retro" : "normal"; + button.setAttribute("aria-pressed", String(isRetro)); + button.setAttribute("title", isRetro ? "Switch to normal mode" : "Switch to retro mode"); + if (label) label.textContent = isRetro ? "Normal mode" : "Retro mode"; + localStorage.setItem(storageKey, root.dataset.mode); + }; + + setMode(saved === "retro" ? "retro" : "normal"); + button.addEventListener("click", () => { + setMode(root.dataset.mode === "retro" ? "normal" : "retro"); + }); + } + function init() { updateGreeting(); updateClock(); updateStats(); initCommandFilter(); + initModeToggle(); setInterval(updateClock, 1000); loadFeed("/blogs/blogs-list.html", "db-feed-blogs", 6, "/blogs"); diff --git a/assets/styles/style.css b/assets/styles/style.css index 4a07150..cc97963 100644 --- a/assets/styles/style.css +++ b/assets/styles/style.css @@ -63,6 +63,35 @@ --kb-card-text: #e5e7eb; } + +:root[data-mode="retro"]{ + --bg: #fff9df; + --fg: #241f18; + --link: #275db3; + --heading: #8a2f24; + --code-bg: #efe1b8; + --active-toc: #e2d09d; + --note-color: #554a37; + --border: #29251c; + --chip-bg: #f3e9c6; + --chip-fg: #241f18; + --muted: #5c513d; +} + +:root[data-theme="dark"][data-mode="retro"]{ + --bg: #101611; + --fg: #d9f7d7; + --link: #7cc7ff; + --heading: #71d08f; + --code-bg: #18251f; + --active-toc: #244531; + --note-color: #a9c9ad; + --border: #71d08f; + --chip-bg: #18251f; + --chip-fg: #d9f7d7; + --muted: #a9c9ad; +} + @font-face { font-family: 'Times'; src: url('../fonts/times.ttf') format('truetype'); @@ -81,8 +110,26 @@ html, body{ font-family: 'Noto', system-ui, sans-serif; } +:root[data-mode="retro"] body{ + font-family: 'Times', 'Courier New', monospace; + background-image: + repeating-linear-gradient( + 0deg, + color-mix(in oklab, var(--fg) 4%, transparent) 0, + color-mix(in oklab, var(--fg) 4%, transparent) 1px, + transparent 1px, + transparent 14px + ); +} + h1, h2, h3{ color: var(--heading); } +:root[data-mode="retro"] h1, +:root[data-mode="retro"] h2, +:root[data-mode="retro"] h3{ + text-shadow: 1px 1px 0 color-mix(in oklab, var(--heading) 22%, transparent); +} + a { color: var(--link); text-decoration: none; @@ -100,15 +147,90 @@ a:hover { padding: .5rem 1rem; border-radius: 6px; } + +:root[data-mode="retro"] .banner-header{ + border: 2px solid var(--border); + border-radius: 0; + background: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%); + box-shadow: 5px 5px 0 color-mix(in oklab, var(--border) 72%, transparent); +} + .banner-logo{ height: 80px; width: auto; margin-right: 1.5rem; border-radius: 50%; } + +:root[data-mode="retro"] .banner-logo{ + border-radius: 0; + image-rendering: pixelated; + filter: saturate(0.85) contrast(1.2); +} + nav{ display: flex; gap: 1rem; font-weight: 600; font-size: 1.1rem; } +.db-mode-toggle { + display: inline-flex; + align-items: center; + gap: 0.55rem; + min-height: 36px; + padding: 0.35rem 0.65rem; + color: var(--fg); + background: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%); + border: 1px solid var(--border); + border-radius: 999px; + cursor: pointer; + font: inherit; + font-size: 0.78rem; + font-weight: 850; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.db-mode-toggle:hover, +.db-mode-toggle:focus-visible { + border-color: var(--link); + outline: 0; + box-shadow: 0 0 0 3px color-mix(in oklab, var(--link) 18%, transparent); +} + +.db-mode-toggle__track { + position: relative; + width: 38px; + height: 20px; + background: color-mix(in oklab, var(--fg) 12%, transparent); + border: 1px solid var(--border); + border-radius: 999px; +} + +.db-mode-toggle__knob { + position: absolute; + top: 3px; + left: 3px; + width: 12px; + height: 12px; + background: var(--fg); + border-radius: 999px; + transition: transform 0.18s ease; +} + +:root[data-mode="retro"] .db-mode-toggle { + border-width: 2px; + border-radius: 0; + box-shadow: 4px 4px 0 color-mix(in oklab, var(--border) 72%, transparent); +} + +:root[data-mode="retro"] .db-mode-toggle__track, +:root[data-mode="retro"] .db-mode-toggle__knob { + border-radius: 0; +} + +:root[data-mode="retro"] .db-mode-toggle__knob { + transform: translateX(18px); +} + #preamble.status{ max-width: var(--content); margin-left: auto; @@ -132,6 +254,33 @@ footer{ font-size: .9rem; font-style: italic; } +:root[data-mode="retro"] footer, +:root[data-mode="retro"] pre, +:root[data-mode="retro"] table, +:root[data-mode="retro"] blockquote, +:root[data-mode="retro"] .epigraph blockquote { + border: 2px solid var(--border); + border-radius: 0; + background-color: color-mix(in oklab, var(--bg) 92%, var(--fg) 8%); + box-shadow: 4px 4px 0 color-mix(in oklab, var(--border) 64%, transparent); +} + +:root[data-mode="retro"] code, +:root[data-mode="retro"] kbd, +:root[data-mode="retro"] .post-tag, +:root[data-mode="retro"] .tag { + border: 1px solid var(--border); + border-radius: 0; + background: var(--chip-bg); + color: var(--chip-fg); +} + +:root[data-mode="retro"] input, +:root[data-mode="retro"] textarea, +:root[data-mode="retro"] button { + border-radius: 0; +} + #content.content{ max-width: var(--content); margin-left: auto !important; diff --git a/assets/styles/zhd.css b/assets/styles/zhd.css index 0e4aa7d..a3ed126 100644 --- a/assets/styles/zhd.css +++ b/assets/styles/zhd.css @@ -14,6 +14,18 @@ box-sizing: border-box; } +:root[data-mode="retro"] .db-root { + --db-surface: #fff9df; + --db-surface-strong: #f3e9c6; + --db-line: #29251c; + --db-text-soft: #4e4635; + --db-blue: #275db3; + --db-green: #116a4b; + --db-amber: #9b5c00; + --db-red: #a3372f; + color: #241f18; +} + .db-root *, .db-root *::before, .db-root *::after { @@ -470,6 +482,106 @@ --db-red: #e28982; } +:root[data-theme="dark"][data-mode="retro"] .db-root { + --db-surface: #111915; + --db-surface-strong: #18251f; + --db-line: #71d08f; + --db-text-soft: #a9c9ad; + --db-blue: #7cc7ff; + --db-green: #71d08f; + --db-amber: #f3c969; + --db-red: #ff8b7e; + color: #d9f7d7; +} + +:root[data-mode="retro"] .db-root { + font-family: "Times", "Courier New", monospace; +} + +:root[data-mode="retro"] .db-root .db-kicker, +:root[data-mode="retro"] .db-root .db-qn-meta, +:root[data-mode="retro"] .db-root .db-stat__label, +:root[data-mode="retro"] .db-root .db-now__label, +:root[data-mode="retro"] .db-root .db-task-list strong { + letter-spacing: 0.08em; +} + +:root[data-mode="retro"] .db-root .db-hero, +:root[data-mode="retro"] .db-root .db-now, +:root[data-mode="retro"] .db-root .db-command__search, +:root[data-mode="retro"] .db-root .db-qn-item, +:root[data-mode="retro"] .db-root .db-qn-icon, +:root[data-mode="retro"] .db-root .db-panel, +:root[data-mode="retro"] .db-root .db-stat, +:root[data-mode="retro"] .db-root .db-task-list a, +:root[data-mode="retro"] .db-root .db-link-stack a, +:root[data-mode="retro"] .db-root .db-tag { + color: currentColor; + border-width: 2px; + border-radius: 0; + box-shadow: 5px 5px 0 color-mix(in oklab, var(--db-line) 72%, transparent); +} + +:root[data-mode="retro"] .db-root .db-hero__sub, +:root[data-mode="retro"] .db-root .db-panel__desc, +:root[data-mode="retro"] .db-root .db-qn-meta, +:root[data-mode="retro"] .db-root .db-feed__meta, +:root[data-mode="retro"] .db-root .db-stat__label, +:root[data-mode="retro"] .db-root .db-now__label { + color: var(--db-text-soft); +} + +:root[data-mode="retro"] .db-root .db-command__search input, +:root[data-mode="retro"] .db-root .db-feed__item a, +:root[data-mode="retro"] .db-root .db-task-list a, +:root[data-mode="retro"] .db-root .db-link-stack a { + color: currentColor; +} + +:root[data-mode="retro"] .db-root .db-hero, +:root[data-mode="retro"] .db-root .db-panel { + background: + repeating-linear-gradient( + 0deg, + color-mix(in oklab, var(--db-surface) 96%, var(--db-line) 4%) 0, + color-mix(in oklab, var(--db-surface) 96%, var(--db-line) 4%) 1px, + var(--db-surface) 1px, + var(--db-surface) 12px + ); +} + +:root[data-mode="retro"] .db-root .db-hero__title, +:root[data-mode="retro"] .db-root .db-command__title, +:root[data-mode="retro"] .db-root .db-panel__title, +:root[data-mode="retro"] .db-root .db-stat__num, +:root[data-mode="retro"] .db-root .db-now__clock { + color: currentColor; + text-shadow: 1px 1px 0 color-mix(in oklab, var(--db-amber) 45%, transparent); +} + +:root[data-mode="retro"] .db-root .db-hero__logo { + image-rendering: pixelated; + border-radius: 0; + filter: saturate(0.85) contrast(1.2); +} + +:root[data-mode="retro"] .db-root .db-qn-item:hover, +:root[data-mode="retro"] .db-root .db-qn-item:focus-visible { + transform: translate(-2px, -2px); + box-shadow: 8px 8px 0 color-mix(in oklab, var(--db-line) 72%, transparent); +} + +:root[data-mode="retro"] .db-root .db-feed__dot, +:root[data-mode="retro"] .db-root .db-year-bar, +:root[data-mode="retro"] .db-root .db-year-bar__fill { + border-radius: 0; +} + +:root[data-mode="retro"] .db-root a, +:root[data-mode="retro"] .db-root .db-panel__more { + color: var(--db-blue); +} + @media (max-width: 980px) { .db-quicknav { grid-template-columns: repeat(2, minmax(0, 1fr)); diff --git a/build-site.el b/build-site.el index 02a021c..e58c73e 100644 --- a/build-site.el +++ b/build-site.el @@ -250,6 +250,12 @@ FMT / ARGS are passed to `format'." +
Updated: %C
")