Marcos Paulo
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) var(--font-mono);
|
|
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>
|