Skip to content

fix: stop the example cards from overriding their own link role #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thejesh23 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: stop the example cards from overriding their own link role #42

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,9 +235,9 @@ <h2 class="section__title" id="s2">

<p class="examples__intro">One-shotted. No shared theme. No shared layout.</p>

<div class="examples-rail" role="list" aria-label="Example landing pages">
<div class="examples-rail" role="group" aria-label="Example landing pages">

<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">
<a class="ex-card" style="--scroll-dur:3.3s" 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=24" alt="" loading="lazy" width="1600" height="1000" />
</div>
Expand All @@ -247,91 +247,91 @@ <h2 class="section__title" id="s2">
<!-- Custom / bespoke showcase. One featured bespoke build; the others live under
site/examples/custom-*. Scroll preview via Remotion (see examples/scroll-demos.json);
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">
<a class="ex-card" style="--scroll-dur:4s" 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=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">
<a class="ex-card" style="--scroll-dur:3.6s" 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=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">
<a class="ex-card" style="--scroll-dur:4.6s" 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=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">
<a class="ex-card" style="--scroll-dur:4.7s" 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=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">
<a class="ex-card" style="--scroll-dur:3.6s" 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=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">
<a class="ex-card" style="--scroll-dur:3s" 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=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">
<a class="ex-card" style="--scroll-dur:3.2s" 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=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">
<a class="ex-card" style="--scroll-dur:1.8s" 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=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">
<a class="ex-card" style="--scroll-dur:2s" 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=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">
<a class="ex-card" style="--scroll-dur:3.5s" 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=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">
<a class="ex-card" style="--scroll-dur:2.5s" 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">
<a class="ex-card" style="--scroll-dur:2.7s" 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">
<a class="ex-card" style="--scroll-dur:3.1s" 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>
Expand Down