yarkov.tech/src/components/HeaderContacts.astro

55 lines
990 B
Plaintext

---
import { Icon } from "astro-icon/components";
import { getContacts } from "../queries";
const contacts = await getContacts();
---
{
contacts && (
<div class="contacts">
<a target="_blank" href={"mailto:" + contacts.email}>
Email
<Icon name="email" width="18" height="18" />
</a>
<a target="_blank" href={contacts.github}>
Github
<Icon name="github_filled" width="18" height="18" />
</a>
<a target="_blank" href={contacts.telegram}>
Telegram
<Icon name="telegram" width="18" height="18" />
</a>
</div>
)
}
<style lang="scss">
.contacts {
display: flex;
align-items: center;
column-gap: 10px;
margin-right: 30px;
& a {
text-decoration: none;
font-size: 0;
&:hover {
opacity: var(--opacity-hover);
}
}
}
@media screen and (max-width: 768px) {
.contacts {
margin-right: 0;
margin-top: 2.5rem;
& a {
margin-right: 0.2rem;
}
& svg {
width: 21px;
height: 21px;
}
}
}
</style>