jekyll-theme-zer0 1.28.0 → 1.30.0

data/_sass/components/_ui-enhancements.scss

@@ -82,7 +82,7 @@ img {
     left: 50%;
     width: 0;
     height: 0;
-    border-radius: 50%;
+    border-radius: var(--zer0-radius-circle);
     background: rgba(255, 255, 255, 0.2);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
@@ -405,7 +405,7 @@ a:not(.btn) {
 .btn {
   .ripple {
     position: absolute;
-    border-radius: 50%;
+    border-radius: var(--zer0-radius-circle);
     background: rgba(255, 255, 255, 0.6);
     transform: scale(0);
     animation: ripple-animation 0.6s ease-out;
@@ -424,7 +424,7 @@ a:not(.btn) {
 @media (max-width: 991.98px) {
   .navbar-collapse {
     background-color: var(--bs-body-bg);
-    border-radius: 0.5rem;
+    border-radius: var(--zer0-radius-lg);
     margin-top: 1rem;
     padding: 1rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -432,7 +432,7 @@ a:not(.btn) {
   
   .navbar-nav .nav-link {
     padding: 0.75rem 1rem;
-    border-radius: 0.375rem;
+    border-radius: var(--zer0-radius);
     transition: all 0.2s ease;
     
     &:hover {
@@ -506,7 +506,7 @@ a:not(.btn) {
 *:focus-visible {
   outline: 2px solid var(--bs-primary);
   outline-offset: 2px;
-  border-radius: 0.25rem;
+  border-radius: var(--zer0-radius-sm);
 }
 
 // Enhanced active link states
@@ -530,7 +530,7 @@ a:not(.btn) {
 // Better table responsiveness
 @media (max-width: 768px) {
   .table-responsive {
-    border-radius: 0.5rem;
+    border-radius: var(--zer0-radius-lg);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
   

data/_sass/core/_navbar.scss

@@ -7,8 +7,9 @@
 //   - Desktop >= 992px (inline nav; label density via @container bd-nav)
 //   - Mobile < 992px (offcanvas)
 // Nav label tiers (center track / bd-nav container width):
-//   - >= 38rem (~608px): full labels (with ellipsis safety when crowded)
-//   - < 38rem: icon-only (tooltips on lg–xl viewports)
+//   - >= 51rem (~816px): icon + full label
+//   - 41-50.99rem: label only (icons dropped so the labels still fit)
+//   - < 41rem (~656px): icon-only (tooltips on lg–xl viewports)
 // ==============================================================================
 
 // -----------------------------------------------------------------------------
@@ -136,21 +137,16 @@
     overflow: visible;
   }
 
+  // No transform on :hover. A translate moves the element out from under a
+  // pointer parked on the edge it vacates, hover exits, the element returns —
+  // an infinite flicker. Nav items are thin enough for a 1px lift to do it.
   #bdNavbar .nav-link:hover {
     background-color: var(--bs-tertiary-bg);
-    transform: translateY(-1px);
   }
 
   .nav-hover-dropdown .dropdown-toggle-split {
     padding: var(--zer0-space-1) var(--zer0-space-2);
 
-    &::after {
-      transition: transform 0.2s ease-in-out;
-    }
-
-    &:hover::after {
-      transform: translateY(2px);
-    }
   }
 }
 
@@ -180,12 +176,18 @@
     &:hover {
       color: var(--bs-primary);
       background-color: var(--bs-tertiary-bg);
-      transform: translateY(-1px);
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      // These are `.btn`s, and _ui-enhancements.scss lifts every button by 2px
+      // on hover. Dropping the navbar's own translateY(-1px) is not enough —
+      // the inherited lift flickers the same way. `transform: none` is the
+      // repo's existing corrective pattern (see _post-navigation.scss).
+      transform: none;
     }
     
+    // A pressed cue is safe: :active only holds while the button is held down,
+    // so the pointer cannot leave and re-enter in a loop.
     &:active {
-      transform: translateY(0);
+      transform: translateY(1px);
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     }
     
@@ -196,11 +198,6 @@
     
     i {
       font-size: 1.15rem;
-      transition: transform 0.15s ease-in-out;
-    }
-    
-    &:hover i {
-      transform: scale(1.1);
     }
   }
 }
@@ -399,16 +396,22 @@
     transform: rotate(180deg);
   }
 
-  // Show labels whenever the center track has room (>= ~38rem / 608px).
-  // Items keep min-width:0 + ellipsis so a crowded row degrades gracefully
-  // before falling all the way back to the icon-only tier below.
-  @container bd-nav (min-width: 38rem) {
+  // Label density degrades in three tiers, measured on the center track
+  // (the `bd-nav` container), so items fit instead of ellipsizing:
+  //   >= 51rem (816px)   icon + label      — the roomy default
+  //   41-50.99rem        label only        — icons dropped to buy ~20px/item
+  //   < 41rem (656px)    icon only         — labels no longer fit at all
+  // Each boundary is the MEASURED width the tier below it needs for the
+  // theme's seven demo items (815px with icons, 647px without), so a tier only
+  // engages once its own content fits. Items keep min-width:0 + ellipsis as the
+  // last-resort safety net for consumers with more or longer entries.
+  @container bd-nav (min-width: 41rem) {
     #bdNavbar .navbar-nav {
       gap: 0.125rem;
     }
 
     #bdNavbar .nav-link {
-      padding: 0.375rem 0.5rem;
+      padding: 0.375rem;
     }
 
     #bdNavbar .nav-link .nav-link-text {
@@ -439,16 +442,11 @@
     #bdNavbar .nav-link i {
       margin-right: 0;
       font-size: 1rem;
-      transition: transform 0.15s ease-in-out;
     }
 
     #bdNavbar .nav-link:hover {
       background-color: var(--bs-tertiary-bg);
       border-radius: 0.375rem;
-
-      i {
-        transform: scale(1.1);
-      }
     }
 
     .nav-hover-dropdown > .nav-link {
@@ -462,14 +460,36 @@
       min-width: 1.25rem;
       min-height: 0;
       width: 1.25rem;
-      padding-left: 0.125rem;
-      padding-right: 0.125rem;
+      padding-left: 0;
+      padding-right: 0;
       margin-left: 0 !important;
     }
   }
 
-  // Icon-only when the center track is too narrow even for ellipsized labels
-  @container bd-nav (max-width: 37.99rem) {
+  // Middle tier — the labels fit but the icons no longer do. Dropping the
+  // decorative icon (the label is the accessible name) and tightening the
+  // chevron buys back roughly 20px per item, which is the difference between
+  // "Notebooks" and "N…" at 992-1200px viewports.
+  @container bd-nav (min-width: 41rem) and (max-width: 50.99rem) {
+    #bdNavbar .nav-link i {
+      display: none;
+    }
+
+    #bdNavbar .nav-item > .nav-link:not(.dropdown-toggle-split),
+    #bdNavbar .nav-hover-dropdown > .nav-link:first-child {
+      gap: 0;
+    }
+
+    // Scoped with #bdNavbar to outrank the shared base rule at the top of this
+    // file, which sets the chevron to 1.5rem.
+    #bdNavbar .nav-hover-dropdown > .dropdown-toggle-split {
+      min-width: 1rem;
+      width: 1rem;
+    }
+  }
+
+  // Icon-only when the center track is too narrow even for bare labels
+  @container bd-nav (max-width: 40.99rem) {
     @include navbar-nav-icon-only;
   }
 }
@@ -502,6 +522,27 @@
     z-index: 1046; // $zindex-offcanvas (1045) + 1
   }
 
+  // ...but that lift must never bury Settings. #info-section is a body-level
+  // offcanvas at the SAME edge and the same z-index (1045), so while the nav
+  // menu is still on screen — including the ~300ms `.hiding` tail after a tap
+  // on its own "Settings" item — the lifted header painted the whole Settings
+  // panel out of sight. Drop the header back below the offcanvas layer for as
+  // long as Settings is on screen; navbar.js also closes the nav menu first so
+  // the two panels do not overlap at all in browsers that support it.
+  body:has(#info-section.offcanvas.showing) header.fixed-top,
+  body:has(#info-section.offcanvas.show) header.fixed-top,
+  body:has(#info-section.offcanvas.hiding) header.fixed-top {
+    z-index: 1030; // $zindex-fixed — back under the offcanvas backdrop
+  }
+
+  // Belt and braces for browsers without :has() — Settings outranks the header
+  // stacking context on its own.
+  #info-section.offcanvas.showing,
+  #info-section.offcanvas.show,
+  #info-section.offcanvas.hiding {
+    z-index: 1047; // above the lifted header (1046)
+  }
+
   // Wrapper is inert on mobile so offcanvas layout matches pre-wrapper structure
   #bdNavbar .bd-navbar-nav-viewport {
     display: contents;
@@ -631,7 +672,6 @@
       
       &:hover {
         background-color: var(--bs-tertiary-bg);
-        transform: rotate(90deg);
       }
       
       &:focus-visible {
@@ -718,20 +758,10 @@
   i {
     font-size: 1rem;
     width: 1.5rem;
-    transition: transform 0.15s ease-in-out;
   }
   
   &:hover {
     background-color: var(--bs-tertiary-bg);
-
-    // translateX widens overflow; desktop menus sit inside a clipped nav track
-    @media (max-width: 991.98px) {
-      transform: translateX(4px);
-    }
-
-    i {
-      transform: scale(1.1);
-    }
   }
   
   &:focus-visible {
@@ -831,6 +861,156 @@
   }
 }
 
+// -----------------------------------------------------------------------------
+// Language section inside the Settings offcanvas
+// (components/language-toggle.html variant="panel")
+// -----------------------------------------------------------------------------
+
+.nav-lang-panel .nav-lang-options {
+  --bs-list-group-border-radius: 0.375rem;
+
+  .list-group-item {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    padding: 0.5rem 0.75rem;
+    min-height: 44px; // WCAG touch target
+    font-size: 0.9375rem;
+  }
+
+  .nav-lang-code {
+    flex-shrink: 0;
+    min-width: 2.25rem;
+    padding: 0.05rem 0.35rem;
+    font-family: var(--zer0-font-mono);
+    font-size: 0.7rem;
+    line-height: 1.4;
+    text-align: center;
+    color: var(--zer0-color-ink-muted);
+    background: var(--zer0-color-bg-muted);
+    border-radius: var(--zer0-radius-sm);
+  }
+
+  .nav-lang-name {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Language menu — shared by BOTH variants (T-038 / #406)
+// -----------------------------------------------------------------------------
+// The current language reads as "you are here", not as a selected nav item, so
+// it gets a tint + check icon rather than Bootstrap's `.active` primary fill.
+// Rows are links even when a translation does not exist yet (they fall back to
+// the source page), and the reason lives in one footnote instead of on every
+// row — per-row "(Not yet translated)" was what made the menu wide.
+
+.nav-lang-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+
+  &.is-current {
+    font-weight: 600;
+    color: var(--zer0-color-ink, inherit);
+    background: var(--zer0-color-bg-muted);
+  }
+
+  // The marker is the footnote's anchor; the note itself carries the wording.
+  &.is-untranslated .nav-lang-name {
+    color: var(--zer0-color-ink-muted);
+  }
+}
+
+.nav-lang-check {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.nav-lang-mark {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--zer0-color-ink-muted);
+}
+
+// "auto" — this language was machine-generated (scripts/translate.rb).
+.nav-lang-auto {
+  flex-shrink: 0;
+  padding: 0.05rem 0.3rem;
+  font-family: var(--zer0-font-mono);
+  font-size: 0.625rem;
+  line-height: 1.4;
+  text-transform: lowercase;
+  color: var(--zer0-color-ink-muted);
+  background: var(--zer0-color-bg-muted);
+  border-radius: var(--zer0-radius-sm);
+}
+
+// The one footnote that replaced the per-row notices. It is the only element
+// in the menu allowed to wrap — everything else ellipsises inside the 220px.
+.nav-lang-note {
+  margin: 0;
+  padding: 0.25rem 0.75rem 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1.35;
+  color: var(--zer0-color-ink-muted);
+  white-space: normal;
+}
+
+.nav-lang-divider {
+  margin: 0.5rem 0 0.25rem;
+  opacity: 0.15;
+}
+
+// -----------------------------------------------------------------------------
+// Navbar dropdown variant (components/language-toggle.html, default variant)
+// -----------------------------------------------------------------------------
+
+.nav-lang-toggle {
+  .nav-lang-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.375rem; // 38px square — the icon carries the whole control
+    height: 2.375rem;
+    padding: 0;
+    line-height: 1;
+
+    // Belt and braces: if `dropdown-toggle` is ever re-added, no caret returns.
+    &::after {
+      display: none;
+    }
+  }
+
+  .nav-lang-menu {
+    min-width: 0;
+    max-width: 220px;
+
+    .nav-lang-item {
+      // Bootstrap's dropdown-item is nowrap; the name ellipsises instead so a
+      // long native name cannot push the menu past its cap.
+      overflow: hidden;
+
+      &.is-current {
+        // Beat `.dropdown-item.active`'s specificity is unnecessary (we no
+        // longer emit `.active`), but a hovered current row should not flip to
+        // the link-hover colour and lose the "you are here" reading.
+        color: var(--zer0-color-ink, inherit);
+      }
+    }
+
+    .nav-lang-name {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
 // -----------------------------------------------------------------------------
 // Navigation Tooltips
 // Enhanced tooltips for compact desktop view
@@ -930,26 +1110,57 @@
     gap: 0.25rem;
 }
 
+// Shortcut affordance chip on the search button — the design-system navbar
+// pattern (ui_kits/website/Navbar.jsx). Overrides Bootstrap's inverted <kbd>
+// so the chip reads as a quiet hint, not a highlighted key.
+#navbar .nav-search-kbd {
+    align-items: center;
+    margin-left: 0.1rem;
+    padding: 0.05rem 0.35rem;
+    font-family: var(--zer0-font-mono);
+    font-size: 0.7rem;
+    line-height: 1.4;
+    color: var(--zer0-color-ink-muted);
+    background: var(--zer0-color-bg-muted);
+    border-radius: var(--zer0-radius-sm);
+}
+
+// The bar spans the full viewport (header markup uses .container-fluid) with a
+// fluid gutter instead of a centred .container-xl track, so the menubar gets the
+// whole screen width. Consumers that want the old capped bar set
+// --zer0-navbar-max-width (e.g. 1320px) in their own stylesheet.
+#navbar .navbar-main {
+    max-width: var(--zer0-navbar-max-width, 100%);
+    margin-inline: auto;
+    padding-inline: clamp(0.75rem, 1.5vw, 1.5rem);
+}
+
 // Desktop (lg+): 3-column grid — [brand/title | main nav | utilities] so nav cannot paint over Search/Settings
 @media (min-width: 992px) {
     #navbar .navbar-main {
         display: grid !important;
         grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
         align-items: center;
-        column-gap: 0.5rem;
+        column-gap: 0.75rem;
         row-gap: 0.25rem;
         flex-wrap: unset !important;
         container-type: inline-size;
         container-name: navbar-main;
     }
 
+    // The brand cluster is sized by its content (grid track 1 is `auto`), so an
+    // unbounded title would starve the menubar of the width its labels need.
+    // Cap it at a share of the BAR — `cqi` resolves against .navbar-main (the
+    // named container), where a plain percentage would resolve against the
+    // content-sized track and collapse the title to nothing. The title already
+    // ellipsizes past the cap.
     #navbar .navbar-main-start {
         grid-column: 1;
         display: flex;
         align-items: center;
         gap: 0.375rem;
         min-width: 0;
-        max-width: none;
+        max-width: 30cqi;
         flex-shrink: 1;
     }
 
@@ -1025,8 +1236,12 @@
         max-width: none;
     }
 
-    // Progressive brand degradation (container width, not viewport)
-    @container navbar-main (min-width: 80rem) {
+    // Progressive brand degradation (container width, not viewport).
+    // The home-link icons add ~108px to the brand cluster, so they only appear
+    // once the bar is wide enough to carry them AND the full menubar
+    // (815px of items + 328px brand + 146px utilities + gaps ≈ 82rem); 86rem
+    // leaves headroom for a longer site title.
+    @container navbar-main (min-width: 86rem) {
         #navbar .navbar-home-links {
             display: inline-flex !important;
         }

data/_sass/layouts/_landing.scss

@@ -44,7 +44,7 @@
 .landing-feature-card {
   height: 100%;
   border: 1px solid var(--zer0-color-border);
-  border-radius: 0.75rem;
+  border-radius: var(--zer0-radius-xl);
   background: var(--zer0-color-bg);
   transition:
     transform var(--zer0-motion-duration-base) var(--zer0-motion-ease-standard),
@@ -61,7 +61,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: 50%;
+    border-radius: var(--zer0-radius-circle);
     background-color: rgba(var(--zer0-color-primary-rgb), 0.12);
     color: var(--zer0-color-primary);
     margin-bottom: var(--zer0-space-3);

data/_sass/layouts/_navbar-extras.scss

@@ -53,13 +53,18 @@
       display: block;
     }
 
+    // No transform on :hover — a lift moves the FAB out from under a pointer
+    // parked on its bottom edge, hover exits, it drops back: infinite flicker.
+    // These are `.btn`s, so the 2px lift _ui-enhancements.scss puts on every
+    // button has to be cancelled explicitly, not merely not-added here.
     &:hover,
     &:focus-visible {
-      transform: translateY(-1px);
+      transform: none;
     }
 
+    // :active is safe, because the button is held down for its whole duration.
     &:active {
-      transform: translateY(0);
+      transform: translateY(1px);
     }
   }
 }
