jekyll-theme-zer0 1.24.0 → 1.26.0

data/_sass/core/_navbar.scss

@@ -804,33 +804,16 @@
     padding-top: 1rem;
   }
 
-  // Theme switcher (halfmoon): keep dropdown positioned within offcanvas panel
-  .bd-theme-dropdown {
-    position: relative;
-  }
-
-  .bd-theme-menu.dropdown-menu {
-    --bs-dropdown-min-width: 10.5rem;
-    z-index: 1060;
-    padding-top: 0.35rem;
-    padding-bottom: 0.35rem;
-    border-radius: var(--bs-border-radius, 0.375rem);
-    border: 1px solid var(--bs-border-color-translucent);
-  }
-
-  .bd-theme-menu .dropdown-item {
-    min-height: 0;
-    padding: 0.45rem 0.85rem;
-    font-size: 0.9375rem;
-    border-radius: calc(var(--bs-border-radius, 0.375rem) - 2px);
-    gap: 0.35rem;
-
-    &.active {
-      font-weight: 600;
-    }
-
-    .bi.ms-auto {
-      opacity: 0.9;
+  // Compact tabs on narrow panels: keep the text labels (they are the
+  // accessible names) and drop the decorative icons instead.
+  @media (max-width: 575.98px) {
+    .nav-tabs .nav-link {
+      padding: 0.6rem 0.25rem;
+      font-size: 0.8125rem;
+
+      .bi {
+        display: none;
+      }
     }
   }
 }

data/_sass/core/_obsidian.scss

@@ -204,8 +204,8 @@
 // ----------------------------------------------------------------------------
 // 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(.offcanvas):not(.modal)` in
-// _sass/theme/_backgrounds.scss (specificity 0,4,0) and forces
+// 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.
 #obsidianLocalGraphFab.obsidian-local-graph-fab {

data/_sass/core/code-copy.scss

@@ -197,6 +197,12 @@
 
 // Copy button — shared base
 .copy {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  // WCAG 2.5.8 target size: text metrics alone yield a ~22px-tall button;
+  // guarantee the 24px minimum, and a comfortable 32px on touch screens.
+  min-height: 1.5rem;
   flex-shrink: 0;
   color: var(--bs-light);
   opacity: 0.75;
@@ -229,6 +235,10 @@
     border-color: transparent;
     opacity: 1;
   }
+
+  @media (pointer: coarse) {
+    min-height: 2rem;
+  }
 }
 
 // Header-mounted copy button (Rouge blocks) — never overlaps code

data/_sass/custom.scss

@@ -1,3 +1,4 @@
+// Features: ZER0-001, ZER0-008, ZER0-010, ZER0-011
 // ==============================================================================
 // CUSTOM STYLES barrel — Zer0-Mistakes "custom layer"
 // ==============================================================================

data/_sass/notebooks.scss

@@ -1,3 +1,4 @@
+// Feature: ZER0-012
 // ==============================================================================
 // NOTEBOOK STYLES - Jupyter Notebook Display Styling
 // ==============================================================================

data/_sass/theme/_backgrounds.scss

@@ -1,3 +1,4 @@
+// Feature: ZER0-065
 // ==========================================================================
 // Backgrounds — fffuel-style SVG background system for zer0-mistakes theme
 // ==========================================================================
@@ -108,8 +109,12 @@
 
   // Elevate children above the ::before / ::after pseudo-element backgrounds,
   // but exclude fixed-position, offcanvas, and modal elements whose
