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