jekyll-theme-zer0 1.27.0 → 1.29.0

data/_includes/components/recipe-ratio.html

@@ -0,0 +1,151 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-ratio
+  Path:        _includes/components/recipe-ratio.html
+  Purpose:     The formula behind the recipe — every ingredient reduced to a
+               weight and a percentage of one reference ingredient. This is the
+               baker's-percentage table bread, pastry and sauce recipes are
+               really built on, and it is what lets a reader rebuild the recipe
+               at any size instead of only at multiples of the printed one.
+  Params:      recipe (doc, optional, default: page)
+               basis (string, optional, default: page.ratio_basis) — the
+                 ingredient that counts as 100%; matched as a substring, so
+                 "flour" covers "bread flour" + "whole-wheat flour"
+               heading (string, optional, default: "Ratio")
+               heading_level (string, optional, default: "h2")
+  Depends on:  components/recipe-grams.html, components/recipe-qty.html,
+               _data/ingredient_densities.yml, _sass/components/_recipe.scss
+  Notes:       Percentages are computed at BUILD time, so the table is right
+               with JavaScript disabled and never drifts from the ingredient
+               list. They are also scale-invariant — only the weight column
+               moves when the reader rescales. Ingredients that cannot be
+               resolved to a weight (a clove of garlic, "1 egg", a volume with
+               no density) are listed without a percentage rather than guessed
+               at. Set `ratio: false` on an ingredient to leave it out, or
+               author `baker_percent:` to pin a value.
+{%- endcomment -%}
+{%- assign _rr_r = include.recipe | default: page -%}
+{%- assign _rr_basis = include.basis | default: _rr_r.ratio_basis -%}
+{%- assign _rr_ingredients = _rr_r.ingredients -%}
+{%- if _rr_ingredients == nil or _rr_ingredients.size == 0 or _rr_basis == nil -%}
+  {%- comment -%} recipe-ratio: needs `ingredients` and a `ratio_basis` — skipping render {%- endcomment -%}
+{%- else -%}
+{%- assign _rr_basis_needle = _rr_basis | downcase | strip -%}
+{%- assign _rr_hl = include.heading_level | default: "h2" -%}
+
+{%- comment -%} Flatten grouped ingredients into one list. {%- endcomment -%}
+{%- assign _rr_flat = "" | split: "" -%}
+{%- for _rr_entry in _rr_ingredients -%}
+  {%- if _rr_entry.items -%}
+    {%- for _rr_i in _rr_entry.items -%}{%- assign _rr_flat = _rr_flat | push: _rr_i -%}{%- endfor -%}
+  {%- else -%}
+    {%- assign _rr_flat = _rr_flat | push: _rr_entry -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- comment -%} Pass 1: total the basis weight and the batch weight. {%- endcomment -%}
+{%- assign _rr_basis_grams = 0 -%}
+{%- assign _rr_total_grams = 0 -%}
+{%- assign _rr_weighed = 0 -%}
+{%- for _rr_i in _rr_flat -%}
+  {%- if _rr_i.ratio == false -%}{%- continue -%}{%- endif -%}
+  {%- assign _rr_slug = _rr_i.item | default: "" | downcase | strip | replace: " ", "-" -%}
+  {%- assign _rr_gpc = _rr_i.grams_per_cup | default: site.data.ingredient_densities[_rr_slug] -%}
+  {%- capture _rr_g -%}{%- include components/recipe-grams.html qty=_rr_i.qty unit=_rr_i.unit grams_per_cup=_rr_gpc -%}{%- endcapture -%}
+  {%- assign _rr_g = _rr_g | strip -%}
+  {%- if _rr_g != "" -%}
+    {%- assign _rr_weighed = _rr_weighed | plus: 1 -%}
+    {%- assign _rr_total_grams = _rr_total_grams | plus: _rr_g -%}
+    {%- assign _rr_name = _rr_i.item | default: "" | downcase -%}
+    {%- if _rr_name contains _rr_basis_needle -%}
+      {%- assign _rr_basis_grams = _rr_basis_grams | plus: _rr_g -%}
+    {%- endif -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- if _rr_weighed < 2 or _rr_basis_grams <= 0 -%}
+  {%- comment -%} recipe-ratio: fewer than two weighable ingredients, or the basis "{{ _rr_basis }}" matched nothing — skipping render {%- endcomment -%}
+{%- else -%}
+<section class="recipe-ratio">
+  <{{ _rr_hl }} class="recipe-section-heading">
+    <i class="bi bi-percent me-2" aria-hidden="true"></i>{{ include.heading | default: "Ratio" }}
+  </{{ _rr_hl }}>
+  <p class="recipe-ratio-intro text-body-secondary">
+    Every weight below is a percentage of the {{ _rr_basis | escape }}
+    {%- if _rr_r.ratio %}, which gives this recipe its <strong>{{ _rr_r.ratio | escape }}</strong> ratio{% endif -%}.
+    Rescale the recipe and the weights follow; the percentages are what stay true.
+  </p>
+  <div class="table-responsive">
+    <table class="table table-sm recipe-ratio-table align-middle">
+      <thead>
+        <tr>
+          <th scope="col">Ingredient</th>
+          <th scope="col" class="text-end">Weight</th>
+          <th scope="col" class="text-end">% of {{ _rr_basis | escape }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {%- for _rr_i in _rr_flat -%}
+          {%- if _rr_i.ratio == false -%}{%- continue -%}{%- endif -%}
+          {%- assign _rr_slug = _rr_i.item | default: "" | downcase | strip | replace: " ", "-" -%}
+          {%- assign _rr_gpc = _rr_i.grams_per_cup | default: site.data.ingredient_densities[_rr_slug] -%}
+          {%- capture _rr_g -%}{%- include components/recipe-grams.html qty=_rr_i.qty unit=_rr_i.unit grams_per_cup=_rr_gpc -%}{%- endcapture -%}
+          {%- assign _rr_g = _rr_g | strip -%}
+        <tr>
+          <th scope="row" class="fw-normal">{{ _rr_i.item | escape }}{% if _rr_i.optional %} <span class="text-body-secondary small">(optional)</span>{% endif %}</th>
+          <td class="text-end">
+            {%- if _rr_g != "" -%}
+              {%- include components/recipe-qty.html qty=_rr_g unit="g" -%}
+            {%- else -%}
+              <span class="text-body-secondary">—</span>
+            {%- endif -%}
+          </td>
+          <td class="text-end">
+            {%- if _rr_i.baker_percent -%}
+              {{ _rr_i.baker_percent }}%
+            {%- elsif _rr_g != "" -%}
+              {%- assign _rr_pct = _rr_g | times: 100.0 | divided_by: _rr_basis_grams -%}
+              {%- assign _rr_pct_i = _rr_pct | round -%}
+              {%- if _rr_pct == _rr_pct_i -%}{{ _rr_pct_i }}{%- else -%}{{ _rr_pct | round: 1 }}{%- endif -%}%
+            {%- else -%}
+              <span class="text-body-secondary">—</span>
+            {%- endif -%}
+          </td>
+        </tr>
+        {%- endfor -%}
+      </tbody>
+      <tfoot>
+        <tr>
+          <th scope="row">Total weighed</th>
+          <td class="text-end">{%- include components/recipe-qty.html qty=_rr_total_grams unit="g" -%}</td>
+          <td class="text-end">
+            {%- assign _rr_tpct = _rr_total_grams | times: 100.0 | divided_by: _rr_basis_grams -%}
+            {%- assign _rr_tpct_i = _rr_tpct | round -%}
+            {%- if _rr_tpct == _rr_tpct_i -%}{{ _rr_tpct_i }}{%- else -%}{{ _rr_tpct | round: 1 }}{%- endif -%}%
+          </td>
+        </tr>
+        {%- if _rr_r.yield.amount and _rr_r.yield.amount > 0 -%}
+        {%- assign _rr_per_unit = _rr_total_grams | divided_by: _rr_r.yield.amount | round: 1 -%}
+        {%- comment -%} Naive singular for the row label: "slices" → "slice". {%- endcomment -%}
+        {%- assign _rr_yu = _rr_r.yield.singular | default: _rr_r.yield.unit | default: "serving" | strip -%}
+        {%- unless _rr_r.yield.singular -%}
+          {%- if _rr_yu.size > 1 -%}
+            {%- assign _rr_tail = _rr_yu | slice: -1 -%}
+            {%- if _rr_tail == "s" -%}
+              {%- assign _rr_cut = _rr_yu.size | minus: 1 -%}
+              {%- assign _rr_yu = _rr_yu | slice: 0, _rr_cut -%}
+            {%- endif -%}
+          {%- endif -%}
+        {%- endunless -%}
+        <tr>
+          <th scope="row">Per {{ _rr_yu | escape }}</th>
+          <td class="text-end">{%- include components/recipe-qty.html qty=_rr_per_unit unit="g" scale=false -%}</td>
+          <td class="text-end"><span class="text-body-secondary">—</span></td>
+        </tr>
+        {%- endif -%}
+      </tfoot>
+    </table>
+  </div>
+</section>
+{%- endif -%}
+{%- endif -%}

data/_includes/components/recipe-scaler.html

@@ -0,0 +1,73 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-scaler
+  Path:        _includes/components/recipe-scaler.html
+  Purpose:     The control bar that drives every quantity on a recipe page —
+               scale the yield up or down, and switch the whole recipe between
+               the units it was written in, metric, and US customary.
+  Params:      base_yield (number, optional, default: page.yield.amount, then 1)
+               yield_unit (string, optional, default: page.yield.unit, then
+                 "servings")
+               recipe_id (string, optional, default: page.slug) — key the
+                 remembered scale is stored under
+               units (bool, optional, default: true) — false hides the unit
+                 switch (for a recipe that is already all-metric, say)
+               class (string, optional, default: "")
+  Depends on:  assets/js/recipe-scaler.js, _sass/components/_recipe.scss
+  Notes:       Progressive enhancement: with JavaScript off the controls are
+               hidden (.recipe-scaler is display:none until the script marks it
+               ready) and the page still shows every amount exactly as written.
+               The status paragraph is an aria-live region so screen-reader
+               users hear "Scaled to 24 cookies" rather than silently changing
+               numbers underneath them.
+{%- endcomment -%}
+{%- assign _rsc_base = include.base_yield | default: page.yield.amount | default: 1 -%}
+{%- assign _rsc_unit = include.yield_unit | default: page.yield.unit | default: "servings" -%}
+{%- assign _rsc_id = include.recipe_id | default: page.slug | default: "recipe" -%}
+{%- assign _rsc_show_units = true -%}
+{%- if include.units == false -%}{%- assign _rsc_show_units = false -%}{%- endif -%}
+<div class="recipe-scaler {{ include.class | default: '' }}" data-recipe-scaler data-base-yield="{{ _rsc_base }}" data-yield-unit="{{ _rsc_unit | escape }}" data-recipe-id="{{ _rsc_id | escape }}" hidden>
+  <div class="recipe-scaler-group">
+    <span class="recipe-scaler-label" id="{{ _rsc_id }}-scale-label">Scale</span>
+    <div class="input-group input-group-sm recipe-scaler-stepper">
+      <button class="btn btn-outline-secondary" type="button" data-recipe-step="-1" aria-label="Decrease {{ _rsc_unit | escape }}">
+        <i class="bi bi-dash-lg" aria-hidden="true"></i>
+      </button>
+      <input class="form-control text-center" type="number" inputmode="decimal" min="0.25" step="1"
+             value="{{ _rsc_base }}" data-recipe-yield-input
+             aria-labelledby="{{ _rsc_id }}-scale-label" aria-describedby="{{ _rsc_id }}-yield-unit">
+      <span class="input-group-text" id="{{ _rsc_id }}-yield-unit" data-recipe-yield-unit>{{ _rsc_unit | escape }}</span>
+      <button class="btn btn-outline-secondary" type="button" data-recipe-step="1" aria-label="Increase {{ _rsc_unit | escape }}">
+        <i class="bi bi-plus-lg" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+
+  <div class="recipe-scaler-group">
+    <div class="btn-group btn-group-sm" role="group" aria-label="Quick scale">
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="0.5">½×</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="1">1×</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="2">2×</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-multiplier="3">3×</button>
+    </div>
+  </div>
+
+  {%- if _rsc_show_units -%}
+  <div class="recipe-scaler-group">
+    <span class="recipe-scaler-label" id="{{ _rsc_id }}-units-label">Units</span>
+    <div class="btn-group btn-group-sm" role="group" aria-labelledby="{{ _rsc_id }}-units-label">
+      <button type="button" class="btn btn-outline-secondary" data-recipe-units="original" title="Show every amount exactly as the recipe was written">As written</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-units="metric" title="Grams, millilitres and °C — volumes become weights wherever a density is known">Metric</button>
+      <button type="button" class="btn btn-outline-secondary" data-recipe-units="us" title="Cups, spoons, ounces and °F">US</button>
+    </div>
+  </div>
+  {%- endif -%}
+
+  <div class="recipe-scaler-group recipe-scaler-group--reset">
+    <button type="button" class="btn btn-sm btn-link" data-recipe-reset>
+      <i class="bi bi-arrow-counterclockwise me-1" aria-hidden="true"></i>Reset
+    </button>
+  </div>
+
+  <p class="visually-hidden" role="status" aria-live="polite" data-recipe-status></p>
+</div>

data/_includes/components/recipe-steps.html

@@ -0,0 +1,86 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-steps
+  Path:        _includes/components/recipe-steps.html
+  Purpose:     The numbered method for one recipe — optionally split into
+               sections ("Day 1", "Assembly"), with per-step timings,
+               convertible temperatures, and step photos.
+  Params:      steps (array, optional, default: page.steps)
+               heading (string, optional, default: "Method")
+               heading_level (string, optional, default: "h2")
+  Depends on:  components/recipe-temp.html, components/recipe-duration.html,
+               _sass/components/_recipe.scss
+  Notes:       A step is either a plain string or a hash of
+               {text, title, time, temp_f, temp_c, image, image_alt, note}.
+               Sections are {section, items} hashes; numbering continues across
+               them via the <ol start> attribute so "step 7" means step 7 no
+               matter which section it lives in. Step text is markdownified, so
+               links and emphasis work. itemprop="recipeInstructions" marks
+               each step for schema.org.
+{%- endcomment -%}
+{%- assign _rs_steps = include.steps | default: page.steps -%}
+{%- if _rs_steps == nil or _rs_steps.size == 0 -%}
+  {%- comment -%} recipe-steps: no `steps` front matter — skipping render {%- endcomment -%}
+{%- else -%}
+{%- assign _rs_hl = include.heading_level | default: "h2" -%}
+{%- assign _rs_sub = _rs_hl | remove: "h" | plus: 1 -%}
+{%- assign _rs_n = 0 -%}
+<section class="recipe-steps">
+  <{{ _rs_hl }} class="recipe-section-heading">
+    <i class="bi bi-list-ol me-2" aria-hidden="true"></i>{{ include.heading | default: "Method" }}
+  </{{ _rs_hl }}>
+
+  {%- for _rs_entry in _rs_steps -%}
+    {%- if _rs_entry.items -%}
+      {%- assign _rs_section = _rs_entry.section | default: _rs_entry.group | default: _rs_entry.title -%}
+      {%- assign _rs_loop_steps = _rs_entry.items -%}
+    {%- else -%}
+      {%- assign _rs_section = nil -%}
+      {%- assign _rs_loop_steps = "" | split: "" | push: _rs_entry -%}
+    {%- endif -%}
+
+    {%- if _rs_section -%}
+  <h{{ _rs_sub }} class="recipe-steps-section-title">{{ _rs_section | escape }}</h{{ _rs_sub }}>
+    {%- endif -%}
+
+  <ol class="recipe-step-list" start="{{ _rs_n | plus: 1 }}">
+    {%- for _rs_s in _rs_loop_steps -%}
+      {%- assign _rs_n = _rs_n | plus: 1 -%}
+      {%- if _rs_s.text or _rs_s.title or _rs_s.image -%}
+        {%- assign _rs_text = _rs_s.text -%}
+      {%- else -%}
+        {%- assign _rs_text = _rs_s -%}
+      {%- endif -%}
+    <li class="recipe-step" itemprop="recipeInstructions">
+      {%- if _rs_s.title -%}
+      <p class="recipe-step-title">{{ _rs_s.title | escape }}</p>
+      {%- endif -%}
+      {%- if _rs_text -%}
+      <div class="recipe-step-text">{{ _rs_text | markdownify }}</div>
+      {%- endif -%}
+      {%- if _rs_s.time or _rs_s.temp_f or _rs_s.temp_c -%}
+      <p class="recipe-step-facts">
+        {%- if _rs_s.time -%}
+          {%- capture _rs_dur -%}{%- include components/recipe-duration.html minutes=_rs_s.time -%}{%- endcapture -%}
+        <span class="recipe-step-fact"><i class="bi bi-stopwatch me-1" aria-hidden="true"></i>{{ _rs_dur | strip }}</span>
+        {%- endif -%}
+        {%- if _rs_s.temp_f or _rs_s.temp_c -%}
+        <span class="recipe-step-fact"><i class="bi bi-thermometer-half me-1" aria-hidden="true"></i>{%- include components/recipe-temp.html f=_rs_s.temp_f c=_rs_s.temp_c -%}</span>
+        {%- endif -%}
+      </p>
+      {%- endif -%}
+      {%- if _rs_s.image -%}
+      <figure class="recipe-step-figure">
+        <img src="{{ _rs_s.image | relative_url }}" alt="{{ _rs_s.image_alt | default: '' | escape }}" loading="lazy" decoding="async" class="img-fluid rounded">
+        {%- if _rs_s.caption -%}<figcaption class="small text-body-secondary mt-1">{{ _rs_s.caption | escape }}</figcaption>{%- endif -%}
+      </figure>
+      {%- endif -%}
+      {%- if _rs_s.note -%}
+      <p class="recipe-step-note small">{{ _rs_s.note | escape }}</p>
+      {%- endif -%}
+    </li>
+    {%- endfor -%}
+  </ol>
+  {%- endfor -%}
+</section>
+{%- endif -%}

data/_includes/components/recipe-temp.html

@@ -0,0 +1,45 @@
+{% comment %} Feature: ZER0-084 {% endcomment %}
+{%- comment -%}
+  Component:   recipe-temp
+  Path:        _includes/components/recipe-temp.html
+  Purpose:     A temperature that follows the reader's unit choice — oven
+               settings, water temperature, doneness targets. Renders BOTH
+               scales by default so the page is complete without JavaScript;
+               the scaler then narrows it to whichever system is selected.
+  Params:      f (number, optional) — degrees Fahrenheit
+               c (number, optional) — degrees Celsius
+                 (give either one; the other is derived)
+               label (string, optional, default: "") — prefix, e.g. "Oven"
+               class (string, optional, default: "")
+  Depends on:  assets/js/recipe-scaler.js, _sass/components/_recipe.scss
+  Notes:       Derived values round to the nearest 5° above 100° — the
+               precision an oven dial actually has — and to the nearest degree
+               below it. Author both `f:` and `c:` to pin exact values.
+               Drop it straight into recipe prose:
+                 include components/recipe-temp.html f=375
+{%- endcomment -%}
+{%- if include.f == nil and include.c == nil -%}
+  {%- comment -%} ERROR: recipe-temp requires `f` or `c` {%- endcomment -%}
+{%- else -%}
+{%- if include.f != nil -%}
+  {%- assign _rt_f = include.f | round -%}
+{%- else -%}
+  {%- assign _rt_fraw = include.c | times: 9.0 | divided_by: 5.0 | plus: 32 -%}
+  {%- if _rt_fraw >= 100 -%}
+    {%- assign _rt_f = _rt_fraw | divided_by: 5.0 | round | times: 5 -%}
+  {%- else -%}
+    {%- assign _rt_f = _rt_fraw | round -%}
+  {%- endif -%}
+{%- endif -%}
+{%- if include.c != nil -%}
+  {%- assign _rt_c = include.c | round -%}
+{%- else -%}
+  {%- assign _rt_craw = include.f | minus: 32 | times: 5.0 | divided_by: 9.0 -%}
+  {%- if _rt_craw >= 100 -%}
+    {%- assign _rt_c = _rt_craw | divided_by: 5.0 | round | times: 5 -%}
+  {%- else -%}
+    {%- assign _rt_c = _rt_craw | round -%}
+  {%- endif -%}
+{%- endif -%}
+<span class="recipe-temp {{ include.class | default: '' }}" data-recipe-temp data-temp-f="{{ _rt_f }}" data-temp-c="{{ _rt_c }}">{% if include.label %}{{ include.label | escape }} {% endif %}{{ _rt_f }} °F ({{ _rt_c }} °C)</span>
+{%- endif -%}

data/_includes/components/search-modal.html

@@ -45,9 +45,9 @@
     <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="siteSearchModalLabel">
+                <h2 class="modal-title h5" id="siteSearchModalLabel">
                     <i class="bi bi-search me-2"></i>Search
-                </h5>
+                </h2>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="modal-body">

data/_includes/components/shortcuts-modal.html

@@ -30,6 +30,9 @@
           <dt class="col-4 col-sm-3 text-end"><kbd>/</kbd></dt>
           <dd class="col-8 col-sm-9 mb-2">{{ ui.shortcuts_search | default: "Open search" }}</dd>
 
+          <dt class="col-4 col-sm-3 text-end"><kbd>⌘</kbd>/<kbd>Ctrl</kbd>+<kbd>K</kbd></dt>
+          <dd class="col-8 col-sm-9 mb-2">{{ ui.shortcuts_search | default: "Open search" }}</dd>
+
           <dt class="col-4 col-sm-3 text-end"><kbd>[</kbd></dt>
           <dd class="col-8 col-sm-9 mb-2">{{ ui.shortcuts_prev_section | default: "Previous section" }}</dd>
 

data/_includes/components/theme-controls-bar.html

@@ -13,16 +13,24 @@
   Used by theme settings and theme preview pages.
   ===================================================================
 {%- endcomment -%}
-{% assign active_skin = site.theme_skin | default: site.data.theme_skins.default | default: "dark" %}
-{% assign skin_order = site.data.theme_skins.order %}
+{%- comment -%}
+  _data/theme_skins.yml is optional for consumers (remote_theme cannot ship
+  _data), so fall back to the compiled skin registry. Keep this list in sync
+  with the [data-theme-skin] blocks in _sass/theme/_skins.scss.
+{%- endcomment -%}
+{% assign _skin_fallback = "air|aqua|dirt|neon|mint|plum|sunrise" | split: "|" %}
+{% assign active_skin = site.theme_skin | default: site.data.theme_skins.default | default: "air" %}
+{% assign skin_order = site.data.theme_skins.order | default: _skin_fallback %}
 
 <div class="theme-controls-bar d-flex flex-wrap align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded-3 border">
+  {% unless site.color_mode_lock %}
   <div class="d-flex align-items-center gap-2">
     <i class="bi bi-moon-stars" aria-hidden="true"></i>
     <span class="fw-semibold small">Mode:</span>
     {% include components/halfmoon.html %}
   </div>
   <div class="vr d-none d-sm-block" aria-hidden="true"></div>
+  {% endunless %}
   <div class="d-flex align-items-center gap-2 flex-grow-1">
     <i class="bi bi-palette2" aria-hidden="true"></i>
     <span class="fw-semibold small">Skin:</span>

data/_includes/components/theme-customizer.html

@@ -14,8 +14,14 @@
   ===================================================================
 -->
 
-{% assign current_skin = site.theme_skin | default: site.data.theme_skins.default | default: "dark" %}
-{% assign skins = site.data.theme_skins.order %}
+{%- comment -%}
+  _data/theme_skins.yml is optional for consumers (remote_theme cannot ship
+  _data), so fall back to the compiled skin registry. Keep this list in sync
+  with the [data-theme-skin] blocks in _sass/theme/_skins.scss.
+{%- endcomment -%}
+{% assign _skin_fallback = "air|aqua|dirt|neon|mint|plum|sunrise" | split: "|" %}
+{% assign current_skin = site.theme_skin | default: site.data.theme_skins.default | default: "air" %}
+{% assign skins = site.data.theme_skins.order | default: _skin_fallback %}
 
 <p class="text-body-secondary mb-3">
   Current skin: <strong>{{ current_skin }}</strong>. Click a card to preview (page-level only — does not persist).

data/_includes/components/theme-info.html

@@ -54,7 +54,14 @@
     <div class="col-6">
       <div class="p-2 bg-body-tertiary rounded text-center">
         <small class="text-body-secondary d-block">Last Build</small>
-        <code class="small">{{ site.time | date: "%b %d, %H:%M" }}</code>
+        {%- comment -%}
+          data-testid is the stable hook the pixel-snapshot tier masks on
+          (test/visual/features/appearance-snapshot.spec.js). This stamp has
+          minute resolution, so it becomes an unconditional snapshot flake the
+          moment this panel is shown by default rather than inside a collapsed
+          offcanvas. Don't remove the attribute without updating that mask.
+        {%- endcomment -%}
+        <code class="small" data-testid="theme-build-stamp">{{ site.time | date: "%b %d, %H:%M" }}</code>
       </div>
     </div>
 

data/_includes/content/jsonld-software.html

@@ -9,22 +9,41 @@
            engines to accurately cite and describe the zer0-mistakes
            Jekyll theme as a SoftwareApplication entity.
 
+  OPT-IN ONLY — this describes THE THEME, not the site rendering it.
+  The payload below is hardcoded to zer0-mistakes: its RubyGems download
+  URL, its GitHub repository, its MIT licence, its feature list, its
+  mascot screenshot, and a Person node naming the theme's author. Emitted
+  from a consumer's homepage it asserts, in machine-readable form, that
+  THAT site is a free open-source Ruby gem authored by someone else — e.g.
+  a consulting practice's homepage claiming to be a developer tool.
+
+  It therefore renders only when a site explicitly opts in with
+  `jsonld_software_application: true` in _config.yml, which the theme's own
+  site does. Consumers get no software schema (their standard SEO metadata
+  is unaffected) unless they deliberately turn this on.
+
   Template Logic:
+  - Requires site.jsonld_software_application == true
   - Renders SoftwareApplication schema on the homepage only
   - Links to a WebPage wrapper via @id references
   - Pulls version, author, and description from site config
 
   Dependencies:
-  - _config.yml: site.url, site.title, site.description, site.author
+  - _config.yml: jsonld_software_application, site.url, site.title,
+    site.description, site.author
   - lib/jekyll-theme-zer0/version.rb (version referenced in config)
 
   Usage:
   - Included automatically in _includes/core/head.html
-  - Conditional: only renders when page.permalink == "/"
+  - Conditional: opted in AND page.permalink == "/"
   ===================================================================
 -->
 
-{% if page.permalink == "/" or page.url == "/" %}
+{%- assign _is_homepage = false -%}
+{%- if page.permalink == "/" or page.url == "/" -%}
+  {%- assign _is_homepage = true -%}
+{%- endif -%}
+{% if site.jsonld_software_application and _is_homepage %}
 <script type="application/ld+json">
 {
   "@context": "https://schema.org",

data/_includes/content/seo.html

@@ -37,17 +37,23 @@
   {%- assign assets_prefix = site.preview_images.assets_prefix | default: '/assets' -%}
   {%- assign auto_prefix = site.preview_images.auto_prefix | default: true -%}
 
+  {%- comment -%}
+    Guard with truthiness AND blank: in Liquid 4 `nil != blank` is TRUE, so a
+    bare `!= blank` check on an unset variable takes the branch and assigns a
+    nil seo_image — og:image was silently dropped on every page without a
+    page.header image, defeating the site.og_image fallback entirely.
+  {%- endcomment -%}
   {%- if page_teaser_image contains '://' -%}
     {%- comment -%} External URL - use as-is {%- endcomment -%}
-  {%- elsif auto_prefix and page_teaser_image != blank -%}
+  {%- elsif auto_prefix and page_teaser_image and page_teaser_image != blank -%}
     {%- unless page_teaser_image contains assets_prefix -%}
       {%- assign page_teaser_image = assets_prefix | append: page_teaser_image -%}
     {%- endunless -%}
   {%- endif -%}
 
-  {%- if page_large_image != blank -%}
+  {%- if page_large_image and page_large_image != blank -%}
     {%- assign seo_image = page_large_image | absolute_url | escape -%}
-  {%- elsif page_teaser_image != blank -%}
+  {%- elsif page_teaser_image and page_teaser_image != blank -%}
     {%- assign seo_image = page_teaser_image | absolute_url | escape -%}
   {%- endif -%}
 

data/_includes/core/color-mode-init.html

@@ -13,9 +13,12 @@
                when Bootstrap's [data-bs-theme] selectors are first evaluated.
 
   Priority order (highest → lowest):
-    1. localStorage["theme"]    — user's explicit override via Appearance panel
-    2. data-color-mode-default  — site.color_mode_default config value
-    3. "auto" fallback          — resolves via prefers-color-scheme
+    1. site.color_mode_lock     — when true, config wins unconditionally:
+                                  visitor preference and OS scheme are ignored
+                                  (data-color-mode-lock attribute, set by root.html)
+    2. localStorage["theme"]    — user's explicit override via Appearance panel
+    3. data-color-mode-default  — site.color_mode_default config value
+    4. "auto" fallback          — resolves via prefers-color-scheme
 {%- endcomment -%}
 <script>
 (function () {
@@ -23,8 +26,14 @@
   try {
     var root = document.documentElement;
     var configDefault = root.getAttribute('data-color-mode-default') || 'auto';
-    var stored = window.localStorage.getItem('theme');
+    var locked = root.getAttribute('data-color-mode-lock') === 'true';
+    var stored = locked ? null : window.localStorage.getItem('theme');
     var mode = stored || configDefault;
+    if (mode === 'auto' && locked) {
+      {%- comment -%} A locked "auto" is contradictory; treat it as dark so
+          the brand-pinned mode never flips with the OS. {%- endcomment %}
+      mode = 'dark';
+    }
     if (mode === 'auto') {
       root.setAttribute('data-bs-theme',
         window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

data/_includes/core/favicon.html

@@ -0,0 +1,46 @@
+{% comment %} Feature: ZER0-079 {% endcomment %}
+{%- comment -%}
+  Component:   favicon
+  Path:        _includes/core/favicon.html
+  Purpose:     Emit the browser-identity tags (favicon, SVG icon, Apple touch
+               icon, web manifest, theme-color) for every page. Before this
+               include existed, sites relied on the browser's implicit
+               /favicon.ico probe — which silently 404s on sites without the
+               file and never works for baseurl (project-page) deployments.
+  Params:      none — reads the optional `favicon:` block in _config.yml:
+
+               favicon:
+                 ico         : /favicon.ico                    # legacy .ico (default)
+                 svg         : /assets/images/favicon.svg      # scalable icon (optional)
+                 png         : /assets/images/favicon-32.png   # PNG icon (optional)
+                 png_size    : 32x32                           # sizes attr for png (optional)
+                 apple_touch : /assets/images/apple-touch.png  # iOS home-screen icon (optional)
+                 manifest    : /site.webmanifest               # PWA manifest (optional)
+                 theme_color : "#0d1117"                       # browser chrome color (optional)
+
+               With NO config at all this still emits the explicit
+               /favicon.ico link (every consumer site carries one at root),
+               and theme_color falls back to site.theme_color.main so the
+               mobile address bar matches the site's design tokens.
+  Notes:       Page-invariant — safe to render via include_cached. All paths
+               run through relative_url so baseurl deployments resolve.
+{%- endcomment -%}
+{%- assign _fav = site.favicon -%}
+{%- assign _fav_ico = _fav.ico | default: '/favicon.ico' -%}
+<link rel="icon" href="{{ _fav_ico | relative_url }}" sizes="32x32">
+{%- if _fav.svg %}
+<link rel="icon" type="image/svg+xml" href="{{ _fav.svg | relative_url }}">
+{%- endif %}
+{%- if _fav.png %}
+<link rel="icon" type="image/png" href="{{ _fav.png | relative_url }}"{% if _fav.png_size %} sizes="{{ _fav.png_size }}"{% endif %}>
+{%- endif %}
+{%- if _fav.apple_touch %}
+<link rel="apple-touch-icon" href="{{ _fav.apple_touch | relative_url }}">
+{%- endif %}
+{%- if _fav.manifest %}
+<link rel="manifest" href="{{ _fav.manifest | relative_url }}">
+{%- endif %}
+{%- assign _fav_theme_color = _fav.theme_color | default: site.theme_color.main -%}
+{%- if _fav_theme_color %}
+<meta name="theme-color" content="{{ _fav_theme_color }}">
+{%- endif %}