109 lines
2.0 KiB
Plaintext
109 lines
2.0 KiB
Plaintext
---
|
|
export interface Props {
|
|
id?: string;
|
|
title: string;
|
|
intro?: string;
|
|
followSection?: string;
|
|
ctaHref?: string;
|
|
ctaLabel?: string;
|
|
}
|
|
|
|
const {
|
|
id,
|
|
title,
|
|
intro,
|
|
followSection,
|
|
ctaHref,
|
|
ctaLabel,
|
|
} = Astro.props;
|
|
|
|
const resolvedFollowSection = (followSection || title || "").trim();
|
|
const showCta = Boolean(ctaHref && ctaLabel);
|
|
---
|
|
|
|
<section id={id} class="glossary-section">
|
|
<div class="glossary-section__head">
|
|
<div>
|
|
<h2 data-follow-section={resolvedFollowSection}>{title}</h2>
|
|
|
|
{intro && (
|
|
<p class="glossary-intro">{intro}</p>
|
|
)}
|
|
</div>
|
|
|
|
{showCta && (
|
|
<a class="glossary-cta" href={ctaHref}>
|
|
{ctaLabel}
|
|
</a>
|
|
)}
|
|
</div>
|
|
|
|
<slot />
|
|
</section>
|
|
|
|
<style>
|
|
.glossary-section{
|
|
margin-top: 42px;
|
|
scroll-margin-top: calc(var(--glossary-sticky-top) + 190px);
|
|
}
|
|
|
|
.glossary-section__head{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.glossary-section h2{
|
|
margin: 0;
|
|
font-size: clamp(2rem, 3vw, 2.55rem);
|
|
line-height: 1.06;
|
|
letter-spacing: -.03em;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.glossary-intro{
|
|
margin: 0;
|
|
max-width: 72ch;
|
|
font-size: 1.05rem;
|
|
line-height: 1.55;
|
|
opacity: .94;
|
|
}
|
|
|
|
.glossary-section__head .glossary-intro{
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.glossary-cta{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 40px;
|
|
border: 1px solid var(--glossary-border-strong);
|
|
border-radius: 999px;
|
|
padding: 7px 14px;
|
|
color: var(--glossary-accent);
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
transition: transform 120ms ease, background 120ms ease;
|
|
}
|
|
|
|
.glossary-cta:hover{
|
|
background: var(--glossary-bg-soft-strong);
|
|
text-decoration: none;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
@media (max-width: 760px){
|
|
.glossary-section__head{
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.glossary-cta{
|
|
width: fit-content;
|
|
}
|
|
}
|
|
</style> |