143 lines
2.8 KiB
Plaintext
143 lines
2.8 KiB
Plaintext
---
|
|
interface Props {
|
|
id: string;
|
|
title: string;
|
|
count?: string;
|
|
intro?: string;
|
|
final?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const {
|
|
id,
|
|
title,
|
|
count,
|
|
intro,
|
|
final = false,
|
|
className,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<section class:list={["glossary-portal-section", final && "glossary-portal-section--final", className]}>
|
|
<div class="glossary-portal-section__head">
|
|
<h2 id={id}>{title}</h2>
|
|
{count && <span class="glossary-portal-section__count">{count}</span>}
|
|
</div>
|
|
|
|
{intro && <p class="glossary-portal-section__intro">{intro}</p>}
|
|
|
|
<slot />
|
|
</section>
|
|
|
|
<style>
|
|
.glossary-portal-section{
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.glossary-portal-section h2{
|
|
margin: 0;
|
|
font-size: clamp(1.8rem, 3vw, 2.35rem);
|
|
line-height: 1.05;
|
|
letter-spacing: -.03em;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.glossary-portal-section__head{
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.glossary-portal-section__count{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
border: 1px solid rgba(127,127,127,0.20);
|
|
border-radius: 999px;
|
|
background: rgba(127,127,127,0.04);
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
opacity: .8;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.glossary-portal-section__intro{
|
|
margin: 0;
|
|
max-width: 76ch;
|
|
font-size: var(--portal-body-size, 1rem);
|
|
line-height: var(--portal-body-lh, 1.55);
|
|
opacity: .94;
|
|
}
|
|
|
|
.glossary-portal-section--final{
|
|
margin-top: 34px;
|
|
}
|
|
|
|
@media (max-width: 980px){
|
|
.glossary-portal-section{
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.glossary-portal-section h2{
|
|
font-size: clamp(1.6rem, 4.4vw, 2rem);
|
|
line-height: 1.04;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px){
|
|
.glossary-portal-section{
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.glossary-portal-section__head{
|
|
gap: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.glossary-portal-section h2{
|
|
font-size: clamp(1.34rem, 6.5vw, 1.72rem);
|
|
line-height: 1.04;
|
|
letter-spacing: -.022em;
|
|
}
|
|
|
|
.glossary-portal-section__count{
|
|
min-height: 24px;
|
|
padding: 0 8px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.glossary-portal-section--final{
|
|
margin-top: 24px;
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
|
.glossary-portal-section{
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.glossary-portal-section__head{
|
|
gap: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.glossary-portal-section h2{
|
|
font-size: clamp(1.12rem, 4.2vw, 1.34rem);
|
|
line-height: 1.02;
|
|
}
|
|
|
|
.glossary-portal-section__count{
|
|
min-height: 22px;
|
|
padding: 0 7px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.glossary-portal-section--final{
|
|
margin-top: 18px;
|
|
}
|
|
}
|
|
</style> |