50 lines
No EOL
1,001 B
Text
50 lines
No EOL
1,001 B
Text
---
|
|
import type { ImageMetadata } from 'astro'
|
|
|
|
|
|
export interface Props {
|
|
text: string
|
|
icon: ImageMetadata
|
|
link: string
|
|
}
|
|
|
|
const { text, icon, link } = Astro.props
|
|
const icon_src_url = `url("${icon.src}")`
|
|
|
|
---
|
|
|
|
<a href={link} target="_blank" rel="noopener noreferrer">
|
|
<div class="icon"></div>
|
|
<span class="visually-hidden">{text}</span>
|
|
</a>
|
|
|
|
<style define:vars={{ icon_src_url }}>
|
|
* {
|
|
transition: all var(--a-time-default) var(--a-animation-1);
|
|
}
|
|
a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.25em;
|
|
height: 2.25em;
|
|
background-color: var(--c-primary-background);
|
|
border-radius: .35rem;
|
|
border: 2px solid var(--c-primary-text);
|
|
}
|
|
|
|
a:hover {
|
|
border-color: var(--c-accent-1);
|
|
& .icon {
|
|
background: var(--c-accent-1);
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
mask: var(--icon_src_url) no-repeat center;
|
|
mask-size: contain;
|
|
background-color: var(--c-primary-text);
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
}
|
|
</style> |