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

updating dark academia stylings
All checks were successful
Build Org Website / build (push) Successful in 44s
Details

Browse Source
This commit is contained in:
Zaine Arch
2026-05-09 18:08:58 +01:00
parent e2e4f1467f
commit bd368b5ccd
7 changed files with 150 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
assets/scripts/script.js
View File

@@ -77,19 +77,32 @@ document.addEventListener("DOMContentLoaded", () => {
(function(){
const root = document.documentElement;
const storageKey = "theme";
const themes = ["light", "dark", "dark-academia"];
const labels = {
"light": "Light",
"dark": "Dark",
"dark-academia": "Academia"
};
const saved = localStorage.getItem(storageKey);
if (saved === "dark" || saved === "light") {
if (themes.includes(saved)) {
root.setAttribute("data-theme", saved);
}
const btn = document.getElementById("theme-toggle");
if (!btn) return;
const updateButton = () => {
const current = root.getAttribute("data-theme");
const label = labels[current] || "Auto";
btn.textContent = `Theme: ${label}`;
btn.setAttribute("aria-label", `Current theme: ${label}. Switch theme.`);
};
updateButton();
btn.addEventListener("click", () => {
const current = root.getAttribute("data-theme");
const next = current === "dark" ? "light" : "dark";
// If no current (auto), assume we’re toggling to dark first
const target = current ? next : "dark";
const index = themes.indexOf(current);
const target = themes[index === -1 ? 1 : (index + 1) % themes.length];
root.setAttribute("data-theme", target);
localStorage.setItem(storageKey, target);
updateButton();
});
})();

7
assets/styles/media.css
View File

@@ -48,7 +48,7 @@
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
:root:not([data-theme]){
--bg: #0f1115;
--fg: #e6e6e6;
--link: #8ab4ff;
@@ -65,6 +65,11 @@
--surface: #151820;
--surface-soft: #1b202a;
--accent: #8ab4ff;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: var(--border);
--text-muted: var(--muted);
--accent-bg: color-mix(in oklab, var(--accent) 12%, var(--surface));
}
.countdown-wrap {
color: var(--fg, #ddd);

35
assets/styles/org-syntax.css
View File

@@ -10,19 +10,43 @@
.org-doc { color: #8b2252; }
.org-warning { color: #ff8c00; font-weight: 700; }
:root[data-theme="dark-academia"] {
--syntax-comment: #a97861;
--syntax-string: #c99572;
--syntax-keyword: #d6b566;
--syntax-builtin: #b99b63;
--syntax-constant: #7fb092;
--syntax-function: #e8cf91;
--syntax-variable: #d0a35c;
--syntax-type: #8fbf9f;
--syntax-warning: #d58a55;
}
:root[data-theme="dark-academia"] .org-comment { color: var(--syntax-comment); }
:root[data-theme="dark-academia"] .org-string { color: var(--syntax-string); }
:root[data-theme="dark-academia"] .org-keyword { color: var(--syntax-keyword); }
:root[data-theme="dark-academia"] .org-builtin { color: var(--syntax-builtin); }
:root[data-theme="dark-academia"] .org-constant { color: var(--syntax-constant); }
:root[data-theme="dark-academia"] .org-function-name { color: var(--syntax-function); }
:root[data-theme="dark-academia"] .org-variable-name { color: var(--syntax-variable); }
:root[data-theme="dark-academia"] .org-type { color: var(--syntax-type); }
:root[data-theme="dark-academia"] .org-preprocessor { color: var(--syntax-builtin); }
:root[data-theme="dark-academia"] .org-doc { color: var(--syntax-string); }
:root[data-theme="dark-academia"] .org-warning { color: var(--syntax-warning); }
:not(pre) > code{
padding: 2px 5px; margin: 0 1px;
border: 1px solid #ddd; border-radius: 3px;
border: 1px solid var(--border); border-radius: 3px;
background-clip: padding-box;
color: #333; font-size: 80%;
color: var(--fg); font-size: 80%;
}
pre {
background-color: var(--bg);
}
.org-src-container{
border: 1px solid #ccc;
box-shadow: 3px 3px 3px #eee;
border: 1px solid var(--border);
box-shadow: 3px 3px 3px color-mix(in oklab, #000 8%, transparent);
font-family: Lucida Console, monospace;
font-size: 80%;
margin: 1em auto;
@@ -33,7 +57,7 @@ pre {
.org-src-container > pre:before{
display: block; position: absolute; top: 0; right: 0;
background-color: #b3b3b3; color: #fff;
background-color: var(--surface-soft); color: var(--fg);
padding: 0 .5em; border-bottom-left-radius: 8px; border: 0;
font-size: 80%;
}
@@ -69,4 +93,3 @@ pre.src{
font-size: .9rem; line-height: 1.4;
overflow-x: auto; white-space: pre-wrap;
}

78
assets/styles/style.css
View File

@@ -26,6 +26,11 @@
--chip-bg: #f0f0f0;
--chip-fg: #444;
--muted: #666;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: var(--border);
--text-muted: var(--muted);
--accent-bg: color-mix(in oklab, var(--accent) 10%, var(--surface));
--font-body: 'DM Sans', system-ui, sans-serif;
--kb-bg-completed: #e6f4ea;
@@ -70,12 +75,49 @@
}
:root[data-theme="dark-academia"]{
color-scheme: dark;
--bg: #11100d;
--fg: #f7ecd5;
--link: #d8b86f;
--heading: #e8cf91;
--surface: #1d1a16;
--surface-soft: #242019;
--accent: #b89145;
--code-bg: #191814;
--active-toc: rgba(184, 145, 69, 0.18);
--note-color: #d9c9aa;
--note-bg: rgba(243, 234, 215, 0.05);
--border: rgba(217, 190, 124, 0.32);
--chip-bg: rgba(184, 145, 69, 0.14);
--chip-fg: #f0d89a;
--muted: #b6a681;
--bg-color: var(--surface);
--border-color: var(--border);
--border-muted: rgba(217, 190, 124, 0.24);
--text-muted: var(--muted);
--accent-bg: rgba(184, 145, 69, 0.16);
--kb-bg-completed: rgba(68, 106, 87, 0.24);
--kb-bg-manager-review: rgba(184, 145, 69, 0.2);
--kb-bg-in-progress: rgba(82, 93, 117, 0.22);
--kb-bg-not-started: rgba(243, 234, 215, 0.08);
--kb-bg-comments: rgba(125, 47, 54, 0.24);
--kb-column-border: rgba(217, 190, 124, 0.2);
--kb-card-bg: #181510;
--kb-card-text: #f3ead7;
}
@font-face {
font-family: 'Noto';
src: url('../fonts/NotoSans-Regular.ttf') format('truetype');
}
html, body{
background-color: var(--bg);
background:
radial-gradient(circle at 18% 12%, var(--theme-glow-wine, transparent), transparent 28%),
radial-gradient(circle at 84% 18%, var(--theme-glow-green, transparent), transparent 24%),
linear-gradient(135deg, var(--theme-bg-start, var(--bg)) 0%, var(--theme-bg-mid, var(--bg)) 42%, var(--theme-bg-end, var(--bg)) 100%);
color: var(--fg);
font-size: 16px;
transition: background-color .3s, color .3s;
@@ -90,6 +132,27 @@ body {
-webkit-font-smoothing: antialiased;
}
:root[data-theme="dark-academia"] body {
--theme-glow-wine: rgba(125, 47, 54, 0.24);
--theme-glow-green: rgba(68, 106, 87, 0.24);
--theme-bg-start: #0f0e0b;
--theme-bg-mid: #17140f;
--theme-bg-end: #211b14;
}
:root[data-theme="dark-academia"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.16;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 34px 34px, 34px 34px;
mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
}
::selection {
background: color-mix(in oklab, var(--accent) 24%, transparent);
}
@@ -138,6 +201,19 @@ a:hover {
box-shadow: 0 12px 32px color-mix(in oklab, #000 8%, transparent);
}
:root[data-theme="dark-academia"] .banner-header,
:root[data-theme="dark-academia"] .org-src-container,
:root[data-theme="dark-academia"] #notes-form,
:root[data-theme="dark-academia"] .note {
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark-academia"] h1,
:root[data-theme="dark-academia"] h2,
:root[data-theme="dark-academia"] h3 {
font-family: Georgia, "Times New Roman", serif;
}
.site-brand {
display: inline-flex;
align-items: center;

10
assets/styles/wird-tracker.css
View File

@@ -27,6 +27,16 @@
--wird-shadow: 0 1px 4px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.22);
}
:root[data-theme="dark-academia"] {
--wird-accent: #b89145;
--wird-accent-hover: #d6b566;
--wird-green: #5e9a78;
--wird-red: #9d3d46;
--wird-card-bg: rgba(243, 234, 215, 0.07);
--wird-bar-bg: rgba(243, 234, 215, 0.16);
--wird-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04);
}
#wird-app {
display: grid;
gap: 2.5rem;

11
assets/styles/zhd.css
View File

@@ -462,7 +462,8 @@
font-weight: 750;
}
:root[data-theme="dark"] .db-root {
:root[data-theme="dark"] .db-root,
:root[data-theme="dark-academia"] .db-root {
--db-surface: color-mix(in oklab, var(--bg) 82%, var(--fg) 18%);
--db-surface-strong: color-mix(in oklab, var(--bg) 72%, var(--fg) 28%);
--db-line: color-mix(in oklab, var(--border) 80%, var(--fg) 20%);
@@ -473,6 +474,14 @@
--db-red: #e28982;
}
:root[data-theme="dark-academia"] .db-root {
--db-blue: #c6b07a;
--db-green: #7fb092;
--db-amber: #d6b566;
--db-orange: #c98b52;
--db-red: #c76b71;
}
@media (max-width: 980px) {
.db-quicknav {
grid-template-columns: repeat(2, minmax(0, 1fr));

2
build-site.el
View File

@@ -258,7 +258,7 @@ FMT / ARGS are passed to `format'."
<input type=\"search\" id=\"search-input\" placeholder=\"Search notes\" aria-label=\"Search notes\" />
</label>
<button id=\"search-btn\" aria-label=\"Search\" type=\"button\">🔍</button>
<button class=\"theme-toggle\" id=\"theme-toggle\" type=\"button\" aria-label=\"Toggle dark mode\">Theme</button>
<button class=\"theme-toggle\" id=\"theme-toggle\" type=\"button\" aria-label=\"Switch theme\">Theme</button>
</div>
</div>
<div id=\"updated\">Updated: %C</div>