-  // positioning must not be overridden.
-  > *:not(.fixed-top):not(.offcanvas):not(.modal) { position: relative; z-index: 1; }
+  // 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; }
 }
 
 .zer0-bg-surface {

data/_sass/tokens/_layers.scss

@@ -18,6 +18,7 @@
 
   // Floating action buttons (stack bottom-to-top) --------------------------
   --zer0-layer-fab-back-to-top: 1050;
+  --zer0-layer-fab-feedback: 1051;   // page-feedback FAB (bottom-left)
   --zer0-layer-fab-chat: 1052;
   --zer0-layer-fab-toc: 1055;
   --zer0-layer-fab-local-graph: 1060;
@@ -25,6 +26,9 @@
   // Overlay surfaces -------------------------------------------------------
   --zer0-layer-offcanvas: 1045;
   --zer0-layer-modal: 1055;
+  --zer0-layer-feedback-modal: 1096; // page-feedback dialog — a focused dialog wins over
+                                     // every FAB, toast, AND the cookie banner (1095) so its
+                                     // controls are never intercepted; still below skip-link (1100)
   --zer0-layer-popover: 1070;
   --zer0-layer-tooltip: 1080;
 

data/_sass/utilities/_layout.scss

@@ -0,0 +1,11 @@
+// Feature: ZER0-077
+// =============================================================================
+// Layout utilities — small structural helpers Bootstrap does not ship
+// =============================================================================
+
+// Allow a flex child to shrink below its content size so text-truncate can
+// work (flex items default to min-width: auto). Used by the navbar leading
+// cluster, branding, and the settings panel quick-link rows.
+.min-w-0 {
+  min-width: 0 !important;
+}

data/assets/css/main.scss

@@ -22,9 +22,10 @@
 //    it so the concatenated cascade order is unchanged.
 @import "core/docs-code-examples";
 
-// 4. Reusable utilities (motion, focus rings) — used by components below
+// 4. Reusable utilities (motion, focus rings, layout helpers) — used by components below
 @import "utilities/motion";
 @import "utilities/focus";
+@import "utilities/layout";
 
 // 5. Component partials (formerly inside custom.scss + new primitives)
 @import "components/cookie-banner";
@@ -38,6 +39,7 @@
 @import "components/theme-preview";
 @import "components/content-tables";
 @import "components/search-modal";
+@import "components/page-feedback";
 
 // 6. Layout partials
 @import "layouts/landing";

data/assets/js/ai-chat.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-060
 /**
  * ===================================================================
  * AI Chat Widget — Claude Messages API client with GitHub tool use

data/assets/js/author-profile.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-061
 /*
  * author-profile.js
  * ---------------------------------------------------------------------------

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

@@ -1,3 +1,4 @@
+// Feature: ZER0-033
 /**
  * Auto-hide navbar on scroll with enhanced UX
  * 

data/assets/js/back-to-top.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-029
 document.addEventListener('DOMContentLoaded', () => {
   const btn = document.getElementById('backToTopBtn');
   if (!btn) return;

data/assets/js/background-customizer.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-065
 /**
  * background-customizer.js
  * Runtime switching of theme skin and fffuel-style SVG backgrounds.

data/assets/js/code-copy.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-030
 document.addEventListener('DOMContentLoaded', function () {
   var LANG_LABELS = {
     shell: 'bash',

data/assets/js/halfmoon.js

@@ -30,36 +30,37 @@
   setTheme(getPreferredTheme())
 
   const showActiveTheme = (theme, focus = false) => {
-    const themeSwitcher = document.querySelector('#bd-theme')
-
-    if (!themeSwitcher) {
-      return
-    }
-
-    const themeSwitcherText = document.querySelector('#bd-theme-text')
-    const activeThemeIcon = document.querySelector('.theme-icon-active use')
-    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-    const themeIconUse = btnToActive?.querySelector('svg use')
-    if (!btnToActive || !themeIconUse || !activeThemeIcon) {
+    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
+    if (!activeButtons.length) {
       return
     }
 
-    const svgOfActiveBtn = themeIconUse.getAttribute('href')
-
+    // The control can render more than once per page (settings offcanvas +
+    // theme-controls-bar), so sync active state across every instance.
     document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
       element.classList.remove('active')
       element.setAttribute('aria-pressed', 'false')
     })
+    activeButtons.forEach(element => {
+      element.classList.add('active')
+      element.setAttribute('aria-pressed', 'true')
+    })
 
-    btnToActive.classList.add('active')
-    btnToActive.setAttribute('aria-pressed', 'true')
-    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
-    const baseLabel = themeSwitcherText?.textContent?.trim() || 'Toggle theme'
-    const themeSwitcherLabel = `${baseLabel} (${btnToActive.dataset.bsThemeValue})`
-    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
-
-    if (focus) {
-      themeSwitcher.focus()
+    // Legacy dropdown affordances (#bd-theme toggle with a mirrored icon) —
+    // updated only when that markup is present.
+    const themeSwitcher = document.querySelector('#bd-theme')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const themeIconUse = activeButtons[0].querySelector('svg use')
+    if (activeThemeIcon && themeIconUse) {
+      activeThemeIcon.setAttribute('href', themeIconUse.getAttribute('href'))
+    }
+    if (themeSwitcher) {
+      const themeSwitcherText = document.querySelector('#bd-theme-text')
+      const baseLabel = themeSwitcherText?.textContent?.trim() || 'Toggle theme'
+      themeSwitcher.setAttribute('aria-label', `${baseLabel} (${theme})`)
+      if (focus) {
+        themeSwitcher.focus()
+      }
     }
   }
 

data/assets/js/modules/navigation/gestures.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-009
 /**
  * ===================================================================
  * SWIPE GESTURES - Mobile Offcanvas Control

data/assets/js/modules/navigation/keyboard.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-009
 /**
  * ===================================================================
  * KEYBOARD SHORTCUTS - Navigation Enhancements

data/assets/js/modules/navigation/scroll-spy.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-008
 /**
  * ===================================================================
  * SCROLL SPY - Intersection Observer Implementation

data/assets/js/modules/navigation/sidebar-state.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-008
 /**
  * ===================================================================
  * SIDEBAR STATE - Persistence and State Management

data/assets/js/modules/navigation/sidebar-visibility.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-008
 /**
  * ===================================================================
  * SIDEBAR VISIBILITY - Hide/show left docs sidebar with persistence

data/assets/js/modules/navigation/smooth-scroll.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-008
 /**
  * ===================================================================
  * SMOOTH SCROLL - Enhanced Anchor Navigation

data/assets/js/modules/theme/appearance.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-031
 /**
  * ===================================================================
  * APPEARANCE — Runtime theme controls (color mode + primary color)
@@ -11,13 +12,20 @@
  *
  *   - Color mode buttons (light / dark / auto) — writes data-bs-theme
  *     to <html> and persists to localStorage["theme"] (compatible with
- *     halfmoon.js so both stay in sync).
+ *     halfmoon.js so both stay in sync). Skipped in the settings
+ *     offcanvas (compact mode), where the halfmoon segmented control
+ *     directly above already owns color mode.
  *
  *   - Primary color picker — writes to localStorage["zer0-appearance"]
  *     and updates --zer0-color-primary live so every component that uses
  *     the token (buttons, callouts, FABs, focus rings) reflects the
  *     change without a reload. Cleared by the Reset button.
  *
+ * Host resolution: an explicit [data-appearance-panel-host] (e.g. the
+ * theme-preview sidebar) gets the full panel; otherwise the panel
+ * mounts compactly into #zer0AppearanceSlot inside the Settings
+ * offcanvas Appearance tab (legacy fallback: the offcanvas body).
+ *
  * Initial paint is already handled by the script emitted in
  * _includes/core/tokens-inline.html so there is no flash of default
  * color when the page loads.
@@ -33,6 +41,7 @@
     const STORAGE_KEY = 'zer0-appearance';
     const THEME_KEY = 'theme';
     const PANEL_HOST_SELECTOR = '[data-appearance-panel-host]';
+    const SLOT_HOST_SELECTOR = '#zer0AppearanceSlot';
     const FALLBACK_HOST_SELECTOR = '#info-section .offcanvas-body';
 
     function readPrefs() {
@@ -75,18 +84,15 @@
         try { localStorage.setItem(THEME_KEY, mode); } catch (e) { /* ignore */ }
     }
 
