retro

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");

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;

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));

build-site.el

@@ -250,6 +250,12 @@ FMT / ARGS are passed to `format'."
     <button id=\"search-btn\" aria-label=\"Search\">🔍</button>
   </nav>
   <button class=\"theme-toggle\" id=\"theme-toggle\" type=\"button\" aria-label=\"Toggle dark mode\">🌗 Theme</button>
+  <button class=\"db-mode-toggle\" id=\"db-mode-toggle\" type=\"button\" aria-pressed=\"false\">
+    <span class=\"db-mode-toggle__track\" aria-hidden=\"true\">
+      <span class=\"db-mode-toggle__knob\"></span>
+    </span>
+    <span class=\"db-mode-toggle__text\" id=\"db-mode-label\">Retro mode</span>
+  </button>
 </div>
 <div id=\"updated\">Updated: %C</div>
 ")