87 lines
1.9 KiB
Plaintext
87 lines
1.9 KiB
Plaintext
---
|
|
export interface Props {
|
|
href: string;
|
|
label: string;
|
|
icon?: string;
|
|
className?: string;
|
|
}
|
|
|
|
const {
|
|
href,
|
|
label,
|
|
icon = "↗",
|
|
className,
|
|
} = Astro.props;
|
|
---
|
|
|
|
<a class:list={["glossary-portal-cta", className]} href={href}>
|
|
<span>{label}</span>
|
|
<span aria-hidden="true">{icon}</span>
|
|
</a>
|
|
|
|
<style>
|
|
.glossary-portal-cta{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
min-height: 40px;
|
|
padding: 0 14px;
|
|
border: 1px solid rgba(0,217,255,0.24);
|
|
border-radius: 999px;
|
|
background:
|
|
linear-gradient(180deg, rgba(0,217,255,0.10), rgba(0,217,255,0.04)),
|
|
rgba(127,127,127,0.06);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.05),
|
|
0 0 0 1px rgba(0,217,255,0.04);
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: .01em;
|
|
white-space: nowrap;
|
|
transition:
|
|
transform 120ms ease,
|
|
background 120ms ease,
|
|
border-color 120ms ease,
|
|
box-shadow 120ms ease;
|
|
}
|
|
|
|
.glossary-portal-cta:hover{
|
|
transform: translateY(-1px);
|
|
border-color: rgba(0,217,255,0.34);
|
|
background:
|
|
linear-gradient(180deg, rgba(0,217,255,0.14), rgba(0,217,255,0.06)),
|
|
rgba(127,127,127,0.08);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255,255,255,0.06),
|
|
0 0 0 1px rgba(0,217,255,0.08),
|
|
0 10px 28px rgba(0,0,0,0.18);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glossary-portal-cta:focus-visible{
|
|
outline: 2px solid rgba(0,217,255,0.28);
|
|
outline-offset: 4px;
|
|
}
|
|
|
|
@media (max-width: 720px){
|
|
.glossary-portal-cta{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
.glossary-portal-cta{
|
|
background:
|
|
linear-gradient(180deg, rgba(0,217,255,0.12), rgba(0,217,255,0.05)),
|
|
rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.glossary-portal-cta:hover{
|
|
background:
|
|
linear-gradient(180deg, rgba(0,217,255,0.16), rgba(0,217,255,0.07)),
|
|
rgba(255,255,255,0.06);
|
|
}
|
|
}
|
|
</style> |