fix(site): finish the Pages review follow-ups (#209)

The first pass left the landing page cutting 19 skill and rule
descriptions mid-clause, listing all 28 showcase props (10k px of page),
and the gallery with three identical links per card, a zoom overlay that
let focus escape behind it, and no 404 page for renamed examples.

- build_site: descriptions shown whole up to 340 chars, else cut at a
  sentence boundary; backtick spans render as <code>; showcase honors
  featured_rank like examples; generate a root-absolute 404.html
- showcase/gallery.json: feature six varied pieces on the landing page
- build_gallery: zoom overlay is a <dialog> (focus trap, Esc, focus
  return, Close button); the image link on each card leaves the tab
  order; "View" links carry the entry name; the Tags toggle names the
  active tag on narrow screens; footer names the right source JSON;
  README content is substituted last so it can't hit other placeholders
- both templates declare color-scheme: dark

Signed-off-by: TMHSDigital <154358121+TMHSDigital@users.noreply.github.com>
Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: TMHSDigital

.gitignore

@@ -36,6 +36,7 @@ docs/site-upgrade-plan.md
 # Landing-page build outputs (generated at deploy time by scripts/site/build_site.py;
 # docs/gallery/ stays committed)
 docs/index.html
+docs/404.html
 docs/fonts/
 docs/assets/
 

docs/gallery/anvil/index.html

@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/anvil/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="anvil — Showcase — Blender Developer Tools" />
   <meta property="og:description" content="A procedural blacksmith anvil on a timber stump through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -1661,12 +1670,13 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/anvil-hero.webp" alt="anvil render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
-      <span>generated from <code>examples/gallery.json</code></span>
+      <span>generated from <code>showcase/gallery.json</code></span>
       <span>CC-BY-NC-ND-4.0</span>
       <span style="color: var(--ok);">exit 0</span>
     </div>
@@ -1677,11 +1687,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {

docs/gallery/armature-bend/index.html

@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/armature-bend/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="armature-bend — Examples — Blender Developer Tools" />
   <meta property="og:description" content="Rigging end to end in the data API — edit_bones chain construction, name-bound vertex groups with smoothstep blend zones, posing, and depsgraph evaluation — bending a tapered tube through rest, half, and full curl." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -620,9 +629,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/armature-bend-hero.webp" alt="armature-bend render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -636,11 +646,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {

docs/gallery/attribute-domain-shear/index.html

@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/attribute-domain-shear/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="attribute-domain-shear — Examples — Blender Developer Tools" />
   <meta property="og:description" content="POINT vs CORNER color-attribute domains on a shared-vertex pinwheel: CORNER stays exact per face while a naive per-wedge POINT loop shears to the last write at the hub. Crisp petals versus a smeared swirl in one frame; the measured shear equals the palette closed form." />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -706,9 +715,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/attribute-domain-shear-hero.webp" alt="attribute-domain-shear render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -722,11 +732,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {

docs/gallery/bake-normal-high-to-low/index.html

@@ -8,6 +8,7 @@
   <link rel="canonical" href="https://tmhsdigital.github.io/Blender-Developer-Tools/gallery/bake-normal-high-to-low/" />
   <link rel="icon" href="../../assets/favicon.svg" type="image/svg+xml" />
   <meta name="theme-color" content="#1a1b1e" />
+  <meta name="color-scheme" content="dark" />
   <meta property="og:type" content="website" />
   <meta property="og:title" content="bake-normal-high-to-low — Examples — Blender Developer Tools" />
   <meta property="og:description" content="A collapse-decimated hatch plate receiving a Cycles cage-baked tangent normal map from a ribbed high-poly source" />
@@ -30,6 +31,7 @@
 
     /* Blender-viewport system, shared with the landing page. Dark only. */
     :root {
+      color-scheme: dark;
       --bg: #1a1b1e; --surface: #222327; --surface-2: #2a2b30; --bg2: #131417;
       --border: #3a3b40; --text: #e8e9eb; --text-dim: #9698a0;
       --select: #ff8c19; --ok: #6dc96d;
@@ -171,6 +173,8 @@
       background: var(--bg2); padding: 0; display: block; width: 100%; cursor: zoom-in; line-height: 0; }
     .detail-hero img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
     .zoom-hint { color: var(--text-dim); font-size: 0.78rem; margin-top: 0.4rem; }
+    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
+      white-space: nowrap; }
     .callout { border: 1px solid color-mix(in srgb, var(--select) 45%, var(--border));
       border-left: 3px solid var(--select); border-radius: var(--radius);
       background: color-mix(in srgb, var(--select) 7%, var(--surface));
@@ -213,10 +217,15 @@
       flex-wrap: wrap; margin-bottom: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
     .src-meta code { font-family: var(--font-mono); font-size: 0.82rem; }
 
-    .lightbox { position: fixed; inset: 0; z-index: 50; display: none; align-items: center;
-      justify-content: center; background: rgba(0,0,0,0.85); padding: 2rem; cursor: zoom-out; }
-    .lightbox.open { display: flex; }
+    .lightbox { border: 0; margin: 0; padding: 2rem; width: 100%; height: 100%; max-width: none;
+      max-height: none; background: rgba(0,0,0,0.85); cursor: zoom-out; }
+    .lightbox[open] { display: flex; align-items: center; justify-content: center; }
+    .lightbox::backdrop { background: transparent; }
     .lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radius); }
+    .lightbox-close { position: absolute; top: 0.9rem; right: 0.9rem; background: var(--surface-2);
+      color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
+      font: 500 0.8rem var(--font-sans); padding: 0.4rem 0.75rem; cursor: pointer; }
+    .lightbox-close:hover { border-color: var(--select); color: var(--select); }
 
     footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 2rem; }
     footer .statusbar { max-width: var(--maxw); margin: 0 auto; padding: 0.55rem 1.25rem;
@@ -824,9 +833,10 @@ <h2>Source</h2>
 </pre>
     </section>
   </main>
-  <div class="lightbox" id="lightbox" role="dialog" aria-label="Full-size render">
+  <dialog class="lightbox" id="lightbox" aria-label="Full-size render">
+    <button class="lightbox-close" type="button" autofocus>Close</button>
     <img src="../assets/bake-normal-high-to-low-hero.webp" alt="bake-normal-high-to-low render, full size" />
-  </div>
+  </dialog>
   <footer>
     <div class="statusbar">
       <span>generated from <code>examples/gallery.json</code></span>
@@ -840,11 +850,10 @@ <h2>Source</h2>
       var hero = document.getElementById('heroZoom');
       var box = document.getElementById('lightbox');
       if (hero && box) {
-        hero.addEventListener('click', function () { box.classList.add('open'); });
-        box.addEventListener('click', function () { box.classList.remove('open'); });
-        document.addEventListener('keydown', function (e) {
-          if (e.key === 'Escape') box.classList.remove('open');
-        });
+        // <dialog>.showModal() traps focus, closes on Escape, and returns
+        // focus to the hero button on close. Any click inside closes it.
+        hero.addEventListener('click', function () { box.showModal(); });
+        box.addEventListener('click', function () { box.close(); });
       }
       var copy = document.getElementById('copyRun');
       if (copy) {