UI changes
All checks were successful
Build Roam Site / build (push) Successful in 31s

This commit is contained in:
2026-05-15 23:51:50 +01:00
parent 350a830482
commit 5d35824603
2 changed files with 809 additions and 0 deletions

View File

@@ -1499,3 +1499,808 @@ pre.src {
font-size: 0.85rem; font-size: 0.85rem;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
/* =========================================================
DARK ACADEMIC ARCHIVE REDESIGN
Final visual layer for the Org-generated note archive.
Keeps the existing JS layout, stack panes, backlinks, and sidenotes.
========================================================= */
:root {
color-scheme: dark;
--header-h: 52px;
--toolbar-h: 38px;
--rail-w: 56px;
--panel-w: 292px;
--content-max: 760px;
--content-pad: clamp(1.25rem, 4vw, 3.75rem);
--bg: #0d0d0a;
--page-bg: #090907;
--pane-bg: #14120d;
--surface: #1b1811;
--surface-2: #242016;
--surface-3: #30291b;
--fg: #e8ddc8;
--fg-dim: #b7a88e;
--fg-faint: #80705b;
--fg-ghost: #4e4435;
--accent: #c3a05a;
--accent-2: #7e3037;
--accent-3: #496856;
--accent-4: #6e7f9a;
--accent-dim: rgba(195, 160, 90, 0.42);
--accent-sub: rgba(195, 160, 90, 0.1);
--accent-glow: rgba(195, 160, 90, 0.065);
--accent-subtle: rgba(195, 160, 90, 0.12);
--heading: #f1e4c8;
--heading-2: #d2b977;
--heading-3: #b8795d;
--link: #d0b36d;
--link-hover: #f3e7ce;
--tag-bg: rgba(73, 104, 86, 0.18);
--tag-fg: #c9d3bd;
--border: rgba(195, 160, 90, 0.18);
--border-2: rgba(195, 160, 90, 0.34);
--border-mid: rgba(195, 160, 90, 0.28);
--chip-bg: rgba(232, 221, 200, 0.055);
--code-bg: #0a0b09;
--font-body: "Lora", Georgia, "Times New Roman", "Noto Sans Arabic", serif;
--font-ui: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "DM Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--font-serif: "Lora", Georgia, "Times New Roman", "Noto Sans Arabic", serif;
}
[data-theme="light"] {
color-scheme: light;
--bg: #e7dcc3;
--page-bg: #d7c8a8;
--pane-bg: #efe6d1;
--surface: #f6eedc;
--surface-2: #e6d8bb;
--surface-3: #d5c39c;
--fg: #211a12;
--fg-dim: #5e513d;
--fg-faint: #8b7b61;
--fg-ghost: #b9a984;
--accent: #8d6421;
--accent-2: #7a2f36;
--accent-3: #3f614d;
--accent-4: #506484;
--accent-dim: rgba(141, 100, 33, 0.42);
--accent-sub: rgba(141, 100, 33, 0.1);
--accent-glow: rgba(141, 100, 33, 0.075);
--heading: #21170e;
--heading-2: #6f4818;
--heading-3: #7c3c32;
--link: #654919;
--link-hover: #20160d;
--tag-bg: rgba(63, 97, 77, 0.13);
--tag-fg: #34523f;
--border: rgba(105, 78, 35, 0.22);
--border-2: rgba(105, 78, 35, 0.38);
--border-mid: rgba(105, 78, 35, 0.3);
--chip-bg: rgba(32, 22, 13, 0.055);
--code-bg: #e7dcc2;
}
html,
body {
background:
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px),
radial-gradient(circle at 16% 0%, rgba(126, 48, 55, 0.18), transparent 30rem),
radial-gradient(circle at 86% 10%, rgba(73, 104, 86, 0.14), transparent 28rem),
linear-gradient(135deg, var(--page-bg), #15100b 58%, #0a0907);
background-size: 42px 42px, 42px 42px, auto, auto, auto;
color: var(--fg);
font-family: var(--font-body);
font-size: 18px;
line-height: 1.78;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.23;
background:
linear-gradient(90deg, transparent 0, transparent 52px, rgba(195, 160, 90, 0.08) 53px, transparent 54px),
repeating-linear-gradient(180deg, transparent 0, transparent 31px, rgba(232, 221, 200, 0.026) 32px);
mix-blend-mode: screen;
z-index: 0;
}
body,
p,
li,
td,
th,
span,
div {
font-family: var(--font-body);
}
button,
input,
select,
textarea,
.banner-header,
#note-toolbar,
#sidebar,
#backlink-panel,
#link-preview,
#postamble,
footer {
font-family: var(--font-ui);
}
#preamble,
#note-toolbar,
#sidebar,
#backlink-panel,
#postamble,
footer {
background:
linear-gradient(180deg, rgba(35, 29, 18, 0.98), rgba(12, 12, 9, 0.98));
border-color: var(--border);
}
#preamble {
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
}
.banner-header {
gap: 0.8rem;
}
.banner-left {
display: flex;
align-items: center;
min-width: 0;
}
.archive-mark {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-width: max-content;
color: var(--fg);
border-bottom: 0;
text-decoration: none;
}
.archive-mark:hover {
background: transparent;
color: var(--heading);
}
.archive-sigil {
display: inline-grid;
place-items: center;
width: 2rem;
height: 2rem;
border: 1px double var(--border-2);
background:
linear-gradient(145deg, rgba(195, 160, 90, 0.16), rgba(126, 48, 55, 0.11)),
#15120d;
color: var(--heading-2);
font: 0.72rem var(--font-mono);
letter-spacing: 0.08em;
box-shadow: inset 0 0 0 1px rgba(232, 221, 200, 0.04);
}
.archive-name {
color: var(--fg-dim);
font: 0.68rem var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
}
#breadcrumb-trail {
color: var(--fg-faint);
}
.crumb {
border: 1px solid transparent;
border-radius: 2px;
font-family: var(--font-mono);
text-transform: lowercase;
}
.crumb:hover {
border-color: var(--border);
}
.crumb.active {
color: var(--heading-2);
}
.search-trigger,
.toolbar-btn,
#theme-toggle,
.rail-btn,
.search-close,
.sidebar-close-btn,
.bp-close,
.mermaid-view-btn,
.copy-btn {
border-radius: 2px;
}
.search-trigger {
min-width: 12.5rem;
height: 32px;
color: var(--fg-dim);
background:
linear-gradient(180deg, rgba(232, 221, 200, 0.055), rgba(232, 221, 200, 0.025));
border: 1px solid var(--border-2);
box-shadow: inset 0 1px 0 rgba(232, 221, 200, 0.045);
font-family: var(--font-mono);
text-transform: lowercase;
}
.search-trigger span::before {
content: "catalogue: ";
color: var(--accent);
}
.search-trigger kbd {
border-radius: 2px;
background: #0a0a07;
color: var(--accent);
}
.search-panel,
#link-preview {
background:
linear-gradient(180deg, rgba(36, 31, 21, 0.98), rgba(14, 13, 10, 0.98));
border: 1px solid var(--border-2);
border-radius: 4px;
box-shadow: 0 26px 90px rgba(0, 0, 0, 0.62);
}
#search-box {
font-family: var(--font-serif);
}
#sidebar {
box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.28);
}
.rail-btn {
border: 1px solid transparent;
font-family: var(--font-mono);
color: var(--fg-faint);
}
.rail-btn:hover,
.rail-btn.active {
border-color: var(--border);
background: rgba(232, 221, 200, 0.045);
}
.sidebar-header {
border-bottom: 1px solid var(--border);
margin-bottom: 0.35rem;
}
.sidebar-header-label,
.bp-label,
.search-title,
.note-graph-pos {
color: var(--accent);
font-family: var(--font-mono);
letter-spacing: 0.14em;
}
.tree-folder {
border-top: 1px solid rgba(195, 160, 90, 0.08);
border-radius: 0;
color: var(--fg-dim);
}
.tree-folder:hover {
background: rgba(195, 160, 90, 0.07);
}
.tree-folder-count {
margin-left: auto;
padding: 0 0.4rem;
border: 1px solid var(--border);
background: var(--chip-bg);
color: var(--fg-faint);
font: 0.62rem var(--font-mono);
}
.tree-file {
border-left: 1px solid rgba(195, 160, 90, 0.12);
border-radius: 0;
font-family: var(--font-ui);
color: var(--fg-dim);
}
.tree-file:hover,
.tree-file.active {
color: var(--heading);
background: linear-gradient(90deg, rgba(195, 160, 90, 0.12), transparent);
}
.tree-file.active {
border-left-color: var(--accent);
}
#note-toolbar {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
}
.toolbar-btn {
color: var(--fg-dim);
border-color: rgba(195, 160, 90, 0.14);
background: rgba(232, 221, 200, 0.025);
text-transform: lowercase;
}
.toolbar-btn:hover:not(:disabled),
.toolbar-btn.active {
border-color: var(--border-2);
background: rgba(195, 160, 90, 0.09);
color: var(--heading-2);
}
#content-area {
background:
linear-gradient(90deg, transparent 0, transparent 52px, rgba(126, 48, 55, 0.16) 53px, transparent 54px),
repeating-linear-gradient(180deg, transparent 0, transparent 31px, rgba(232, 221, 200, 0.035) 32px),
radial-gradient(circle at 50% 0%, rgba(195, 160, 90, 0.08), transparent 26rem),
var(--pane-bg);
}
#content-area::before {
left: 52px;
background: rgba(126, 48, 55, 0.42);
}
#content,
.tab-content-inner {
max-width: var(--content-max);
padding-top: clamp(1.5rem, 4vh, 3rem);
position: relative;
}
#content::before {
content: "ARCHIVE RECORD";
display: block;
margin: 0 0 0.75rem;
color: var(--fg-ghost);
font: 0.66rem var(--font-mono);
letter-spacing: 0.18em;
}
.title-section {
margin-bottom: clamp(2rem, 6vw, 3.5rem);
padding: clamp(1.2rem, 3vw, 1.8rem);
background:
linear-gradient(180deg, rgba(232, 221, 200, 0.052), rgba(232, 221, 200, 0.018));
border: 1px solid var(--border);
border-left: 4px solid var(--accent-2);
border-radius: 2px;
box-shadow:
0 18px 45px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(232, 221, 200, 0.045);
}
.title-section::before {
content: "catalogue card";
position: absolute;
top: -0.72rem;
left: 1rem;
padding: 0 0.45rem;
background: var(--pane-bg);
color: var(--accent);
font: 0.62rem var(--font-mono);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.title-section .title {
max-width: 18ch;
color: var(--heading);
font-family: var(--font-serif);
font-size: clamp(2rem, 6vw, 4rem);
font-weight: 500;
line-height: 1.04;
letter-spacing: 0;
text-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}
.title-metadata {
padding-top: 0.75rem;
border-top: 1px solid var(--border);
}
.metadata-item {
padding: 0.12rem 0.45rem;
border: 1px solid rgba(195, 160, 90, 0.18);
background: rgba(10, 10, 7, 0.24);
}
.metadata-label {
text-transform: uppercase;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-serif);
letter-spacing: 0;
}
h2 {
position: relative;
margin-top: 3.4rem;
padding-bottom: 0.55rem;
color: var(--heading-2);
border-bottom: 1px double var(--border-2);
font-size: 1.35rem;
}
h2::before {
content: "#";
margin-right: 0.42rem;
color: var(--accent-2);
font-family: var(--font-mono);
font-size: 0.78rem;
vertical-align: 0.12em;
}
h3 {
color: var(--heading);
font-size: 1.08rem;
}
h4 {
color: var(--heading-3);
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
p {
font-weight: 400;
max-width: 68ch;
}
a {
color: var(--link);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
a:hover {
color: var(--link-hover);
background: rgba(195, 160, 90, 0.09);
}
#content a[href$=".html"] {
font-family: var(--font-ui);
}
#content a[href$=".html"]::before,
#content a[href$=".html"]::after {
color: var(--accent-4);
opacity: 0.72;
}
strong {
color: #f1dfb9;
}
em {
color: #dcc894;
}
.tag,
.todo,
.done,
.priority,
.timestamp,
.timestamp-kwd {
font-family: var(--font-mono);
}
.tag {
color: var(--tag-fg) !important;
background: var(--tag-bg) !important;
border-color: rgba(73, 104, 86, 0.42);
border-radius: 2px;
}
.todo {
color: #d58a78;
}
.done {
color: #9ebd9d;
}
.priority {
color: var(--accent);
}
.timestamp {
color: #b7a980;
}
ul li::before {
content: ">";
font-family: var(--font-mono);
color: var(--accent);
}
ol li::before {
color: var(--accent-4);
}
blockquote {
position: relative;
padding: 1.1rem 1.3rem 1.1rem 1.5rem;
background:
linear-gradient(90deg, rgba(195, 160, 90, 0.12), rgba(232, 221, 200, 0.025));
border: 1px solid var(--border);
border-left: 4px double var(--accent);
border-radius: 2px;
color: var(--fg-dim);
box-shadow: inset 0 1px 0 rgba(232, 221, 200, 0.035);
}
blockquote::before {
content: "EXCERPT";
display: block;
margin-bottom: 0.45rem;
color: var(--accent);
font: 0.62rem var(--font-mono);
letter-spacing: 0.14em;
font-style: normal;
}
.org-src-container,
pre.src,
pre.example {
border-radius: 3px;
border: 1px solid rgba(195, 160, 90, 0.32);
background:
linear-gradient(rgba(232, 221, 200, 0.025) 1px, transparent 1px),
#090a08;
background-size: 100% 1.6rem, auto;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}
.org-src-container > pre,
pre.src,
pre.example {
color: #d8cfbb;
font-size: 0.79rem;
}
.org-src-container > pre::before {
color: var(--accent);
opacity: 0.8;
}
.copy-btn {
background: #11100c;
border-color: var(--border-2);
color: var(--fg-dim);
text-transform: lowercase;
}
.table-wrapper,
#content table {
border-radius: 3px;
border-color: var(--border-2);
background: rgba(9, 9, 7, 0.2);
}
#content table th,
.table-wrapper table th {
background: rgba(195, 160, 90, 0.11);
color: var(--heading-2);
}
#content table td,
.table-wrapper table td {
color: var(--fg-dim);
}
#table-of-contents {
padding: 1rem;
border: 1px solid var(--border);
border-left: 3px solid var(--accent-3);
background: rgba(9, 9, 7, 0.24);
}
#table-of-contents h2::before {
content: none;
}
#text-table-of-contents a {
font-family: var(--font-mono);
}
.sidenote,
.marginnote,
.footnote-sidenote {
padding: 0.6rem 0.75rem;
border-left: 2px solid var(--accent-3);
background: rgba(73, 104, 86, 0.095);
color: #aa9c84;
font-family: var(--font-serif);
font-size: 0.76rem;
}
#footnotes {
margin-top: 3.5rem;
padding-top: 1rem;
border-top: 1px double var(--border-2);
color: var(--fg-dim);
}
.footdef {
font-size: 0.85rem;
}
.backlinks-section {
border-top: 1px double var(--border-2);
}
.backlinks-section h2,
.backlinks-section h2::before {
color: var(--accent);
}
#backlink-panel.open {
width: min(300px, 38vw);
}
.bp-item {
border-radius: 3px;
background: rgba(232, 221, 200, 0.035);
border-color: var(--border);
}
.bp-item:hover {
background: rgba(195, 160, 90, 0.08);
}
.preview-title {
font-family: var(--font-serif);
}
#content .figure,
#content img:not(.fullwidth),
.video-container,
.audio-player {
border-radius: 3px;
border-color: var(--border-2);
background: rgba(9, 9, 7, 0.24);
}
.audio-player {
box-shadow: inset 0 1px 0 rgba(232, 221, 200, 0.035);
}
#mv-overlay {
background: rgba(6, 6, 5, 0.74) !important;
}
#mv-modal {
background: var(--surface) !important;
color: var(--fg) !important;
border: 1px solid var(--border-2) !important;
border-radius: 3px !important;
}
#mv-toolbar {
border-bottom: 1px solid var(--border) !important;
}
#mv-toolbar button {
background: rgba(232, 221, 200, 0.045) !important;
color: var(--fg) !important;
border: 1px solid var(--border-2) !important;
border-radius: 2px !important;
}
.mermaid-view-btn {
color: var(--accent);
border-color: var(--border-2);
background: rgba(195, 160, 90, 0.07);
font-family: var(--font-mono);
}
#postamble,
footer {
color: var(--fg-faint);
text-transform: lowercase;
}
#reading-progress {
background: linear-gradient(90deg, var(--accent-2), var(--accent));
height: 3px;
}
@media (min-width: 1201px) {
.sidenote,
.marginnote {
float: right;
clear: right;
width: 17rem;
margin-right: -19rem;
margin-top: 0.2rem;
}
}
@media (max-width: 900px) {
.archive-name {
display: none;
}
.search-trigger {
min-width: 10rem;
}
#backlink-panel.open {
width: min(270px, 48vw);
}
}
@media (max-width: 768px) {
html,
body {
background-size: 34px 34px, 34px 34px, auto, auto, auto;
}
.banner-header {
align-items: center;
}
.search-trigger {
width: 100%;
min-width: 0;
}
#content::before {
margin-left: 0;
}
.title-section .title {
max-width: 100%;
font-size: clamp(1.85rem, 12vw, 3rem);
}
h2 {
font-size: 1.18rem;
}
p {
max-width: 100%;
}
#backlink-panel.open {
position: fixed;
right: 0;
top: calc(var(--header-h) + var(--toolbar-h));
bottom: 0;
z-index: 210;
width: min(86vw, 320px);
box-shadow: -18px 0 42px rgba(0, 0, 0, 0.4);
}
}

View File

@@ -310,6 +310,10 @@ window.mvOpen=function(el){
" "
<div class=\"banner-header\"> <div class=\"banner-header\">
<div class=\"banner-left\"> <div class=\"banner-left\">
<a class=\"archive-mark\" href=\"/index.html\" aria-label=\"Home\">
<span class=\"archive-sigil\">ZQ</span>
<span class=\"archive-name\">private index</span>
</a>
</div> </div>
<div class=\"banner-search\"> <div class=\"banner-search\">