118 lines
2.2 KiB
Plaintext
118 lines
2.2 KiB
Plaintext
---
|
|
export type GlossaryPortalGridItem = {
|
|
href: string;
|
|
title: string;
|
|
description: string;
|
|
meta: string;
|
|
};
|
|
|
|
export interface Props {
|
|
items?: GlossaryPortalGridItem[];
|
|
secondary?: boolean;
|
|
}
|
|
|
|
const {
|
|
items = [],
|
|
secondary = false,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div
|
|
class:list={[
|
|
"glossary-portals",
|
|
secondary && "glossary-portals--secondary",
|
|
]}
|
|
>
|
|
{items.map((item) => (
|
|
<a class="glossary-portal-card" href={item.href}>
|
|
<strong>{item.title}</strong>
|
|
<span>{item.description}</span>
|
|
<small>{item.meta}</small>
|
|
</a>
|
|
))}
|
|
</div>
|
|
|
|
<style>
|
|
.glossary-portals{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.glossary-portal-card{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 7px;
|
|
padding: 14px 15px;
|
|
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-portal-card:hover{
|
|
transform: translateY(-1px);
|
|
background: var(--glossary-bg-soft-strong);
|
|
border-color: rgba(0,217,255,0.16);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glossary-portal-card strong{
|
|
color: var(--glossary-accent);
|
|
font-size: 1.04rem;
|
|
line-height: 1.24;
|
|
}
|
|
|
|
.glossary-portal-card span{
|
|
color: inherit;
|
|
font-size: .98rem;
|
|
line-height: 1.46;
|
|
opacity: .94;
|
|
}
|
|
|
|
.glossary-portal-card small{
|
|
color: var(--glossary-accent);
|
|
font-size: .9rem;
|
|
line-height: 1.28;
|
|
opacity: .9;
|
|
}
|
|
|
|
@media (max-width: 760px){
|
|
.glossary-portals{
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.glossary-portal-card{
|
|
padding: 12px 12px;
|
|
border-radius: 14px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.glossary-portal-card strong{
|
|
font-size: .98rem;
|
|
}
|
|
|
|
.glossary-portal-card span{
|
|
font-size: .94rem;
|
|
line-height: 1.42;
|
|
}
|
|
|
|
.glossary-portal-card small{
|
|
font-size: .85rem;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
.glossary-portal-card{
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.glossary-portal-card:hover{
|
|
background: rgba(255,255,255,0.07);
|
|
}
|
|
}
|
|
</style> |