jekyll-theme-zer0 1.26.0 → 1.28.0

data/_sass/core/_obsidian.scss

@@ -1,3 +1,4 @@
+// Feature: ZER0-045
 // ============================================================================
 // _obsidian.scss — Styles for Obsidian-flavoured Markdown features.
 // Imported from _sass/custom.scss.
@@ -8,6 +9,9 @@
 //   - Note transclusion / image embeds
 //   - Callout cards beyond what Bootstrap's `.alert` provides
 //   - Backlinks panel
+//   - Full graph page (canvas shell, Obsidian-style controls, zoom bar,
+//     hover preview) — markup in _includes/obsidian/full-graph.html
+//   - Local graph side panel (FAB + offcanvas)
 // ============================================================================
 
 // --- Wiki-links ------------------------------------------------------------
@@ -196,23 +200,307 @@
   }
 }
 
+// ----------------------------------------------------------------------------
+// Full graph page — Obsidian-style site knowledge graph.
+// Markup: _includes/obsidian/full-graph.html (included by
+// pages/_docs/obsidian/graph.md); renderer: assets/js/obsidian-graph.js.
+// The shell is the positioning context for the floating controls card, the
+// zoom bar, and the hover preview card that overlay the cytoscape canvas.
+// ----------------------------------------------------------------------------
+.obsidian-graph-shell {
+  position: relative;
+
+  #obsidian-graph {
+    width: 100%;
+    height: 82vh;
+    min-height: 620px;
+    border: 1px solid rgba(var(--bs-border-color-rgb, 222, 226, 230), 0.55);
+    border-radius: var(--bs-border-radius-lg, 0.5rem);
+    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.45);
+    -webkit-backdrop-filter: blur(14px) saturate(1.15);
+    backdrop-filter: blur(14px) saturate(1.15);
+    box-shadow:
+      0 1px 2px rgba(0, 0, 0, 0.03),
+      0 8px 24px rgba(0, 0, 0, 0.06),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    position: relative;
+    overflow: hidden;
+  }
+
+  [data-bs-theme="dark"] & #obsidian-graph {
+    background: rgba(var(--bs-body-bg-rgb, 33, 37, 41), 0.38);
+    box-shadow:
+      0 1px 2px rgba(0, 0, 0, 0.12),
+      0 8px 28px rgba(0, 0, 0, 0.22),
+      inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  }
+}
+
+// CSS-overlay fallback when the Fullscreen API is unavailable/blocked, plus
+// the native :fullscreen state — both fill the viewport with a solid ground.
+.obsidian-graph-shell-expanded {
+  position: fixed;
+  inset: 0;
+  z-index: var(--zer0-layer-offcanvas, 1045);
+  background: var(--bs-body-bg, #fff);
+  padding: 0.75rem;
+}
+
+.obsidian-graph-shell-expanded #obsidian-graph,
+.obsidian-graph-shell:fullscreen #obsidian-graph {
+  height: 100%;
+  min-height: 0;
+}
+
+.obsidian-graph-shell:fullscreen {
+  background: var(--bs-body-bg, #fff);
+  padding: 0.75rem;
+}
+
+// --- Floating "Graph settings" card (Filters / Display / Forces) ------------
+.obsidian-graph-controls {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 20;
+  width: min(17.5rem, calc(100% - 1.5rem));
+  max-height: calc(100% - 1.5rem);
+  display: flex;
+  flex-direction: column;
+  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.86);
+  -webkit-backdrop-filter: blur(10px) saturate(1.1);
+  backdrop-filter: blur(10px) saturate(1.1);
+  border: 1px solid var(--bs-border-color, #dee2e6);
+  border-radius: var(--bs-border-radius, 0.375rem);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+
+  .obsidian-graph-controls-toggle {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    font-weight: 600;
+    color: var(--bs-body-color, #212529);
+    border: 0;
+    border-radius: 0;
+
+    &:focus-visible {
+      outline: 2px solid var(--bs-primary);
+      outline-offset: -2px;
+    }
+  }
+
+  .obsidian-graph-controls-chevron {
+    transition: transform 0.2s ease;
+  }
+
+  .obsidian-graph-controls-toggle[aria-expanded="true"] .obsidian-graph-controls-chevron {
+    transform: rotate(180deg);
+  }
+
+  .obsidian-graph-controls-body {
+    overflow-y: auto;
+    border-top: 1px solid var(--bs-border-color, #dee2e6);
+  }
+
+  .accordion {
+    --bs-accordion-bg: transparent;
+    font-size: 0.875rem;
+  }
+
+  .accordion-button {
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .form-label {
+    margin-bottom: 0.125rem;
+    color: var(--bs-secondary-color, #6c757d);
+  }
+
+  .form-range {
+    margin-bottom: 0.375rem;
+  }
+}
+
+// Collection toggles double as the legend: color swatch + name + page count.
+.obsidian-graph-collections {
+  max-height: 12.5rem;
+  overflow-y: auto;
+
+  .obsidian-graph-collection-filter {
+    margin-bottom: 0.125rem;
+
+    .form-check-label {
+      width: 100%;
+      cursor: pointer;
+    }
+
+    .swatch {
+      display: inline-block;
+      flex: 0 0 auto;
+      width: 0.7rem;
+      height: 0.7rem;
+      border-radius: 50%;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+    }
+
+    .badge {
+      font-size: 0.7rem;
+    }
+  }
+}
+
+// --- Zoom / fit / fullscreen button stack -----------------------------------
+.obsidian-graph-zoombar {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 20;
+  border-radius: var(--bs-border-radius, 0.375rem);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+
+  > .btn {
+    background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.88);
+    color: var(--bs-body-color, #212529);
+    border: 1px solid var(--bs-border-color, #dee2e6);
+    line-height: 1;
+
+    &:hover,
+    &:focus-visible {
+      background: var(--bs-tertiary-bg, #f8f9fa);
+    }
+
+    &[aria-pressed="true"] {
+      background: rgba(var(--bs-primary-rgb), 0.12);
+      color: var(--bs-primary);
+    }
+  }
+}
+
+// --- Hover preview card (Obsidian-style page preview) -----------------------
+.obsidian-graph-preview {
+  position: absolute;
+  z-index: 30;
+  width: min(17rem, calc(100% - 1.5rem));
+  pointer-events: none;
+  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.94);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--bs-border-color, #dee2e6);
+
+  &[hidden] {
+    display: none;
+  }
+
+  .obsidian-graph-preview-swatch {
+    display: inline-block;
+    flex: 0 0 auto;
+    width: 0.65rem;
+    height: 0.65rem;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+
+  .obsidian-graph-preview-excerpt {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    color: var(--bs-secondary-color, #6c757d);
+  }
+}
+
+// --- Stats badges, status line, tips box ------------------------------------
+#obsidian-graph-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+
+  .badge {
+    font-size: 0.8125rem;
+    font-weight: 500;
+    padding: 0.35rem 0.6rem;
+  }
+}
+
+.obsidian-graph-status {
+  font-size: 0.8125rem;
+  color: var(--bs-secondary-color, #6c757d);
+  min-height: 1.25rem;
+  margin: 0.5rem 0 0;
+}
+
+.obsidian-graph-tips {
+  margin-top: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--bs-secondary-color, #6c757d);
+  background: var(--bs-tertiary-bg, #f8f9fa);
+  border-left: 3px solid var(--bs-primary, #0d6efd);
+  border-radius: 0.25rem;
+
+  strong {
+    color: var(--bs-body-color, #212529);
+  }
+}
+
+// Small screens: the floating card would cover most of the canvas — dock the
+// controls above the graph instead, and shorten the canvas.
+@media (max-width: 767.98px) {
+  .obsidian-graph-shell {
+    display: flex;
+    flex-direction: column;
+
+    #obsidian-graph {
+      height: 62vh;
+      min-height: 420px;
+    }
+  }
+
+  .obsidian-graph-controls {
+    position: static;
+    order: -1;
+    width: 100%;
+    max-height: none;
+    margin-bottom: 0.5rem;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    background: var(--bs-body-bg, #fff);
+
+    .obsidian-graph-controls-body {
+      max-height: 45vh;
+    }
+  }
+}
+
 // ----------------------------------------------------------------------------
 // Local graph side panel — Obsidian-style local graph view.
 // Rendered by _includes/navigation/local-graph.html (body-level, after footer)
 // and _includes/navigation/local-graph-fab.html (footer) via
 // assets/js/obsidian-local-graph.js.
 // ----------------------------------------------------------------------------
-// ID selector (not the class) is REQUIRED for the fixed position to stick:
-// the FAB is a direct child of `.zer0-bg-body`, which matches the elevation
-// rule `.zer0-bg-body > *:not(.fixed-top):not(.position-fixed):not(.offcanvas):not(.modal)`
-// in _sass/theme/_backgrounds.scss (specificity 0,5,0) and forces
-// `position: relative; z-index: 1` — dropping the FAB into page flow at the
-// bottom. An id (1,0,0) wins, mirroring `#aiChatToggle`. See ai-chat.html.
+// ID selector kept for historical safety: `.zer0-bg-body` used to force
+// `position: relative; z-index: 1` on every direct child (specificity 0,5,0),
+// which beat the class rule and dropped the FAB into page flow. That elevation
+// rule is gone (the body now isolates with the noise layer at z-index: -1 —
+// see _sass/theme/_backgrounds.scss), but the id keeps the FAB immune to any
+// future generic child rule. Mirrors `#aiChatToggle`. See ai-chat.html.
+//
+// Slot 2 on the left-side FAB stack: sits above the page-feedback FAB
+// (slot 1 = var(--zer0-space-fab-offset)) — same stacking formula as
+// .bd-toc-fab above #backToTopBtn on the right side.
 #obsidianLocalGraphFab.obsidian-local-graph-fab {
   position: fixed;
   left: var(--zer0-space-fab-offset, 1rem);
   right: auto;
-  bottom: var(--zer0-space-fab-offset, 1rem);
+  bottom: calc(
+    var(--zer0-space-fab-offset, 1rem) +
+    var(--zer0-space-fab-size, 3.5rem) +
+    var(--zer0-space-fab-gap, 0.75rem)
+  );
   z-index: var(--zer0-layer-fab-local-graph);
 
   &[hidden] {

data/_sass/layouts/_navbar-extras.scss

@@ -80,7 +80,12 @@
   &.bd-sidebar-fab--restore,
   html.bd-sidebar-pref-hidden &.bd-sidebar-fab {
     display: block !important;
-    bottom: var(--zer0-space-fab-offset, 1rem);
+    // Stay at slot 2 (above the feedback FAB at slot 1) so neither overlaps.
+    bottom: calc(
+      var(--zer0-space-fab-offset, 1rem) +
+      var(--zer0-space-fab-size, 3.5rem) +
+      var(--zer0-space-fab-gap, 0.75rem)
+    );
   }
 
   @media (min-width: 992px) {

data/_sass/theme/_backgrounds.scss

@@ -107,14 +107,27 @@
 .zer0-bg-body {
   @include zer0-bg-noise;
 
-  // Elevate children above the ::before / ::after pseudo-element backgrounds,
-  // but exclude fixed-position, offcanvas, and modal elements whose
-  // positioning must not be overridden. `.position-fixed` matters as much as
-  // `.fixed-top`: without it this rule (specificity 0,4,0) flattens the
-  // cookie-consent banner and the TOC FAB to z-index 1, letting the chat and
-  // local-graph FABs paint over — and steal taps from — the banner's buttons
-  // on mobile (their `--zer0-layer-*` tokens exist precisely to prevent this).
-  > *:not(.fixed-top):not(.position-fixed):not(.offcanvas):not(.modal) { position: relative; z-index: 1; }
+  // The body forms its own stacking context (isolation) and the noise overlay
+  // is pushed into the NEGATIVE layer, so in-flow content naturally paints
+  // above the texture with no per-child elevation at all.
+  //
+  // History: this block used to elevate every direct child instead
+  // (`> *:not(.fixed-top):not(.position-fixed):not(.offcanvas):not(.modal)
+  // { position: relative; z-index: 1; }`). That rule (specificity 0,5,0)
+  // caused three consumer-reported mobile bugs:
+  //   1. it beat FAB class rules' `position: fixed` (0,1,0), dropping FABs
+  //      into page flow and adding 16px of horizontal scroll;
+  //   2. it made <main> a z-index:1 stacking context, trapping the nested
+  //      #bdSidebar offcanvas (z-index 1045) below the fixed header (1030) —
+  //      its close button was unreachable on mobile;
+  //   3. every fixed/overlay descendant needed a bespoke carve-out or an
+  //      id-selector specificity escape (see _sass/core/_obsidian.scss).
+  // Do NOT reintroduce a child z-index elevation here.
+  isolation: isolate;
+
+  &::after {
+    z-index: -1;
+  }
 }
 
 .zer0-bg-surface {

data/assets/css/main.scss

@@ -40,6 +40,7 @@
 @import "components/content-tables";
 @import "components/search-modal";
 @import "components/page-feedback";
+@import "components/book";
 
 // 6. Layout partials
 @import "layouts/landing";

data/assets/js/auto-hide-nav.js

@@ -30,10 +30,14 @@
         // Check for reduced motion preference
         const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-        // Calculate and set body padding to prevent content jump
+        // Calculate and set body padding to prevent content jump.
+        // The measured height is also published as --zer0-header-height so
+        // stylesheets (theme or consumer) can align overlays with the real
+        // header instead of hard-coding its pixel height.
         function updateBodyPadding() {
             const navbarHeight = navbar.offsetHeight;
             document.body.style.paddingTop = navbarHeight + 'px';
+            document.documentElement.style.setProperty('--zer0-header-height', navbarHeight + 'px');
         }
 
         // Initial padding setup

data/assets/js/halfmoon.js

@@ -7,15 +7,35 @@
 (() => {
   'use strict'
 
+  // Site config surfaced by root.html as <html> data attributes:
+  // - data-color-mode-lock: "true" pins the configured mode; visitor
+  //   preference and OS scheme are ignored and the toggles are inert
+  //   (core/color-mode-init.html applies the same rules pre-paint).
+  // - data-color-mode-default: the site's configured starting mode. It
+  //   must rank ABOVE the OS preference here — otherwise this script
+  //   overrides the init script's choice on first visit and the page
+  //   flips modes after load.
+  const rootEl = document.documentElement
+  const isLocked = rootEl.getAttribute('data-color-mode-lock') === 'true'
+  const configDefault = rootEl.getAttribute('data-color-mode-default') || 'auto'
+
   const getStoredTheme = () => localStorage.getItem('theme')
   const setStoredTheme = theme => localStorage.setItem('theme', theme)
 
   const getPreferredTheme = () => {
+    if (isLocked) {
+      return configDefault === 'auto' ? 'dark' : configDefault
+    }
+
     const storedTheme = getStoredTheme()
     if (storedTheme) {
       return storedTheme
     }
 
+    if (configDefault !== 'auto') {
+      return configDefault
+    }
+
     return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
   }
 
@@ -65,6 +85,9 @@
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (isLocked) {
+      return
+    }
     const storedTheme = getStoredTheme()
     if (storedTheme !== 'light' && storedTheme !== 'dark') {
       setTheme(getPreferredTheme())
@@ -77,6 +100,9 @@
     document.querySelectorAll('[data-bs-theme-value]')
       .forEach(toggle => {
         toggle.addEventListener('click', () => {
+          if (isLocked) {
+            return
+          }
           const theme = toggle.getAttribute('data-bs-theme-value')
           setStoredTheme(theme)
           setTheme(theme)