jekyll-theme-zer0 1.30.0 → 1.31.0

data/_includes/core/branding.html

@@ -5,14 +5,16 @@
   
   File: branding.html
   Path: _includes/core/branding.html
-  Purpose: Display site title and optional subtitle in navbar
-  
+  Purpose: Display the site logo and title in the navbar
+
+  The navbar carries logo + title ONLY. `site.subtitle` used to render here as
+  a second `.navbar-brand` at lg+, which spent bar width the menubar needed for
+  its labels; it now belongs to the home hero (_layouts/home.html) — see #405.
+
   Dependencies:
   - site.title: Main site title from _config.yml
-  - site.subtitle: Optional subtitle from _config.yml
   - site.default_icon: Icon framework class (e.g., 'bi')
   - site.title_icon: Icon for title display
-  - site.subtitle_icon: Icon for subtitle display
   ===================================================================
 {% endcomment %}
 {% comment %} Color Schema Override 
@@ -43,14 +45,5 @@
     </a>
 </div>
 
-{% comment %} If a subtitle exists {% endcomment %}
-{%- assign _subtitle = site.subtitle | strip -%}
-{%- if _subtitle != "" -%}
-<div class="navbar-brand site-subtitle d-none d-lg-inline">
-    <a class="nav-link" href="{{ '/' | relative_url }}" aria-label="{{ _subtitle }} — {{ site.title }} home">
-        <span class="site-subtitle-text">
-            {{ _subtitle }}
-        </span>
-    </a>
-</div>
-{% endif %}
+{% comment %} The subtitle is deliberately NOT rendered here — see the header
+   comment above and the home hero in _layouts/home.html (#405). {% endcomment %}

data/_includes/core/head.html

@@ -19,7 +19,7 @@
   - seo.html: SEO meta tags and Open Graph data
   - google-analytics.html: Google Analytics tracking
   - google-tag-manager-head.html: GTM head section
-  - posthog.html: PostHog product analytics (opt-in via site.posthog.enabled)
+  - (posthog.html is included from _layouts/root.html at the end of <body>, not here)
   
   Performance Notes:
   - Scripts loaded in head for immediate availability
@@ -160,9 +160,10 @@ window.MathJax = {
 {% comment %} Only load in production AND when an ID is configured; the include also guards against dev hostnames {% endcomment %}
 {% if jekyll.environment == "production" and site.google_analytics %}{% include analytics/google-analytics.html %}{% endif %}
 
-{% comment %} PostHog analytics - Configured via the `posthog:` block in _config.yml {% endcomment %}
-{% comment %} Only load in production AND when explicitly enabled; the include itself also respects Do Not Track {% endcomment %}
-{% if jekyll.environment == "production" and site.posthog.enabled %}{% include analytics/posthog.html %}{% endif %}
+{% comment %} PostHog analytics is NOT included here. _layouts/root.html already
+   includes analytics/posthog.html at the end of <body> (since the include was
+   added), so this second copy, added in #317, emitted the snippet twice and
+   called posthog.init() twice on every production page. {% endcomment %}
 
 
 {% comment %} ================================ {% endcomment %}
@@ -200,7 +201,8 @@ window.MathJax = {
 {% comment %} DESIGN TOKEN OVERRIDES     {% endcomment %}
 {% comment %} ========================== {% endcomment %}
 {% comment %} Inline <style> block emitted AFTER main.css so site-config `theme_color` keys
-     and any per-user Appearance overrides win over compiled defaults. {% endcomment %}
+     and any per-user Appearance overrides win over compiled defaults. The tokens a
+     palette skin sets are scoped so that the skin still wins (see tokens-inline.html). {% endcomment %}
 {% include core/tokens-inline.html %}
 
 {% comment %} Optional fork overrides: opt-in via `site.user_overrides: true` in _config.yml.
@@ -214,6 +216,28 @@ window.MathJax = {
 <link rel="stylesheet" href="{{ '/assets/css/stats.css' | relative_url }}">
 {% endif %}
 
+{% comment %} Per-page stylesheets from frontmatter (#412):
+
+       ---
+       styles:
+         - /assets/css/notes.css
+         - https://cdn.example.com/x.css
+       ---
+
+     A contract, not a convention. Before this, attaching CSS to one page meant a
+     literal <link> inside the content file or a custom layout — which works, and
+     puts asset tags in prose. A single string is accepted as well as a list.
+     Site-relative paths go through relative_url so a baseurl deployment is
+     correct; absolute URLs are passed through untouched.
+
+     Emits NOTHING when the key is absent — the whitespace control here keeps a
+     page without `styles:` byte-identical to its previous build, which is why
+     the comment and the `endif` both close with `-%}`. {% endcomment -%}
+{% if page.styles %}{% assign page_styles = page.styles %}{% if page_styles.first == nil %}{% assign page_styles = page_styles | split: "||" %}{% endif %}{% for style_href in page_styles %}
+<link rel="stylesheet" href="{% if style_href contains '//' %}{{ style_href }}{% else %}{{ style_href | relative_url }}{% endif %}">
+{%- endfor %}
+{% endif -%}
+
 {% comment %} Consumer hook: end of <head>. Inject JSON-LD, font preloads, verification
      tags, or extra meta by shadowing _includes/custom/head.html in your site —
      no fork of this file needed. The theme ships the stub empty. {% endcomment %}

data/_includes/core/header.html

@@ -210,15 +210,27 @@
                   {%- assign _menu_target = "#bdNavbar" -%}
                   {%- assign _menu_controls = "bdNavbar" -%}
                 {%- endif -%}
+                {% comment %} Below lg this is a LABELLED control, not a bare glyph (#405).
+                     Two toggles coexist here — the sidebar hamburger and this one — and
+                     three-dots vs. list gave no clue which opened what. The gear is
+                     `d-lg-none`-excluded above (desktop only; on mobile its contents are
+                     reached through the drawer), so labelling this one is what makes the
+                     pair unambiguous.
+                     aria-label matches the visible "Menu" text verbatim (rather than the
+                     older, more descriptive "Toggle main navigation") so the accessible
+                     name CONTAINS the visible label in every locale — WCAG 2.5.3 Label in
+                     Name — instead of only coincidentally in English. {% endcomment %}
+                {%- assign _menu_toggle_label = ui.nav_menu_toggle_label | default: "Menu" -%}
                 <div class="bd-navbar-toggle d-lg-none">
-                    <button class="navbar-toggler p-2"
+                    <button class="navbar-toggler navbar-toggler-labeled p-2"
                             type="button"
                             data-bs-toggle="offcanvas"
                             data-bs-target="{{ _menu_target }}"
                             aria-controls="{{ _menu_controls }}"
-                            aria-label="Toggle main navigation"
+                            aria-label="{{ _menu_toggle_label }}"
                             aria-expanded="false">
                         <span class="bi bi-three-dots" aria-hidden="true"></span>
+                        <span class="navbar-toggler-text">{{ _menu_toggle_label }}</span>
                     </button>
                 </div>
             </div>

data/_includes/core/tokens-inline.html

@@ -16,21 +16,36 @@
 
   Only emits a key if the config value is present, so the default cascade
   remains intact when consumers omit `theme_color` from _config.yml.
+
+  Precedence (T-048 / #459): the active skin beats `theme_color`.
+  The skin palettes in _sass/theme/_skins.scss set --zer0-color-primary,
+  --zer0-color-link and --zer0-color-accent together with --bs-primary.
+  So the config values for those three tokens are only emitted when no
+  palette skin is active. Otherwise this block would win on source order,
+  because `:root` and `[data-theme-skin]` have the same specificity, and the
+  theme layer would disagree with Bootstrap. `palette_skins` must list every
+  skin that _skins.scss gives a palette; test/visual/features/appearance.spec.js
+  checks that.
   ===================================================================
 {%- endcomment -%}
 {%- assign tc = site.theme_color -%}
+{%- assign palette_skins = "air,aqua,dirt,neon,mint,plum,sunrise" | split: "," -%}
 {%- if tc -%}
 <style id="zer0-tokens-inline">
 :root {
-  {%- if tc.main %} --zer0-color-primary: {{ tc.main }};{%- endif %}
   {%- if tc.secondary %} --zer0-color-secondary: {{ tc.secondary }};{%- endif %}
   {%- if tc.red %} --zer0-color-danger: {{ tc.red }};{%- endif %}
   {%- if tc.yellow %} --zer0-color-warning: {{ tc.yellow }};{%- endif %}
   {%- if tc.green %} --zer0-color-success: {{ tc.green }};{%- endif %}
   {%- if tc.teal %} --zer0-color-info: {{ tc.teal }};{%- endif %}
+}
+{%- if tc.main or tc.blue or tc.purple %}
+:root{% for s in palette_skins %}:not([data-theme-skin="{{ s }}"]){% endfor %} {
+  {%- if tc.main %} --zer0-color-primary: {{ tc.main }};{%- endif %}
   {%- if tc.blue %} --zer0-color-link: {{ tc.blue }};{%- endif %}
   {%- if tc.purple %} --zer0-color-accent: {{ tc.purple }};{%- endif %}
 }
+{%- endif %}
 </style>
 {%- endif -%}
 

data/_includes/navigation/navbar.html

@@ -49,7 +49,7 @@
                             class="nav-link"
                             href="{{ link.url | relative_url }}"
                             aria-label="{{ link.title }}"
-                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            {% if link.url == page.url %}aria-current="page"{% endif %}
                             title="{{ link.title }}"
                         >
                             {%- if link.icon -%}
@@ -61,8 +61,12 @@
                         {% comment %} Split toggle opens the dropdown (click on mobile, hover on desktop) {% endcomment %}
                         {% comment %} Note: No data-bs-toggle="dropdown" — custom JS handles all interactions
                              to avoid Bootstrap's native handler conflicting with our toggle logic {% endcomment %}
+                        {% comment %} No `ms-1`: at lg+ the chevron is absolutely positioned over the
+                             parent link's reserved padding (_navbar.scss), so a left margin would
+                             re-open the dead zone between label and chevron that #405 closed. Below
+                             lg the offcanvas layout keeps them as ordinary siblings. {% endcomment %}
                         <button
-                            class="nav-link dropdown-toggle dropdown-toggle-split ms-1"
+                            class="nav-link dropdown-toggle dropdown-toggle-split"
                             type="button"
                             id="dropdown-{{ link.title | slugify }}"
                             aria-expanded="false"
@@ -78,8 +82,7 @@
                                     <a
                                         class="dropdown-item"
                                         href="{{ child.url | relative_url }}"
-
-                                        {%- if child.url == page.url -%} aria-current="page"{%- endif -%}
+                                        {% if child.url == page.url %}aria-current="page"{% endif %}
                                     >
                                         {%- if child.icon -%}
                                             <i class="{{site.default_icon}} {{ child.icon }} me-2" aria-hidden="true"></i>
@@ -96,7 +99,7 @@
                             class="nav-link"
                             href="{{ link.url | relative_url }}"
                             aria-label="{{ link.title }}"
-                            {%- if link.url == page.url -%} aria-current="page"{%- endif -%}
+                            {% if link.url == page.url %}aria-current="page"{% endif %}
                             title="{{ link.title }}"
                         >
                             {%- if link.icon -%}
@@ -125,7 +128,7 @@
                             href="{{ col_url | relative_url }}"
                             aria-label="{{ col_title }}"
                             title="{{ col_title }}"
-                            {%- if page.collection == collection.label -%} aria-current="page"{%- endif -%}
+                            {% if page.collection == collection.label %}aria-current="page"{% endif %}
                         >
                             <span class="nav-link-text">{{ col_title }}</span>
                         </a>

data/_includes/setup/wizard.html

@@ -62,7 +62,11 @@
       </p>
     </div>
     <div class="d-flex align-items-center gap-2">
-      <span id="wizard-draft-chip" class="wizard-draft-chip" hidden aria-live="polite">
+      {% comment %} No `hidden` here: the chip must hold its box from first paint, or the
+         first debounced save grows this header — permanently — and every offset below it
+         moves with it (issue #265). _setup-wizard.scss hides it with `visibility`
+         instead, which keeps the box and still keeps it out of the a11y tree. {% endcomment %}
+      <span id="wizard-draft-chip" class="wizard-draft-chip" aria-live="polite">
         <i class="bi bi-cloud-check" aria-hidden="true"></i> Draft saved
       </span>
       <button class="btn btn-outline-secondary btn-sm" type="button" id="btn-reset"

data/_layouts/article.html

@@ -76,7 +76,12 @@ layout: default
   {% endif %}
 {% endif %}
 
-<article id="main" class="post h-entry" role="main" itemscope itemtype="https://schema.org/BlogPosting">
+{% comment %} No main role and no generic main id on this element: root.html already
+     provides the page's single <main id="main-content"> landmark, and a main role here
+     both duplicated it and suppressed this element's native `article` landmark (issue
+     #484, the same class of defect as #299). The generic id had no referents either —
+     the skip link targets #main-content. Asserted by test/visual/core/landmarks.spec.js. {% endcomment %}
+<article class="post h-entry" itemscope itemtype="https://schema.org/BlogPosting">
   
   {% comment %} ================================ {% endcomment %}
   {% comment %} BREAKING NEWS ALERT BANNER      {% endcomment %}
@@ -234,6 +239,10 @@ layout: default
     post_type defaults (issue #303).
     Nested ifs keep the "only when page.preview exists" guard intact (Liquid has
     no parentheses, so a flat `a or b and c` would misgroup).
+    The hero is the above-the-fold LCP element, so it loads eagerly at high
+    priority (the include defaults to lazy); its box is reserved in CSS by
+    `.featured-hero img` (components/_ui-enhancements.scss), not by width/height
+    attributes, because preview assets vary in shape (issue #485).
   {% endcomment %}
   {% assign show_hero = false %}
   {% if page.preview %}
@@ -247,7 +256,10 @@ layout: default
        src=page.preview 
        alt=page.title 
        class="w-100 rounded-3 shadow" 
-       style="max-height: 500px; object-fit: cover;" 
+       style="max-height: 500px; object-fit: cover;"
+       loading="eager"
+       fetchpriority="high"
+       decoding="async"
     %}
     {% if page.preview_caption %}
     <figcaption class="text-muted small mt-2 text-center">{{ page.preview_caption }}</figcaption>
@@ -469,7 +481,7 @@ layout: default
                   {% endif %}
                   <a href="{{ rpost.url | relative_url }}" class="text-decoration-none">
                     {% assign rpost_img = rpost.preview | default: site.teaser %}
-                    {% include components/preview-image.html src=rpost_img alt=rpost.title class="card-img-top" %}
+                    {% include components/preview-image.html src=rpost_img alt=rpost.title class="card-img-top" width="1536" height="1024" %}
                   </a>
                 </div>
                 <div class="card-body">

data/_layouts/home.html

@@ -62,7 +62,19 @@ layout: root
     {%- if page.title and page.hide_title != true and page.hide_intro != true -%}
         <h1 class="page-heading">{{ page.title }}</h1>
     {%- endif -%}
-    
+
+    {% comment %} ========================== {% endcomment %}
+    {% comment %} SITE SUBTITLE (HOME HERO)  {% endcomment %}
+    {% comment %} ========================== {% endcomment %}
+    {% comment %} `site.subtitle` reads here, on the home hero, instead of in the {% endcomment %}
+    {% comment %} navbar, where it competed with the menubar for bar width (#405). {% endcomment %}
+    {% comment %} Suppressed alongside the heading, so a custom hero that supplies {% endcomment %}
+    {% comment %} its own copy is not doubled up. {% endcomment %}
+    {%- assign _subtitle = site.subtitle | strip -%}
+    {%- if _subtitle != "" and page.hide_title != true and page.hide_intro != true -%}
+        <p class="site-subtitle-text home-subtitle lead text-body-secondary">{{ _subtitle }}</p>
+    {%- endif -%}
+
     {% comment %} ========================== {% endcomment %}
     {% comment %} MAIN CONTENT AREA          {% endcomment %}
     {% comment %} ========================== {% endcomment %}

data/_layouts/note.html

@@ -38,7 +38,8 @@ layout: default
   ===================================================================
 {% endcomment %}
 
-<article id="main" class="note-article h-entry" role="main" itemscope itemtype="https://schema.org/Article">
+{% comment %} No main role and no generic main id — see article.html (issue #484). {% endcomment %}
+<article class="note-article h-entry" itemscope itemtype="https://schema.org/Article">
   
   {% comment %} ================================ {% endcomment %}
   {% comment %} NOTE HEADER                      {% endcomment %}

data/_layouts/notebook.html

@@ -34,7 +34,8 @@ layout: default
   ===================================================================
 {% endcomment %}
 
-<article id="main" class="notebook-article h-entry" role="main" itemscope itemtype="https://schema.org/TechArticle">
+{% comment %} No main role and no generic main id — see article.html (issue #484). {% endcomment %}
+<article class="notebook-article h-entry" itemscope itemtype="https://schema.org/TechArticle">
   
   {% comment %} ================================ {% endcomment %}
   {% comment %} NOTEBOOK HEADER                  {% endcomment %}

data/_layouts/root.html

@@ -193,6 +193,28 @@
             {% include_cached components/js-cdn.html %}
         </div>
 
+        {% comment %} Per-page scripts from frontmatter (#412):
+
+               ---
+               scripts:
+                 - /assets/js/notes-clipper.js
+               ---
+
+             The counterpart of `styles:` in _includes/core/head.html, loaded here
+             so a page script runs AFTER the theme's own bundle (js-cdn.html) and
+             can rely on the contracts it publishes — `zer0:code-block-ready`, for
+             one. Deferred, so it never blocks the parse. A single string is
+             accepted as well as a list; site-relative paths go through
+             relative_url, absolute URLs pass through untouched.
+
+             Emits NOTHING when the key is absent, so a page without `scripts:`
+             is byte-identical to its previous build — hence the `-%}` on both
+             the comment and the `endif`. {% endcomment -%}
+        {% if page.scripts %}{% assign page_scripts = page.scripts %}{% if page_scripts.first == nil %}{% assign page_scripts = page_scripts | split: "||" %}{% endif %}{% for script_src in page_scripts %}
+        <script defer src="{% if script_src contains '//' %}{{ script_src }}{% else %}{{ script_src | relative_url }}{% endif %}"></script>
+        {%- endfor %}
+        {% endif -%}
+
         {% comment %} Analytics Integration {% endcomment %}
         {%- include analytics/posthog.html -%}
 

data/_sass/components/_cookie-banner.scss

@@ -38,3 +38,51 @@
     transform: translateY(0);
   }
 }
+
+// ----------------------------------------------------------------------------
+// Compact bar layout
+// ----------------------------------------------------------------------------
+// The banner must never eat the first screen. Phones get a two-line summary
+// over ONE row of three equal buttons (the old full-width stack was 324px at
+// 400px wide); md+ is a single row, copy left and actions right. Button
+// height is left to .btn-sm and the touch-device 44px minimum in
+// components/_ui-enhancements.scss.
+.cookie-consent-banner__inner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-block: 0.5rem;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+  }
+}
+
+.cookie-consent-banner__text {
+  line-height: 1.35;
+
+  @media (min-width: 768px) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+}
+
+.cookie-consent-banner__actions {
+  display: flex;
+  gap: 0.5rem;
+
+  .btn {
+    flex: 1 1 0;
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    flex: 0 0 auto;
+
+    .btn {
+      flex: 0 0 auto;
+    }
+  }
+}

data/_sass/components/_setup-wizard.scss

@@ -104,14 +104,32 @@
 
 // "Draft saved" acknowledgement. Kept in the layout (no display toggling) so
 // its appearance never shifts the header.
+//
+// That was always the intent of this rule, and for a long time it was only the
+// intent: the markup carried `hidden` and setup-wizard.js cleared it on the
+// first debounced save, so the chip went from `display: none` to a 26px box
+// while the "Start over" `.btn-sm` beside it is 19px. The header grew and
+// stayed grown, one-way, taking `#wizardTabContent` and every Back/Next row
+// below it down with it (issue #265) — 7px where the header's right-hand block
+// had already wrapped onto its own line, a whole wrapped line where those 7px
+// were what tipped it over.
+//
+// `visibility` rather than `display` is what makes the prose above true: the
+// box is reserved from first paint, so nothing moves when the chip appears,
+// and `visibility: hidden` still keeps it out of the accessibility tree while
+// it has nothing to say. The `visibility` transition is discrete — it flips to
+// visible at the start of the fade in and back to hidden at the end of the
+// fade out, so the text is never readable at opacity 0.
 .wizard-draft-chip {
   padding: 0.25rem 0.5rem;
   font-size: 0.75rem;
   color: var(--bs-success, #198754);
+  visibility: hidden;
   opacity: 0;
-  transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
 
   &.is-visible {
+    visibility: visible;
     opacity: 1;
   }
 }

data/_sass/components/_ui-enhancements.scss

@@ -53,6 +53,17 @@ img {
   }
 }
 
+// Article hero (_layouts/article.html, figure.featured-hero) — the LCP image.
+// Reserve its box before it loads so the text below never shifts (issue #485).
+// A fixed ratio in CSS rather than width/height attributes: preview assets are
+// 3:2 (1024x683) generated, but some are portrait or external, and a declared
+// intrinsic size that disagrees with the file would itself cause the shift.
+// object-fit: cover (inline on the <img>) crops, never distorts; the inline
+// max-height: 500px still caps the box on wide viewports.
+.featured-hero img {
+  aspect-ratio: 3 / 2;
+}
+
 // Hero content animations
 .bg-primary .container-xl {
   animation: fadeInUp 0.8s ease-out;