/* css/tokens.css */ /* Design tokens and base element styles. Every other stylesheet reads the custom properties defined here, so this file is bundled first. Theme selection lives on , set by an inline script in (scripts/lib/render.mjs) before first paint. It used to be a class on applied by the deferred /app.js, which flashed the light palette on every navigation for dark-theme readers. */ :root { --background-primary: #ffffff; --background-secondary: #f7f7fb; --background-secondary-alt: #f2effa; --background-modifier-border: #e3dee8; --background-modifier-border-strong: #d4ccdc; --text-normal: #222126; --text-muted: #6f6879; --text-accent: #4f46e5; --text-faint: #8e8e96; --radius-s: 10px; --radius-m: 16px; --shadow-soft: none; } body { margin: 0; min-height: 100vh; background: var(--background-primary); color: var(--text-normal); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; } body.site-body { height: 100vh; overflow: hidden; } :root[data-theme="dark"] { --background-primary: #141319; --background-secondary: #1d1b23; --background-secondary-alt: #25222d; --background-modifier-border: #312d3b; --background-modifier-border-strong: #443d50; --text-normal: #f0ecf8; --text-muted: #b8b0c5; --text-accent: #a88bff; --text-faint: #8e879b; --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.32); } a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: #6344ef; } img { max-width: 100%; } /* css/layout.css */ /* Page frame: header, the three-column grid, the left column shell, the article column, and every responsive override of those. Responsive rules are kept beside the rules they override rather than in one trailing block at the end of the stylesheet — that trailing block is how the mobile scroll lock below went unnoticed. */ .site-header { display: none; } .site-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 276px; max-width: 100%; height: 100vh; } .site-body-left-column { position: sticky; top: 0; align-self: start; height: 100vh; box-sizing: border-box; border-right: 1px solid var(--background-modifier-border); padding: 18px 18px 36px; background: #fff; overflow-y: auto; scrollbar-width: none; } :root[data-theme="dark"] .site-body-left-column { background: #171b24; border-right-color: #313846; } .site-body-left-column::-webkit-scrollbar { display: none; } .site-header-logo { display: inline-flex; align-items: center; } .site-header-logo img { height: 29px; } .site-body-center-column { height: 100vh; box-sizing: border-box; overflow-y: auto; padding: 24px 40px 48px; max-width: 820px; scrollbar-width: none; } .site-body-center-column::-webkit-scrollbar { display: none; } /* Below 1180px the right rail leaves the grid; see rails.css, which turns it into an overlay drawer instead of hiding it outright. */ @media screen and (max-width: 1180px) { .site-layout { grid-template-columns: 280px minmax(0, 1fr); } } @media screen and (max-width: 820px) { /* The layout below switches to auto height, so the viewport-height lock on body has to be lifted with it. Without this rule body keeps height:100vh/overflow:hidden, that overflow propagates to the viewport, and every page is clipped at one screen with no way to scroll. */ body.site-body { height: auto; min-height: 100vh; overflow: visible; } .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--background-modifier-border); background: var(--background-primary); } .site-layout { grid-template-columns: 1fr; height: auto; } .site-body-left-column { position: static; min-height: 0; height: auto; border-right: 0; border-bottom: 1px solid var(--background-modifier-border); overflow: visible; } .site-body-center-column { height: auto; overflow: visible; padding: 28px 18px 72px; } .page-header h1, .markdown-preview-view > h1:first-child { font-size: 1.9rem; } } /* The lockup is authored dark-on-transparent for the light theme; invert it for dark rather than shipping two files. */ :root[data-theme="dark"] .site-header-logo img { filter: invert(1); } /* css/sidebar.css */ /* Left column contents: tool row, theme toggle, search button, search panel and results, and the hover link-preview card. */ .site-sidebar-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .theme-toggle-button { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 34px; border: 1px solid var(--background-modifier-border-strong); border-radius: 999px; background: #fff; color: var(--text-muted); font-size: 1rem; } :root[data-theme="dark"] .theme-toggle-button, :root[data-theme="dark"] .site-search-button, :root[data-theme="dark"] .graph-panel { background: var(--background-secondary); } .site-search-button { flex: 1; min-width: 0; height: 34px; padding: 0 14px; border: 1px solid var(--background-modifier-border-strong); border-radius: var(--radius-s); background: #fff; color: #8d8796; text-align: left; font-size: 0.95rem; } :root[data-theme="dark"] .site-search-button { border-color: #475063; color: #b5c0d6; } .search-panel { margin-bottom: 16px; padding: 12px; border: 1px solid var(--background-modifier-border); border-radius: 10px; background: var(--background-secondary); } :root[data-theme="dark"] .search-panel { border-color: #3a4252; background: #202633; } .search-panel-label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .search-input { box-sizing: border-box; width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--background-modifier-border-strong); border-radius: 8px; background: var(--background-primary); color: var(--text-normal); font: inherit; } :root[data-theme="dark"] .search-input { border-color: #475063; background: #171c26; color: #d8e0f0; } .search-results { display: grid; gap: 8px; margin-top: 10px; max-height: 48vh; overflow: auto; } .search-result { display: block; padding: 10px; border: 1px solid var(--background-modifier-border); border-radius: 8px; background: var(--background-primary); color: inherit; text-decoration: none; } .search-result:hover { border-color: var(--background-modifier-border-strong); background: var(--background-secondary-alt); } .search-result-title { margin-bottom: 4px; color: var(--text-normal); font-size: 0.95rem; font-weight: 700; } .search-result-snippet, .search-empty { color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; } .link-preview-card { position: fixed; z-index: 40; width: 320px; box-sizing: border-box; padding: 14px 15px; border: 1px solid var(--background-modifier-border-strong); border-radius: 12px; background: var(--background-primary); box-shadow: var(--shadow-soft); } .link-preview-title { margin-bottom: 8px; color: var(--text-normal); font-size: 1rem; font-weight: 700; line-height: 1.25; } .link-preview-excerpt { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; } .link-preview-headings { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .link-preview-headings span { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--background-secondary); color: var(--text-muted); font-size: 0.76rem; font-weight: 600; } /* Keyboard selection in the search results (ArrowUp/ArrowDown/Enter). */ .search-result.active { border-color: var(--text-accent); background: var(--background-secondary-alt); } /* css/nav.css */ /* Sidebar navigation tree. */ .site-nav { font-size: 0.96rem; } .site-nav ul { list-style: none; margin: 0; padding: 0; } .nav-folder { margin-top: 6px; } .nav-folder-title { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 0; color: var(--text-normal); font-size: 1rem; font-weight: 700; cursor: pointer; } .nav-folder-toggle { display: inline-flex; align-items: center; justify-content: center; width: 16px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } .nav-folder ul { margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--background-modifier-border); } :root[data-theme="dark"] .nav-folder ul { border-left-color: #3a4252; } .nav-folder-chevron { width: 12px; color: var(--text-faint); font-size: 0.85rem; line-height: 1; } .nav-folder-link { color: inherit; text-decoration: none; } .nav-folder-link.active, .nav-folder-link:hover { color: var(--text-accent); } .nav-page a { display: block; padding: 4px 0; color: #4a4454; border-radius: 0; text-decoration: none; font-size: 0.98rem; line-height: 1.3; } :root[data-theme="dark"] .nav-page a { color: #bfc9dd; } .nav-page a.active, .nav-page a:hover { color: var(--text-accent); background: transparent; } /* css/content.css */ /* Rendered Markdown: typography, tables, code blocks and the highlight.js token palette for both themes. */ .page-header { padding-top: 0; } .page-header h1, .markdown-preview-view > h1:first-child { margin: 0 0 24px; color: var(--text-normal); font-size: 2.2rem; line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; } .markdown-preview-view { color: var(--text-normal); line-height: 1.62; font-size: 1.01rem; } .markdown-preview-view h2 { margin: 30px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--background-modifier-border); color: var(--text-normal); font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; } .markdown-preview-view h3 { margin: 22px 0 10px; color: var(--text-normal); font-size: 1.02rem; font-weight: 700; } .markdown-preview-view p, .markdown-preview-view li { color: #323744; font-size: 0.97rem; } .markdown-preview-view p { margin: 0 0 1em; } .markdown-preview-view ul, .markdown-preview-view ol { padding-left: 1.6rem; margin: 0.3em 0 1em; } .markdown-preview-view li::marker { color: #8f96a8; } .markdown-preview-view blockquote { margin: 1em 0; padding: 0.2em 0 0.2em 1em; border-left: 3px solid var(--background-modifier-border-strong); color: #60697c; } .markdown-preview-view table { width: 100%; border-collapse: collapse; } .markdown-preview-view th, .markdown-preview-view td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--background-modifier-border); text-align: left; } .markdown-preview-view pre { position: relative; overflow-x: auto; padding: 26px 14px 13px; border: 1px solid #dde3ee; border-radius: 6px; background: #f7f8fb; line-height: 1.5; } .markdown-preview-view code { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .markdown-preview-view :not(pre) > code { padding: 0.06rem 0.32rem; border-radius: 4px; border: 1px solid #dde3ee; background: #f4f6fa; color: #45506a; font-size: 0.9em; } .markdown-preview-view pre code.hljs { display: block; color: #2e3445; background: transparent; } .markdown-preview-view pre.code-block::before { content: attr(data-language); position: absolute; top: 7px; right: 10px; color: #9ca4b8; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .markdown-preview-view .hljs-comment, .markdown-preview-view .hljs-quote { color: #8e96aa; font-style: italic; } .markdown-preview-view .hljs-keyword, .markdown-preview-view .hljs-selector-tag, .markdown-preview-view .hljs-subst { color: #d66a5e; font-weight: 600; } .markdown-preview-view .hljs-string, .markdown-preview-view .hljs-doctag { color: #3a9c72; } .markdown-preview-view .hljs-number, .markdown-preview-view .hljs-literal { color: #8f6acb; } .markdown-preview-view .hljs-punctuation, .markdown-preview-view .hljs-operator { color: #98a2b8; } .markdown-preview-view .hljs-title, .markdown-preview-view .hljs-section, .markdown-preview-view .hljs-attr, .markdown-preview-view .hljs-property, .markdown-preview-view .hljs-type { color: #cfac62; } .markdown-preview-view .hljs-variable, .markdown-preview-view .hljs-template-variable, .markdown-preview-view .hljs-name { color: #5f88c5; } .markdown-preview-view .hljs-built_in, .markdown-preview-view .hljs-symbol, .markdown-preview-view .hljs-bullet { color: #6d8ec1; } :root[data-theme="dark"] .markdown-preview-view pre { border-color: #4a5161; background: #262b38; box-shadow: inset 0 0 0 1px rgba(127, 141, 170, 0.08); } :root[data-theme="dark"] .markdown-preview-view pre code.hljs { color: #e8edf8; } :root[data-theme="dark"] .markdown-preview-view pre.code-block::before { color: #adb7ce; } :root[data-theme="dark"] .markdown-preview-view .hljs-comment, :root[data-theme="dark"] .markdown-preview-view .hljs-quote { color: #a2acc3; } :root[data-theme="dark"] .markdown-preview-view .hljs-keyword, :root[data-theme="dark"] .markdown-preview-view .hljs-selector-tag, :root[data-theme="dark"] .markdown-preview-view .hljs-subst { color: #f09288; } :root[data-theme="dark"] .markdown-preview-view .hljs-string, :root[data-theme="dark"] .markdown-preview-view .hljs-doctag { color: #99e6b5; } :root[data-theme="dark"] .markdown-preview-view .hljs-number, :root[data-theme="dark"] .markdown-preview-view .hljs-literal { color: #d2aefc; } :root[data-theme="dark"] .markdown-preview-view .hljs-punctuation, :root[data-theme="dark"] .markdown-preview-view .hljs-operator { color: #b0bad3; } :root[data-theme="dark"] .markdown-preview-view .hljs-title, :root[data-theme="dark"] .markdown-preview-view .hljs-section, :root[data-theme="dark"] .markdown-preview-view .hljs-attr, :root[data-theme="dark"] .markdown-preview-view .hljs-property, :root[data-theme="dark"] .markdown-preview-view .hljs-type { color: #f0d08d; } :root[data-theme="dark"] .markdown-preview-view .hljs-variable, :root[data-theme="dark"] .markdown-preview-view .hljs-template-variable, :root[data-theme="dark"] .markdown-preview-view .hljs-name { color: #9fc2f3; } :root[data-theme="dark"] .markdown-preview-view .hljs-built_in, :root[data-theme="dark"] .markdown-preview-view .hljs-symbol, :root[data-theme="dark"] .markdown-preview-view .hljs-bullet { color: #a8c3ea; } :root[data-theme="dark"] .markdown-preview-view p, :root[data-theme="dark"] .markdown-preview-view li { color: #d5ddee; } :root[data-theme="dark"] .markdown-preview-view li::marker { color: #9ea8c0; } :root[data-theme="dark"] .markdown-preview-view blockquote { color: #c0cbe0; border-left-color: #4a5161; } :root[data-theme="dark"] .markdown-preview-view :not(pre) > code { border-color: #50586a; background: #303644; color: #d3def3; } .markdown-preview-view a { color: #6a7db0; } :root[data-theme="dark"] .markdown-preview-view a { color: #a6c4ff; } :root[data-theme="dark"] .markdown-preview-view h2, :root[data-theme="dark"] .markdown-preview-view h3, :root[data-theme="dark"] .markdown-preview-view h4, :root[data-theme="dark"] .markdown-preview-view h5, :root[data-theme="dark"] .markdown-preview-view h6 { color: #eef2fb; } :root[data-theme="dark"] .markdown-preview-view h2 { border-bottom-color: #414959; } .hide-title .page-header { display: none; } /* Folded in from site/publish-overrides.css, deleted 2026-08-29: that file was 133 lines written against Obsidian Publish's own DOM (.reference tables, span.image-embed, .site-body-left-column-site-name) which this generator has never emitted, and it read a dozen custom properties nothing defines. These are the only rules from it that can still match. */ .markdown-preview-view img { border-radius: 4px; } .internal-link code { font-size: 0.95em; color: var(--text-accent); background-color: transparent; } /* A wikilink whose target does not exist as a page, marked the way Obsidian marks an unresolved link rather than looking like a working one. */ .internal-link.is-unresolved { color: var(--text-faint); text-decoration-style: dotted; } /* css/rails.css */ /* Right rail: graph card, page outline, and the collapse/reveal controls for both side panels. */ .site-body-right-column { height: 100vh; box-sizing: border-box; overflow-y: auto; padding: 26px 24px 48px; scrollbar-width: none; } .site-body-right-column::-webkit-scrollbar { display: none; } .rail-heading { margin-bottom: 12px; color: var(--text-normal); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .graph-card { margin-bottom: 18px; } .graph-panel { border: 1px solid var(--background-modifier-border-strong); border-radius: 10px; background: #fff; box-shadow: var(--shadow-soft); padding: 10px 12px 10px; } .graph-panel-actions { display: flex; justify-content: flex-end; gap: 10px; color: var(--text-muted); font-size: 0.95rem; } .graph-visual { position: relative; height: 188px; } .graph-loading { display: grid; place-items: center; height: 100%; color: var(--text-muted); font-size: 0.84rem; } .graph-svg { width: 100%; height: 100%; overflow: visible; } .graph-edge { stroke: #cfc8d9; stroke-width: 1.1; } .graph-point { fill: #76707e; cursor: pointer; transition: fill 120ms ease, r 120ms ease; } .graph-point:hover { fill: var(--text-accent); } .graph-point-current { fill: #5d5864; } :root[data-theme="dark"] .graph-edge { stroke: #534d60; } :root[data-theme="dark"] .graph-point { fill: #b8b0c5; } :root[data-theme="dark"] .graph-point-current { fill: #f0ecf8; } .outline-section ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--background-modifier-border); } .outline-section li { margin: 9px 0; } .outline-section li.active { border-left: 2px solid var(--text-accent); margin-left: -15px; padding-left: 13px; } .outline-section a { color: var(--text-muted); text-decoration: none; font-size: 0.95rem; } .outline-section a.active { color: var(--text-normal); font-weight: 600; } .outline-section .depth-3 { margin-left: 12px; } .right-column-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; } .panel-collapse { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; margin-left: auto; border: 1px solid var(--background-modifier-border-strong); border-radius: 8px; background: var(--background-primary); color: var(--text-muted); font-size: 0.9rem; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 120ms ease, color 120ms ease; } .panel-collapse:hover { opacity: 1; color: var(--text-accent); } .panel-rail { position: fixed; top: 14px; z-index: 60; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--background-modifier-border-strong); border-radius: 8px; background: var(--background-primary); color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 120ms ease, color 120ms ease; } .panel-rail:hover { opacity: 1; color: var(--text-accent); } .panel-rail-left { left: 14px; } .panel-rail-right { right: 14px; } body.left-collapsed .panel-rail-left { display: inline-flex; } body.right-collapsed .panel-rail-right { display: inline-flex; } body.left-collapsed .site-body-left-column, body.right-collapsed .site-body-right-column { display: none; } @media screen and (min-width: 1181px) { body.left-collapsed .site-layout { grid-template-columns: minmax(0, 1fr) 276px; } body.right-collapsed .site-layout { grid-template-columns: 280px minmax(0, 1fr); } body.left-collapsed.right-collapsed .site-layout { grid-template-columns: minmax(0, 1fr); } body.left-collapsed.right-collapsed .site-body-center-column { max-width: 1080px; margin-inline: auto; } } @media screen and (min-width: 821px) and (max-width: 1180px) { body.left-collapsed .site-layout { grid-template-columns: minmax(0, 1fr); } } /* Below 1180px there is no room for a third column, but the outline and graph should still be reachable: the rail button un-collapses the panel and it opens as an overlay drawer. The previous rule hid .panel-rail-right with !important at this width, so there was no control that could ever reveal it. */ @media screen and (max-width: 1180px) { body.right-collapsed .site-body-right-column { display: none; } body:not(.right-collapsed) .site-body-right-column { position: fixed; top: 0; right: 0; z-index: 50; width: min(320px, 88vw); height: 100vh; border-left: 1px solid var(--background-modifier-border); background: var(--background-primary); overflow-y: auto; } }