Files
-
+
{{range .Entries}}
{{.Icon}}
@@ -35,7 +35,7 @@
{{end}}
-{{define "sidebar"}}{{if .CanEdit}}
+{{define "sidebar"}}{{if .CanEdit}}
ACTIONS
EDIT PAGE
diff --git a/assets/page/toc.js b/assets/page/toc.js
index 27eead5..c4e4b9b 100644
--- a/assets/page/toc.js
+++ b/assets/page/toc.js
@@ -6,7 +6,7 @@ document.addEventListener("DOMContentLoaded", function () {
if (headings.length < 2) return;
var nav = document.createElement("nav");
- nav.className = "toc";
+ nav.className = "toc panel panel-sidebar";
var header = document.createElement("div");
header.className = "panel-header";
diff --git a/assets/style.css b/assets/style.css
index bc4c87e..58ac7f5 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -24,102 +24,134 @@
--link-hover: #d6d24d;
--danger: #c40141;
--danger-hover: #d03467;
+
+ --border: 1px solid var(--secondary);
+ --border-dashed: 1px dashed var(--secondary);
+
+ --space-1: 0.25rem;
+ --space-2: 0.5rem;
+ --space-3: 0.75rem;
+ --space-4: 1rem;
+ --space-5: 1.5rem;
+
+ --font-xs: 0.75rem;
+ --font-sm: 0.85rem;
}
/* === Base === */
body {
- background-color: var(--bg);
+ background: var(--bg);
+ color: var(--text);
min-height: 100vh;
margin: 0;
- overflow: auto;
padding: 0;
- color: var(--text);
- font:
- 1rem "Iosevka Etoile",
- monospace;
+ overflow: auto;
+ font: 1rem "Iosevka Etoile", monospace;
display: flex;
flex-direction: column;
}
+* { box-sizing: border-box; margin: 0; padding: 0; }
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
+a { color: var(--text); text-decoration: none; }
+a:hover { color: var(--primary-hover); }
+.content a { color: var(--link); }
+.content a:hover { color: var(--link-hover); }
+.content a.broken { color: var(--primary-hover); text-decoration: line-through; }
+.content a.broken:hover { color: var(--link-hover); }
-/* === Links === */
-a {
- color: var(--text);
- text-decoration: none;
-}
-a:hover {
- color: var(--primary-hover);
-}
+hr { border: none; border-top: var(--border-dashed); margin: var(--space-4) 0; }
-.content a {
- color: var(--link);
-}
-.content a:hover {
- color: var(--link-hover);
-}
+/* === Layout primitives ===
+ .row and .col are shared flex recipes; gap-* modifiers cover the cases
+ where the default rhythm doesn't fit. */
+.row { display: flex; align-items: center; gap: var(--space-2); }
+.col { display: flex; flex-direction: column; gap: var(--space-3); }
+.gap-1 { gap: var(--space-1); }
+.gap-2 { gap: var(--space-2); }
+.gap-3 { gap: var(--space-3); }
+.gap-4 { gap: var(--space-4); }
+.divider-dashed { border-bottom: var(--border-dashed); }
-/* Broken wiki link: target folder does not exist */
-.content a.broken {
- color: var(--primary-hover);
- text-decoration: line-through;
-}
-.content a.broken:hover {
- color: var(--link-hover);
+/* === Page layout ===
+ Note: sticky positioning on .sidebar depends on no ancestor having
+ overflow: auto/hidden. If you add scroll containment above this, sticky
+ will silently break. */
+.page-wrap {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) 14rem;
+ gap: var(--space-5);
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 var(--space-4);
+ width: 100%;
+ flex: 1;
+ align-items: start;
}
+main { padding: var(--space-5) var(--space-4); width: 100%; flex: 1; min-width: 0; }
-/* === Header ===
- Three-column grid (breadcrumbs left, search centre, actions right) using
- named grid-areas so the centre stays reserved even when search is hidden
- in editor mode. Mobile (≤1100px) collapses to a two-row layout — see the
- responsive block at the bottom of this file. */
+/* === Header / footer ===
+ Three-column grid (breadcrumbs left, search centre, actions right) so the
+ centre stays reserved even when search is hidden in editor mode. Mobile
+ (≤1100px) collapses to a two-row layout — see responsive block below. */
header {
- padding: 0.75rem 1rem;
- border-bottom: 1px dashed var(--secondary);
+ padding: var(--space-3) var(--space-4);
+ border-bottom: var(--border-dashed);
display: grid;
grid-template-columns: 1fr minmax(0, auto) 1fr;
grid-template-areas: "crumbs search actions";
align-items: center;
- gap: 0.5rem;
+ gap: var(--space-2);
}
-
-.breadcrumb {
- grid-area: crumbs;
+footer {
+ padding: var(--space-3) var(--space-4);
+ border-top: var(--border-dashed);
display: flex;
align-items: center;
- gap: 0.25rem;
- min-width: 0;
-}
-
-.header-actions {
- grid-area: actions;
- display: flex;
- align-items: center;
- gap: 0.5rem;
- justify-content: flex-end;
+ gap: var(--space-2);
flex-wrap: wrap;
}
-
-.logo {
- width: 1.1em;
- height: 1.1em;
- vertical-align: center;
-}
-
+.breadcrumb { grid-area: crumbs; gap: var(--space-1); min-width: 0; }
+.header-actions { grid-area: actions; justify-content: flex-end; flex-wrap: wrap; }
+.logo { width: 1.1em; height: 1.1em; vertical-align: center; }
.nav-up {
display: inline-flex;
align-items: center;
color: var(--secondary);
- padding: 0 0.25rem;
+ padding: 0 var(--space-1);
}
-.nav-up:hover {
- color: var(--primary-hover);
+.nav-up:hover { color: var(--primary-hover); }
+
+/* === Panel ===
+ Bordered container recipe shared by listings, sidebar widgets, the tree
+ picker, the floating TOC. .panel-floating raises the background for menus
+ and modals that sit over content. */
+.panel { border: var(--border); background: var(--bg); }
+.panel-floating { background: var(--bg-panel); }
+.panel-header {
+ font-size: var(--font-xs);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-muted);
+ border-bottom: var(--border-dashed);
+ padding-bottom: var(--space-1);
+ margin-bottom: 0.4rem;
+}
+.panel-body {
+ padding: var(--space-4);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-3);
+ word-break: break-word;
+}
+.panel-footer {
+ padding: 0.6rem var(--space-4);
+ border-top: var(--border-dashed);
+ display: flex;
+ justify-content: space-between;
+ gap: var(--space-2);
}
+/* === Buttons === */
.btn {
background: none;
border: none;
@@ -131,105 +163,85 @@ header {
display: inline-block;
white-space: nowrap;
}
-.btn::before {
- content: "[";
- color: var(--secondary);
-}
-.btn::after {
- content: "]";
- color: var(--secondary);
-}
-.btn:hover {
- color: var(--primary-hover);
-}
-
-/* === Button modifiers === */
-/* For inline buttons */
-.btn-small {
- font-size: 0.65rem;
- font-weight: normal;
- vertical-align: middle;
-}
-
-/* For toolbars */
-.btn-tool {
- font-size: 0.85rem;
- padding: 0 0.15rem;
-}
-
-/* Destructive action */
-.danger {
- color: var(--danger);
-}
-.danger:hover {
- color: var(--danger-hover);
-}
-
-/* === Page wrap ===
- Note: sticky positioning on .sidebar depends on no ancestor having
- overflow: auto/hidden. If you add scroll containment above this, sticky
- will silently break. */
-.page-wrap {
- display: grid;
- grid-template-columns: minmax(0, 1fr) 14rem;
- gap: 1.5rem;
- max-width: 1280px;
- margin: 0 auto;
- padding: 0 1rem;
+.btn::before { content: "["; color: var(--secondary); }
+.btn::after { content: "]"; color: var(--secondary); }
+.btn:hover { color: var(--primary-hover); }
+.btn-small { font-size: 0.65rem; font-weight: normal; vertical-align: middle; }
+.btn-tool { font-size: var(--font-sm); padding: 0 0.15rem; }
+.btn-block {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
width: 100%;
- flex: 1;
- align-items: start;
+ border: none;
+ padding: 0.3rem var(--space-3);
+ white-space: nowrap;
}
+.btn-fab {
+ background: var(--bg-panel);
+ border: var(--border);
+ width: 3rem;
+ height: 3rem;
+ font-size: 1.5rem;
+ line-height: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+}
+.btn-fab::before, .btn-fab::after { content: none; }
+.btn-fab:hover { background: var(--bg-panel-hover); color: var(--primary-hover); }
+.danger { color: var(--danger); }
+.danger:hover { color: var(--danger-hover); }
-/* === Main === */
-main {
- padding: 1.5rem 1rem;
+/* === Form controls ===
+ .input baseline is shared by search-input, modal inputs, and the editor
+ textarea. Hosts layer their own background / font-family / sizing on top. */
+.input {
width: 100%;
- flex: 1;
- min-width: 0;
+ background: var(--bg-panel);
+ border: var(--border);
+ color: var(--text);
+ font: inherit;
+ padding: 0.3rem var(--space-2);
+ outline: none;
}
+.input:focus { border-color: var(--primary-hover); }
+
+/* === Typography utilities === */
+.muted { color: var(--text-muted); font-size: var(--font-sm); }
+.small { font-size: var(--font-sm); }
+.caption {
+ font-size: var(--font-xs);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-muted);
+}
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* === Markdown content === */
-.content {
- margin-bottom: 2rem;
-}
-
-.content h1,
-.content h2,
-.content h3,
-.content h4,
-.content h5,
-.content h6 {
+.content { margin-bottom: 2rem; }
+.content h1, .content h2, .content h3,
+.content h4, .content h5, .content h6,
+main > h2 {
color: var(--text);
- margin: 1.25rem 0 0.5rem;
+ margin: 1.25rem 0 var(--space-2);
line-height: 1.3;
}
.content h1 {
font-size: 1.75rem;
- border-bottom: 1px dashed var(--secondary);
- padding-bottom: 0.25rem;
-}
-.content h2 {
- font-size: 1.4rem;
-}
-.content h3 {
- font-size: 1.15rem;
-}
-.content p {
- margin: 0.75rem 0;
-}
-.content ul,
-.content ol {
- margin: 0.75rem 0 0.75rem 1.5rem;
-}
-.content li {
- margin: 0.25rem 0;
+ border-bottom: var(--border-dashed);
+ padding-bottom: var(--space-1);
}
+.content h2, main > h2 { font-size: 1.4rem; }
+.content h3 { font-size: 1.15rem; }
+.content p { margin: var(--space-3) 0; }
+.content ul, .content ol { margin: var(--space-3) 0 var(--space-3) var(--space-5); }
+.content li { margin: var(--space-1) 0; }
.content blockquote {
border-left: 3px solid var(--secondary);
- padding: 0.25rem 1rem;
+ padding: var(--space-1) var(--space-4);
color: var(--text-muted);
- margin: 0.75rem 0;
+ margin: var(--space-3) 0;
}
.content code {
font-family: "Iosevka Etoile", monospace;
@@ -239,44 +251,32 @@ main {
}
.content pre {
background: var(--bg-panel);
- border: 1px solid var(--secondary);
- padding: 1rem;
+ border: var(--border);
+ padding: var(--space-4);
overflow-x: auto;
- margin: 0.75rem 0;
-}
-.content pre code {
- background: none;
- padding: 0;
+ margin: var(--space-3) 0;
}
+.content pre code { background: none; padding: 0; }
.content table {
width: 100%;
border-collapse: collapse;
- margin: 0.75rem 0;
+ margin: var(--space-3) 0;
font-size: 0.9rem;
}
-.content th,
-.content td {
- border: 1px solid var(--secondary);
- padding: 0.4rem 0.75rem;
+.content th, .content td {
+ border: var(--border);
+ padding: 0.4rem var(--space-3);
text-align: left;
}
-.content th {
- background: var(--bg-panel);
- color: var(--text);
-}
-.content hr {
- border: none;
- border-top: 1px dashed var(--secondary);
- margin: 1.5rem 0;
-}
-.content img {
- max-width: 100%;
+.content th { background: var(--bg-panel); color: var(--text); }
+.content hr { margin: var(--space-5) 0; }
+.content img { max-width: 100%; }
+.content li:has(> input.task-checkbox:checked) {
+ color: var(--text-muted);
+ text-decoration: line-through;
}
-.dropdown.heading-anchor {
- margin-right: 0.4em;
- font-weight: normal;
-}
+.dropdown.heading-anchor { margin-right: 0.4em; font-weight: normal; }
.heading-anchor .dropdown-toggle {
background: none;
border: none;
@@ -286,208 +286,47 @@ main {
font: inherit;
font-weight: normal;
}
-.heading-anchor .dropdown-toggle:hover {
- color: var(--primary-hover);
-}
+.heading-anchor .dropdown-toggle:hover { color: var(--primary-hover); }
-/* === File listing === */
-.listing {
- border: 1px solid var(--secondary);
-}
-main > h2 {
- color: var(--text);
- margin: 1.25rem 0 0.5rem;
- line-height: 1.3;
- font-size: 1.4rem;
-}
+/* === Listing rows === */
.listing-item {
display: flex;
align-items: center;
- gap: 0.75rem;
- padding: 0.6rem 1rem;
+ gap: var(--space-3);
+ padding: 0.6rem var(--space-4);
font-size: 0.95rem;
}
-.listing-item + .listing-item {
- border-top: 1px solid var(--secondary);
-}
-.listing-item:hover {
- background: var(--bg-panel-hover);
-}
-.listing-item .icon {
- width: 1.25rem;
- text-align: center;
- flex-shrink: 0;
-}
-.listing-item a {
- flex: 1;
- overflow-wrap: anywhere;
- color: inherit;
-}
+.listing-item + .listing-item { border-top: var(--border); }
+.listing-item:hover { background: var(--bg-panel-hover); }
+.listing-item .icon { width: 1.25rem; text-align: center; flex-shrink: 0; }
+.listing-item a { flex: 1; overflow-wrap: anywhere; color: inherit; }
.listing-item .meta {
color: var(--text-muted);
font-size: 0.8rem;
white-space: nowrap;
}
-/* === Editor toolbar === */
-.editor-toolbar {
- display: flex;
- flex-wrap: wrap;
- gap: 0.25rem;
- border: 1px solid var(--secondary);
- border-bottom: none;
- padding: 0.4rem 0.6rem;
- background: var(--bg-panel-hover);
-}
-
-.toolbar-sep {
- width: 1px;
- background: var(--secondary);
- margin: 0 0.2rem;
- align-self: stretch;
-}
-
-/* === Dropdowns === */
-.dropdown {
- position: relative;
-}
-
+/* === Dropdown menu === */
+.dropdown { position: relative; }
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
- display: none;
z-index: 100;
- background: var(--bg-panel);
- border: 1px solid var(--secondary);
min-width: 9rem;
-}
-
-.dropdown-menu.align-right {
- left: auto;
- right: 0;
-}
-
-.dropdown-menu.open-up {
- top: auto;
- bottom: 100%;
- margin-bottom: 0.4rem;
-}
-
-.dropdown-menu.is-open {
- display: block;
-}
-
-.dropdown-menu.scrollable {
- max-height: 14rem;
- overflow-y: auto;
-}
-
-/* === Floating action button === */
-.fab {
- position: fixed;
- bottom: 1rem;
- right: 1rem;
- z-index: 50;
-}
-
-/* Standalone FAB buttons (page TOC) are mobile-only.
- Wrapped FABs (search actions dropdown) stay visible on desktop. */
-button.fab {
display: none;
-}
-
-.btn-fab {
background: var(--bg-panel);
- border: 1px solid var(--secondary);
- width: 3rem;
- height: 3rem;
- font-size: 1.5rem;
- line-height: 1;
- display: inline-flex;
- align-items: center;
- justify-content: center;
-}
-.btn-fab::before,
-.btn-fab::after {
- content: none;
-}
-.btn-fab:hover {
- background: var(--bg-panel-hover);
- color: var(--primary-hover);
+ border: var(--border);
}
+.dropdown-menu.align-right { left: auto; right: 0; }
+.dropdown-menu.open-up { top: auto; bottom: 100%; margin-bottom: 0.4rem; }
+.dropdown-menu.is-open { display: block; }
+.dropdown-menu.scrollable { max-height: 14rem; overflow-y: auto; }
-.btn-block {
- display: flex;
- justify-content: space-between;
- align-items: baseline;
- width: 100%;
- border: none;
- border-radius: 0;
- padding: 0.3rem 0.75rem;
- white-space: nowrap;
- box-sizing: border-box;
-}
-
-/* === Edit form === */
-.edit-form {
- display: flex;
- flex-direction: column;
-}
-
-body.editor-wide .page-wrap {
- max-width: none;
-}
-
-textarea {
- width: 100%;
- min-height: 60vh;
- background: var(--bg);
- border: 1px solid var(--secondary);
- border-top: none;
- color: var(--text);
- font-family: "Iosevka Slab", monospace;
- font-size: 0.9rem;
- line-height: 1.6;
- padding: 1rem;
- resize: vertical;
- outline: none;
- box-sizing: border-box;
-}
-
-/* === Search === */
-.search-form {
- grid-area: search;
- display: flex;
- gap: 0.25rem;
- position: relative;
- justify-self: center;
- width: 24rem;
- max-width: 100%;
-}
-.search-input {
- background: var(--bg-panel);
- border: 1px solid var(--secondary);
- color: var(--text);
- font: inherit;
- font-size: 0.9rem;
- padding: 0.3rem 0.5rem;
- min-width: 0;
- width: 100%;
- max-width: 100%;
- outline: none;
-}
-.search-input:focus {
- border-color: var(--primary-hover);
-}
-
-/* === Suggestion dropdown (header + editor link picker) ===
- Anchored to a position:relative host (search-form, or the modal body
- for the link picker). Visuals mirror .dropdown-menu — dashed border,
- bg-panel-hover for the active row. */
-.suggest-host {
- position: relative;
-}
+/* === Suggestion dropdown (header search + editor link picker) ===
+ Anchored to a position:relative host. Mirrors .dropdown-menu visuals with
+ a dashed border and bg-panel-hover for the active row. */
+.suggest-host { position: relative; }
.suggest-dropdown {
position: absolute;
top: 100%;
@@ -495,13 +334,11 @@ textarea {
right: 0;
z-index: 200;
background: var(--bg-panel);
- border: 1px dashed var(--secondary);
+ border: var(--border-dashed);
border-top: none;
display: none;
}
-.suggest-dropdown.is-open {
- display: block;
-}
+.suggest-dropdown.is-open { display: block; }
.suggest-row {
display: flex;
flex-direction: column;
@@ -515,110 +352,92 @@ textarea {
text-align: left;
width: 100%;
}
-.suggest-row + .suggest-row {
- border-top: 1px solid var(--secondary);
-}
+.suggest-row + .suggest-row { border-top: var(--border); }
.suggest-row:hover,
-.suggest-row.is-active {
+.suggest-row.is-active { background: var(--bg-panel-hover); }
+.suggest-row.is-empty { color: var(--text-muted); cursor: default; }
+.suggest-row.is-empty:hover { background: none; }
+.suggest-name { color: var(--text); }
+.suggest-path { color: var(--text-muted); font-size: 0.8rem; }
+.suggest-footer { color: var(--link); font-size: var(--font-sm); }
+
+/* === Editor toolbar === */
+.editor-toolbar {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-1);
+ border: var(--border);
+ border-bottom: none;
+ padding: 0.4rem 0.6rem;
background: var(--bg-panel-hover);
}
-.suggest-row.is-empty {
- color: var(--text-muted);
- cursor: default;
+.toolbar-sep {
+ width: 1px;
+ background: var(--secondary);
+ margin: 0 0.2rem;
+ align-self: stretch;
}
-.suggest-row.is-empty:hover {
- background: none;
+
+/* === Edit form === */
+.edit-form { display: flex; flex-direction: column; }
+body.editor-wide .page-wrap { max-width: none; }
+.editor-textarea {
+ min-height: 60vh;
+ background: var(--bg);
+ border-top: none;
+ font-family: "Iosevka Slab", monospace;
+ font-size: 0.9rem;
+ line-height: 1.6;
+ padding: var(--space-4);
+ resize: vertical;
}
-.suggest-name {
- color: var(--text);
-}
-.suggest-path {
- color: var(--text-muted);
- font-size: 0.8rem;
-}
-.suggest-footer {
- color: var(--link);
- font-size: 0.85rem;
+
+/* === Search === */
+.search-form {
+ grid-area: search;
+ display: flex;
+ gap: var(--space-1);
+ position: relative;
+ justify-self: center;
+ width: 24rem;
+ max-width: 100%;
}
+.search-input { font-size: 0.9rem; }
.search-card {
display: flex;
flex-direction: column;
- gap: 0.25rem;
- padding-bottom: 1rem;
- margin-bottom: 1rem;
- border-bottom: 1px dashed var(--secondary);
+ gap: var(--space-1);
+ padding-bottom: var(--space-4);
+ margin-bottom: var(--space-4);
+ border-bottom: var(--border-dashed);
word-break: break-word;
}
-.search-card:last-child {
- border-bottom: none;
-}
-.search-card a {
- color: var(--link);
- font-size: 1.1rem;
-}
-.search-card a:hover {
- color: var(--link-hover);
-}
+.search-card:last-child { border-bottom: none; }
+.search-card a { color: var(--link); font-size: 1.1rem; }
+.search-card a:hover { color: var(--link-hover); }
-/* === Muted text === */
-.muted {
- color: var(--text-muted);
- font-size: 0.85rem;
-}
-
-/* === Page footer === */
-footer {
- padding: 0.75rem 1rem;
- border-top: 1px dashed var(--secondary);
- display: flex;
- align-items: center;
- gap: 0.5rem;
- flex-wrap: wrap;
-}
+/* === Floating action button ===
+ Standalone FAB buttons (page TOC) are mobile-only. Wrapped FABs (search
+ actions dropdown) stay visible on desktop. */
+.fab { position: fixed; bottom: var(--space-4); right: var(--space-4); z-index: 50; }
+button.fab { display: none; }
/* === Companion status === */
-.companion-status {
- margin-left: auto;
-}
-.companion-icon {
- font-size: 0.9rem;
- line-height: 1;
- padding: 0.1rem 0.3rem;
-}
-.companion-on {
- color: var(--link);
-}
-.companion-off {
- color: var(--text-muted);
-}
-.companion-flyout {
- min-width: 14rem;
- padding: 0.4rem;
-}
-.companion-line {
- padding: 0.25rem 0.5rem;
- font-size: 0.85rem;
-}
-
-/* === Task lists === */
-.content li:has(> input.task-checkbox:checked) {
- color: var(--text-muted);
- text-decoration: line-through;
-}
+.companion-status { margin-left: auto; }
+.companion-icon { font-size: 0.9rem; line-height: 1; padding: 0.1rem 0.3rem; }
+.companion-on { color: var(--link); }
+.companion-off { color: var(--text-muted); }
+.companion-flyout { min-width: 14rem; padding: 0.4rem; }
+.companion-line { padding: var(--space-1) var(--space-2); font-size: var(--font-sm); }
/* === Photo grid === */
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 0.4rem;
- margin-top: 0.75rem;
+ margin-top: var(--space-3);
}
-
-.photo-grid a {
- display: block;
- line-height: 0;
-}
-
+.photo-grid a { display: block; line-height: 0; }
.photo-grid img {
width: 100%;
height: 140px;
@@ -627,106 +446,49 @@ footer {
background: var(--bg-panel) url("/_/icons/thumb-placeholder.svg") center/2rem no-repeat;
}
-/* === Empty state === */
-.empty {
- padding: 1rem;
- text-align: center;
-}
-
-/* === hr === */
-hr {
- border: none;
- border-top: 1px dashed var(--secondary);
- margin: 1rem 0;
-}
+.empty { padding: var(--space-4); text-align: center; }
/* === Scrollbars === */
-::-webkit-scrollbar {
- width: 6px;
-}
-::-webkit-scrollbar-track {
- background: #111;
-}
-::-webkit-scrollbar-thumb {
- background: var(--primary);
-}
-::-webkit-scrollbar-thumb:hover {
- background: var(--primary-hover);
-}
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #111; }
+::-webkit-scrollbar-thumb { background: var(--primary); }
+::-webkit-scrollbar-thumb:hover { background: var(--primary-hover); }
/* === Sidebar === */
.sidebar {
position: sticky;
- top: 1rem;
+ top: var(--space-4);
align-self: start;
max-height: calc(100vh - 2rem);
overflow-y: auto;
display: flex;
flex-direction: column;
- gap: 1rem;
- margin-top: 1.5rem;
+ gap: var(--space-4);
+ margin-top: var(--space-5);
}
+aside.sidebar:empty { display: none; }
-aside.sidebar:empty {
- display: none;
-}
+/* Density modifier for panels in the sidebar (smaller font, tighter padding).
+ The .panel class applied alongside provides the border + background. */
+.panel-sidebar { padding: var(--space-2) var(--space-3); font-size: var(--font-sm); }
+.actions { display: flex; flex-direction: column; gap: 0.15rem; }
-/* Panels share visual treatment when inside the sidebar */
-.actions,
-.sidebar .toc,
-.sidebar .diary-cal {
- position: static;
- top: auto;
- left: auto;
- right: auto;
- width: auto;
- max-height: none;
- border: 1px solid var(--secondary);
- background: var(--bg);
- padding: 0.5rem 0.75rem;
- font-size: 0.85rem;
-}
-
-.actions {
- display: flex;
- flex-direction: column;
- gap: 0.15rem;
-}
-
-/* === Table of contents === */
+/* === Table of contents (floating variant) ===
+ Default rendering is a fixed floating panel; inside .sidebar it becomes
+ static via the .panel-sidebar density class. */
.toc {
position: fixed;
- top: 1rem;
- right: 1rem;
+ top: var(--space-4);
+ right: var(--space-4);
width: 14rem;
max-height: calc(100vh - 6rem);
overflow-y: auto;
- border: 1px solid var(--secondary);
- background: var(--bg);
- padding: 0.5rem 0.75rem;
- font-size: 0.85rem;
+ padding: var(--space-2) var(--space-3);
+ font-size: var(--font-sm);
}
-
-.panel-header {
- font-size: 0.75rem;
- text-transform: uppercase;
- letter-spacing: 0.05em;
- color: var(--text-muted);
- border-bottom: 1px dashed var(--secondary);
- padding-bottom: 0.25rem;
- margin-bottom: 0.4rem;
-}
-
-.toc ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.toc li {
- margin: 0.15rem 0;
-}
-
+.sidebar .toc { position: static; width: auto; max-height: none; }
+.toc ul { list-style: none; margin: 0; padding: 0; }
+.toc li { margin: 0.15rem 0; }
.toc a {
color: var(--link);
display: block;
@@ -734,16 +496,9 @@ aside.sidebar:empty {
text-overflow: ellipsis;
white-space: nowrap;
}
-.toc a:hover {
- color: var(--link-hover);
-}
-
-.toc-h3 {
- padding-left: 0.8rem;
-}
-.toc-h4 {
- padding-left: 1.6rem;
-}
+.toc a:hover { color: var(--link-hover); }
+.toc-h3 { padding-left: 0.8rem; }
+.toc-h4 { padding-left: 1.6rem; }
/* === Modal === */
.modal-backdrop {
@@ -754,12 +509,9 @@ aside.sidebar:empty {
align-items: flex-start;
justify-content: center;
z-index: 1000;
- padding: 1rem;
+ padding: var(--space-4);
}
-
.modal {
- background: var(--bg-panel);
- border: 1px solid var(--secondary);
width: 100%;
max-width: 500px;
display: flex;
@@ -767,228 +519,116 @@ aside.sidebar:empty {
margin-top: 6rem;
position: relative;
}
-
-.modal.is-dragged {
- margin: 0;
-}
-
-.modal-header {
- padding: 0.6rem 1rem;
- border-bottom: 1px dashed var(--secondary);
- font-size: 0.85rem;
- text-transform: uppercase;
- letter-spacing: 0.05em;
+.modal.is-dragged { margin: 0; }
+/* Modal headers use larger font + bright color + drag handle; everything
+ else comes from .panel-header. */
+.modal .panel-header {
+ font-size: var(--font-sm);
color: var(--text);
+ padding: 0.6rem var(--space-4);
+ margin-bottom: 0;
cursor: move;
user-select: none;
}
-
-.modal-body {
- padding: 1rem;
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
- word-break: break-word;
-}
-
-.modal-footer {
- padding: 0.6rem 1rem;
- border-top: 1px dashed var(--secondary);
- display: flex;
- justify-content: space-between;
- gap: 0.5rem;
-}
-
-.modal-input {
- width: 100%;
+/* Modal-scoped input variant: dark bg + slab font + slightly more padding. */
+.modal .input {
background: var(--bg);
- border: 1px solid var(--secondary);
- color: var(--text);
- font: inherit;
font-family: "Iosevka Slab", monospace;
padding: 0.4rem 0.6rem;
- outline: none;
-}
-
-.modal-checkbox {
- display: flex;
- align-items: center;
- gap: 0.5rem;
}
/* === Tree picker === */
-.tree-picker {
- max-height: 60vh;
- overflow-y: auto;
- border: 1px solid var(--secondary);
- background: var(--bg);
-}
+.tree-picker { max-height: 60vh; overflow-y: auto; }
.tree-row {
display: flex;
align-items: center;
- gap: 0.5rem;
- padding: 0.4rem 0.5rem;
+ gap: var(--space-2);
+ padding: 0.4rem var(--space-2);
cursor: pointer;
min-height: 2rem;
}
-.tree-row:hover {
- background: var(--bg-panel-hover);
-}
+.tree-row:hover, .tree-row.is-selected { background: var(--bg-panel-hover); }
.tree-row.is-selected {
- background: var(--bg-panel-hover);
border-left: 3px solid var(--primary);
- padding-left: calc(0.5rem - 3px);
-}
-.tree-row.is-disabled {
- color: var(--text-muted);
- cursor: default;
-}
-.tree-row.is-disabled:hover {
- background: none;
-}
-.tree-chevron {
- width: 1.25rem;
- text-align: center;
- color: var(--secondary);
- flex-shrink: 0;
-}
-.tree-chevron.is-leaf {
- visibility: hidden;
-}
-.tree-marker {
- width: 1rem;
- text-align: center;
- color: var(--text-muted);
- flex-shrink: 0;
-}
-.tree-name {
- flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-.tree-children {
- padding-left: 1.5rem;
+ padding-left: calc(var(--space-2) - 3px);
}
+.tree-row.is-disabled { color: var(--text-muted); cursor: default; }
+.tree-row.is-disabled:hover { background: none; }
+.tree-chevron, .tree-marker { text-align: center; flex-shrink: 0; }
+.tree-chevron { width: 1.25rem; color: var(--secondary); }
+.tree-chevron.is-leaf { visibility: hidden; }
+.tree-marker { width: var(--space-4); color: var(--text-muted); }
+.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tree-children { padding-left: var(--space-5); }
.tree-selected-path {
- font-size: 0.85rem;
- padding: 0.25rem 0;
+ font-size: var(--font-sm);
+ padding: var(--space-1) 0;
word-break: break-all;
}
/* === Movie info box === */
-.movie-info {
- margin: 0.75rem 0;
-}
-.movie-info::after {
- content: "";
- display: block;
- clear: both;
-}
+.movie-info { margin: var(--space-3) 0; }
+.movie-info::after { content: ""; display: block; clear: both; }
.movie-info .movie-poster {
float: right;
max-width: 200px;
- margin: 0 0 0.75rem 1rem;
-}
-.movie-info table {
- width: auto;
+ margin: 0 0 var(--space-3) var(--space-4);
}
+.movie-info table { width: auto; }
@media (max-width: 600px) {
.movie-info .movie-poster {
float: none;
display: block;
- margin: 0 auto 0.75rem;
+ margin: 0 auto var(--space-3);
}
}
-/* === Diary Calendar === */
+/* === Diary calendar === */
.diary-cal-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 0.2rem;
margin-bottom: 0.4rem;
- font-size: 0.85rem;
+ font-size: var(--font-sm);
}
-
-.diary-cal-nav .diary-cal-drop + .diary-cal-heading {
- margin-left: 0.75rem;
-}
-
-.diary-cal-heading {
- color: var(--link);
-}
-
-.diary-cal-heading:hover {
- color: var(--link-hover);
-}
-
+.diary-cal-nav .diary-cal-drop + .diary-cal-heading { margin-left: var(--space-3); }
+.diary-cal-heading { color: var(--link); }
+.diary-cal-heading:hover { color: var(--link-hover); }
.diary-cal-grid {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
margin-bottom: 0.4rem;
}
-
-.diary-cal-grid th,
-.diary-cal-grid td {
+.diary-cal-grid th, .diary-cal-grid td {
text-align: center;
padding: 0.1rem 0.15rem;
font-weight: normal;
color: var(--text-muted);
}
-
-.diary-cal-grid td a {
- color: var(--link);
- display: block;
-}
-
-.diary-cal-grid td a:hover {
- color: var(--link-hover);
-}
-
-.diary-cal-grid td.cal-empty a {
- color: var(--text-muted);
-}
-
-.diary-cal-grid td.cal-empty a:hover {
- color: var(--link-hover);
-}
-
-.diary-cal-grid td.cal-today {
- background: var(--bg-panel);
-}
-
+.diary-cal-grid td a { color: var(--link); display: block; }
+.diary-cal-grid td a:hover { color: var(--link-hover); }
+.diary-cal-grid td.cal-empty a { color: var(--text-muted); }
+.diary-cal-grid td.cal-empty a:hover { color: var(--link-hover); }
+.diary-cal-grid td.cal-today { background: var(--bg-panel); }
.diary-cal-grid td.cal-current,
-.diary-cal-grid td.cal-current a {
- color: var(--primary-hover);
-}
-
-.btn-block.cal-current {
- color: var(--primary-hover);
-}
+.diary-cal-grid td.cal-current a { color: var(--primary-hover); }
+.btn-block.cal-current { color: var(--primary-hover); }
/* === Responsive === */
@media (max-width: 1100px) {
- .page-wrap {
- grid-template-columns: 1fr;
- }
- /* Single-row mobile header: logo + Up icon are compact so search
- can take the middle flex column, with actions on the right. */
- header {
- grid-template-columns: auto 1fr auto;
- }
- .search-form {
- width: 100%;
- max-width: none;
- justify-self: stretch;
- }
+ .page-wrap { grid-template-columns: 1fr; }
+ /* Single-row mobile header: logo + Up icon are compact so search can
+ take the middle flex column, with actions on the right. */
+ header { grid-template-columns: auto 1fr auto; }
+ .search-form { width: 100%; max-width: none; justify-self: stretch; }
/* Sidebar on mobile is a floating overlay toggled by the FAB. The aside
- itself is the scroll container; its children render at natural height. */
+ itself is the scroll container; children render at natural height. */
.sidebar {
position: fixed;
bottom: 5rem;
- right: 1rem;
+ right: var(--space-4);
top: auto;
left: auto;
width: calc(100% - 2rem);
@@ -998,44 +638,18 @@ aside.sidebar:empty {
display: none;
z-index: 60;
}
- .sidebar.is-open {
- display: flex;
- }
- button.fab {
- display: inline-flex;
- }
+ .sidebar.is-open { display: flex; }
+ button.fab { display: inline-flex; }
}
@media (max-width: 600px) {
- header,
- footer {
- padding: 0.5rem 0.75rem;
- }
- main {
- padding: 1rem 0.75rem;
- }
- textarea {
- min-height: 50vh;
- }
- .sidebar {
- width: calc(100% - 1.5rem);
- }
- .modal-backdrop {
- padding: 0.5rem;
- align-items: flex-start;
- }
- .modal {
- max-width: none;
- margin-top: 1rem;
- }
- .modal-header {
- cursor: default;
- }
- .listing-item {
- flex-wrap: wrap;
- }
- .listing-item .meta {
- flex-basis: 100%;
- padding-left: calc(1.25rem + 0.75rem);
- }
+ header, footer { padding: var(--space-2) var(--space-3); }
+ main { padding: var(--space-4) var(--space-3); }
+ .editor-textarea { min-height: 50vh; }
+ .sidebar { width: calc(100% - 1.5rem); }
+ .modal-backdrop { padding: var(--space-2); align-items: flex-start; }
+ .modal { max-width: none; margin-top: var(--space-4); }
+ .modal .panel-header { cursor: default; }
+ .listing-item { flex-wrap: wrap; }
+ .listing-item .meta { flex-basis: 100%; padding-left: calc(1.25rem + var(--space-3)); }
}
diff --git a/assets/tree-picker.js b/assets/tree-picker.js
index 6721e2d..41e6f89 100644
--- a/assets/tree-picker.js
+++ b/assets/tree-picker.js
@@ -28,7 +28,7 @@
var container = document.createElement('div');
var treeEl = document.createElement('div');
- treeEl.className = 'tree-picker';
+ treeEl.className = 'tree-picker panel';
var selectedPathEl = document.createElement('div');
selectedPathEl.className = 'tree-selected-path muted';