1976 lines
35 KiB
CSS
1976 lines
35 KiB
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=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: 58px;
|
|
--toolbar-h: 42px;
|
|
--rail-w: 332px;
|
|
--panel-w: 332px;
|
|
--content-max: 1160px;
|
|
--content-pad: clamp(1.25rem, 3.4vw, 4.5rem);
|
|
|
|
--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);
|
|
|
|
--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;
|
|
|
|
--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;
|
|
|
|
--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;
|
|
--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;
|
|
--code-bg: #e5d7b8;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100dvh;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
color: var(--fg);
|
|
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;
|
|
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 > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
|
|
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 {
|
|
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 {
|
|
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 {
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-mark {
|
|
display: grid;
|
|
grid-template-columns: 38px auto;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: var(--fg);
|
|
text-decoration: none;
|
|
border: 0;
|
|
}
|
|
|
|
.archive-mark:hover {
|
|
color: var(--heading);
|
|
background: transparent;
|
|
}
|
|
|
|
.archive-sigil {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
color: var(--gold-soft);
|
|
background:
|
|
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;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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 {
|
|
color: var(--paper);
|
|
background: rgba(233, 222, 199, 0.05);
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.crumb.active {
|
|
color: var(--gold-soft);
|
|
}
|
|
|
|
.crumb-sep {
|
|
color: var(--paper-faint);
|
|
}
|
|
|
|
.banner-search {
|
|
justify-self: end;
|
|
}
|
|
|
|
.search-trigger {
|
|
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(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:";
|
|
margin-right: 0.45em;
|
|
color: var(--gold-soft);
|
|
}
|
|
|
|
.search-trigger kbd {
|
|
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-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(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 {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
color: var(--gold-soft);
|
|
background: rgba(196, 163, 95, 0.1);
|
|
border-color: var(--line-strong);
|
|
}
|
|
|
|
.tree-folder {
|
|
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 {
|
|
color: var(--gold-soft);
|
|
border-color: var(--line-strong);
|
|
}
|
|
|
|
.tree-folder-label {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tree-folder-count {
|
|
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 {
|
|
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 {
|
|
color: var(--paper);
|
|
background: rgba(233, 222, 199, 0.045);
|
|
border-color: rgba(196, 163, 95, 0.16);
|
|
}
|
|
|
|
.tree-file.active {
|
|
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 {
|
|
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 {
|
|
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 {
|
|
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 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;
|
|
}
|
|
|
|
.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);
|
|
margin: 0 auto;
|
|
padding: clamp(22px, 4vh, 48px) var(--content-pad) clamp(80px, 12vh, 150px);
|
|
}
|
|
|
|
#content::before {
|
|
content: "LOCAL ARCHIVE / HTML EXPORT / ORG-ROAM";
|
|
display: block;
|
|
margin: 0 0 12px;
|
|
color: var(--paper-faint);
|
|
font: 0.66rem var(--font-mono);
|
|
letter-spacing: 0.16em;
|
|
}
|
|
|
|
.title-section {
|
|
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(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: -11px;
|
|
left: 16px;
|
|
padding: 0 7px;
|
|
color: var(--gold-soft);
|
|
background: var(--brown-900);
|
|
font: 0.62rem var(--font-mono);
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.title-section .title {
|
|
margin: 0;
|
|
max-width: 19ch;
|
|
color: var(--heading);
|
|
font: 650 clamp(2.3rem, 6.5vw, 6.4rem)/0.92 var(--font-serif);
|
|
letter-spacing: 0;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.title-metadata {
|
|
align-self: end;
|
|
display: grid;
|
|
gap: 8px;
|
|
min-width: 210px;
|
|
padding-top: 8px;
|
|
border-top: 3px double var(--line);
|
|
}
|
|
|
|
.metadata-item {
|
|
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,
|
|
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: clamp(42px, 6vw, 76px) 0 18px;
|
|
padding-bottom: 9px;
|
|
color: var(--heading-2);
|
|
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.45rem;
|
|
color: var(--burgundy);
|
|
font: 0.8em var(--font-mono);
|
|
}
|
|
|
|
h3 {
|
|
margin: 34px 0 12px;
|
|
color: var(--heading);
|
|
font-size: clamp(1.15rem, 1.8vw, 1.65rem);
|
|
}
|
|
|
|
h3::before {
|
|
content: "::";
|
|
margin-right: 0.45rem;
|
|
color: var(--blue);
|
|
font-family: var(--font-mono);
|
|
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 {
|
|
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: none;
|
|
border-bottom: 1px solid rgba(215, 187, 115, 0.38);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--link-hover);
|
|
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: "[[";
|
|
color: var(--blue);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72em;
|
|
}
|
|
|
|
#content a[href$=".html"]::after {
|
|
content: "]]";
|
|
color: var(--blue);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72em;
|
|
}
|
|
|
|
strong {
|
|
color: #fff0c9;
|
|
font-weight: 650;
|
|
}
|
|
|
|
em {
|
|
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,
|
|
.todo,
|
|
.done,
|
|
.priority,
|
|
.timestamp,
|
|
.timestamp-kwd {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
padding: 0.1em 0.45em;
|
|
color: var(--tag-fg) !important;
|
|
background: var(--tag-bg) !important;
|
|
border: 1px solid rgba(79, 114, 93, 0.52);
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
.todo {
|
|
color: #d98e7d;
|
|
}
|
|
|
|
.done {
|
|
color: #9cc09d;
|
|
}
|
|
|
|
.priority {
|
|
color: var(--gold-soft);
|
|
}
|
|
|
|
.timestamp {
|
|
color: #c6b376;
|
|
}
|
|
|
|
.timestamp-kwd {
|
|
color: var(--blue);
|
|
}
|
|
|
|
blockquote {
|
|
position: relative;
|
|
max-width: 88ch;
|
|
margin: 1.65rem 0;
|
|
padding: 1rem 1.2rem 1.05rem 1.45rem;
|
|
color: var(--paper-dim);
|
|
background:
|
|
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(--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,
|
|
pre {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
margin: 1.35rem 0;
|
|
color: #d9d0bc;
|
|
background:
|
|
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 {
|
|
margin: 0;
|
|
padding: 1.65rem 1rem 1rem;
|
|
white-space: pre;
|
|
font: 0.78rem/1.55 var(--font-mono);
|
|
}
|
|
|
|
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 {
|
|
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 {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
margin: 1.4rem 0;
|
|
border: 1px solid var(--line-strong);
|
|
background: rgba(8, 8, 7, 0.2);
|
|
}
|
|
|
|
#content table {
|
|
display: block;
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font: 0.88rem var(--font-ui);
|
|
}
|
|
|
|
.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;
|
|
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 {
|
|
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);
|
|
}
|
|
|
|
@media (min-width: 1350px) {
|
|
.sidenote,
|
|
.marginnote {
|
|
float: right;
|
|
clear: right;
|
|
width: 19rem;
|
|
margin-right: -21rem;
|
|
margin-top: 0.2rem;
|
|
}
|
|
}
|
|
|
|
#footnotes {
|
|
margin-top: 4rem;
|
|
padding-top: 1rem;
|
|
color: var(--paper-dim);
|
|
border-top: 3px double var(--line-strong);
|
|
}
|
|
|
|
.footdef {
|
|
margin-bottom: 0.8rem;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
height: auto;
|
|
min-height: 100dvh;
|
|
overflow: auto;
|
|
}
|
|
|
|
#preamble {
|
|
position: sticky;
|
|
top: 0;
|
|
height: auto;
|
|
min-height: 58px;
|
|
}
|
|
|
|
.banner-header {
|
|
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 {
|
|
width: 100%;
|
|
min-width: 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(2.2rem, 13vw, 4rem);
|
|
}
|
|
|
|
.title-metadata {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#backlink-panel.open {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
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;
|
|
}
|
|
}
|