Skip to content

Commit f495d9f

Browse files
TMHSDigitalclaude
TMHSDigital
and
claude
committed
feat(gallery): browse controls and interaction feel
Showcase pieces were reachable only through a "showcase" topic chip, one tag could be active at a time, and the grid had one fixed order. The index now has an All / Examples / Showcase switch, AND-combined topic chips, and a Gallery order / Name A-Z sort, all mirrored in the URL hash (k=, tag=a,b, s=). Legacy #tag=showcase links, the landing page's among them, resolve to the Showcase switch so no inbound link breaks. Search no longer rewrites the hash on every keystroke, card renders fade in once decoded, hover gets a restrained zoom that reduced-motion turns off (replacing a rule that disabled a transform nobody set), focus rings sit inside segmented controls instead of being clipped, README prose is capped at a readable measure, and the sticky bar packs tighter on phones. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Signed-off-by: TMHSDigital <154358121+TMHSDigital@users.noreply.github.com>
1 parent d3ae2f6 commit f495d9f

91 files changed

Lines changed: 2416 additions & 542 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: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,12 @@
104104
.density-btn + .density-btn { border-left: 1px solid var(--border); }
105105
.density-btn:hover { color: var(--select); }
106106
.density-btn.active { background: var(--select); color: #1a1b1e; }
107+
/* Segmented groups clip overflow, so the ring has to sit inside. */
108+
.density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; }
109+
.sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
110+
border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer;
111+
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
112+
.sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; }
107113
.tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border);
108114
color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer;
109115
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
@@ -123,6 +129,14 @@
123129
transition: color 0.15s, border-color 0.15s; }
124130
.chip:hover { color: var(--select); border-color: var(--select); }
125131
.chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); }
132+
@media (max-width: 559px) {
133+
.controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; }
134+
.controls-row { gap: 0.4rem; }
135+
.searchwrap { flex-basis: 100%; }
136+
.count { position: absolute; width: 1px; height: 1px; overflow: hidden;
137+
clip: rect(0 0 0 0); white-space: nowrap; }
138+
.density-btn { padding: 0.36rem 0.5rem; }
139+
}
126140
@media (max-width: 719px) {
127141
html.js .tags-toggle { display: inline-block; }
128142
html.js .chips { display: none; }
@@ -160,8 +174,12 @@
160174
transition: outline-color 0.12s ease, border-color 0.12s ease; }
161175
.card:hover { border-color: var(--select); outline-color: var(--select); }
162176
.card.hidden { display: none; }
163-
.card-media { display: block; background: var(--bg2); line-height: 0; }
164-
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
177+
.card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; }
178+
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
179+
transition: transform 0.35s ease, opacity 0.3s ease; }
180+
.card:hover .card-media img { transform: scale(1.03); }
181+
html.js .grid .card-media img { opacity: 0; }
182+
html.js .grid .card-media img.is-loaded { opacity: 1; }
165183
.card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; }
166184
.card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; }
167185
.card-body h2 a { color: var(--text); }
@@ -200,6 +218,7 @@
200218
.md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; }
201219
.md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; }
202220
.md p { margin: 0.7rem 0; }
221+
.md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; }
203222
.md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; }
204223
.md li { margin: 0.3rem 0; }
205224
.md .table-wrap { overflow-x: auto; margin: 0.9rem 0; }
@@ -306,8 +325,8 @@
306325
}
307326
@media (prefers-reduced-motion: reduce) {
308327
html { scroll-behavior: auto; }
309-
.card { transition: none; }
310-
.card:hover { transform: none; }
328+
.card, .card-media img { transition: none; }
329+
.card:hover .card-media img { transform: none; }
311330
.to-top { transition: none; }
312331
}
313332
</style>

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,12 @@
104104
.density-btn + .density-btn { border-left: 1px solid var(--border); }
105105
.density-btn:hover { color: var(--select); }
106106
.density-btn.active { background: var(--select); color: #1a1b1e; }
107+
/* Segmented groups clip overflow, so the ring has to sit inside. */
108+
.density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; }
109+
.sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
110+
border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer;
111+
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
112+
.sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; }
107113
.tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border);
108114
color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer;
109115
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
@@ -123,6 +129,14 @@
123129
transition: color 0.15s, border-color 0.15s; }
124130
.chip:hover { color: var(--select); border-color: var(--select); }
125131
.chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); }
132+
@media (max-width: 559px) {
133+
.controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; }
134+
.controls-row { gap: 0.4rem; }
135+
.searchwrap { flex-basis: 100%; }
136+
.count { position: absolute; width: 1px; height: 1px; overflow: hidden;
137+
clip: rect(0 0 0 0); white-space: nowrap; }
138+
.density-btn { padding: 0.36rem 0.5rem; }
139+
}
126140
@media (max-width: 719px) {
127141
html.js .tags-toggle { display: inline-block; }
128142
html.js .chips { display: none; }
@@ -160,8 +174,12 @@
160174
transition: outline-color 0.12s ease, border-color 0.12s ease; }
161175
.card:hover { border-color: var(--select); outline-color: var(--select); }
162176
.card.hidden { display: none; }
163-
.card-media { display: block; background: var(--bg2); line-height: 0; }
164-
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
177+
.card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; }
178+
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
179+
transition: transform 0.35s ease, opacity 0.3s ease; }
180+
.card:hover .card-media img { transform: scale(1.03); }
181+
html.js .grid .card-media img { opacity: 0; }
182+
html.js .grid .card-media img.is-loaded { opacity: 1; }
165183
.card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; }
166184
.card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; }
167185
.card-body h2 a { color: var(--text); }
@@ -200,6 +218,7 @@
200218
.md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; }
201219
.md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; }
202220
.md p { margin: 0.7rem 0; }
221+
.md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; }
203222
.md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; }
204223
.md li { margin: 0.3rem 0; }
205224
.md .table-wrap { overflow-x: auto; margin: 0.9rem 0; }
@@ -306,8 +325,8 @@
306325
}
307326
@media (prefers-reduced-motion: reduce) {
308327
html { scroll-behavior: auto; }
309-
.card { transition: none; }
310-
.card:hover { transform: none; }
328+
.card, .card-media img { transition: none; }
329+
.card:hover .card-media img { transform: none; }
311330
.to-top { transition: none; }
312331
}
313332
</style>

