Skip to content

Commit 5891799

Browse files
TMHSDigitalclaude
andauthored
fix(site): visible focus on selected filters, arrow keys stay in code blocks, pager polish (#423)
- #397: an orange focus ring on an orange selected button was invisible (14 changed pixels). Selected kind, category and chip buttons now get a 2px dark inset ring (--on-select on --select, about 7.8:1). - #398: clicking a wide code block did not move focus, so ArrowRight navigated to the next gallery page. <pre> blocks are now focusable (tabindex=0, which also gives keyboard scrolling), and the pager keys stand down while the last click is inside a block that scrolls sideways. - #399: the pager's next arrow was clipped with the truncated name at 375px; the name now truncates in its own span. The first gallery card (the LCP image) gets fetchpriority=high; touch devices drop the "/" hint from the search placeholder; the gallery search and the landing filter inputs get name/id attributes. Closes #397 Closes #398 Closes #399 Signed-off-by: TMHSDigital <154358121+TMHSDigital@users.noreply.github.com> Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
1 parent 3aba43e commit 5891799

136 files changed

Lines changed: 1897 additions & 811 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/gallery/anvil/index.html‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<link rel="preload" href="../../fonts/inter-medium.woff2" as="font" type="font/woff2" crossorigin />
2828
<link rel="preload" href="../../fonts/barlow-condensed-600.woff2" as="font" type="font/woff2" crossorigin />
2929
<link rel="preload" href="../../fonts/jetbrains-mono-regular.woff2" as="font" type="font/woff2" crossorigin />
30-
<link rel="stylesheet" href="../gallery.css?v=40c1159600" />
30+
<link rel="stylesheet" href="../gallery.css?v=64acd552f3" />
3131
<script>document.documentElement.classList.add('js');</script>
3232
</head>
3333
<body>
@@ -48,7 +48,7 @@ <h1>Anvil</h1>
4848
<p>A procedural blacksmith anvil on a timber stump through UVs, bake, LOD, collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
4949
</header>
5050
<main id="main">
51-
<nav class="pager" aria-label="Showcase pieces"><a rel="prev" href="../wheelbarrow/" aria-label="Previous showcase piece: wheelbarrow"><span aria-hidden="true">&larr;</span> wheelbarrow</a><span class="pager-pos hud">14 of 76 showcase pieces<span class="pager-keys"> &middot; <kbd>&larr;</kbd><kbd>&rarr;</kbd></span></span><a rel="next" href="../water-trough/" aria-label="Next showcase piece: water-trough">water-trough <span aria-hidden="true">&rarr;</span></a></nav>
51+
<nav class="pager" aria-label="Showcase pieces"><a rel="prev" href="../wheelbarrow/" aria-label="Previous showcase piece: wheelbarrow"><span aria-hidden="true">&larr;</span><span class="pager-label">wheelbarrow</span></a><span class="pager-pos hud">14 of 76 showcase pieces<span class="pager-keys"> &middot; <kbd>&larr;</kbd><kbd>&rarr;</kbd></span></span><a rel="next" href="../water-trough/" aria-label="Next showcase piece: water-trough"><span class="pager-label">water-trough</span><span aria-hidden="true">&rarr;</span></a></nav>
5252
<button class="detail-hero" id="heroZoom" type="button" aria-label="View full size: A London-pattern forged anvil with a thick face block, tapered horn and broad flared foot on a hooped oak stand, a cross-peen hammer on the floor beside it.">
5353
<img src="../assets/anvil-hero.webp" alt="A London-pattern forged anvil with a thick face block, tapered horn and broad flared foot on a hooped oak stand, a cross-peen hammer on the floor beside it." width="1280" height="720" fetchpriority="high" />
5454
</button>
@@ -57,7 +57,7 @@ <h1>Anvil</h1>
5757
<p class="taglist"><span class="tag">category</span> <a href="../#k=showcase&amp;c=village">Village</a></p>
5858
<p class="taglist"><span class="tag">tags</span> <a href="../#tag=mesh">mesh</a> <a href="../#tag=export">export</a> <a href="../#tag=showcase">showcase</a></p>
5959
<div class="runline">
60-
<pre id="runCmd">blender --background --python showcase/anvil/anvil.py --</pre>
60+
<pre id="runCmd" tabindex="0">blender --background --python showcase/anvil/anvil.py --</pre>
6161
<button class="copy-btn" id="copyRun" type="button">Copy</button>
6262
</div>
6363
<nav class="jumpnav" aria-label="On this page"><span class="tag">jump to</span> <a href="#run">Run</a> <a href="#exit-codes">Exit codes</a> <a href="#source">Source</a> <a href="#related">Related</a></nav>
@@ -86,7 +86,7 @@ <h3 id="falsifiers">Falsifiers<a class="anchor" href="#falsifiers" aria-label="L
8686
<p>Each violates one named budget. All seven were run on 4.5.11, 5.1.2 and 5.2.1 and returned the same code on each.</p>
8787
<div class="table-wrap"><table><thead><tr><th scope="col">Flag</th><th scope="col">Budget violated</th><th scope="col">Exit</th></tr></thead><tbody><tr><td><code>--skip-decimate</code></td><td>LOD1 ratio band</td><td>9</td></tr><tr><td><code>--stray-vert</code></td><td>loose vertex count is 0</td><td>15</td></tr><tr><td><code>--lift-z</code></td><td>bounding box <code>zmin</code> is 0</td><td>16</td></tr><tr><td><code>--short-staves</code></td><td>named stave supports at Z=0</td><td>16</td></tr><tr><td><code>--float-anvil</code></td><td>foot-on-head gap</td><td>17</td></tr><tr><td><code>--round-band</code></td><td>hoop bite band</td><td>18</td></tr><tr><td><code>--round-waist</code></td><td>waist form</td><td>19</td></tr></tbody></table></div>
8888
<h2 id="run">Run<a class="anchor" href="#run" aria-label="Link to this section">#</a></h2>
89-
<pre><code>blender --background --python anvil.py --
89+
<pre tabindex="0"><code>blender --background --python anvil.py --
9090
blender --background --python anvil.py -- --skip-decimate
9191
blender --background --python anvil.py -- --stray-vert
9292
blender --background --python anvil.py -- --lift-z
@@ -139,7 +139,7 @@ <h3><a class="stretch" href="../wooden-barrel/">Wooden Barrel</a></h3>
139139
</article>
140140
</div>
141141
</section>
142-
<nav class="pager pager-foot" aria-label="Showcase pieces"><a rel="prev" href="../wheelbarrow/" aria-label="Previous showcase piece: wheelbarrow"><span aria-hidden="true">&larr;</span> wheelbarrow</a><span class="pager-pos hud">14 of 76 showcase pieces</span><a rel="next" href="../water-trough/" aria-label="Next showcase piece: water-trough">water-trough <span aria-hidden="true">&rarr;</span></a></nav>
142+
<nav class="pager pager-foot" aria-label="Showcase pieces"><a rel="prev" href="../wheelbarrow/" aria-label="Previous showcase piece: wheelbarrow"><span aria-hidden="true">&larr;</span><span class="pager-label">wheelbarrow</span></a><span class="pager-pos hud">14 of 76 showcase pieces</span><a rel="next" href="../water-trough/" aria-label="Next showcase piece: water-trough"><span class="pager-label">water-trough</span><span aria-hidden="true">&rarr;</span></a></nav>
143143
</main>
144144
<dialog class="lightbox" id="lightbox" aria-label="Full-size render">
145145
<div class="lightbox-bar"><button class="lightbox-close" id="lightboxNative" type="button" aria-pressed="false">Actual size</button><button class="lightbox-close" id="lightboxClose" type="button" autofocus>Close</button></div>
@@ -291,10 +291,18 @@ <h3><a class="stretch" href="../wooden-barrel/">Wooden Barrel</a></h3>
291291

292292
// Left/right arrows page between entries, but only when nothing has
293293
// focus and nothing is selected: a focused control, a scrolled code
294-
// block, or a text selection keeps its own arrow keys.
294+
// block, or a text selection keeps its own arrow keys. A click inside a
295+
// code block does not always move focus (or a selection), so also keep
296+
// the arrows when the last click landed in one that scrolls sideways
297+
// (#398).
298+
var lastPointer = null;
299+
document.addEventListener('pointerdown', function (e) { lastPointer = e.target; }, true);
295300
document.addEventListener('keydown', function (e) {
296301
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
297302
if (box && box.open) return;
303+
var scroller = lastPointer && lastPointer.closest
304+
&& lastPointer.closest('pre, .code-lines, .codewrap');
305+
if (scroller && scroller.scrollWidth > scroller.clientWidth) return;
298306
var ae = document.activeElement;
299307
if (ae && ae !== document.body && ae !== document.documentElement) return;
300308
var sel = window.getSelection && window.getSelection();

‎docs/gallery/apothecary-shelf/index.html‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
<link rel="preload" href="../../fonts/inter-medium.woff2" as="font" type="font/woff2" crossorigin />
2828
<link rel="preload" href="../../fonts/barlow-condensed-600.woff2" as="font" type="font/woff2" crossorigin />
2929
<link rel="preload" href="../../fonts/jetbrains-mono-regular.woff2" as="font" type="font/woff2" crossorigin />
30-
<link rel="stylesheet" href="../gallery.css?v=40c1159600" />
30+
<link rel="stylesheet" href="../gallery.css?v=64acd552f3" />
3131
<script>document.documentElement.classList.add('js');</script>
3232
</head>
3333
<body>
@@ -48,7 +48,7 @@ <h1>Apothecary Shelf</h1>
4848
<p>A procedural apothecary shelf — housed shelves, gallery rails, a drawer bank and an arched crest, stocked with fifteen lathed bottles, flasks and glazed jars, each corked or lidded and labelled — carried through UVs, bake, LOD, convex collider, and Unity glTF, asserting recomputed budgets rather than an API contract.</p>
4949
</header>
5050
<main id="main">
51-
<nav class="pager" aria-label="Showcase pieces"><a rel="prev" href="../brazier/" aria-label="Previous showcase piece: brazier"><span aria-hidden="true">&larr;</span> brazier</a><span class="pager-pos hud">32 of 76 showcase pieces<span class="pager-keys"> &middot; <kbd>&larr;</kbd><kbd>&rarr;</kbd></span></span><a rel="next" href="../wooden-yoke/" aria-label="Next showcase piece: wooden-yoke">wooden-yoke <span aria-hidden="true">&rarr;</span></a></nav>
51+
<nav class="pager" aria-label="Showcase pieces"><a rel="prev" href="../brazier/" aria-label="Previous showcase piece: brazier"><span aria-hidden="true">&larr;</span><span class="pager-label">brazier</span></a><span class="pager-pos hud">32 of 76 showcase pieces<span class="pager-keys"> &middot; <kbd>&larr;</kbd><kbd>&rarr;</kbd></span></span><a rel="next" href="../wooden-yoke/" aria-label="Next showcase piece: wooden-yoke"><span class="pager-label">wooden-yoke</span><span aria-hidden="true">&rarr;</span></a></nav>
5252
<button class="detail-hero" id="heroZoom" type="button" aria-label="View full size: A stained wooden shelf with an arched crest, gallery rails and three brass-knobbed drawers, stocked with labelled glass bottles and flasks and cream and blue glazed jars.">
5353
<img src="../assets/apothecary-shelf-hero.webp" alt="A stained wooden shelf with an arched crest, gallery rails and three brass-knobbed drawers, stocked with labelled glass bottles and flasks and cream and blue glazed jars." width="1280" height="720" fetchpriority="high" />
5454
</button>
@@ -57,7 +57,7 @@ <h1>Apothecary Shelf</h1>
5757
<p class="taglist"><span class="tag">category</span> <a href="../#k=showcase&amp;c=village">Village</a></p>
5858
<p class="taglist"><span class="tag">tags</span> <a href="../#tag=mesh">mesh</a> <a href="../#tag=export">export</a> <a href="../#tag=showcase">showcase</a></p>
5959
<div class="runline">
60-
<pre id="runCmd">blender --background --python showcase/apothecary-shelf/apothecary_shelf.py --</pre>
60+
<pre id="runCmd" tabindex="0">blender --background --python showcase/apothecary-shelf/apothecary_shelf.py --</pre>
6161
<button class="copy-btn" id="copyRun" type="button">Copy</button>
6262
</div>
6363
<nav class="jumpnav" aria-label="On this page"><span class="tag">jump to</span> <a href="#exit-codes">Exit codes</a> <a href="#source">Source</a> <a href="#related">Related</a></nav>
@@ -90,7 +90,7 @@ <h2 id="exit-codes">Exit codes<a class="anchor" href="#exit-codes" aria-label="L
9090
<p>File-local and sequential. <code>9</code> is a valid check code. <code>1</code> is the FATAL wrapper — a crash, never a named check. <code>19</code> (plumb and real-world size) is reserved across pieces and unused here.</p>
9191
<div class="table-wrap"><table><thead><tr><th scope="col">Code</th><th scope="col">Meaning</th></tr></thead><tbody><tr><td>0</td><td>Success</td></tr><tr><td>1</td><td>Uncaught exception (FATAL wrapper)</td></tr><tr><td>2</td><td>argparse / usage</td></tr><tr><td>3</td><td>Mesh did not build, or has no UV layer</td></tr><tr><td>4</td><td>Base triangle count outside band</td></tr><tr><td>5</td><td>Material slots, or a material&#x27;s face floor</td></tr><tr><td>6</td><td>UVs outside 0..1</td></tr><tr><td>7</td><td>UV AABB overlap above tolerance</td></tr><tr><td>8</td><td>Outer AABB off declared size</td></tr><tr><td>9</td><td>LOD1 or LOD2 ratio outside band (<code>--skip-decimate</code>)</td></tr><tr><td>10</td><td>Framing gate (<code>examples/gallery_framing.py</code>, render path only)</td></tr><tr><td>11</td><td>Collider triangles above ceiling</td></tr><tr><td>12</td><td>Normal bake failed or produced no image data</td></tr><tr><td>13</td><td>glTF export missing or empty</td></tr><tr><td>14</td><td><code>--output</code> produced no file</td></tr><tr><td>15</td><td>Mesh hygiene (<code>--stray-vert</code>)</td></tr><tr><td>16</td><td>Grounded zmin, or a side floating (<code>--lift-z</code>, <code>--float-side</code>)</td></tr><tr><td>17</td><td>Dado, closure or knob bite (<code>--short-shelves</code>, <code>--pop-corks</code>, <code>--pull-knobs</code>)</td></tr><tr><td>18</td><td>Vessel, drawer or label seat (<code>--float-jars</code>, <code>--lift-drawers</code>, <code>--float-labels</code>)</td></tr><tr><td>20</td><td>Headroom under the member above (<code>--tall-flask</code>)</td></tr><tr><td>21</td><td>Vessels overlap each other or the carcass (<code>--crowd-jars</code>)</td></tr><tr><td>22</td><td>Form spread below floor (<code>--uniform-vessels</code>)</td></tr><tr><td>23</td><td>Right-angle wood edges (<code>--sharp-rail</code>)</td></tr><tr><td>24</td><td>Gallery asset-quality violation (render path; the floors&#x27; 11 is remapped here)</td></tr></tbody></table></div>
9292
<h2 id="run-it">Run it<a class="anchor" href="#run-it" aria-label="Link to this section">#</a></h2>
93-
<pre><code># Budget check, no render. ~4.5 s on 5.1 and 5.2.
93+
<pre tabindex="0"><code># Budget check, no render. ~4.5 s on 5.1 and 5.2.
9494
blender --background --python apothecary_shelf.py --
9595

9696
# Falsifier: the middle-shelf flask runs into the shelf above. Must exit 20.
@@ -144,7 +144,7 @@ <h3><a class="stretch" href="../wooden-barrel/">Wooden Barrel</a></h3>
144144
</article>
145145
</div>
146146
</section>
147-
<nav class="pager pager-foot" aria-label="Showcase pieces"><a rel="prev" href="../brazier/" aria-label="Previous showcase piece: brazier"><span aria-hidden="true">&larr;</span> brazier</a><span class="pager-pos hud">32 of 76 showcase pieces</span><a rel="next" href="../wooden-yoke/" aria-label="Next showcase piece: wooden-yoke">wooden-yoke <span aria-hidden="true">&rarr;</span></a></nav>
147+
<nav class="pager pager-foot" aria-label="Showcase pieces"><a rel="prev" href="../brazier/" aria-label="Previous showcase piece: brazier"><span aria-hidden="true">&larr;</span><span class="pager-label">brazier</span></a><span class="pager-pos hud">32 of 76 showcase pieces</span><a rel="next" href="../wooden-yoke/" aria-label="Next showcase piece: wooden-yoke"><span class="pager-label">wooden-yoke</span><span aria-hidden="true">&rarr;</span></a></nav>
148148
</main>
149149
<dialog class="lightbox" id="lightbox" aria-label="Full-size render">
150150
<div class="lightbox-bar"><button class="lightbox-close" id="lightboxNative" type="button" aria-pressed="false">Actual size</button><button class="lightbox-close" id="lightboxClose" type="button" autofocus>Close</button></div>
@@ -296,10 +296,18 @@ <h3><a class="stretch" href="../wooden-barrel/">Wooden Barrel</a></h3>
296296

297297
// Left/right arrows page between entries, but only when nothing has
298298
// focus and nothing is selected: a focused control, a scrolled code
299-
// block, or a text selection keeps its own arrow keys.
299+
// block, or a text selection keeps its own arrow keys. A click inside a
300+
// code block does not always move focus (or a selection), so also keep
301+
// the arrows when the last click landed in one that scrolls sideways
302+
// (#398).
303+
var lastPointer = null;
304+
document.addEventListener('pointerdown', function (e) { lastPointer = e.target; }, true);
300305
document.addEventListener('keydown', function (e) {
301306
if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
302307
if (box && box.open) return;
308+
var scroller = lastPointer && lastPointer.closest
309+
&& lastPointer.closest('pre, .code-lines, .codewrap');
310+
if (scroller && scroller.scrollWidth > scroller.clientWidth) return;
303311
var ae = document.activeElement;
304312
if (ae && ae !== document.body && ae !== document.documentElement) return;
305313
var sel = window.getSelection && window.getSelection();

0 commit comments

Comments
 (0)