47 lines
919 B
Text
47 lines
919 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 }}>
|
||
|
|
a {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
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: 65%;
|
||
|
|
width: 65%;
|
||
|
|
}
|
||
|
|
</style>
|