Marcos Paulo
77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
---
|
|
// Static block template — the default. Ships zero JavaScript.
|
|
// Copy to src/components/blocks/<Name>.astro and replace everything marked TODO.
|
|
//
|
|
// Before using this, confirm the block earns extraction: it appears three times,
|
|
// or it has a name a person says out loud. See .agents/rules/componentization.md
|
|
|
|
interface Props {
|
|
/** TODO: describe each prop. Required by default; optional needs a reason. */
|
|
eyebrow: string;
|
|
title: string;
|
|
body: string;
|
|
href?: string;
|
|
}
|
|
|
|
const { eyebrow, title, body, href } = Astro.props;
|
|
---
|
|
|
|
<article class="block">
|
|
<span class="eyebrow">{eyebrow}</span>
|
|
<h2>{title}</h2>
|
|
<p>{body}</p>
|
|
{href && <a href={href}>Open →</a>}
|
|
<slot />
|
|
</article>
|
|
|
|
<style>
|
|
/* Tokens only. No raw hex, no px font sizes, no ad-hoc breakpoints.
|
|
.agents/scripts/check-tokens.mjs enforces this. */
|
|
.block {
|
|
display: grid;
|
|
gap: 10px;
|
|
padding: 22px;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* The house eyebrow: uppercase monospace, wide tracking. One class, not
|
|
fifteen repetitions. */
|
|
.eyebrow {
|
|
color: var(--accent);
|
|
font: var(--font-eyebrow);
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-size: var(--step-5);
|
|
line-height: 1.05;
|
|
letter-spacing: -0.06em; /* tight display tracking is a signature of this design */
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
a {
|
|
color: var(--blue);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:focus-visible {
|
|
outline: 3px solid var(--red);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.block {
|
|
padding: 18px;
|
|
}
|
|
}
|
|
</style>
|