Skip to content

Improve project gallery card stylingΒ #10

@AJaccP

Description

@AJaccP

🧠 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

  1. 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>
  2. 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>
  3. 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

  • Long descriptions are clamped; cards stay a uniform height.
  • A project with many tech tags shows at most two rows of chips, cut off.
  • Hover raises the card, intensifies the muted text (toward text-ink), accents the title, and tints the chips β€” with smooth transitions.
  • The data-* attributes and the /projects/[id] link are unchanged.
  • pnpm format:check, pnpm check, and pnpm build all pass.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    Ready

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions