mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Lead with Hum, fix theme-picker number contrast, reorder worked examples
Theme picker: Hum is now theme 01, with the rest renumbered 02-20. The ordinal reads off the registry index, so switching, cycling, and the "NN / 20" readout all stay correct. Theme numbers: each picker swatch now carries an explicit number colour that contrasts with its own background, instead of inheriting the active theme's ink. Dark swatches (Midnight, Terminal, Manifesto, Aurora, Lumen) get a light number rather than a near-invisible dark one. All twenty clear AA (min 10:1). Worked Examples: moved the first three carousel cards (Cobalt, Carnival, Lumen) to the end so the page leads with Hum. Bumped the asset cache-bust.
This commit is contained in:
Youssef
@@ -525,7 +525,7 @@
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
color: color-mix(in oklch, var(--dot-edge, var(--color-ink)) 55%, var(--color-ink));
|
||||
color: var(--num, color-mix(in oklch, var(--dot-edge, var(--color-ink)) 55%, var(--color-ink)));
|
||||
font-feature-settings: "tnum";
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
+78
-81
@@ -56,10 +56,10 @@
|
||||
<link rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Public+Sans:wght@400;500;600;700&family=Young+Serif&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" />
|
||||
|
||||
<link rel="stylesheet" href="css/tokens.css?v=23" />
|
||||
<link rel="stylesheet" href="css/base.css?v=23" />
|
||||
<link rel="stylesheet" href="css/components.css?v=23" />
|
||||
<link rel="stylesheet" href="css/sections.css?v=23" />
|
||||
<link rel="stylesheet" href="css/tokens.css?v=24" />
|
||||
<link rel="stylesheet" href="css/base.css?v=24" />
|
||||
<link rel="stylesheet" href="css/components.css?v=24" />
|
||||
<link rel="stylesheet" href="css/sections.css?v=24" />
|
||||
|
||||
<script>
|
||||
// Load theme before paint to avoid flash. Order: ?theme= → localStorage → default.
|
||||
@@ -123,7 +123,7 @@
|
||||
<div class="banner__theme-wrap" data-theme-wrap>
|
||||
<button class="banner__theme-indicator" type="button" aria-haspopup="listbox" aria-expanded="false"
|
||||
aria-controls="theme-dropdown" data-theme-trigger>
|
||||
<span class="banner__ordinal tnum" data-theme-ordinal>20 / 20</span>
|
||||
<span class="banner__ordinal tnum" data-theme-ordinal>01 / 20</span>
|
||||
<span class="banner__indicator-sep" aria-hidden="true">—</span>
|
||||
<span class="banner__theme" data-theme-current>Hum</span>
|
||||
<svg class="banner__caret" viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
|
||||
@@ -133,65 +133,65 @@
|
||||
</button>
|
||||
|
||||
<div class="theme-dropdown" id="theme-dropdown" role="listbox" aria-label="Theme picker" hidden>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="specimen" aria-label="01 — Specimen"
|
||||
style="--dot: oklch(96% 0.018 80); --dot-edge: oklch(70% 0.04 75);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="hum" aria-label="01 · Hum"
|
||||
style="--dot: oklch(97% 0.012 95); --dot-edge: oklch(68% 0.24 18); --num: oklch(30% 0.05 18);"><span
|
||||
class="theme-dropdown__num">01</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="midnight" aria-label="02 — Midnight"
|
||||
style="--dot: oklch(15% 0.022 250); --dot-edge: oklch(72% 0.16 220);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="specimen" aria-label="02 · Specimen"
|
||||
style="--dot: oklch(96% 0.018 80); --dot-edge: oklch(70% 0.04 75); --num: oklch(30% 0.05 75);"><span
|
||||
class="theme-dropdown__num">02</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="brutal" aria-label="03 — Brutal"
|
||||
style="--dot: oklch(98% 0.001 0); --dot-edge: oklch(60% 0.21 27);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="midnight" aria-label="03 · Midnight"
|
||||
style="--dot: oklch(15% 0.022 250); --dot-edge: oklch(72% 0.16 220); --num: oklch(90% 0.04 220);"><span
|
||||
class="theme-dropdown__num">03</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="garden" aria-label="04 — Garden"
|
||||
style="--dot: oklch(95.5% 0.022 92); --dot-edge: oklch(47% 0.13 140);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="brutal" aria-label="04 · Brutal"
|
||||
style="--dot: oklch(98% 0.001 0); --dot-edge: oklch(60% 0.21 27); --num: oklch(30% 0.05 27);"><span
|
||||
class="theme-dropdown__num">04</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="atelier" aria-label="05 — Atelier"
|
||||
style="--dot: oklch(94% 0.005 60); --dot-edge: oklch(45% 0.13 60);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="garden" aria-label="05 · Garden"
|
||||
style="--dot: oklch(95.5% 0.022 92); --dot-edge: oklch(47% 0.13 140); --num: oklch(30% 0.05 140);"><span
|
||||
class="theme-dropdown__num">05</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="newsprint" aria-label="06 — Newsprint"
|
||||
style="--dot: oklch(92% 0.045 50); --dot-edge: oklch(32% 0.10 28);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="atelier" aria-label="06 · Atelier"
|
||||
style="--dot: oklch(94% 0.005 60); --dot-edge: oklch(45% 0.13 60); --num: oklch(30% 0.05 60);"><span
|
||||
class="theme-dropdown__num">06</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="terminal" aria-label="07 — Terminal"
|
||||
style="--dot: oklch(11% 0.018 145); --dot-edge: oklch(78% 0.19 138);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="newsprint" aria-label="07 · Newsprint"
|
||||
style="--dot: oklch(92% 0.045 50); --dot-edge: oklch(32% 0.10 28); --num: oklch(30% 0.05 28);"><span
|
||||
class="theme-dropdown__num">07</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="manifesto" aria-label="08 — Manifesto"
|
||||
style="--dot: oklch(10% 0.005 60); --dot-edge: oklch(60% 0.22 27);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="terminal" aria-label="08 · Terminal"
|
||||
style="--dot: oklch(11% 0.018 145); --dot-edge: oklch(78% 0.19 138); --num: oklch(90% 0.05 138);"><span
|
||||
class="theme-dropdown__num">08</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="almanac" aria-label="09 — Almanac"
|
||||
style="--dot: oklch(94% 0.008 245); --dot-edge: oklch(38% 0.135 250);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="manifesto" aria-label="09 · Manifesto"
|
||||
style="--dot: oklch(10% 0.005 60); --dot-edge: oklch(60% 0.22 27); --num: oklch(90% 0.04 27);"><span
|
||||
class="theme-dropdown__num">09</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="sport" aria-label="10 — Sport"
|
||||
style="--dot: oklch(98% 0.003 250); --dot-edge: oklch(58% 0.190 35);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="almanac" aria-label="10 · Almanac"
|
||||
style="--dot: oklch(94% 0.008 245); --dot-edge: oklch(38% 0.135 250); --num: oklch(30% 0.05 250);"><span
|
||||
class="theme-dropdown__num">10</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="studio" aria-label="11 — Studio"
|
||||
style="--dot: oklch(96.5% 0.014 95); --dot-edge: oklch(46% 0.140 145);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="sport" aria-label="11 · Sport"
|
||||
style="--dot: oklch(98% 0.003 250); --dot-edge: oklch(58% 0.190 35); --num: oklch(30% 0.05 35);"><span
|
||||
class="theme-dropdown__num">11</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="riso" aria-label="12 — Riso"
|
||||
style="--dot: oklch(91% 0.034 30); --dot-edge: oklch(58% 0.170 220);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="studio" aria-label="12 · Studio"
|
||||
style="--dot: oklch(96.5% 0.014 95); --dot-edge: oklch(46% 0.140 145); --num: oklch(30% 0.05 145);"><span
|
||||
class="theme-dropdown__num">12</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="bloom" aria-label="13 — Bloom"
|
||||
style="--dot: oklch(97% 0.010 72); --dot-edge: oklch(56% 0.13 35);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="riso" aria-label="13 · Riso"
|
||||
style="--dot: oklch(91% 0.034 30); --dot-edge: oklch(58% 0.170 220); --num: oklch(30% 0.05 220);"><span
|
||||
class="theme-dropdown__num">13</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="coral" aria-label="14 — Coral"
|
||||
style="--dot: oklch(96.5% 0.005 50); --dot-edge: oklch(64% 0.165 28);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="bloom" aria-label="14 · Bloom"
|
||||
style="--dot: oklch(97% 0.010 72); --dot-edge: oklch(56% 0.13 35); --num: oklch(30% 0.05 35);"><span
|
||||
class="theme-dropdown__num">14</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="aurora" aria-label="15 — Aurora"
|
||||
style="--dot: oklch(11% 0.025 200); --dot-edge: oklch(72% 0.170 200);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="coral" aria-label="15 · Coral"
|
||||
style="--dot: oklch(96.5% 0.005 50); --dot-edge: oklch(64% 0.165 28); --num: oklch(30% 0.05 28);"><span
|
||||
class="theme-dropdown__num">15</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="editorial" aria-label="16 — Editorial"
|
||||
style="--dot: oklch(94% 0.020 75); --dot-edge: oklch(60% 0.160 35);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="aurora" aria-label="16 · Aurora"
|
||||
style="--dot: oklch(11% 0.025 200); --dot-edge: oklch(72% 0.170 200); --num: oklch(90% 0.05 200);"><span
|
||||
class="theme-dropdown__num">16</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="carnival" aria-label="17 — Carnival"
|
||||
style="--dot: oklch(92% 0.075 85); --dot-edge: oklch(40% 0.13 25);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="editorial" aria-label="17 · Editorial"
|
||||
style="--dot: oklch(94% 0.020 75); --dot-edge: oklch(60% 0.160 35); --num: oklch(30% 0.05 35);"><span
|
||||
class="theme-dropdown__num">17</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="lumen" aria-label="18 — Lumen"
|
||||
style="--dot: oklch(15% 0.016 265); --dot-edge: oklch(76% 0.13 60);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="carnival" aria-label="18 · Carnival"
|
||||
style="--dot: oklch(92% 0.075 85); --dot-edge: oklch(40% 0.13 25); --num: oklch(30% 0.05 25);"><span
|
||||
class="theme-dropdown__num">18</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="hum" aria-label="19 — Hum"
|
||||
style="--dot: oklch(97% 0.012 95); --dot-edge: oklch(68% 0.24 18);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="lumen" aria-label="19 · Lumen"
|
||||
style="--dot: oklch(15% 0.016 265); --dot-edge: oklch(76% 0.13 60); --num: oklch(90% 0.05 60);"><span
|
||||
class="theme-dropdown__num">19</span></button>
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="cobalt" aria-label="20 — Cobalt"
|
||||
style="--dot: oklch(98.5% 0.004 250); --dot-edge: oklch(58% 0.20 256);"><span
|
||||
<button class="theme-dropdown__dot" type="button" data-theme-btn="cobalt" aria-label="20 · Cobalt"
|
||||
style="--dot: oklch(98.5% 0.004 250); --dot-edge: oklch(58% 0.20 256); --num: oklch(30% 0.05 256);"><span
|
||||
class="theme-dropdown__num">20</span></button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -237,33 +237,9 @@
|
||||
|
||||
<div class="examples-rail" role="list" aria-label="Example landing pages">
|
||||
|
||||
<!-- New-theme showcase. Scroll previews via Remotion from the live pages
|
||||
(see examples/scroll-demos.json); swap each <img> for
|
||||
<video data-hover-play src="_tests/_thumbs/<slug>-scroll.mp4" poster="..."> once rendered. -->
|
||||
<a class="ex-card" style="--scroll-dur:2.5s" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example — content-extraction API, Cobalt — in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/cobalt-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a content-extraction API, Cobalt</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:2.7s" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example — record-label EP page, Carnival — in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/carnival-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a record-label EP page, Carnival</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3.1s" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example — AI reasoning tool, Lumen — in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/lumen-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an AI reasoning tool, Lumen</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3.3s" role="listitem" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/hum-07.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/hum-07.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a guided sourdough app, Hum</p>
|
||||
</a>
|
||||
@@ -273,74 +249,95 @@
|
||||
once rendered, swap the <img> for <video data-hover-play src="..." poster="...">. -->
|
||||
<a class="ex-card" style="--scroll-dur:4s" role="listitem" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/custom-04.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/custom-04.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a repair-café manifesto poster, custom</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/garden-01/" target="_blank" rel="noopener" aria-label="Open the Hollowback Apiary example, a small-batch honey farm, Garden, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/garden-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/garden-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a landing page for a small-batch honey farm</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:4.6s" role="listitem" href="examples/riso-01/" target="_blank" rel="noopener" aria-label="Open the Off-Register example, an indie risograph print fair, Riso, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/riso-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/riso-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a page for an indie risograph print fair</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:4.7s" role="listitem" href="examples/press-01/" target="_blank" rel="noopener" aria-label="Open the Press Quaternary example, an experimental type studio, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/press-01.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/press-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a portfolio for an experimental typographer</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example, a SaaS product page, modern-minimal, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/tally.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/tally.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SaaS product page, modern-minimal</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3s" role="listitem" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example, a travel booking site, atmospheric, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/wayfare.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/wayfare.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a travel booking site, atmospheric</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3.2s" role="listitem" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example, a creative studio with playful motion, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/bananastudio.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/bananastudio.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with playful motion</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:1.8s" role="listitem" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example, a software architect personal site, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/anya.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/anya.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a software architect personal site</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:2s" role="listitem" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example, a Moroccan fashion brand landing page, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/najm.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/najm.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a Moroccan fashion brand landing page</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3.5s" role="listitem" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example, a developer infrastructure landing page, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/hyperlane.jpg?v=23" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/hyperlane.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a developer infrastructure landing page</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:2.5s" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example, a content-extraction API, Cobalt, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/cobalt-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a content-extraction API, Cobalt</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:2.7s" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example, a record-label EP page, Carnival, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/carnival-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a record-label EP page, Carnival</p>
|
||||
</a>
|
||||
|
||||
<a class="ex-card" style="--scroll-dur:3.1s" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example, an AI reasoning tool, Lumen, in a new tab">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/lumen-01.jpg?v=24" alt="" loading="lazy" width="1600" height="1000" />
|
||||
</div>
|
||||
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an AI reasoning tool, Lumen</p>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -1127,7 +1124,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module" src="js/main.js?v=23"></script>
|
||||
<script type="module" src="js/main.js?v=24"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
+1
-1
@@ -40,6 +40,7 @@ document.querySelectorAll(".reveal").forEach((el) => el.classList.add("is-in"));
|
||||
|
||||
/* — Theme registry ————————————————————————————————————— */
|
||||
const THEMES = {
|
||||
hum: "Hum",
|
||||
specimen: "Specimen",
|
||||
midnight: "Midnight",
|
||||
brutal: "Brutal",
|
||||
@@ -58,7 +59,6 @@ const THEMES = {
|
||||
editorial: "Editorial",
|
||||
carnival: "Carnival",
|
||||
lumen: "Lumen",
|
||||
hum: "Hum",
|
||||
cobalt: "Cobalt",
|
||||
};
|
||||
const STORAGE_KEY = "hallmark-theme";
|
||||
|
||||
Reference in New Issue
Block a user