Marcos Paulo
6bfae2033e
Extended the typography `--step-*` scale to cover the ad-hoc pixel values used across components (10px to 48px). Added overlay tokens `--white-14`, `--white-23`, `--white-25`, `--white-31`. Canonicalized one-off legacy color hex values in `ReviewDetail`, `ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer` to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`, `--muted`). Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px) with the closest approved named tokens (`560px`, `800px`, `1100px`).
91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
---
|
|
// RouteCard — one chapter card in the landing page's six-up route grid.
|
|
//
|
|
// Markup mirrors `index.html`'s `<article class="card">` block:
|
|
// <b>{number}</b><h2>{title}</h2><p>{summary}</p><a href={href}>…</a>
|
|
// The `route-grid` wrapper in landing.css used to push each card's link to the
|
|
// bottom with `display:flex; flex-direction:column; margin-top:auto` on the
|
|
// anchor. That responsibility lives on the card itself now, so the card is
|
|
// self-contained — drop it into any gap:1px group and it lays out the same way.
|
|
//
|
|
// Built from `.agents/templates/components/static-block.astro` per task 08 of
|
|
// the Astro refactor. Steps on:
|
|
// - number — the "01" … "06" prefix
|
|
// - title — the chapter name (h2)
|
|
// - summary — the lede line under the title
|
|
// - href — link target for the chapter
|
|
// - cta — link text (the index page varies this: "Open chapter →",
|
|
// "Open lab →", "Open desk →"). Defaults to "Open chapter →".
|
|
|
|
interface Props {
|
|
/** Two-digit prefix rendered in the chapter surface red, e.g. "01". */
|
|
number: string;
|
|
/** Chapter name shown as the card's h2. */
|
|
title: string;
|
|
/** One-line summary under the title. */
|
|
summary: string;
|
|
/** Link target for the chapter. */
|
|
href: string;
|
|
/** Link text. Varies per destination in the current landing page. */
|
|
cta?: string;
|
|
}
|
|
|
|
const { number, title, summary, href, cta = 'Open chapter →' } = Astro.props;
|
|
---
|
|
|
|
<article class="card">
|
|
<b>{number}</b>
|
|
<h2>{title}</h2>
|
|
<p>{summary}</p>
|
|
<a href={href}>{cta}</a>
|
|
</article>
|
|
|
|
<style>
|
|
/* Mirror chapters.css `.card` + landing.css `.route-grid .card` exactly. */
|
|
.card {
|
|
display: flex;
|
|
min-width: 0;
|
|
flex-direction: column;
|
|
min-height: 220px;
|
|
padding: 28px;
|
|
background: var(--paper);
|
|
}
|
|
|
|
.card b {
|
|
color: var(--red);
|
|
font-size: var(--step-24);
|
|
font-family: ui-monospace, monospace;
|
|
}
|
|
|
|
.card h2 {
|
|
margin: 18px 0 8px;
|
|
font-size: var(--step-25);
|
|
letter-spacing: -0.04em;
|
|
}
|
|
|
|
.card p {
|
|
margin: 0 0 14px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.card a {
|
|
/* Push the link to the bottom — carried from landing.css
|
|
`.route-grid .card a { margin-top: auto }`. */
|
|
margin-top: auto;
|
|
color: var(--blue);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card a:focus-visible {
|
|
outline: 3px solid var(--red);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (max-width: 560px) {
|
|
.card {
|
|
min-height: 0;
|
|
}
|
|
}
|
|
</style>
|