1375 lines
34 KiB
CSS
1375 lines
34 KiB
CSS
/* =========================================================
|
|
ZETTELKASTEN GARDEN style.css
|
|
========================================================= */
|
|
|
|
@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; max-width: 18rem; }
|
|
|
|
#search-box {
|
|
width: 100%;
|
|
padding: 0.35rem 0.7rem;
|
|
font-size: 0.8rem;
|
|
font-family: var(--font-body);
|
|
background: var(--surface);
|
|
color: var(--fg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
outline: none;
|
|
transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
|
|
}
|
|
#search-box:focus {
|
|
border-color: var(--accent-dim);
|
|
box-shadow: 0 0 0 3px var(--accent-sub);
|
|
}
|
|
#search-box::placeholder { color: var(--fg-faint); font-style: italic; }
|
|
|
|
#search-results {
|
|
position: absolute;
|
|
top: calc(100% + 6px); left: 0; right: 0;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border-2);
|
|
border-radius: 6px;
|
|
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
|
|
max-height: 20rem;
|
|
overflow-y: auto;
|
|
z-index: 1000;
|
|
}
|
|
#search-results > * {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.82rem;
|
|
line-height: 1.4;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border);
|
|
transition: background var(--dur-fast);
|
|
}
|
|
#search-results > *:last-child { border-bottom: none; }
|
|
#search-results > *:hover,
|
|
#search-results > *.active { background: var(--accent-sub); color: var(--fg); }
|
|
|
|
/* 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 <pre>.
|
|
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 <pre> 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 <table> 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 <table> 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;
|
|
}
|