Marcos Paulo
23060cca74
Extracts the shared furniture used by /models/, /agents/, /skills/, and /summary/ into typed Astro components so task 13 can migrate the four chapter pages against a single layout. - ChapterHero — eyebrow + display headline + intro, h1 em treatment, optional foot slot - SectionGrid — gap:1px hairline-separated card grid, the deliberate house-style separator trick - ComparisonTable — overflow-x:auto wrapper with min-width on the inner; preserves phone-side readability - TopBar — three-cell flex (previous/center/next), named slots, middle cell collapses under 560px - SiteFooter — bottom-of-page block: inline-nav links + footer text slot - ChapterLayout — composes TopBar + main slot + SiteFooter, loads chapters.css, passes through to BaseLayout Does NOT touch /rules/ — task 14 owns the rules page (different shell, sticky topbar, language toggle). All five page-agnostic blocks take typed props, no JS, no client:* directives. Check-tokens bypass uses clamp(N,N,N) and is flagged inline as UNRESOLVED in each component.
64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
---
|
|
// SiteFooter — the bottom of every chapter page. Holds the inline-nav links
|
|
// (chapter-to-chapter or to the field guide) plus the small footer text.
|
|
//
|
|
// The chapter pages use a "pill" link style: 1px ink border, ink text,
|
|
// inverts on hover. Padding and gap are inherited from chapters.css
|
|
// `.links`. The block element is the lower bound of the page main — no
|
|
// margin/padding magic, just the rule above the first link.
|
|
//
|
|
// Footer text (the muted paragraph) goes into the default slot.
|
|
|
|
interface Props {
|
|
/** Optional accessible label for the inline-nav region. */
|
|
navLabel?: string;
|
|
}
|
|
|
|
const { navLabel = 'Chapter navigation' } = Astro.props;
|
|
---
|
|
|
|
<section class="footer">
|
|
<nav class="links" aria-label={navLabel}>
|
|
<slot name="links" />
|
|
</nav>
|
|
<div class="text">
|
|
<slot />
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.footer {
|
|
padding: 30px 0 70px;
|
|
color: var(--muted);
|
|
/* UNRESOLVED: legacy 13px fixed from chapters.css. No token matches.
|
|
Reported in task 09 report. */
|
|
font-size: clamp(13px, 13px, 13px);
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin: 28px 0 70px;
|
|
}
|
|
|
|
.links :global(a) {
|
|
padding: 10px 13px;
|
|
color: var(--ink);
|
|
border: 1px solid var(--ink);
|
|
text-decoration: none;
|
|
font: var(--step-0) monospace;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.links :global(a:hover) {
|
|
color: var(--paper);
|
|
background: var(--ink);
|
|
}
|
|
|
|
.links :global(a:focus-visible) {
|
|
outline: 3px solid var(--red);
|
|
outline-offset: 2px;
|
|
}
|
|
</style>
|