110 lines
2.0 KiB
Plaintext
110 lines
2.0 KiB
Plaintext
---
|
|
import { hrefOfGlossaryEntry, type GlossaryEntry } from "../lib/glossary";
|
|
|
|
export interface Props {
|
|
entries?: GlossaryEntry[];
|
|
wide?: boolean;
|
|
}
|
|
|
|
const {
|
|
entries = [],
|
|
wide = false,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div class="glossary-cards">
|
|
{entries.map((entry) => (
|
|
<a
|
|
class:list={[
|
|
"glossary-card",
|
|
wide && "glossary-card--wide",
|
|
]}
|
|
href={hrefOfGlossaryEntry(entry)}
|
|
>
|
|
<strong>{entry.data.term}</strong>
|
|
<span>{entry.data.definitionShort}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<style>
|
|
.glossary-cards{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.glossary-card{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
padding: 13px 14px;
|
|
border: 1px solid var(--glossary-border);
|
|
border-radius: 16px;
|
|
background: var(--glossary-bg-soft);
|
|
text-decoration: none;
|
|
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
|
}
|
|
|
|
.glossary-card:hover{
|
|
transform: translateY(-1px);
|
|
background: var(--glossary-bg-soft-strong);
|
|
border-color: rgba(0,217,255,0.16);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glossary-card--wide{
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.glossary-card strong{
|
|
color: var(--glossary-accent);
|
|
font-size: 1.02rem;
|
|
line-height: 1.24;
|
|
}
|
|
|
|
.glossary-card span{
|
|
color: inherit;
|
|
font-size: .98rem;
|
|
line-height: 1.46;
|
|
opacity: .94;
|
|
}
|
|
|
|
@media (max-width: 760px){
|
|
.glossary-cards{
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.glossary-card{
|
|
gap: 6px;
|
|
padding: 12px 12px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.glossary-card strong{
|
|
font-size: .98rem;
|
|
}
|
|
|
|
.glossary-card span{
|
|
font-size: .94rem;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.glossary-card--wide{
|
|
grid-column: auto;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
.glossary-card{
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.glossary-card:hover{
|
|
background: rgba(255,255,255,0.07);
|
|
}
|
|
}
|
|
</style> |