‎docs/gallery/armature-bend/index.html‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,12 @@
104104
.density-btn + .density-btn { border-left: 1px solid var(--border); }
105105
.density-btn:hover { color: var(--select); }
106106
.density-btn.active { background: var(--select); color: #1a1b1e; }
107+
/* Segmented groups clip overflow, so the ring has to sit inside. */
108+
.density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; }
109+
.sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
110+
border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer;
111+
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
112+
.sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; }
107113
.tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border);
108114
color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer;
109115
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
@@ -123,6 +129,14 @@
123129
transition: color 0.15s, border-color 0.15s; }
124130
.chip:hover { color: var(--select); border-color: var(--select); }
125131
.chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); }
132+
@media (max-width: 559px) {
133+
.controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; }
134+
.controls-row { gap: 0.4rem; }
135+
.searchwrap { flex-basis: 100%; }
136+
.count { position: absolute; width: 1px; height: 1px; overflow: hidden;
137+
clip: rect(0 0 0 0); white-space: nowrap; }
138+
.density-btn { padding: 0.36rem 0.5rem; }
139+
}
126140
@media (max-width: 719px) {
127141
html.js .tags-toggle { display: inline-block; }
128142
html.js .chips { display: none; }
@@ -160,8 +174,12 @@
160174
transition: outline-color 0.12s ease, border-color 0.12s ease; }
161175
.card:hover { border-color: var(--select); outline-color: var(--select); }
162176
.card.hidden { display: none; }
163-
.card-media { display: block; background: var(--bg2); line-height: 0; }
164-
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
177+
.card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; }
178+
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
179+
transition: transform 0.35s ease, opacity 0.3s ease; }
180+
.card:hover .card-media img { transform: scale(1.03); }
181+
html.js .grid .card-media img { opacity: 0; }
182+
html.js .grid .card-media img.is-loaded { opacity: 1; }
165183
.card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; }
166184
.card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; }
167185
.card-body h2 a { color: var(--text); }
@@ -200,6 +218,7 @@
200218
.md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; }
201219
.md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; }
202220
.md p { margin: 0.7rem 0; }
221+
.md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; }
203222
.md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; }
204223
.md li { margin: 0.3rem 0; }
205224
.md .table-wrap { overflow-x: auto; margin: 0.9rem 0; }
@@ -306,8 +325,8 @@
306325
}
307326
@media (prefers-reduced-motion: reduce) {
308327
html { scroll-behavior: auto; }
309-
.card { transition: none; }
310-
.card:hover { transform: none; }
328+
.card, .card-media img { transition: none; }
329+
.card:hover .card-media img { transform: none; }
311330
.to-top { transition: none; }
312331
}
313332
</style>

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,12 @@
104104
.density-btn + .density-btn { border-left: 1px solid var(--border); }
105105
.density-btn:hover { color: var(--select); }
106106
.density-btn.active { background: var(--select); color: #1a1b1e; }
107+
/* Segmented groups clip overflow, so the ring has to sit inside. */
108+
.density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; }
109+
.sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
110+
border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer;
111+
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
112+
.sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; }
107113
.tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border);
108114
color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer;
109115
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
@@ -123,6 +129,14 @@
123129
transition: color 0.15s, border-color 0.15s; }
124130
.chip:hover { color: var(--select); border-color: var(--select); }
125131
.chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); }
132+
@media (max-width: 559px) {
133+
.controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; }
134+
.controls-row { gap: 0.4rem; }
135+
.searchwrap { flex-basis: 100%; }
136+
.count { position: absolute; width: 1px; height: 1px; overflow: hidden;
137+
clip: rect(0 0 0 0); white-space: nowrap; }
138+
.density-btn { padding: 0.36rem 0.5rem; }
139+
}
126140
@media (max-width: 719px) {
127141
html.js .tags-toggle { display: inline-block; }
128142
html.js .chips { display: none; }
@@ -160,8 +174,12 @@
160174
transition: outline-color 0.12s ease, border-color 0.12s ease; }
161175
.card:hover { border-color: var(--select); outline-color: var(--select); }
162176
.card.hidden { display: none; }
163-
.card-media { display: block; background: var(--bg2); line-height: 0; }
164-
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
177+
.card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; }
178+
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
179+
transition: transform 0.35s ease, opacity 0.3s ease; }
180+
.card:hover .card-media img { transform: scale(1.03); }
181+
html.js .grid .card-media img { opacity: 0; }
182+
html.js .grid .card-media img.is-loaded { opacity: 1; }
165183
.card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; }
166184
.card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; }
167185
.card-body h2 a { color: var(--text); }
@@ -200,6 +218,7 @@
200218
.md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; }
201219
.md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; }
202220
.md p { margin: 0.7rem 0; }
221+
.md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; }
203222
.md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; }
204223
.md li { margin: 0.3rem 0; }
205224
.md .table-wrap { overflow-x: auto; margin: 0.9rem 0; }
@@ -306,8 +325,8 @@
306325
}
307326
@media (prefers-reduced-motion: reduce) {
308327
html { scroll-behavior: auto; }
309-
.card { transition: none; }
310-
.card:hover { transform: none; }
328+
.card, .card-media img { transition: none; }
329+
.card:hover .card-media img { transform: none; }
311330
.to-top { transition: none; }
312331
}
313332
</style>

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,12 @@
104104
.density-btn + .density-btn { border-left: 1px solid var(--border); }
105105
.density-btn:hover { color: var(--select); }
106106
.density-btn.active { background: var(--select); color: #1a1b1e; }
107+
/* Segmented groups clip overflow, so the ring has to sit inside. */
108+
.density-btn:focus-visible, .chip:focus-visible { outline-offset: -2px; }
109+
.sort select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
110+
border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer;
111+
font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; }
112+
.sort select:hover, .sort select:focus { color: var(--select); border-color: var(--select); outline: none; }
107113
.tags-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border);
108114
color: var(--text-dim); border-radius: 3px; padding: 0.3rem 0.7rem; cursor: pointer;
109115
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
@@ -123,6 +129,14 @@
123129
transition: color 0.15s, border-color 0.15s; }
124130
.chip:hover { color: var(--select); border-color: var(--select); }
125131
.chip.active { color: #1a1b1e; background: var(--select); border-color: var(--select); }
132+
@media (max-width: 559px) {
133+
.controls-inner { padding: 0.45rem 1rem 0.5rem; gap: 0.4rem; }
134+
.controls-row { gap: 0.4rem; }
135+
.searchwrap { flex-basis: 100%; }
136+
.count { position: absolute; width: 1px; height: 1px; overflow: hidden;
137+
clip: rect(0 0 0 0); white-space: nowrap; }
138+
.density-btn { padding: 0.36rem 0.5rem; }
139+
}
126140
@media (max-width: 719px) {
127141
html.js .tags-toggle { display: inline-block; }
128142
html.js .chips { display: none; }
@@ -160,8 +174,12 @@
160174
transition: outline-color 0.12s ease, border-color 0.12s ease; }
161175
.card:hover { border-color: var(--select); outline-color: var(--select); }
162176
.card.hidden { display: none; }
163-
.card-media { display: block; background: var(--bg2); line-height: 0; }
164-
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
177+
.card-media { display: block; background: var(--bg2); line-height: 0; overflow: hidden; }
178+
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
179+
transition: transform 0.35s ease, opacity 0.3s ease; }
180+
.card:hover .card-media img { transform: scale(1.03); }
181+
html.js .grid .card-media img { opacity: 0; }
182+
html.js .grid .card-media img.is-loaded { opacity: 1; }
165183
.card-body { padding: 1.15rem 1.4rem 1.45rem; display: flex; flex-direction: column; flex: 1 1 auto; }
166184
.card-body h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 400; margin-bottom: 0.5rem; }
167185
.card-body h2 a { color: var(--text); }
@@ -200,6 +218,7 @@
200218
.md h1, .md h2, .md h3 { letter-spacing: -0.01em; margin: 1.4rem 0 0.6rem; line-height: 1.25; }
201219
.md h1 { font-size: 1.35rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1rem; }
202220
.md p { margin: 0.7rem 0; }
221+
.md > p, .md > ul, .md > ol, .md > h2, .md > h3 { max-width: 75ch; }
203222
.md ul, .md ol { margin: 0.7rem 0 0.7rem 1.4rem; }
204223
.md li { margin: 0.3rem 0; }
205224
.md .table-wrap { overflow-x: auto; margin: 0.9rem 0; }
@@ -306,8 +325,8 @@
306325
}
307326
@media (prefers-reduced-motion: reduce) {
308327
html { scroll-behavior: auto; }
309-
.card { transition: none; }
310-
.card:hover { transform: none; }
328+
.card, .card-media img { transition: none; }
329+
.card:hover .card-media img { transform: none; }
311330
.to-top { transition: none; }
312331
}
313332
</style>

0 commit comments

Comments
 (0)