zaine/org_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

retro
All checks were successful
Build Org Website / build (push) Successful in 42s
Details

Browse Source
This commit is contained in:
Zaine Arch
2026-05-07 00:12:39 +01:00
parent fa992de25a
commit 11fbf2f331
4 changed files with 292 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/scripts/zhd.js
View File

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

149
assets/styles/style.css
View File

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

112
assets/styles/zhd.css
View File

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