-    function buildPanel(host) {
+    function buildPanel(host, compact) {
         const prefs = readPrefs();
         const mode = resolveColorMode();
         const primary = prefs.primary || getInitialPrimary();
 
         const wrapper = document.createElement('section');
-        wrapper.className = 'zer0-appearance-panel border rounded p-3 mt-3';
         wrapper.setAttribute('aria-labelledby', 'zer0-appearance-heading');
-        wrapper.innerHTML =
-            '<h3 id="zer0-appearance-heading" class="h6 mb-3">' +
-              '<i class="bi bi-palette me-2" aria-hidden="true"></i>Appearance' +
-            '</h3>' +
+
+        const modeGroupHtml =
             '<div class="mb-3" role="group" aria-label="Color mode">' +
               '<label class="form-label small text-body-secondary mb-2">Color mode</label>' +
               '<div class="btn-group w-100" role="group">' +
@@ -97,18 +103,45 @@
                 '<button type="button" class="btn btn-outline-secondary btn-sm" data-mode="auto">' +
                   '<i class="bi bi-circle-half me-1" aria-hidden="true"></i>Auto</button>' +
               '</div>' +
-            '</div>' +
+            '</div>';
+
+        // In compact mode the section heading is the visible label, so the
+        // <label> stays for assistive tech but is visually hidden.
+        const pickerHtml = (labelClass) =>
             '<div class="mb-3">' +
-              '<label for="zer0-appearance-primary" class="form-label small text-body-secondary">' +
+              '<label for="zer0-appearance-primary" class="' + labelClass + '">' +
                 'Primary color</label>' +
               '<input type="color" id="zer0-appearance-primary" class="form-control form-control-color" ' +
                 'aria-describedby="zer0-appearance-primary-help">' +
               '<div id="zer0-appearance-primary-help" class="form-text small">' +
                 'Overrides <code>--zer0-color-primary</code> across the theme.</div>' +
-            '</div>' +
-            '<button type="button" class="btn btn-link btn-sm p-0" data-appearance-reset>' +
-              '<i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset to defaults' +
-            '</button>';
+            '</div>';
+
+        if (compact) {
+            // Settings offcanvas: color mode lives in the halfmoon control just
+            // above, so render only the primary-color section, styled to match
+            // the panel's other h6 section headings.
+            wrapper.className = 'zer0-appearance-panel mb-4';
+            wrapper.innerHTML =
+                '<h6 id="zer0-appearance-heading" class="text-body-secondary small text-uppercase fw-semibold mb-2">' +
+                  '<i class="bi bi-eyedropper me-1" aria-hidden="true"></i>Primary Color' +
+                '</h6>' +
+                pickerHtml('visually-hidden') +
+                '<button type="button" class="btn btn-link btn-sm p-0" data-appearance-reset>' +
+                  '<i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset color' +
+                '</button>';
+        } else {
+            wrapper.className = 'zer0-appearance-panel border rounded p-3 mt-3';
+            wrapper.innerHTML =
+                '<h3 id="zer0-appearance-heading" class="h6 mb-3">' +
+                  '<i class="bi bi-palette me-2" aria-hidden="true"></i>Appearance' +
+                '</h3>' +
+                modeGroupHtml +
+                pickerHtml('form-label small text-body-secondary') +
+                '<button type="button" class="btn btn-link btn-sm p-0" data-appearance-reset>' +
+                  '<i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset to defaults' +
+                '</button>';
+        }
 
         host.appendChild(wrapper);
 
@@ -116,7 +149,7 @@
         const picker = wrapper.querySelector('#zer0-appearance-primary');
         picker.value = hexishOrDefault(primary, '#007bff');
 
-        // Wire color-mode buttons
+        // Wire color-mode buttons (full panel only)
         wrapper.querySelectorAll('[data-mode]').forEach((btn) => {
             const m = btn.dataset.mode;
             btn.setAttribute('aria-pressed', String(m === mode));
@@ -183,10 +216,13 @@
     }
 
     function mount() {
-        const host = document.querySelector(PANEL_HOST_SELECTOR) || document.querySelector(FALLBACK_HOST_SELECTOR);
+        const explicitHost = document.querySelector(PANEL_HOST_SELECTOR);
+        const host = explicitHost
+            || document.querySelector(SLOT_HOST_SELECTOR)
+            || document.querySelector(FALLBACK_HOST_SELECTOR);
         if (!host) return; // info-section not present on this page
         if (host.querySelector('.zer0-appearance-panel')) return; // already mounted
-        buildPanel(host);
+        buildPanel(host, !explicitHost);
     }
 
     if (document.readyState === 'loading') {

data/assets/js/nanobar-init.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-066
 /**
  * Nanobar Initialization — config-driven page-load progress bar.
  *

data/assets/js/navigation.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-055
 /**
  * ==============================================================================
  * NAVIGATION SCRIPTS — DEPRECATED

data/assets/js/obsidian-graph.js

@@ -1,3 +1,4 @@
+// Features: ZER0-044, ZER0-045
 /*
  * obsidian-graph.js
  *

data/assets/js/obsidian-wiki-links.js

@@ -1,3 +1,4 @@
+// Feature: ZER0-044
 /*
  * obsidian-wiki-links.js
  *