@@ -112,13 +117,18 @@
       display: block;
     }
 
+    // No transform on :hover — a lift moves the FAB out from under a pointer
+    // parked on its bottom edge, hover exits, it drops back: infinite flicker.
+    // These are `.btn`s, so the 2px lift _ui-enhancements.scss puts on every
+    // button has to be cancelled explicitly, not merely not-added here.
     &:hover,
     &:focus-visible {
-      transform: translateY(-1px);
+      transform: none;
     }
 
+    // :active is safe, because the button is held down for its whole duration.
     &:active {
-      transform: translateY(0);
+      transform: translateY(1px);
     }
   }
 }

data/_sass/tokens/_color.scss

@@ -36,6 +36,12 @@
   --zer0-color-border: var(--bs-border-color, #dee2e6);
   --zer0-color-border-translucent: color-mix(in srgb, var(--zer0-color-border) 42%, transparent);
 
+  // Logo palette (documented in _includes/core/branding.html) --------------
+  --zer0-logo-red: #a11111;
+  --zer0-logo-yellow: #ffe900;
+  --zer0-logo-teal: #376986;
+  --zer0-logo-blue: #007bff;
+
   // Code & callouts (legacy --bd-* aliases) --------------------------------
   --zer0-color-code-bg: var(--bd-pre-bg, var(--bs-tertiary-bg));
   --zer0-color-code-ink: var(--bd-callout-code-color, #ab296a);

data/_sass/tokens/_index.scss

@@ -1,3 +1,4 @@
+// Feature: ZER0-081
 // ============================================================================
 // Tokens barrel — single import surface for the design-token layer
 // ----------------------------------------------------------------------------
@@ -9,6 +10,7 @@
 
 @import "tokens/color";
 @import "tokens/spacing";
+@import "tokens/radius";
 @import "tokens/typography";
 @import "tokens/shadow";
 @import "tokens/motion";

data/_sass/tokens/_radius.scss

@@ -0,0 +1,21 @@
+// Feature: ZER0-081
+// ============================================================================
+// Radius tokens — semantic --zer0-radius-* custom properties
+// ----------------------------------------------------------------------------
+// Corner radii for every rounded surface, mirroring Bootstrap's
+// --bs-border-radius family so the theme and vanilla Bootstrap components
+// round identically. `xl` is the softer landing-feature-card radius; `pill`
+// and `circle` cover badges, chips, avatars, and FABs.
+//
+// Mirrored to the Claude Design project as tokens/radius.css — keep both in
+// lockstep (scripts/design-system-check.rb enforces parity).
+// ============================================================================
+
+:root {
+  --zer0-radius-sm: 0.25rem;
+  --zer0-radius: 0.375rem;
+  --zer0-radius-lg: 0.5rem;
+  --zer0-radius-xl: 0.75rem;   // landing feature cards
+  --zer0-radius-pill: 50rem;
+  --zer0-radius-circle: 50%;
+}

data/_sass/tokens/_typography.scss

@@ -28,6 +28,10 @@
   --zer0-text-h5: 1.125rem;
   --zer0-text-h6: 1rem;
 
+  // Display sizes (Bootstrap .display-* — hero titles) ---------------------
+  --zer0-text-display-4: clamp(2.5rem, 6vw, 3.5rem);
+  --zer0-text-display-5: clamp(2rem, 5vw, 3rem);
+
   // Line heights -----------------------------------------------------------
   --zer0-leading-tight: 1.2;
   --zer0-leading-normal: 1.55;

data/_sass/utilities/_focus.scss

@@ -19,6 +19,20 @@ summary:focus-visible {
   border-radius: 0.125rem;
 }
 
+// Skip-link target — <main id="main-content" tabindex="-1"> in _layouts/root.html.
+// The -1 lets the skip link move real keyboard focus into the content (see the
+// comment there), but it also makes the container paintable by the UA's default
+// focus outline. Suppress it on the container ONLY: this rule cannot match a
+// descendant, so links, buttons and headings inside the content keep their rings
+// — including the :focus-visible ring defined at the top of this file.
+//
+// Safe here specifically because the element is tabindex="-1": it is never
+// reachable by Tab, so no keyboard user can land on it and be left without an
+// indicator. Do not generalise this selector to focusable elements.
+#main-content:focus {
+  outline: none;
+}
+
 // Skip-to-content link — visually hidden until focused
 .zer0-skip-link {
   position: absolute;

data/assets/css/main.scss

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