π§ Context
The scaffold card (src/components/Card.astro) is intentionally minimal: cover (via <CardCover />) + title + year + a plain-text "Built by β¦" line. This ticket fills in the body and adds hover polish so the grid feels finished.
Files you'll touch:
src/components/Card.astro (the body block only)
src/styles/global.css (only if you take the fixed-color-token route in step 3 β the recommended approach needs no change here)
Don't touch / preserve:
- The
data-* attributes on the <article> (data-domain, data-year, data-title, data-tech, data-author, data-description) β these are the filter/search contract; leave them exactly as they are.
- The
/projects/${id} link wrapping the card (detail nav depends on it). Note the whole card is already an <a>, so don't add nested links in the body.
CardCover.astro (cover ticket) and [slug].astro (detail ticket).
π οΈ Implementation Plan
-
Description with cutoff. Render data.description under the "Built by" line and clamp it so cards stay a uniform height:
<p class="text-muted line-clamp-2 text-sm">{data.description}</p>
-
Tech chips, max two rows then cut off. Render data.tech as pill chips (token-styled). A project with many tags must not blow out the card height β cap it at two rows and hide the overflow. Figure out the cleanest way (e.g. a max-height that fits two rows + overflow-hidden, or a line-clamped flex row). Chip baseline to match the existing style:
<li class="border-line text-muted rounded-full border px-2 py-0.5 text-xs">
{t}
</li>
-
Hover behavior. Put group on the <article> and on hover: raise the card (a box-shadow, optionally a small -translate-y, with a transition); intensify the muted text (description / year / built-by shift from text-muted toward text-ink); highlight the title in the accent (group-hover:text-accent); and give the chips a soft accent tint (a faint red background).
For the soft chip tint, prefer a translucent accent β group-hover:bg-accent/10 β over a new hardcoded color. It's derived from the existing --color-accent token, so it stays correct in both light and dark mode automatically and needs no change to global.css. (If you really want a fixed soft-red, you could add a --color-accent-soft token to @theme instead β but then you'd also have to give it a dark-mode value (if dark mode is implemented by now) so the tint doesn't look wrong on a dark surface, which the translucent approach avoids.) Prefer tokens / currentColor over raw hex throughout. Try to make it work without editing global.css if possible
β
Acceptance Criteria
π§ Context
The scaffold card (
src/components/Card.astro) is intentionally minimal: cover (via<CardCover />) + title + year + a plain-text "Built by β¦" line. This ticket fills in the body and adds hover polish so the grid feels finished.Files you'll touch:
src/components/Card.astro(the body block only)src/styles/global.css(only if you take the fixed-color-token route in step 3 β the recommended approach needs no change here)Don't touch / preserve:
data-*attributes on the<article>(data-domain,data-year,data-title,data-tech,data-author,data-description) β these are the filter/search contract; leave them exactly as they are./projects/${id}link wrapping the card (detail nav depends on it). Note the whole card is already an<a>, so don't add nested links in the body.CardCover.astro(cover ticket) and[slug].astro(detail ticket).π οΈ Implementation Plan
Description with cutoff. Render
data.descriptionunder the "Built by" line and clamp it so cards stay a uniform height:Tech chips, max two rows then cut off. Render
data.techas pill chips (token-styled). A project with many tags must not blow out the card height β cap it at two rows and hide the overflow. Figure out the cleanest way (e.g. a max-height that fits two rows +overflow-hidden, or a line-clamped flex row). Chip baseline to match the existing style:Hover behavior. Put
groupon the<article>and on hover: raise the card (a box-shadow, optionally a small-translate-y, with atransition); intensify the muted text (description / year / built-by shift fromtext-mutedtowardtext-ink); highlight the title in the accent (group-hover:text-accent); and give the chips a soft accent tint (a faint red background).For the soft chip tint, prefer a translucent accent β
group-hover:bg-accent/10β over a new hardcoded color. It's derived from the existing--color-accenttoken, so it stays correct in both light and dark mode automatically and needs no change toglobal.css. (If you really want a fixed soft-red, you could add a--color-accent-softtoken to@themeinstead β but then you'd also have to give it a dark-mode value (if dark mode is implemented by now) so the tint doesn't look wrong on a dark surface, which the translucent approach avoids.) Prefer tokens /currentColorover raw hex throughout. Try to make it work without editingglobal.cssif possibleβ Acceptance Criteria
text-ink), accents the title, and tints the chips β with smooth transitions.data-*attributes and the/projects/[id]link are unchanged.pnpm format:check,pnpm check, andpnpm buildall pass.