67 lines
1.3 KiB
Plaintext
67 lines
1.3 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;
|
|
min-height: 40px;
|
|
padding: 7px 14px;
|
|
border: 1px solid rgba(127,127,127,0.24);
|
|
border-radius: 999px;
|
|
background: rgba(127,127,127,0.05);
|
|
text-decoration: none;
|
|
line-height: 1.2;
|
|
transition:
|
|
transform 120ms ease,
|
|
background 120ms ease,
|
|
border-color 120ms ease;
|
|
}
|
|
|
|
.glossary-portal-cta:hover{
|
|
transform: translateY(-1px);
|
|
background: rgba(127,127,127,0.08);
|
|
border-color: rgba(0,217,255,0.18);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glossary-portal-cta:focus-visible{
|
|
outline: 2px solid rgba(0,217,255,0.28);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
@media (max-width: 760px){
|
|
.glossary-portal-cta{
|
|
min-height: 36px;
|
|
padding: 6px 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
|
.glossary-portal-cta{
|
|
min-height: 32px;
|
|
padding: 5px 10px;
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
</style> |