diff --git a/assets/scripts/script.js b/assets/scripts/script.js
index 8d11704..f54d5b9 100755
--- a/assets/scripts/script.js
+++ b/assets/scripts/script.js
@@ -93,6 +93,8 @@ function rearrangeDOM() {
function buildNoteToolbar(toolbar) {
toolbar.innerHTML = `
+ catalogue
+
\u2190 back
forward \u2192
@@ -113,7 +115,7 @@ function initSidebarRail() {
if (!sidebar) return;
const railBtns = [
- { label: '\u2630', title: 'All notes', id: 'rail-tree', panel: 'tree' },
+ { label: '\u2630', title: 'Catalogue', id: 'rail-tree', panel: 'tree' },
{ label: '\u2315', title: 'Search', id: 'rail-search', action: 'search' },
];
@@ -131,19 +133,13 @@ function initSidebarRail() {
}
return;
}
- const isExpanded = sidebar.classList.contains('expanded');
- const samePanel = sidebar.dataset.activePanel === panel;
-
- if (isExpanded && samePanel) {
- sidebar.classList.remove('expanded');
- sidebar.dataset.activePanel = '';
- btn.classList.remove('active');
- } else {
- sidebar.classList.add('expanded');
- sidebar.dataset.activePanel = panel;
- sidebar.querySelectorAll('.rail-btn').forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
- showSidebarPanel(panel);
+ sidebar.classList.add('expanded');
+ sidebar.dataset.activePanel = panel;
+ sidebar.querySelectorAll('.rail-btn').forEach(b => b.classList.remove('active'));
+ btn.classList.add('active');
+ if (window.matchMedia('(max-width: 900px)').matches) {
+ sidebar.classList.add('mobile-open');
+ document.getElementById('sidebar-backdrop')?.classList.add('visible');
}
});
});
@@ -374,6 +370,7 @@ history.replaceState(
});
// Toolbar buttons
+ document.getElementById('tb-catalogue')?.addEventListener('click', toggleCatalogue);
document.getElementById('tb-back')?.addEventListener('click', goBack);
document.getElementById('tb-forward')?.addEventListener('click', goForward);
document.getElementById('tb-backlinks')?.addEventListener('click', toggleBacklinkPanel);
@@ -637,6 +634,19 @@ function toggleTOC() {
document.getElementById('tb-toc')?.classList.toggle('active', hidden);
}
+function toggleCatalogue() {
+ const sidebar = document.getElementById('sidebar');
+ if (!sidebar) return;
+ const mobile = window.matchMedia('(max-width: 900px)').matches;
+ if (mobile) {
+ const isOpen = sidebar.classList.toggle('mobile-open');
+ sidebar.classList.toggle('expanded', isOpen);
+ document.getElementById('sidebar-backdrop')?.classList.toggle('visible', isOpen);
+ return;
+ }
+ document.getElementById('file-tree')?.focus?.();
+}
+
/* =========================================================
BACKLINK PANEL
========================================================= */
diff --git a/assets/styles/style.css b/assets/styles/style.css
old mode 100755
new mode 100644
index da8b8d4..7eb2066
--- a/assets/styles/style.css
+++ b/assets/styles/style.css
@@ -1,2010 +1,1079 @@
/* =========================================================
- ZETTELKASTEN GARDEN style.css
+ ZQ NOTE ARCHIVE
+ Dark academic / early-web redesign for Org-generated HTML.
+ The CSS owns the visual system; JS owns navigation behaviour.
========================================================= */
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@400;500&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');
-
-/* =========================================================
- TOKENS
- ========================================================= */
-
-:root {
- --header-h: 48px;
- --toolbar-h: 36px;
- --rail-w: 52px;
- --panel-w: 260px;
- --content-max: 680px;
- --content-pad: 2.5rem;
-
- /* Dark palette warm aged manuscript */
- --bg: #18160f;
- --page-bg: #111009;
- --pane-bg: #1c1a12;
- --surface: #221f15;
- --surface-2: #2a2720;
-
- --fg: #e4ddd0;
- --fg-dim: #9e9284;
- --fg-faint: #584e42;
- --fg-ghost: #352e24;
-
- --accent: #c8923c;
- --accent-dim: color-mix(in oklab, var(--accent) 35%, transparent);
- --accent-sub: color-mix(in oklab, var(--accent) 10%, transparent);
- --accent-glow:color-mix(in oklab, var(--accent) 6%, transparent);
-
- --heading: #ecdcbc;
- --heading-2: #c8a060;
- --heading-3: #a87848;
- --link: #b89e6a;
- --link-hover:#e4ddd0;
- --tag-bg: #2a2418;
- --tag-fg: var(--accent);
- --border: #2a2518;
- --border-2: #38321e;
- --code-bg: #0f0e08;
-
- --font-body: 'DM Sans', system-ui, sans-serif;
- --font-mono: 'DM Mono', 'Fira Mono', monospace;
- --font-serif: 'Lora', Georgia, serif;
-
- --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
- --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
- --dur-fast: 110ms;
- --dur-mid: 200ms;
- --dur-slow: 340ms;
-
- --r1:.25rem; --r2:.5rem; --r3:.75rem;
- --r4:1rem; --r5:1.5rem; --r6:2rem; --r8:3rem;
-}
-
-/* Light theme */
-[data-theme="light"] {
- --bg: #f7f3eb;
- --page-bg: #efead8;
- --pane-bg: #faf7f0;
- --surface: #f2ece0;
- --surface-2: #e8e1d0;
- --fg: #2a2218;
- --fg-dim: #6a5e4a;
- --fg-faint: #b8ac98;
- --fg-ghost: #ddd5c0;
- --accent: #9a6820;
- --border: #ddd4bc;
- --border-2: #ccc0a0;
- --code-bg: #eee8d8;
- --tag-bg: #e8dfc8;
- --link: #7a5a20;
- --heading: #2a2218;
- --heading-2: #6a4818;
- --heading-3: #8a5c28;
-}
-
-/* =========================================================
- RESET / BASE
- ========================================================= */
-
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-html, body {
- background: var(--page-bg);
- color: var(--fg);
- font-family: var(--font-body);
- font-size: 18px;
- line-height: 1.75;
- -webkit-font-smoothing: antialiased;
- height: 100dvh;
- overflow: hidden;
- transition: background var(--dur-slow), color var(--dur-slow);
-}
-
-body { display: flex; flex-direction: column; }
-
-body, p, li, td, th, span, div {
- font-family: 'Noto Sans Arabic', sans-serif;
-}
-
-/* =========================================================
- HEADER
- ========================================================= */
-
-#preamble {
- height: var(--header-h);
- flex-shrink: 0;
- background: var(--bg);
- border-bottom: 1px solid var(--border);
- z-index: 300;
-}
-
-.banner-header {
- display: flex;
- align-items: center;
- gap: var(--r3);
- padding: 0 var(--r4);
- height: var(--header-h);
-}
-
-.banner-logo {
- height: 26px; width: 26px;
- border-radius: 50%; object-fit: cover;
- opacity: 0.85; flex-shrink: 0;
- transition: opacity var(--dur-fast);
-}
-.banner-logo:hover { opacity: 1; }
-
-/* Breadcrumb trail */
-#breadcrumb-trail {
- display: flex;
- align-items: center;
- gap: 0;
- flex: 1;
- min-width: 0;
- overflow: hidden;
- font-size: 0.8rem;
- font-family: var(--font-mono);
-}
-
-.crumb {
- display: inline-flex;
- align-items: center;
- color: var(--fg-dim);
- cursor: pointer;
- padding: 2px 6px;
- border-radius: 4px;
- white-space: nowrap;
- max-width: 160px;
- overflow: hidden;
- text-overflow: ellipsis;
- transition: color var(--dur-fast), background var(--dur-fast);
- flex-shrink: 1;
-}
-.crumb:hover { color: var(--fg); background: var(--accent-sub); }
-.crumb.active {
- color: var(--accent);
- flex-shrink: 0;
- max-width: none;
- cursor: default;
-}
-.crumb-sep {
- color: var(--fg-ghost);
- font-size: 0.75rem;
- flex-shrink: 0;
- user-select: none;
- padding: 0 2px;
-}
-
-/* Search */
-.banner-search {
- position: relative;
- flex: 0 0 auto;
-}
-
-.search-trigger {
- display: inline-flex;
- align-items: center;
- justify-content: space-between;
- gap: 1.75rem;
- min-width: 11rem;
- height: 30px;
- padding: 0 0.45rem 0 0.7rem;
- font-size: 0.78rem;
- font-family: var(--font-body);
- color: var(--fg-dim);
- background: var(--surface);
- border: 1px solid var(--border);
- border-radius: 5px;
- cursor: pointer;
- transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
-}
-.search-trigger:hover,
-.search-trigger:focus-visible {
- color: var(--fg);
- border-color: var(--accent-dim);
- background: var(--surface-2);
- box-shadow: 0 0 0 3px var(--accent-sub);
- outline: none;
-}
-.search-trigger kbd {
- min-width: 1.25rem;
- height: 1.25rem;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- font: 0.7rem var(--font-mono);
- color: var(--fg-faint);
- background: var(--bg);
- border: 1px solid var(--border-2);
- border-radius: 4px;
-}
-
-.search-modal[hidden] { display: none; }
-.search-modal {
- position: fixed;
- inset: 0;
- z-index: 1200;
-}
-.search-backdrop {
- position: absolute;
- inset: 0;
- background: rgba(0, 0, 0, 0.58);
- backdrop-filter: blur(3px);
-}
-.search-dialog {
- position: relative;
- min-height: 100%;
- display: grid;
- place-items: center;
- padding: 1rem;
-}
-.search-panel {
- width: min(42rem, calc(100vw - 2rem));
- max-height: min(34rem, calc(100dvh - 4rem));
- overflow: hidden;
- background: var(--bg);
- border: 1px solid var(--border-2);
- border-radius: 8px;
- box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
-}
-.search-input-wrap {
- display: flex;
- align-items: center;
- gap: 0.6rem;
- padding: 0.75rem;
- border-bottom: 1px solid var(--border);
-}
-.search-icon {
- flex: 0 0 auto;
- color: var(--accent);
- font-size: 1rem;
-}
-#search-box {
- width: 100%;
- min-width: 0;
- padding: 0.35rem 0;
- font-size: 1rem;
- font-family: var(--font-body);
- background: transparent;
- color: var(--fg);
- border: 0;
- outline: none;
-}
-#search-box::placeholder { color: var(--fg-faint); }
-.search-close {
- flex: 0 0 auto;
- width: 1.8rem;
- height: 1.8rem;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: var(--fg-dim);
- background: transparent;
- border: 1px solid transparent;
- border-radius: 5px;
- cursor: pointer;
- font-size: 1.1rem;
- line-height: 1;
- transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
-}
-.search-close:hover,
-.search-close:focus-visible {
- color: var(--fg);
- border-color: var(--border-2);
- background: var(--surface);
- outline: none;
-}
-.search-title {
- padding: 0.55rem 0.8rem 0.4rem;
- color: var(--fg-faint);
- font: 0.68rem var(--font-mono);
- text-transform: uppercase;
- letter-spacing: 0;
-}
-#search-results {
- max-height: min(24rem, calc(100dvh - 11rem));
- overflow-y: auto;
-}
-.search-result {
- width: 100%;
- display: grid;
- gap: 0.15rem;
- padding: 0.62rem 0.8rem;
- text-align: left;
- color: var(--fg);
- background: transparent;
- border: 0;
- border-top: 1px solid var(--border);
- cursor: pointer;
- transition: background var(--dur-fast), color var(--dur-fast);
-}
-.search-result:hover,
-.search-result.active {
- background: var(--accent-sub);
-}
-.search-result-title {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 0.88rem;
- line-height: 1.35;
-}
-.search-result-path {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: var(--fg-faint);
- font: 0.68rem var(--font-mono);
- line-height: 1.35;
-}
-.search-empty {
- padding: 1.2rem 0.8rem 1.35rem;
- color: var(--fg-dim);
- border-top: 1px solid var(--border);
- font-size: 0.86rem;
- text-align: center;
-}
-.search-empty[hidden] { display: none; }
-
-/* Actions */
-.banner-actions { display: flex; align-items: center; gap: var(--r2); }
-
-#theme-toggle {
- background: transparent;
- border: 1px solid var(--border);
- border-radius: 5px;
- width: 28px; height: 28px;
- font-size: 1rem;
- cursor: pointer;
- color: var(--fg-dim);
- display: inline-flex;
- align-items: center;
- justify-content: center;
- transition: all var(--dur-fast);
-}
-#theme-toggle:hover {
- color: var(--fg);
- border-color: var(--border-2);
- background: var(--surface);
-}
-
-#close-all { display: none !important; }
-
-/* =========================================================
- LAYOUT BODY
- ========================================================= */
-
-#layout-body {
- display: flex;
- flex: 1 1 auto;
- overflow: hidden;
- min-height: 0;
-}
-
-/* =========================================================
- LEFT RAIL
- ========================================================= */
-
-#sidebar {
- width: var(--rail-w);
- flex-shrink: 0;
- background: var(--bg);
- border-right: 1px solid var(--border);
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: var(--r3) 0;
- gap: var(--r2);
- overflow: hidden;
- transition: width var(--dur-mid) var(--ease-out);
- z-index: 100;
- position: relative;
-}
-
-#sidebar.expanded {
- width: var(--panel-w);
- align-items: flex-start;
- overflow-y: auto;
-}
-
-/* Rail icon buttons */
-.rail-btn {
- width: 36px; height: 36px;
- border-radius: 8px;
- background: transparent;
- border: none;
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- color: var(--fg-faint);
- font-size: 1.05rem;
- flex-shrink: 0;
- transition: color var(--dur-fast), background var(--dur-fast);
- position: relative;
-}
-.rail-btn:hover { color: var(--fg); background: var(--accent-sub); }
-.rail-btn.active { color: var(--accent); background: var(--accent-glow); }
-
-.rail-btn[title]:not(:disabled):hover::after {
- content: attr(title);
- position: absolute;
- left: calc(100% + 8px);
- top: 50%;
- transform: translateY(-50%);
- background: var(--surface-2);
- color: var(--fg);
- padding: 3px 8px;
- border-radius: 4px;
- font-size: 0.72rem;
- font-family: var(--font-mono);
- white-space: nowrap;
- border: 1px solid var(--border-2);
- pointer-events: none;
- z-index: 500;
-}
-
-.sidebar-panel { display: none; width: 100%; flex-direction: column; }
-#sidebar.expanded .sidebar-panel { display: flex; }
-
-.sidebar-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 8px 12px 4px;
- flex-shrink: 0;
-}
-.sidebar-header-label {
- font-size: 0.6rem;
- font-family: var(--font-mono);
- letter-spacing: 0.12em;
- text-transform: uppercase;
- color: var(--fg-faint);
-}
-.sidebar-close-btn {
- background: none;
- border: none;
- color: var(--fg-faint);
- cursor: pointer;
- font-size: 1rem;
- padding: 2px 4px;
- line-height: 1;
- transition: color var(--dur-fast);
- border-radius: 3px;
-}
-.sidebar-close-btn:hover { color: var(--fg); background: var(--surface-2); }
-
-#file-tree {
- flex: 1;
- overflow-y: auto;
- overflow-x: hidden;
- padding-bottom: 12px;
-}
-
-/* Firefox */
-#file-tree {
- scrollbar-width: thin;
- scrollbar-color: var(--border-2) transparent;
-}
-
-/* Chrome / Edge / Safari */
-#file-tree::-webkit-scrollbar,
-#sidebar::-webkit-scrollbar {
- width: 6px;
-}
-
-#file-tree::-webkit-scrollbar-track,
-#sidebar::-webkit-scrollbar-track {
- background: transparent;
-}
-
-#file-tree::-webkit-scrollbar-thumb,
-#sidebar::-webkit-scrollbar-thumb {
- background-color: var(--border-2);
- border-radius: 4px;
-}
-
-
-.tree-folder {
- display: flex;
- align-items: center;
- gap: 6px;
- padding: 4px 10px 4px 12px;
- font-size: 0.68rem;
- cursor: pointer;
- color: var(--fg-faint);
- border-radius: 3px;
- margin: 2px 4px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- user-select: none;
- font-weight: 500;
- font-family: var(--font-mono);
- letter-spacing: 0.06em;
- text-transform: uppercase;
- transition: background var(--dur-fast), color var(--dur-fast);
-}
-.tree-folder:hover { background: var(--accent-sub); color: var(--fg); }
-
-.tree-file {
- /* display: flex; */
- align-items: center;
- gap: 6px;
- padding: 3px 10px 3px 12px;
- font-size: 0.76rem;
- cursor: pointer;
- color: var(--fg-dim);
- border-radius: 3px;
- margin: 1px 4px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- user-select: none;
- transition: background var(--dur-fast), color var(--dur-fast);
-}
-.tree-file:hover { background: var(--accent-sub); color: var(--fg); }
-.tree-file.active {
- background: color-mix(in oklab, var(--accent) 14%, transparent);
- color: var(--accent);
-}
-
-.tree-icon { font-size: 9px; opacity: 0.5; flex-shrink: 0; width: 10px; }
-.tree-folder-label { overflow: hidden; text-overflow: ellipsis; }
-.tree-children { padding-left: 10px; }
-
-/* =========================================================
- MAIN AREA
- ========================================================= */
-
-#main {
- flex: 1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- min-width: 0;
- position: relative;
-}
-
-#tab-bar { display: none !important; }
-
-/* =========================================================
- NOTE TOOLBAR
- ========================================================= */
-
-#note-toolbar {
- display: flex;
- align-items: center;
- gap: var(--r2);
- padding: 4px var(--r4);
- height: var(--toolbar-h);
- background: var(--bg);
- border-bottom: 1px solid var(--border);
- flex-shrink: 0;
- font-size: 0.75rem;
- font-family: var(--font-mono);
-}
-
-.toolbar-btn {
- display: inline-flex;
- align-items: center;
- gap: 4px;
- padding: 3px 8px;
- border-radius: 4px;
- background: transparent;
- border: 1px solid transparent;
- color: var(--fg-dim);
- cursor: pointer;
- font-size: 0.72rem;
- font-family: var(--font-mono);
- transition: all var(--dur-fast);
- white-space: nowrap;
-}
-.toolbar-btn:hover:not(:disabled) {
- border-color: var(--border-2);
- color: var(--fg);
- background: var(--surface);
-}
-.toolbar-btn.active {
- border-color: var(--accent-dim);
- color: var(--accent);
- background: var(--accent-glow);
-}
-.toolbar-btn:disabled { cursor: default; }
-
-.toolbar-sep {
- width: 1px; height: 16px;
- background: var(--border);
- flex-shrink: 0;
-}
-.toolbar-spacer { flex: 1; }
-
-.note-graph-pos {
- color: var(--fg-faint);
- font-size: 0.68rem;
- letter-spacing: 0.03em;
- max-width: 200px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-/* =========================================================
- MAIN INNER + CONTENT AREA
- ========================================================= */
-
-#main-inner {
- flex: 1;
- display: flex;
- overflow: hidden;
- min-height: 0;
-}
-
-#content-area {
- flex: 1;
- overflow-y: auto;
- overflow-x: hidden;
- background: var(--pane-bg);
- position: relative;
- scrollbar-width: thin;
- scrollbar-color: var(--border) transparent;
- background-image: repeating-linear-gradient(
- 180deg,
- transparent, transparent 27px,
- color-mix(in oklab, var(--fg) 2%, transparent) 27px,
- color-mix(in oklab, var(--fg) 2%, transparent) 28px
- );
- background-attachment: local;
-}
-#content-area::-webkit-scrollbar { width: 5px; }
-#content-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-
-#content-area::before {
- content: '';
- position: absolute;
- top: 0; left: 52px; width: 1px; height: 100%;
- background: color-mix(in oklab, var(--accent) 8%, transparent);
- pointer-events: none;
- z-index: 0;
-}
-
-.tab-content { display: none; min-height: 100%; position: relative; z-index: 1; }
-.tab-content.active { display: block; }
-
-/* =========================================================
- NOTE CONTENT
- ========================================================= */
-
-#content, .tab-content-inner {
- margin: 0 auto;
- padding: var(--r6) var(--content-pad) calc(var(--r8) * 2.5);
-}
-
-/* =========================================================
- TITLE SECTION
- ========================================================= */
-
-.title-section {
- position: relative;
- margin-bottom: var(--r6);
- padding: var(--r5) var(--r5) var(--r4);
- background: color-mix(in oklab, var(--surface) 60%, transparent);
- border: 1px solid var(--border);
- border-left: 3px solid var(--accent-dim);
- border-radius: 0 7px 7px 0;
-}
-
-.title-section .title {
- margin: 0 0 var(--r3);
- font-size: 1.5rem;
- font-weight: 500;
- line-height: 1.25;
- letter-spacing: -0.025em;
- color: var(--heading);
-}
-
-.title-metadata {
- display: flex;
- flex-wrap: wrap;
- gap: var(--r4);
- align-items: center;
-}
-
-.metadata-item {
- display: flex;
- align-items: baseline;
- gap: 5px;
- font-size: 0.7rem;
- font-family: var(--font-mono);
- letter-spacing: 0.04em;
-}
-.metadata-label { color: var(--fg-faint); }
-.metadata-value { color: var(--accent); }
-
-.title-controls,
-.pane-header,
-.pane-close,
-.pane-fullscreen,
-.pane-edit { display: none !important; }
-
-/* =========================================================
- TYPOGRAPHY
- ========================================================= */
-
-h1 {
- font-size: 1.5rem; font-weight: 500;
- letter-spacing: -0.02em; color: var(--heading);
- margin: 0 0 var(--r5); line-height: 1.25;
-}
-h2 {
- font-size: 1.1rem; font-weight: 500;
- letter-spacing: -0.01em; color: var(--heading);
- margin: var(--r8) 0 var(--r4);
- padding-bottom: var(--r3);
- border-bottom: 1px solid var(--border);
-}
-h3 {
- font-size: 1rem; font-weight: 500;
- color: var(--heading-2); margin: var(--r6) 0 var(--r3);
-}
-h4 {
- font-size: 0.9rem; font-weight: 500;
- color: var(--heading-3); margin: var(--r5) 0 var(--r2);
-}
-
-p { margin: 0 0 var(--r4); font-weight: 300; }
-
-a {
- color: var(--link);
- text-decoration: none;
- border-bottom: 1px solid color-mix(in oklab, var(--link) 35%, transparent);
- transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
- border-radius: 2px;
- padding: 0 1px;
-}
-a:hover {
- color: var(--link-hover);
- border-bottom-color: var(--accent-dim);
- background: var(--accent-glow);
-}
-
-#content a[href$=".html"]::before {
- content: '\5B\5B';
- font-family: var(--font-mono);
- font-size: 0.72em;
- opacity: 0.4;
- letter-spacing: -0.05em;
-}
-#content a[href$=".html"]::after {
- content: '\5D\5D';
- font-family: var(--font-mono);
- font-size: 0.72em;
- opacity: 0.4;
- letter-spacing: -0.05em;
-}
-
-strong { font-weight: 500; color: var(--fg); }
-em { font-style: italic; font-family: var(--font-serif); }
-
-.tag {
- background: var(--tag-bg) !important;
- color: var(--accent) !important;
- font-family: var(--font-mono);
- font-size: 0.7rem;
- padding: 0.15em 0.5em;
- border-radius: 3px;
- letter-spacing: 0.04em;
- border: 1px solid var(--border-2);
-}
-
-/* =========================================================
- BACKLINK PANEL (right side)
- ========================================================= */
-
-#backlink-panel {
- width: 0;
- flex-shrink: 0;
- background: var(--bg);
- border-left: 1px solid var(--border);
- overflow: hidden;
- display: flex;
- flex-direction: column;
- transition: width var(--dur-mid) var(--ease-out);
- font-size: 0.8rem;
-}
-
-#backlink-panel.open { width: 240px; }
-
-.bp-header {
- display: flex;
- align-items: center;
- gap: var(--r2);
- padding: 10px 12px 8px;
- flex-shrink: 0;
- border-bottom: 1px solid var(--border);
-}
-
-.bp-label {
- font-size: 0.6rem;
- font-family: var(--font-mono);
- letter-spacing: 0.12em;
- text-transform: uppercase;
- color: var(--fg-faint);
- flex: 1;
-}
-
-.bp-count {
- font-family: var(--font-mono);
- font-size: 0.68rem;
- color: var(--accent);
- background: var(--accent-glow);
- border: 1px solid var(--accent-dim);
- border-radius: 10px;
- padding: 0 6px;
- min-width: 20px;
- text-align: center;
-}
-
-.bp-close {
- background: none;
- border: none;
- color: var(--fg-faint);
- cursor: pointer;
- font-size: 1rem;
- padding: 0 4px;
- line-height: 1;
- border-radius: 3px;
- transition: color var(--dur-fast), background var(--dur-fast);
- flex-shrink: 0;
-}
-.bp-close:hover { color: var(--fg); background: var(--surface-2); }
-
-.bp-list {
- flex: 1;
- overflow-y: auto;
- padding: var(--r3);
- scrollbar-width: thin;
- scrollbar-color: var(--border-2) transparent;
- display: flex;
- flex-direction: column;
- gap: var(--r3);
-}
-
-.bp-item {
- padding: var(--r3);
- border: 1px solid var(--border);
- border-radius: 6px;
- background: var(--surface);
- cursor: pointer;
- transition: border-color var(--dur-fast), background var(--dur-fast);
-}
-.bp-item:hover { border-color: var(--accent-dim); background: var(--surface-2); }
-
-.bp-item-title {
- font-size: 0.78rem;
- font-weight: 500;
- color: var(--link);
- margin-bottom: 3px;
- display: flex;
- align-items: center;
- gap: 4px;
-}
-.bp-item-title::before {
- content: '';
- width: 6px; height: 6px;
- border: 1.5px solid var(--accent-dim);
- border-radius: 50%;
- flex-shrink: 0;
-}
-
-.bp-item-excerpt {
- font-size: 0.72rem;
- color: var(--fg-faint);
- line-height: 1.45;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
-}
-
-.bp-empty {
- padding: var(--r5) var(--r3);
- text-align: center;
- color: var(--fg-faint);
- font-size: 0.78rem;
- font-style: italic;
-}
-
-/* =========================================================
- HOVER PREVIEW CARD
- ========================================================= */
-
-#link-preview {
- position: fixed;
- z-index: 999;
- background: var(--bg);
- border: 1px solid var(--border-2);
- border-radius: 8px;
- box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
- width: 300px;
- max-height: 220px;
- overflow: hidden;
- pointer-events: none;
- opacity: 0;
- transform: translateY(6px);
- transition: opacity var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
-}
-
-#link-preview.visible {
- opacity: 1;
- transform: translateY(0);
-}
-
-.preview-inner { padding: var(--r3) var(--r4); }
-
-.preview-title {
- font-size: 0.82rem;
- font-weight: 500;
- color: var(--heading);
- margin-bottom: var(--r2);
- padding-bottom: var(--r2);
- border-bottom: 1px solid var(--border);
- font-family: var(--font-mono);
- letter-spacing: 0.02em;
- display: flex;
- align-items: center;
- gap: 6px;
-}
-.preview-title::before { content: '\5B\5B'; color: var(--fg-faint); font-size: 0.9em; }
-.preview-title::after { content: '\5D\5D'; color: var(--fg-faint); font-size: 0.9em; }
-
-.preview-body {
- font-size: 0.76rem;
- color: var(--fg-dim);
- line-height: 1.5;
- display: -webkit-box;
- -webkit-line-clamp: 5;
- -webkit-box-orient: vertical;
- overflow: hidden;
-}
-
-.preview-footer {
- padding: var(--r2) var(--r4);
- border-top: 1px solid var(--border);
- font-size: 0.68rem;
- font-family: var(--font-mono);
- color: var(--fg-faint);
- display: flex;
- align-items: center;
- gap: 4px;
-}
-.preview-footer::before { content: '\21B5'; color: var(--accent); }
-
-/* =========================================================
- IMAGES
- ========================================================= */
-
-#content .figure,
-#content img:not(.fullwidth) {
- max-width: 100%;
- height: auto;
- border-radius: 4px;
- display: block;
- border: 1px solid var(--border);
- margin: var(--r5) 0;
-}
-
-/* =========================================================
- VIDEO / AUDIO
- ========================================================= */
-
-#content video, .tab-content video {
- max-width: 100%; width: 100%; height: auto;
- display: block; border-radius: 6px;
- background: #000; margin: var(--r5) 0;
-}
-
-.video-container {
- position: relative; margin: var(--r5) 0;
- border-radius: 6px; overflow: hidden;
- background: #000; line-height: 0;
-}
-
-.audio-player {
- margin: var(--r5) 0;
- padding: var(--r4);
- border-radius: 6px;
- background: var(--surface);
- border: 1px solid var(--border);
-}
-.audio-label {
- font-size: 0.7rem; font-family: var(--font-mono);
- color: var(--fg-faint); letter-spacing: 0.04em;
- margin-bottom: var(--r3);
-}
-.audio-player audio {
- width: 100%; display: block;
- min-height: 40px; accent-color: var(--accent);
-}
-
-/* =========================================================
- LISTS
- ========================================================= */
-
-ul, ol { margin: var(--r3) 0 var(--r5) var(--r4); padding: 0; line-height: 1.7; }
-ul { list-style: none; }
-ul li { position: relative; padding-left: 1.4em; }
-ul li::before {
- content: "\203A";
- position: absolute; left: 0; top: 0;
- color: var(--accent); font-weight: 700; font-size: 0.85em;
- opacity: 0.7;
-}
-
-ol { counter-reset: list-counter; list-style: none; }
-ol li { counter-increment: list-counter; position: relative; padding-left: 2em; }
-ol li::before {
- content: counter(list-counter);
- position: absolute; left: 0; top: 0.05em;
- font-family: var(--font-mono); font-size: 0.78em;
- color: var(--accent); font-weight: 500; letter-spacing: 0.04em; opacity: 0.7;
-}
-
-li { margin-bottom: 0.45rem; display: flow-root; }
-li ul, li ol { margin-top: var(--r2); margin-bottom: var(--r2); }
-li ul li::before { content: "\00B7"; font-weight: normal; color: var(--fg-faint); font-size: 1em; }
-
-/* =========================================================
- BLOCKQUOTE
- ========================================================= */
-
-blockquote {
- margin: var(--r5) 0;
- padding: var(--r4) var(--r5);
- border-left: 2px solid var(--accent);
- background: var(--accent-glow);
- border-radius: 0 6px 6px 0;
- color: var(--fg-dim);
- font-family: var(--font-serif);
- font-style: italic;
- line-height: 1.75;
-}
-blockquote p { margin: 0; }
-
-.epigraph { margin: var(--r6) auto; max-width: 82%; }
-.epigraph blockquote {
- margin: 0; padding: var(--r4) var(--r5);
- border-left: 2px solid var(--accent-dim);
-}
-.epigraph blockquote footer {
- margin-top: var(--r3); font-style: normal; font-size: 0.85em;
- color: var(--fg-faint); text-align: right; font-family: var(--font-mono);
-}
-.epigraph blockquote cite { font-style: italic; color: var(--accent); }
-
-/* =========================================================
- CODE — inline
- ========================================================= */
-
-:not(pre) > code {
- padding: 0.15em 0.45em;
- font-family: var(--font-mono);
- font-size: 0.82em;
- background: var(--code-bg);
- color: var(--heading-2);
- border: 1px solid var(--border-2);
- border-radius: 4px;
-}
-
-/* =========================================================
- CODE BLOCKS — fixed: no overflow, readable label, mobile-safe
- ========================================================= */
-
-.org-src-container {
- position: relative;
- margin: var(--r5) 0;
- border: 1px solid var(--border-2);
- border-radius: 7px;
- background: var(--code-bg);
- overflow: hidden;
- /* Prevent the block itself from stretching the page */
- max-width: 100%;
- min-width: 0;
-}
-
-/* The language label row */
-.org-src-container > pre::before {
- /* We move the label out of the flow entirely — it sits
- as a tiny dim watermark in the top-right corner */
- content: attr(data-lang);
- position: absolute;
- top: 0.45rem;
- right: 0.6rem;
- font-size: 0.62rem;
- font-family: var(--font-mono);
- letter-spacing: 0.08em;
- color: var(--fg-ghost);
- pointer-events: none;
- z-index: 2;
- line-height: 1;
- /* Override the old full-width bar styles */
- display: block;
- background: transparent;
- border: none;
- padding: 0;
- text-transform: lowercase;
-}
-
-/* Per-language label text via data-lang on the .
- Emacs Org sets class="src src-python" etc, so we also
- handle the legacy class-based labels as a fallback. */
-.org-src-container > pre.src-bash::before { content: "bash"; }
-.org-src-container > pre.src-sh::before { content: "sh"; }
-.org-src-container > pre.src-python::before { content: "python"; }
-.org-src-container > pre.src-emacs-lisp::before { content: "elisp"; }
-.org-src-container > pre.src-js::before,
-.org-src-container > pre.src-javascript::before { content: "js"; }
-.org-src-container > pre.src-typescript::before { content: "ts"; }
-.org-src-container > pre.src-html::before { content: "html"; }
-.org-src-container > pre.src-css::before { content: "css"; }
-.org-src-container > pre.src-rust::before { content: "rust"; }
-.org-src-container > pre.src-R::before { content: "R"; }
-
-/* The itself — scrolls horizontally, never wraps */
-.org-src-container > pre {
- margin: 0;
- padding: 0.9rem 0.85rem;
- font-family: var(--font-mono);
- font-size: 0.82rem;
- line-height: 1.6;
- color: var(--fg);
- background: transparent;
- /* Horizontal scroll instead of page-breaking overflow */
- overflow-x: auto;
- overflow-y: visible;
- -webkit-overflow-scrolling: touch;
- /* Never wrap — let it scroll */
- white-space: pre;
- /* Constrain to parent so it can't break layout */
- max-width: 100%;
- min-width: 0;
- /* Make room for the language watermark in top-right */
- padding-top: 1.6rem;
-}
-
-/* Standalone pre.src (not wrapped in .org-src-container) */
-pre.src {
- position: relative;
- margin: var(--r5) 0;
- padding: 0.9rem 0.85rem;
- font-family: var(--font-mono);
- font-size: 0.82rem;
- line-height: 1.6;
- color: var(--fg);
- background: var(--code-bg);
- border: 1px solid var(--border-2);
- border-radius: 7px;
- overflow-x: auto;
- overflow-y: visible;
- -webkit-overflow-scrolling: touch;
- white-space: pre;
- max-width: 100%;
- min-width: 0;
-}
-
-/* Copy button */
-.copy-btn {
- position: absolute;
- top: 0.45rem;
- right: 0.5rem;
- background: var(--surface);
- color: var(--fg-faint);
- border: 1px solid var(--border-2);
- border-radius: 4px;
- padding: 0.2em 0.55em;
- font-size: 0.65rem;
- font-family: var(--font-mono);
- letter-spacing: 0.04em;
- cursor: pointer;
- z-index: 10;
- transition: all var(--dur-fast);
- line-height: 1.4;
-}
-.copy-btn:hover {
- color: var(--fg);
- border-color: var(--accent-dim);
- background: var(--accent-glow);
-}
-
-/* =========================================================
- TABLES — mobile-safe with horizontal scroll
- ========================================================= */
-
-/* Wrap every table in a .table-wrapper div (or do it in JS).
- If you can't add wrapper divs, the table rules below still
- improve things; just overflow-x won't be contained. */
-.table-wrapper {
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- border: 1px solid var(--border);
- border-radius: 7px;
- margin: var(--r5) 0;
- max-width: 100%;
-}
-
-/* When Org-mode emits a bare with no wrapper,
- contain it the same way at the table level itself. */
-#content table {
- border-collapse: collapse;
- width: 100%;
- /* Allow horizontal scroll; never let columns shrink to nothing */
- min-width: 0;
- font-size: 0.85rem;
- font-family: var(--font-body);
- display: block; /* block so overflow-x works on the element */
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- /* Restore normal table layout inside the block box */
- /* (display:block on makes it scroll without a wrapper) */
-}
-
-/* But if it IS inside a .table-wrapper, use normal table display */
-.table-wrapper table {
- display: table;
- width: 100%;
- border-collapse: collapse;
-}
-
-#content table thead,
-.table-wrapper table thead {
- position: sticky;
- top: 0;
- z-index: 1;
-}
-
-#content table th,
-.table-wrapper table th {
- text-align: left;
- padding: 0.55rem 0.85rem;
- font-size: 0.68rem;
- font-family: var(--font-mono);
- font-weight: 500;
- letter-spacing: 0.08em;
- text-transform: uppercase;
- color: var(--fg-faint);
- background: color-mix(in oklab, var(--surface) 80%, transparent);
- border-bottom: 1px solid var(--border-2);
- white-space: nowrap;
-}
-
-#content table td,
-.table-wrapper table td {
- padding: 0.5rem 0.85rem;
- color: var(--fg-dim);
- border-bottom: 1px solid var(--border);
- vertical-align: top;
- /* Allow long words to break so cells don't balloon */
- word-break: break-word;
- overflow-wrap: break-word;
-}
-
-#content table tr:last-child td,
-.table-wrapper table tr:last-child td {
- border-bottom: none;
-}
-
-#content table tbody tr,
-.table-wrapper table tbody tr {
- transition: background var(--dur-fast);
-}
-
-#content table tbody tr:hover,
-.table-wrapper table tbody tr:hover {
- background: var(--accent-glow);
-}
-
-/* =========================================================
- TABLE OF CONTENTS
- ========================================================= */
-
-#table-of-contents { margin-bottom: var(--r6); }
-#text-table-of-contents ul { margin: var(--r2) 0; }
-#text-table-of-contents a {
- font-size: 0.82rem; color: var(--fg-dim);
- border-bottom: none; transition: color var(--dur-fast);
-}
-#text-table-of-contents a:hover { color: var(--fg); border-bottom: none; }
-#text-table-of-contents a.is-active,
-#text-table-of-contents a[aria-current] { color: var(--accent); }
-
-#text-table-of-contents a::before,
-#text-table-of-contents a::after { content: none !important; }
-
-/* =========================================================
- BACKLINKS SECTION
- ========================================================= */
-
-.backlinks-section {
- margin-top: var(--r8); padding-top: var(--r5);
- border-top: 1px solid var(--border);
- opacity: 0.9;
-}
-.backlinks-section h2 {
- font-size: 0.68rem; font-family: var(--font-mono);
- letter-spacing: 0.1em; text-transform: uppercase;
- color: var(--fg-faint); border-bottom: none; margin-top: 0; padding-bottom: 0;
-}
-.backlinks-list { margin-top: var(--r3); padding-left: 0; }
-.backlinks-list li {
- margin-bottom: var(--r2); font-size: 0.85rem;
- list-style: none; padding-left: 0;
-}
-.backlinks-list li::before {
- content: "\2190 "; font-size: 0.8em; opacity: 0.4;
- margin-right: var(--r1); color: var(--accent);
-}
-.backlinks-list li a {
- color: var(--link); border-bottom: 1px solid transparent;
- font-weight: 400;
- transition: color var(--dur-fast), border-color var(--dur-fast);
-}
-.backlinks-list li a:hover { color: var(--link-hover); border-bottom-color: var(--fg-faint); }
-.backlinks-list li a::before,
-.backlinks-list li a::after { content: none !important; }
-
-/* =========================================================
- SIDENOTES
- ========================================================= */
-
-.sidenote {
- font-size: 0.78rem; line-height: 1.5;
- color: var(--fg-dim);
- font-family: var(--font-serif);
- font-style: italic;
-}
-
-/* =========================================================
- FOOTER
- ========================================================= */
-
-#postamble, footer {
- color: var(--fg-faint);
- padding: var(--r2) var(--r5);
- border-top: 1px solid var(--border);
- background: var(--bg);
- text-align: center;
- font-size: 0.68rem;
- font-family: var(--font-mono);
- letter-spacing: 0.03em;
- flex-shrink: 0;
-}
-#postamble a, footer a { color: var(--fg-faint); }
-#postamble a:hover, footer a:hover { color: var(--fg); }
-
-/* =========================================================
- BIGGER-PICTURE GALLERY
- ========================================================= */
-
-.bp-x { right: 72px; }
-.bp-next, .bp-prev { right: 8px; }
-.bp-prev { left: 8px; }
-.bp-wrap { transition: opacity 0.18s ease; }
-.bp-wrap.bp-fadeout { opacity: 0; }
-.bp-controls { padding-top: env(safe-area-inset-top, 0); }
-
-/* =========================================================
- DOM SCAFFOLDING COMPAT
- ========================================================= */
-
-#stack-root, .stack-track, .stack-pane { display: contents; }
-
-/* =========================================================
- MOBILE SIDEBAR BACKDROP
- ========================================================= */
-
-#sidebar-backdrop {
- display: none;
- position: fixed;
- inset: 0;
- background: rgba(0,0,0,0.5);
- z-index: 99;
- backdrop-filter: blur(2px);
-}
-#sidebar-backdrop.visible { display: block; }
-
-/* =========================================================
- RESPONSIVE
- ========================================================= */
-
-@media (max-width: 768px) {
- :root {
- --rail-w: 0px;
- --content-pad: 1rem;
- }
- #sidebar {
- position: fixed;
- left: 0;
- top: calc(var(--header-h) + var(--toolbar-h));
- bottom: 0;
- z-index: 200;
- width: 0;
- }
- #sidebar.mobile-open,
- #sidebar.expanded { width: var(--panel-w) !important; }
-
- #backlink-panel.open { width: 200px; }
- #breadcrumb-trail { display: none; }
-
- #note-toolbar { flex-wrap: wrap; height: auto; }
-
- /* Code blocks on mobile */
- .org-src-container > pre,
- pre.src {
- font-size: 0.75rem;
- padding: 1.4rem 0.7rem 0.7rem;
- }
-
- /* Tables on mobile — already scroll via display:block,
- but tighten cell padding */
- #content table th,
- .table-wrapper table th {
- padding: 0.45rem 0.6rem;
- font-size: 0.65rem;
- }
- #content table td,
- .table-wrapper table td {
- padding: 0.45rem 0.6rem;
- font-size: 0.8rem;
- }
-
- .table-wrapper {
- margin: var(--r4) 0;
- border-radius: 5px;
- }
-}
-
-/* =========================================================
- UTILITIES
- ========================================================= */
-
-.hidden { display: none !important; }
-.recipe-meta td:first-child { font-weight: 600; white-space: nowrap; }
-.recipe-meta { font-size: 0.9em; opacity: 0.85; }
-
-@keyframes note-in {
- from { opacity: 0; transform: translateY(4px); }
- to { opacity: 1; transform: translateY(0); }
-}
-.tab-content.active #content {
- animation: note-in 200ms var(--ease-out) forwards;
-}
-
-#reading-progress {
- position: fixed;
- top: var(--header-h);
- left: 0;
- height: 2px;
- background: var(--accent);
- width: 0%;
- transition: width 80ms linear;
- z-index: 400;
- pointer-events: none;
-}
-
-.note-loading {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 40vh;
- color: var(--fg-faint);
- font-family: var(--font-mono);
- font-size: 0.85rem;
- 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.
- ========================================================= */
+@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,520;0,650;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;650&family=Noto+Sans+Arabic:wght@400;700&display=swap");
: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;
+ --header-h: 58px;
+ --toolbar-h: 42px;
+ --rail-w: 332px;
+ --panel-w: 332px;
+ --content-max: 1160px;
+ --content-pad: clamp(1.25rem, 3.4vw, 4.5rem);
- --fg: #e8ddc8;
- --fg-dim: #b7a88e;
- --fg-faint: #80705b;
- --fg-ghost: #4e4435;
+ --ink: #080807;
+ --black: #0b0b09;
+ --brown-950: #11100c;
+ --brown-900: #17140e;
+ --brown-850: #1e1a12;
+ --brown-800: #272115;
+ --brown-700: #352b1a;
+ --green-900: #101914;
+ --green-700: #294638;
+ --burgundy: #7b2f37;
+ --blue: #596f8d;
+ --gold: #c4a35f;
+ --gold-soft: #dfc989;
+ --paper: #e9dec7;
+ --paper-dim: #c8b99a;
+ --paper-muted: #94866f;
+ --paper-faint: #675b49;
+ --line: rgba(196, 163, 95, 0.24);
+ --line-strong: rgba(196, 163, 95, 0.46);
+ --shadow: 0 24px 90px rgba(0, 0, 0, 0.38);
- --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);
+ --bg: var(--black);
+ --page-bg: var(--black);
+ --pane-bg: var(--brown-900);
+ --surface: var(--brown-850);
+ --surface-2: var(--brown-800);
+ --surface-3: var(--brown-700);
+ --fg: var(--paper);
+ --fg-dim: var(--paper-dim);
+ --fg-faint: var(--paper-muted);
+ --fg-ghost: var(--paper-faint);
+ --accent: var(--gold);
+ --accent-dim: rgba(196, 163, 95, 0.38);
+ --accent-sub: rgba(196, 163, 95, 0.1);
+ --accent-glow: rgba(196, 163, 95, 0.065);
+ --accent-subtle: rgba(196, 163, 95, 0.12);
+ --heading: #f3e7cd;
+ --heading-2: #d9bd72;
+ --heading-3: #c5856a;
+ --link: #d7bb73;
+ --link-hover: #fff2d4;
+ --tag-bg: rgba(41, 70, 56, 0.34);
+ --tag-fg: #cad9c8;
+ --border: var(--line);
+ --border-2: var(--line-strong);
+ --border-mid: var(--line);
+ --chip-bg: rgba(233, 222, 199, 0.07);
+ --code-bg: #070806;
- --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-serif: "Crimson Pro", Georgia, "Times New Roman", "Noto Sans Arabic", serif;
+ --font-body: "Crimson Pro", Georgia, "Times New Roman", "Noto Sans Arabic", serif;
+ --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
- --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;
+ --r1: 2px;
+ --r2: 4px;
+ --r3: 6px;
+ --r4: 10px;
+ --r5: 16px;
+ --r6: 24px;
+ --r8: 40px;
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+ --dur-fast: 120ms;
+ --dur-mid: 220ms;
+ --dur-slow: 420ms;
}
[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);
+ --black: #d8c8a6;
+ --brown-950: #e3d5b7;
+ --brown-900: #efe4cb;
+ --brown-850: #f6ecd8;
+ --brown-800: #e3d3ae;
+ --brown-700: #cbb788;
+ --green-900: #dce5d8;
+ --green-700: #4f725d;
+ --burgundy: #7b2f37;
+ --blue: #405f82;
+ --gold: #8a6120;
+ --gold-soft: #65450e;
+ --paper: #20170e;
+ --paper-dim: #554733;
+ --paper-muted: #79684e;
+ --paper-faint: #a5926d;
+ --line: rgba(86, 62, 20, 0.28);
+ --line-strong: rgba(86, 62, 20, 0.48);
+ --shadow: 0 18px 44px rgba(62, 42, 16, 0.14);
+ --heading: #20160c;
+ --heading-2: #6b4915;
+ --heading-3: #7b3b31;
+ --link: #604719;
+ --link-hover: #171006;
+ --tag-bg: rgba(79, 114, 93, 0.15);
--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;
+ --code-bg: #e5d7b8;
+}
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
}
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;
+ margin: 0;
+ min-height: 100dvh;
+ height: 100dvh;
+ overflow: hidden;
color: var(--fg);
- font-family: var(--font-body);
- font-size: 18px;
- line-height: 1.78;
+ background:
+ linear-gradient(rgba(233, 222, 199, 0.023) 1px, transparent 1px),
+ linear-gradient(90deg, rgba(233, 222, 199, 0.018) 1px, transparent 1px),
+ radial-gradient(circle at 16% 0%, rgba(123, 47, 55, 0.22), transparent 33rem),
+ radial-gradient(circle at 82% 8%, rgba(41, 70, 56, 0.24), transparent 30rem),
+ linear-gradient(135deg, #090907 0%, #15120d 48%, #20180f 100%);
+ background-size: 34px 34px, 34px 34px, auto, auto, auto;
+ font: 19px/1.72 var(--font-body);
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
}
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;
+ pointer-events: none;
+ opacity: 0.26;
+ background:
+ repeating-linear-gradient(180deg, transparent 0, transparent 28px, rgba(233, 222, 199, 0.03) 29px),
+ linear-gradient(90deg, transparent 0, transparent 58px, rgba(123, 47, 55, 0.2) 59px, transparent 60px);
}
-body,
-p,
-li,
-td,
-th,
-span,
-div {
- font-family: var(--font-body);
+body > * {
+ position: relative;
+ z-index: 1;
}
button,
input,
select,
-textarea,
-.banner-header,
-#note-toolbar,
-#sidebar,
-#backlink-panel,
-#link-preview,
-#postamble,
-footer {
- font-family: var(--font-ui);
+textarea {
+ font: inherit;
}
-#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);
+button {
+ cursor: pointer;
}
+::selection {
+ color: #120f09;
+ background: var(--gold-soft);
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(8, 8, 7, 0.38);
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(196, 163, 95, 0.34);
+ border: 2px solid rgba(8, 8, 7, 0.38);
+}
+
+/* Header */
+
#preamble {
- box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
+ flex: 0 0 var(--header-h);
+ height: var(--header-h);
+ background:
+ linear-gradient(180deg, rgba(30, 26, 18, 0.98), rgba(9, 9, 7, 0.98));
+ border-bottom: 1px solid var(--line-strong);
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
+ z-index: 400;
}
.banner-header {
- gap: 0.8rem;
+ height: 100%;
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto auto;
+ align-items: center;
+ gap: 14px;
+ padding: 0 18px;
+ font-family: var(--font-ui);
}
.banner-left {
- display: flex;
- align-items: center;
min-width: 0;
}
.archive-mark {
- display: inline-flex;
+ display: grid;
+ grid-template-columns: 38px auto;
align-items: center;
- gap: 0.55rem;
- min-width: max-content;
+ gap: 10px;
color: var(--fg);
- border-bottom: 0;
text-decoration: none;
+ border: 0;
}
.archive-mark:hover {
- background: transparent;
color: var(--heading);
+ background: transparent;
}
.archive-sigil {
- display: inline-grid;
+ display: grid;
place-items: center;
- width: 2rem;
- height: 2rem;
- border: 1px double var(--border-2);
+ width: 38px;
+ height: 38px;
+ color: var(--gold-soft);
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);
+ linear-gradient(145deg, rgba(196, 163, 95, 0.16), rgba(123, 47, 55, 0.18)),
+ #10100c;
+ border: 3px double var(--line-strong);
+ font: 600 0.74rem/1 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);
+.archive-name {
+ display: grid;
+ gap: 1px;
+ color: var(--paper-dim);
+ font: 600 0.68rem/1.1 var(--font-mono);
+ letter-spacing: 0.13em;
+ text-transform: uppercase;
}
-.crumb {
- border: 1px solid transparent;
- border-radius: 2px;
- font-family: var(--font-mono);
+.archive-name::after {
+ content: "field notes / commonplaces / records";
+ color: var(--paper-faint);
+ font-weight: 400;
+ letter-spacing: 0.02em;
text-transform: lowercase;
}
+#breadcrumb-trail {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ min-width: 0;
+ overflow: hidden;
+ color: var(--paper-muted);
+ font: 0.72rem var(--font-mono);
+}
+
+.crumb {
+ min-width: 0;
+ max-width: 18rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--paper-muted);
+ border: 1px solid transparent;
+ padding: 3px 6px;
+}
+
.crumb:hover {
- border-color: var(--border);
+ color: var(--paper);
+ background: rgba(233, 222, 199, 0.05);
+ border-color: var(--line);
}
.crumb.active {
- color: var(--heading-2);
+ color: var(--gold-soft);
}
-.search-trigger,
-.toolbar-btn,
-#theme-toggle,
-.rail-btn,
-.search-close,
-.sidebar-close-btn,
-.bp-close,
-.mermaid-view-btn,
-.copy-btn {
- border-radius: 2px;
+.crumb-sep {
+ color: var(--paper-faint);
+}
+
+.banner-search {
+ justify-self: end;
}
.search-trigger {
- min-width: 12.5rem;
- height: 32px;
- color: var(--fg-dim);
+ min-width: 240px;
+ height: 34px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 24px;
+ padding: 0 8px 0 12px;
+ color: var(--paper-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);
+ linear-gradient(180deg, rgba(233, 222, 199, 0.065), rgba(233, 222, 199, 0.025));
+ border: 1px solid var(--line);
+ border-radius: 0;
+ font: 0.74rem var(--font-mono);
text-transform: lowercase;
}
.search-trigger span::before {
- content: "catalogue: ";
- color: var(--accent);
+ content: "catalogue:";
+ margin-right: 0.45em;
+ color: var(--gold-soft);
}
.search-trigger kbd {
- border-radius: 2px;
- background: #0a0a07;
- color: var(--accent);
+ display: inline-grid;
+ place-items: center;
+ min-width: 23px;
+ height: 23px;
+ color: var(--gold-soft);
+ background: #090907;
+ border: 1px solid var(--line-strong);
+ font: 0.68rem var(--font-mono);
}
-.search-panel,
-#link-preview {
+.search-trigger:hover,
+.search-trigger:focus-visible {
+ color: var(--paper);
+ border-color: var(--gold);
+ outline: 0;
+ box-shadow: 0 0 0 3px rgba(196, 163, 95, 0.12);
+}
+
+.banner-actions {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+#theme-toggle,
+#close-all {
+ width: 34px;
+ height: 34px;
+ display: inline-grid;
+ place-items: center;
+ color: var(--paper-dim);
+ background: rgba(233, 222, 199, 0.035);
+ border: 1px solid var(--line);
+ border-radius: 0;
+ font: 0.9rem var(--font-mono);
+}
+
+#theme-toggle:hover,
+#close-all:hover {
+ color: var(--gold-soft);
+ border-color: var(--line-strong);
+}
+
+#close-all {
+ display: none !important;
+}
+
+/* Search modal */
+
+.search-modal[hidden] {
+ display: none;
+}
+
+.search-modal {
+ position: fixed;
+ inset: 0;
+ z-index: 1200;
+}
+
+.search-backdrop {
+ position: absolute;
+ inset: 0;
+ background: rgba(5, 5, 4, 0.72);
+ backdrop-filter: blur(5px);
+}
+
+.search-dialog {
+ position: relative;
+ min-height: 100%;
+ display: grid;
+ place-items: start center;
+ padding: 12vh 20px 24px;
+}
+
+.search-panel {
+ width: min(780px, calc(100vw - 32px));
+ max-height: min(680px, calc(100dvh - 24vh));
+ overflow: hidden;
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);
+ linear-gradient(rgba(233, 222, 199, 0.035) 1px, transparent 1px),
+ linear-gradient(180deg, rgba(39, 33, 21, 0.98), rgba(13, 13, 10, 0.98));
+ background-size: 100% 31px, auto;
+ border: 1px solid var(--line-strong);
+ box-shadow: var(--shadow);
+}
+
+.search-input-wrap {
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 12px;
+ padding: 14px;
+ border-bottom: 3px double var(--line);
+}
+
+.search-icon {
+ color: var(--gold-soft);
+ font: 1.15rem var(--font-mono);
}
#search-box {
- font-family: var(--font-serif);
+ width: 100%;
+ color: var(--paper);
+ background: transparent;
+ border: 0;
+ outline: 0;
+ font: 1.12rem var(--font-serif);
+}
+
+#search-box::placeholder {
+ color: var(--paper-faint);
+ font-style: italic;
+}
+
+.search-close {
+ width: 32px;
+ height: 32px;
+ color: var(--paper-muted);
+ background: transparent;
+ border: 1px solid transparent;
+}
+
+.search-close:hover {
+ color: var(--gold-soft);
+ border-color: var(--line);
+}
+
+.search-title,
+.search-empty {
+ color: var(--paper-muted);
+ font: 0.7rem var(--font-mono);
+ letter-spacing: 0.1em;
+ text-transform: uppercase;
+}
+
+.search-title {
+ padding: 10px 14px 8px;
+}
+
+#search-results {
+ max-height: min(500px, calc(100dvh - 260px));
+ overflow: auto;
+}
+
+.search-result {
+ width: 100%;
+ display: grid;
+ gap: 2px;
+ padding: 12px 14px;
+ color: var(--paper);
+ text-align: left;
+ background: transparent;
+ border: 0;
+ border-top: 1px solid rgba(196, 163, 95, 0.16);
+}
+
+.search-result:hover,
+.search-result.active {
+ background: rgba(196, 163, 95, 0.11);
+}
+
+.search-result-title {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font: 0.92rem var(--font-ui);
+}
+
+.search-result-path {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ color: var(--paper-muted);
+ font: 0.7rem var(--font-mono);
+}
+
+.search-empty {
+ padding: 28px 14px;
+ text-align: center;
+ border-top: 1px solid var(--line);
+}
+
+.search-empty[hidden] {
+ display: none;
+}
+
+/* Application shell */
+
+#layout-body {
+ flex: 1 1 auto;
+ min-height: 0;
+ display: grid;
+ grid-template-columns: var(--rail-w) minmax(0, 1fr);
+ overflow: hidden;
}
#sidebar {
- box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.28);
+ width: var(--rail-w);
+ min-width: var(--rail-w);
+ height: 100%;
+ overflow: hidden;
+ display: grid;
+ grid-template-rows: auto minmax(0, 1fr) auto;
+ align-items: stretch;
+ gap: 0;
+ padding: 0;
+ color: var(--paper-dim);
+ background:
+ linear-gradient(rgba(233, 222, 199, 0.026) 1px, transparent 1px),
+ linear-gradient(180deg, rgba(18, 25, 20, 0.98), rgba(12, 12, 9, 0.99));
+ background-size: 100% 29px, auto;
+ border-right: 1px solid var(--line-strong);
+ box-shadow: 16px 0 42px rgba(0, 0, 0, 0.18);
+ z-index: 150;
+}
+
+#sidebar.expanded {
+ width: var(--rail-w);
+ min-width: var(--rail-w);
+ overflow: hidden;
+}
+
+.sidebar-section-label,
+.sidebar-header-label {
+ padding: 13px 16px 10px;
+ color: var(--gold-soft);
+ border-bottom: 1px solid var(--line);
+ font: 600 0.68rem var(--font-mono);
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+}
+
+.sidebar-section-label::before,
+.sidebar-header-label::before {
+ content: "[";
+ color: var(--burgundy);
+}
+
+.sidebar-section-label::after,
+.sidebar-header-label::after {
+ content: "]";
+ color: var(--burgundy);
+}
+
+#file-tree {
+ min-height: 0;
+ overflow: auto;
+ padding: 10px 8px 18px;
+ scrollbar-width: thin;
+ scrollbar-color: var(--line-strong) transparent;
+}
+
+.sidebar-panel {
+ display: contents;
+}
+
+.sidebar-header {
+ display: contents;
+}
+
+.sidebar-close-btn {
+ display: none;
}
.rail-btn {
- border: 1px solid transparent;
- font-family: var(--font-mono);
- color: var(--fg-faint);
+ width: calc(100% - 16px);
+ height: 34px;
+ margin: 4px 8px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-start;
+ gap: 8px;
+ color: var(--paper-muted);
+ background: rgba(8, 8, 7, 0.18);
+ border: 1px solid var(--line);
+ border-radius: 0;
+ font: 0.72rem var(--font-mono);
+ text-transform: uppercase;
+}
+
+.rail-btn::after {
+ content: attr(title);
+ color: inherit;
+ font: inherit;
}
.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;
+ color: var(--gold-soft);
+ background: rgba(196, 163, 95, 0.1);
+ border-color: var(--line-strong);
}
.tree-folder {
- border-top: 1px solid rgba(195, 160, 90, 0.08);
- border-radius: 0;
- color: var(--fg-dim);
+ display: grid;
+ grid-template-columns: auto minmax(0, 1fr) auto;
+ align-items: center;
+ gap: 7px;
+ margin: 8px 0 3px;
+ padding: 7px 8px;
+ color: var(--paper);
+ background: rgba(233, 222, 199, 0.035);
+ border: 1px solid rgba(196, 163, 95, 0.16);
+ font: 600 0.68rem var(--font-mono);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ user-select: none;
}
.tree-folder:hover {
- background: rgba(195, 160, 90, 0.07);
+ color: var(--gold-soft);
+ border-color: var(--line-strong);
+}
+
+.tree-folder-label {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.tree-folder-count {
- margin-left: auto;
- padding: 0 0.4rem;
- border: 1px solid var(--border);
- background: var(--chip-bg);
- color: var(--fg-faint);
+ min-width: 2ch;
+ padding: 0 5px;
+ color: var(--paper-muted);
+ background: rgba(8, 8, 7, 0.28);
+ border: 1px solid rgba(196, 163, 95, 0.18);
+ text-align: center;
font: 0.62rem var(--font-mono);
}
+.tree-children {
+ margin: 0 0 8px 10px;
+ padding-left: 10px;
+ border-left: 1px solid rgba(196, 163, 95, 0.18);
+}
+
.tree-file {
- border-left: 1px solid rgba(195, 160, 90, 0.12);
- border-radius: 0;
- font-family: var(--font-ui);
- color: var(--fg-dim);
+ display: block;
+ margin: 1px 0;
+ padding: 5px 7px 5px 8px;
+ overflow: hidden;
+ color: var(--paper-dim);
+ border: 1px solid transparent;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font: 0.78rem/1.35 var(--font-ui);
}
-.tree-file:hover,
-.tree-file.active {
- color: var(--heading);
- background: linear-gradient(90deg, rgba(195, 160, 90, 0.12), transparent);
+.tree-file:hover {
+ color: var(--paper);
+ background: rgba(233, 222, 199, 0.045);
+ border-color: rgba(196, 163, 95, 0.16);
}
.tree-file.active {
- border-left-color: var(--accent);
+ color: var(--gold-soft);
+ background: linear-gradient(90deg, rgba(123, 47, 55, 0.24), rgba(196, 163, 95, 0.08));
+ border-color: var(--line);
+}
+
+.tree-icon {
+ color: var(--burgundy);
+ font-size: 0.7rem;
+}
+
+#main {
+ min-width: 0;
+ min-height: 0;
+ display: grid;
+ grid-template-rows: var(--toolbar-h) minmax(0, 1fr);
+ overflow: hidden;
}
#note-toolbar {
- box-shadow: 0 1px 0 rgba(0, 0, 0, 0.32);
+ min-width: 0;
+ height: var(--toolbar-h);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 14px;
+ color: var(--paper-muted);
+ background:
+ linear-gradient(180deg, rgba(23, 20, 14, 0.98), rgba(11, 11, 9, 0.98));
+ border-bottom: 1px solid var(--line);
+ font-family: var(--font-mono);
}
.toolbar-btn {
- color: var(--fg-dim);
- border-color: rgba(195, 160, 90, 0.14);
- background: rgba(232, 221, 200, 0.025);
- text-transform: lowercase;
+ min-height: 27px;
+ padding: 0 9px;
+ color: var(--paper-muted);
+ background: rgba(233, 222, 199, 0.028);
+ border: 1px solid rgba(196, 163, 95, 0.18);
+ border-radius: 0;
+ font: 0.68rem var(--font-mono);
+ text-transform: uppercase;
}
.toolbar-btn:hover:not(:disabled),
.toolbar-btn.active {
- border-color: var(--border-2);
- background: rgba(195, 160, 90, 0.09);
- color: var(--heading-2);
+ color: var(--gold-soft);
+ background: rgba(196, 163, 95, 0.1);
+ border-color: var(--line-strong);
+}
+
+.toolbar-btn:disabled {
+ cursor: default;
+ opacity: 0.38;
+}
+
+.toolbar-sep {
+ width: 1px;
+ height: 20px;
+ background: var(--line);
+}
+
+.toolbar-spacer {
+ flex: 1;
+}
+
+.note-graph-pos {
+ min-width: 0;
+ max-width: 34vw;
+ overflow: hidden;
+ color: var(--paper-faint);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font: 0.68rem var(--font-mono);
+ letter-spacing: 0.04em;
+}
+
+#main-inner {
+ min-height: 0;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ overflow: hidden;
}
#content-area {
+ min-width: 0;
+ min-height: 0;
+ overflow: auto;
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);
+ linear-gradient(90deg, transparent 0, transparent 58px, rgba(123, 47, 55, 0.18) 59px, transparent 60px),
+ repeating-linear-gradient(180deg, transparent 0, transparent 30px, rgba(233, 222, 199, 0.032) 31px),
+ radial-gradient(circle at 52% 0%, rgba(196, 163, 95, 0.1), transparent 32rem),
+ var(--brown-900);
+ scrollbar-width: thin;
+ scrollbar-color: var(--line-strong) transparent;
}
-#content-area::before {
- left: 52px;
- background: rgba(126, 48, 55, 0.42);
+.tab-content {
+ display: none;
+ min-height: 100%;
}
+.tab-content.active {
+ display: block;
+}
+
+#stack-root,
+.stack-track,
+.stack-pane {
+ display: contents;
+}
+
+/* Content */
+
#content,
.tab-content-inner {
+ width: 100%;
max-width: var(--content-max);
- padding-top: clamp(1.5rem, 4vh, 3rem);
- position: relative;
+ margin: 0 auto;
+ padding: clamp(22px, 4vh, 48px) var(--content-pad) clamp(80px, 12vh, 150px);
}
#content::before {
- content: "ARCHIVE RECORD";
+ content: "LOCAL ARCHIVE / HTML EXPORT / ORG-ROAM";
display: block;
- margin: 0 0 0.75rem;
- color: var(--fg-ghost);
+ margin: 0 0 12px;
+ color: var(--paper-faint);
font: 0.66rem var(--font-mono);
- letter-spacing: 0.18em;
+ letter-spacing: 0.16em;
}
.title-section {
- margin-bottom: clamp(2rem, 6vw, 3.5rem);
- padding: clamp(1.2rem, 3vw, 1.8rem);
+ position: relative;
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto;
+ gap: 18px 28px;
+ margin: 0 0 clamp(28px, 5vw, 64px);
+ padding: clamp(18px, 3vw, 34px);
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);
+ linear-gradient(135deg, rgba(233, 222, 199, 0.075), rgba(123, 47, 55, 0.08)),
+ rgba(8, 8, 7, 0.24);
+ border: 1px solid var(--line-strong);
+ border-left: 7px solid var(--burgundy);
+ box-shadow: var(--shadow);
}
.title-section::before {
content: "catalogue card";
position: absolute;
- top: -0.72rem;
- left: 1rem;
- padding: 0 0.45rem;
- background: var(--pane-bg);
- color: var(--accent);
+ top: -11px;
+ left: 16px;
+ padding: 0 7px;
+ color: var(--gold-soft);
+ background: var(--brown-900);
font: 0.62rem var(--font-mono);
- letter-spacing: 0.12em;
+ letter-spacing: 0.14em;
text-transform: uppercase;
}
.title-section .title {
- max-width: 18ch;
+ margin: 0;
+ max-width: 19ch;
color: var(--heading);
- font-family: var(--font-serif);
- font-size: clamp(2rem, 6vw, 4rem);
- font-weight: 500;
- line-height: 1.04;
+ font: 650 clamp(2.3rem, 6.5vw, 6.4rem)/0.92 var(--font-serif);
letter-spacing: 0;
- text-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
+ text-wrap: balance;
}
.title-metadata {
- padding-top: 0.75rem;
- border-top: 1px solid var(--border);
+ align-self: end;
+ display: grid;
+ gap: 8px;
+ min-width: 210px;
+ padding-top: 8px;
+ border-top: 3px double var(--line);
}
.metadata-item {
- padding: 0.12rem 0.45rem;
- border: 1px solid rgba(195, 160, 90, 0.18);
- background: rgba(10, 10, 7, 0.24);
+ display: grid;
+ grid-template-columns: 7ch 1fr;
+ gap: 10px;
+ align-items: baseline;
+ color: var(--paper-dim);
+ font: 0.72rem var(--font-mono);
}
.metadata-label {
+ color: var(--paper-faint);
text-transform: uppercase;
}
+.metadata-value {
+ color: var(--gold-soft);
+}
+
+.title-controls,
+.pane-header,
+.pane-close,
+.pane-fullscreen,
+.pane-edit {
+ display: none !important;
+}
+
h1,
h2,
h3,
-h4 {
+h4,
+h5,
+h6 {
+ margin: 0;
+ color: var(--heading);
font-family: var(--font-serif);
letter-spacing: 0;
}
+h1 {
+ margin: 0 0 1.4rem;
+ font-size: clamp(2rem, 4vw, 4rem);
+ line-height: 1.02;
+}
+
h2 {
position: relative;
- margin-top: 3.4rem;
- padding-bottom: 0.55rem;
+ margin: clamp(42px, 6vw, 76px) 0 18px;
+ padding-bottom: 9px;
color: var(--heading-2);
- border-bottom: 1px double var(--border-2);
- font-size: 1.35rem;
+ border-bottom: 3px double var(--line);
+ font-size: clamp(1.45rem, 2.4vw, 2.35rem);
+ line-height: 1.06;
}
h2::before {
- content: "#";
- margin-right: 0.42rem;
- color: var(--accent-2);
- font-family: var(--font-mono);
- font-size: 0.78rem;
- vertical-align: 0.12em;
+ content: "§";
+ margin-right: 0.45rem;
+ color: var(--burgundy);
+ font: 0.8em var(--font-mono);
}
h3 {
+ margin: 34px 0 12px;
color: var(--heading);
- font-size: 1.08rem;
+ font-size: clamp(1.15rem, 1.8vw, 1.65rem);
}
-h4 {
- color: var(--heading-3);
+h3::before {
+ content: "::";
+ margin-right: 0.45rem;
+ color: var(--blue);
font-family: var(--font-mono);
- font-size: 0.82rem;
- letter-spacing: 0.08em;
+ font-size: 0.7em;
+}
+
+h4,
+h5,
+h6 {
+ margin: 26px 0 10px;
+ color: var(--heading-3);
+ font: 600 0.88rem var(--font-mono);
+ letter-spacing: 0.09em;
text-transform: uppercase;
}
p {
- font-weight: 400;
- max-width: 68ch;
+ max-width: 78ch;
+ margin: 0 0 1.05rem;
+ color: var(--paper);
+}
+
+p,
+li,
+td,
+th,
+dd,
+dt {
+ overflow-wrap: anywhere;
}
a {
color: var(--link);
- text-decoration-thickness: 1px;
- text-underline-offset: 0.2em;
+ text-decoration: none;
+ border-bottom: 1px solid rgba(215, 187, 115, 0.38);
}
a:hover {
color: var(--link-hover);
- background: rgba(195, 160, 90, 0.09);
+ background: rgba(196, 163, 95, 0.1);
+ border-bottom-color: currentColor;
}
#content a[href$=".html"] {
font-family: var(--font-ui);
}
-#content a[href$=".html"]::before,
+#content a[href$=".html"]::before {
+ content: "[[";
+ color: var(--blue);
+ font-family: var(--font-mono);
+ font-size: 0.72em;
+}
+
#content a[href$=".html"]::after {
- color: var(--accent-4);
- opacity: 0.72;
+ content: "]]";
+ color: var(--blue);
+ font-family: var(--font-mono);
+ font-size: 0.72em;
}
strong {
- color: #f1dfb9;
+ color: #fff0c9;
+ font-weight: 650;
}
em {
- color: #dcc894;
+ color: #ddca91;
+ font-style: italic;
+}
+
+hr {
+ height: 0;
+ margin: 36px 0;
+ border: 0;
+ border-top: 3px double var(--line-strong);
+}
+
+ul,
+ol {
+ margin: 0 0 1.25rem 1.2rem;
+ padding: 0;
+ max-width: 82ch;
+}
+
+ul {
+ list-style: none;
+}
+
+li {
+ margin: 0.36rem 0;
+}
+
+ul li {
+ position: relative;
+ padding-left: 1.2rem;
+}
+
+ul li::before {
+ content: ">";
+ position: absolute;
+ left: 0;
+ top: 0;
+ color: var(--gold);
+ font-family: var(--font-mono);
+}
+
+ol {
+ counter-reset: item;
+ list-style: none;
+}
+
+ol li {
+ position: relative;
+ counter-increment: item;
+ padding-left: 2rem;
+}
+
+ol li::before {
+ content: counter(item, decimal-leading-zero);
+ position: absolute;
+ left: 0;
+ top: 0.05rem;
+ color: var(--blue);
+ font: 0.72rem var(--font-mono);
+}
+
+li ul,
+li ol {
+ margin-top: 0.45rem;
+ margin-bottom: 0.45rem;
+}
+
+dl {
+ display: grid;
+ grid-template-columns: max-content minmax(0, 1fr);
+ gap: 8px 18px;
+ margin: 0 0 1.2rem;
+}
+
+dt {
+ color: var(--gold-soft);
+ font: 0.82rem var(--font-mono);
+}
+
+dd {
+ margin: 0;
}
.tag,
@@ -2017,259 +1086,760 @@ em {
}
.tag {
+ display: inline-block;
+ padding: 0.1em 0.45em;
color: var(--tag-fg) !important;
background: var(--tag-bg) !important;
- border-color: rgba(73, 104, 86, 0.42);
- border-radius: 2px;
+ border: 1px solid rgba(79, 114, 93, 0.52);
+ font-size: 0.72rem;
}
.todo {
- color: #d58a78;
+ color: #d98e7d;
}
.done {
- color: #9ebd9d;
+ color: #9cc09d;
}
.priority {
- color: var(--accent);
+ color: var(--gold-soft);
}
.timestamp {
- color: #b7a980;
+ color: #c6b376;
}
-ul li::before {
- content: ">";
- font-family: var(--font-mono);
- color: var(--accent);
-}
-
-ol li::before {
- color: var(--accent-4);
+.timestamp-kwd {
+ color: var(--blue);
}
blockquote {
position: relative;
- padding: 1.1rem 1.3rem 1.1rem 1.5rem;
+ max-width: 88ch;
+ margin: 1.65rem 0;
+ padding: 1rem 1.2rem 1.05rem 1.45rem;
+ color: var(--paper-dim);
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);
+ linear-gradient(90deg, rgba(123, 47, 55, 0.18), rgba(196, 163, 95, 0.055)),
+ rgba(8, 8, 7, 0.22);
+ border: 1px solid var(--line);
+ border-left: 5px double var(--gold);
+ font-style: italic;
}
blockquote::before {
content: "EXCERPT";
display: block;
margin-bottom: 0.45rem;
- color: var(--accent);
+ color: var(--gold-soft);
font: 0.62rem var(--font-mono);
letter-spacing: 0.14em;
font-style: normal;
}
+blockquote p:last-child {
+ margin-bottom: 0;
+}
+
+.epigraph {
+ max-width: 760px;
+ margin: 2rem auto;
+}
+
+.epigraph blockquote footer {
+ margin-top: 0.75rem;
+ color: var(--paper-muted);
+ text-align: right;
+ font: 0.8rem var(--font-mono);
+}
+
+/* Code and examples */
+
+:not(pre) > code,
+code,
+tt,
+kbd {
+ padding: 0.08em 0.32em;
+ color: #ead08a;
+ background: rgba(8, 8, 7, 0.5);
+ border: 1px solid rgba(196, 163, 95, 0.18);
+ font-family: var(--font-mono);
+ font-size: 0.82em;
+}
+
.org-src-container,
pre.src,
-pre.example {
- border-radius: 3px;
- border: 1px solid rgba(195, 160, 90, 0.32);
+pre.example,
+pre {
+ max-width: 100%;
+ overflow: auto;
+ margin: 1.35rem 0;
+ color: #d9d0bc;
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);
+ linear-gradient(rgba(233, 222, 199, 0.027) 1px, transparent 1px),
+ #070806;
+ background-size: 100% 1.55rem, auto;
+ border: 1px solid var(--line-strong);
+ box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
+}
+
+.org-src-container {
+ position: relative;
}
.org-src-container > pre,
pre.src,
pre.example {
- color: #d8cfbb;
- font-size: 0.79rem;
+ margin: 0;
+ padding: 1.65rem 1rem 1rem;
+ white-space: pre;
+ font: 0.78rem/1.55 var(--font-mono);
}
-.org-src-container > pre::before {
- color: var(--accent);
- opacity: 0.8;
+pre.src {
+ position: relative;
+}
+
+.org-src-container > pre::before,
+pre.src::before {
+ position: absolute;
+ top: 0.42rem;
+ right: 0.62rem;
+ color: var(--gold-soft);
+ background: transparent;
+ border: 0;
+ padding: 0;
+ font: 0.62rem var(--font-mono);
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+}
+
+pre.src-bash::before,
+pre.src-sh::before {
+ content: "shell";
+}
+
+pre.src-python::before {
+ content: "python";
+}
+
+pre.src-emacs-lisp::before {
+ content: "elisp";
+}
+
+pre.src-js::before,
+pre.src-javascript::before {
+ content: "js";
+}
+
+pre.src-html::before {
+ content: "html";
+}
+
+pre.src-css::before {
+ content: "css";
}
.copy-btn {
- background: #11100c;
- border-color: var(--border-2);
- color: var(--fg-dim);
+ position: absolute;
+ top: 0.35rem;
+ right: 0.45rem;
+ z-index: 2;
+ padding: 0.1rem 0.5rem;
+ color: var(--paper-muted);
+ background: #0c0c09;
+ border: 1px solid var(--line);
+ font: 0.63rem var(--font-mono);
text-transform: lowercase;
}
+.copy-btn:hover {
+ color: var(--gold-soft);
+ border-color: var(--line-strong);
+}
+
+/* Tables */
+
.table-wrapper,
#content table {
- border-radius: 3px;
- border-color: var(--border-2);
- background: rgba(9, 9, 7, 0.2);
+ max-width: 100%;
+ overflow: auto;
+ margin: 1.4rem 0;
+ border: 1px solid var(--line-strong);
+ background: rgba(8, 8, 7, 0.2);
}
-#content table th,
-.table-wrapper table th {
- background: rgba(195, 160, 90, 0.11);
- color: var(--heading-2);
+#content table {
+ display: block;
+ width: 100%;
+ border-collapse: collapse;
+ font: 0.88rem var(--font-ui);
}
-#content table td,
-.table-wrapper table td {
- color: var(--fg-dim);
+.table-wrapper table {
+ display: table;
+ width: 100%;
+ border-collapse: collapse;
}
+caption {
+ padding: 0.6rem 0;
+ color: var(--paper-muted);
+ font: 0.72rem var(--font-mono);
+ text-align: left;
+ caption-side: top;
+}
+
+th,
+td {
+ padding: 0.62rem 0.8rem;
+ text-align: left;
+ vertical-align: top;
+ border-bottom: 1px solid rgba(196, 163, 95, 0.15);
+}
+
+th {
+ color: var(--gold-soft);
+ background: rgba(196, 163, 95, 0.11);
+ font: 600 0.68rem var(--font-mono);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+td {
+ color: var(--paper-dim);
+}
+
+tr:hover td {
+ background: rgba(196, 163, 95, 0.055);
+}
+
+/* TOC, backlinks, previews */
+
#table-of-contents {
+ max-width: 860px;
+ margin: 0 0 1.7rem;
padding: 1rem;
- border: 1px solid var(--border);
- border-left: 3px solid var(--accent-3);
- background: rgba(9, 9, 7, 0.24);
+ background: rgba(8, 8, 7, 0.26);
+ border: 1px solid var(--line);
+ border-left: 5px solid var(--green-700);
+}
+
+#table-of-contents h2 {
+ margin-top: 0;
+ font-size: 1rem;
+ font-family: var(--font-mono);
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
}
#table-of-contents h2::before {
content: none;
}
+#text-table-of-contents ul {
+ margin: 0.4rem 0 0;
+}
+
#text-table-of-contents a {
+ color: var(--paper-dim);
+ border: 0;
+ font: 0.78rem var(--font-mono);
+}
+
+#text-table-of-contents a:hover,
+#text-table-of-contents a.is-active,
+#text-table-of-contents a[aria-current] {
+ color: var(--gold-soft);
+ background: transparent;
+}
+
+#text-table-of-contents a::before,
+#text-table-of-contents a::after {
+ content: none !important;
+}
+
+.backlinks-section {
+ margin-top: 4rem;
+ padding-top: 1.2rem;
+ border-top: 3px double var(--line-strong);
+}
+
+.backlinks-section h2 {
+ margin-top: 0;
+ color: var(--gold-soft);
+ font: 600 0.78rem var(--font-mono);
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.backlinks-list {
+ margin: 0.8rem 0 0;
+}
+
+.backlinks-list li {
+ padding-left: 1.4rem;
+}
+
+.backlinks-list li::before {
+ content: "<-";
+ color: var(--burgundy);
font-family: var(--font-mono);
}
+.backlinks-list a::before,
+.backlinks-list a::after {
+ content: none !important;
+}
+
+#backlink-panel {
+ width: 0;
+ min-width: 0;
+ overflow: hidden;
+ background:
+ linear-gradient(rgba(233, 222, 199, 0.026) 1px, transparent 1px),
+ linear-gradient(180deg, rgba(17, 25, 20, 0.98), rgba(11, 11, 9, 0.99));
+ background-size: 100% 29px, auto;
+ border-left: 1px solid var(--line-strong);
+ transition: width var(--dur-mid) var(--ease-out);
+}
+
+#backlink-panel.open {
+ width: min(360px, 34vw);
+}
+
+.bp-header {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 12px;
+ border-bottom: 1px solid var(--line);
+}
+
+.bp-label {
+ flex: 1;
+ color: var(--gold-soft);
+ font: 600 0.68rem var(--font-mono);
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.bp-count {
+ color: var(--gold-soft);
+ font: 0.68rem var(--font-mono);
+}
+
+.bp-close {
+ width: 28px;
+ height: 28px;
+ color: var(--paper-muted);
+ background: transparent;
+ border: 1px solid transparent;
+}
+
+.bp-close:hover {
+ color: var(--gold-soft);
+ border-color: var(--line);
+}
+
+.bp-list {
+ height: calc(100dvh - var(--header-h) - var(--toolbar-h) - 54px);
+ overflow: auto;
+ padding: 12px;
+}
+
+.bp-item {
+ margin-bottom: 10px;
+ padding: 11px;
+ background: rgba(233, 222, 199, 0.04);
+ border: 1px solid rgba(196, 163, 95, 0.18);
+}
+
+.bp-item:hover {
+ background: rgba(196, 163, 95, 0.09);
+ border-color: var(--line-strong);
+}
+
+.bp-item-title {
+ color: var(--gold-soft);
+ font: 0.82rem var(--font-ui);
+}
+
+.bp-item-excerpt,
+.bp-empty {
+ color: var(--paper-muted);
+ font-size: 0.78rem;
+}
+
+#link-preview {
+ position: fixed;
+ z-index: 999;
+ width: 340px;
+ max-height: 260px;
+ overflow: hidden;
+ pointer-events: none;
+ opacity: 0;
+ transform: translateY(8px);
+ background:
+ linear-gradient(rgba(233, 222, 199, 0.026) 1px, transparent 1px),
+ linear-gradient(180deg, rgba(39, 33, 21, 0.98), rgba(12, 12, 9, 0.98));
+ background-size: 100% 29px, auto;
+ border: 1px solid var(--line-strong);
+ box-shadow: var(--shadow);
+ transition: opacity var(--dur-mid), transform var(--dur-mid);
+}
+
+#link-preview.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+.preview-inner {
+ padding: 13px 14px;
+}
+
+.preview-title {
+ margin-bottom: 8px;
+ padding-bottom: 7px;
+ color: var(--heading);
+ border-bottom: 1px solid var(--line);
+ font: 600 1rem var(--font-serif);
+}
+
+.preview-title::before {
+ content: "[[";
+ color: var(--blue);
+ font-family: var(--font-mono);
+}
+
+.preview-title::after {
+ content: "]]";
+ color: var(--blue);
+ font-family: var(--font-mono);
+}
+
+.preview-body {
+ color: var(--paper-dim);
+ font-size: 0.82rem;
+ line-height: 1.45;
+ display: -webkit-box;
+ -webkit-line-clamp: 6;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+.preview-footer {
+ padding: 7px 14px;
+ color: var(--paper-muted);
+ border-top: 1px solid var(--line);
+ font: 0.68rem var(--font-mono);
+ text-transform: uppercase;
+}
+
+/* Media, Org extras, sidenotes */
+
+#content .figure,
+#content img:not(.fullwidth),
+#content video,
+.video-container,
+.audio-player {
+ max-width: 100%;
+ border: 1px solid var(--line);
+ background: rgba(8, 8, 7, 0.22);
+}
+
+#content .figure {
+ margin: 1.6rem 0;
+ padding: 10px;
+}
+
+#content img:not(.fullwidth) {
+ display: block;
+ height: auto;
+}
+
+.figure p {
+ text-align: center;
+}
+
+.figure-number,
+.audio-label {
+ color: var(--paper-muted);
+ font: 0.7rem var(--font-mono);
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+
+#content video,
+.tab-content video {
+ width: 100%;
+ height: auto;
+ display: block;
+}
+
+.video-container,
+.audio-player {
+ margin: 1.5rem 0;
+ padding: 10px;
+}
+
+.audio-player audio {
+ width: 100%;
+ display: block;
+ accent-color: var(--gold);
+}
+
.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;
+ color: var(--paper-muted);
+ background: rgba(41, 70, 56, 0.16);
+ border-left: 3px solid var(--green-700);
+ padding: 0.65rem 0.75rem;
+ font: italic 0.78rem/1.45 var(--font-serif);
}
-#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) {
+@media (min-width: 1350px) {
.sidenote,
.marginnote {
float: right;
clear: right;
- width: 17rem;
- margin-right: -19rem;
+ width: 19rem;
+ margin-right: -21rem;
margin-top: 0.2rem;
}
}
-@media (max-width: 900px) {
- .archive-name {
- display: none;
- }
+#footnotes {
+ margin-top: 4rem;
+ padding-top: 1rem;
+ color: var(--paper-dim);
+ border-top: 3px double var(--line-strong);
+}
- .search-trigger {
- min-width: 10rem;
- }
+.footdef {
+ margin-bottom: 0.8rem;
+ font-size: 0.88rem;
+}
- #backlink-panel.open {
- width: min(270px, 48vw);
+.footpara {
+ display: inline;
+}
+
+.org-svg {
+ max-width: 100%;
+ height: auto;
+}
+
+.mermaid {
+ max-width: 100%;
+ overflow: auto;
+ padding: 12px;
+ background: rgba(8, 8, 7, 0.24);
+ border: 1px solid var(--line);
+}
+
+.mermaid-view-btn {
+ margin-top: 8px;
+ padding: 4px 10px;
+ color: var(--gold-soft);
+ background: rgba(196, 163, 95, 0.08);
+ border: 1px solid var(--line);
+ font: 0.68rem var(--font-mono);
+ text-transform: uppercase;
+}
+
+#mv-overlay {
+ background: rgba(5, 5, 4, 0.78) !important;
+}
+
+#mv-modal {
+ background: var(--brown-850) !important;
+ color: var(--paper) !important;
+ border: 1px solid var(--line-strong) !important;
+ border-radius: 0 !important;
+}
+
+#mv-toolbar {
+ border-bottom: 1px solid var(--line) !important;
+}
+
+#mv-toolbar button {
+ color: var(--paper) !important;
+ background: rgba(233, 222, 199, 0.05) !important;
+ border: 1px solid var(--line) !important;
+ border-radius: 0 !important;
+}
+
+.inlinetask {
+ margin: 1rem 0;
+ padding: 1rem;
+ color: var(--paper);
+ background: rgba(123, 47, 55, 0.14);
+ border: 1px solid var(--line-strong);
+}
+
+.fullwidth {
+ width: 100%;
+ max-width: 100%;
+}
+
+#postamble,
+footer {
+ flex: 0 0 auto;
+ padding: 7px 14px;
+ color: var(--paper-faint);
+ background: #090907;
+ border-top: 1px solid var(--line);
+ text-align: center;
+ font: 0.65rem var(--font-mono);
+ letter-spacing: 0.04em;
+ text-transform: lowercase;
+}
+
+#postamble p,
+#preamble p {
+ margin: 0;
+}
+
+#postamble a,
+footer a {
+ color: var(--paper-muted);
+}
+
+#reading-progress {
+ position: fixed;
+ top: var(--header-h);
+ left: var(--rail-w);
+ z-index: 500;
+ width: 0%;
+ height: 3px;
+ pointer-events: none;
+ background: linear-gradient(90deg, var(--burgundy), var(--gold));
+}
+
+.note-loading {
+ min-height: 45vh;
+ display: grid;
+ place-items: center;
+ color: var(--paper-muted);
+ font: 0.85rem var(--font-mono);
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+}
+
+.hidden {
+ display: none !important;
+}
+
+@keyframes note-in {
+ from {
+ opacity: 0;
+ transform: translateY(7px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
}
}
-@media (max-width: 768px) {
+.tab-content.active #content {
+ animation: note-in 220ms var(--ease-out) both;
+}
+
+/* Cookbook compatibility */
+
+.recipe-meta td:first-child {
+ color: var(--gold-soft);
+ font-weight: 600;
+ white-space: nowrap;
+}
+
+.recipe-meta {
+ font-size: 0.92em;
+}
+
+.cb-search {
+ color: var(--paper);
+ border-color: var(--line);
+}
+
+.cb-filter-btn,
+.cb-tag {
+ border-radius: 0;
+}
+
+/* Responsive */
+
+@media (max-width: 1180px) {
+ :root {
+ --rail-w: 292px;
+ --panel-w: 292px;
+ }
+
+ .title-section {
+ grid-template-columns: 1fr;
+ }
+
+ .title-metadata {
+ min-width: 0;
+ grid-template-columns: repeat(2, minmax(0, max-content));
+ align-items: start;
+ }
+
+ .sidenote,
+ .marginnote {
+ display: block;
+ float: none;
+ clear: both;
+ width: auto;
+ margin: 0.65rem 0 0.9rem;
+ }
+}
+
+@media (max-width: 900px) {
+ :root {
+ --header-h: auto;
+ --rail-w: 0px;
+ --panel-w: min(86vw, 330px);
+ --content-pad: 1rem;
+ }
+
html,
body {
- background-size: 34px 34px, 34px 34px, auto, auto, auto;
+ height: auto;
+ min-height: 100dvh;
+ overflow: auto;
+ }
+
+ #preamble {
+ position: sticky;
+ top: 0;
+ height: auto;
+ min-height: 58px;
}
.banner-header {
- align-items: center;
+ grid-template-columns: auto auto;
+ grid-template-areas:
+ "brand actions"
+ "search search";
+ gap: 8px 12px;
+ padding: 9px 12px;
+ }
+
+ .banner-left {
+ grid-area: brand;
+ }
+
+ #breadcrumb-trail {
+ display: none;
+ }
+
+ .banner-search {
+ grid-area: search;
+ justify-self: stretch;
}
.search-trigger {
@@ -2277,30 +1847,129 @@ footer {
min-width: 0;
}
- #content::before {
- margin-left: 0;
+ .banner-actions {
+ grid-area: actions;
+ justify-self: end;
+ }
+
+ #layout-body {
+ display: block;
+ overflow: visible;
+ }
+
+ #sidebar {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: var(--panel-w);
+ min-width: 0;
+ z-index: 900;
+ transform: translateX(-100%);
+ transition: transform var(--dur-mid) var(--ease-out);
+ }
+
+ #sidebar.expanded,
+ #sidebar.mobile-open {
+ width: var(--panel-w);
+ min-width: 0;
+ transform: translateX(0);
+ }
+
+ #main {
+ min-height: calc(100dvh - 96px);
+ overflow: visible;
+ }
+
+ #note-toolbar {
+ position: sticky;
+ top: 0;
+ z-index: 300;
+ height: auto;
+ min-height: 42px;
+ flex-wrap: wrap;
+ padding: 7px 10px;
+ }
+
+ #main-inner {
+ display: block;
+ overflow: visible;
+ }
+
+ #content-area {
+ overflow: visible;
+ }
+
+ #content,
+ .tab-content-inner {
+ padding-top: 24px;
}
.title-section .title {
max-width: 100%;
- font-size: clamp(1.85rem, 12vw, 3rem);
+ font-size: clamp(2.2rem, 13vw, 4rem);
}
- h2 {
- font-size: 1.18rem;
- }
-
- p {
- max-width: 100%;
+ .title-metadata {
+ grid-template-columns: 1fr;
}
#backlink-panel.open {
position: fixed;
+ top: 0;
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);
+ z-index: 920;
+ width: min(88vw, 340px);
+ box-shadow: -20px 0 52px rgba(0, 0, 0, 0.42);
+ }
+
+ .bp-list {
+ height: calc(100dvh - 54px);
+ }
+
+ #reading-progress {
+ left: 0;
+ top: 0;
+ }
+
+ dl {
+ grid-template-columns: 1fr;
+ }
+}
+
+@media (max-width: 520px) {
+ html,
+ body {
+ font-size: 17px;
+ }
+
+ .archive-name {
+ display: none;
+ }
+
+ .archive-mark {
+ grid-template-columns: 36px;
+ }
+
+ .toolbar-spacer,
+ .toolbar-sep,
+ .note-graph-pos {
+ display: none;
+ }
+
+ #content::before {
+ font-size: 0.58rem;
+ }
+
+ h2 {
+ font-size: 1.38rem;
+ }
+
+ .org-src-container > pre,
+ pre.src,
+ pre.example {
+ font-size: 0.72rem;
+ padding-inline: 0.7rem;
}
}