blob: aef523dbd113004c0828a7cecc61e722fb57974b (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
---
import Page from '../layouts/Page.astro'
import { Icon } from 'astro-icon/components';
import contacts from "../data/contacts.json";
---
<Page title="Contacts" description="Follow me on these platforms">
<main>
{contacts.map((contact)=> {
let icon = "fa6-brands:" + contact.icon;
return (
<a href={contact.url} target="_blank" title={contact.mouseover}><div class="contacts-card">
<Icon name={icon} class="contact-icon" />
{contact.platform} ({contact.username})
</div></a>
)
})}
</main>
</Page>
<style>
.contacts-card {
display: flex;
align-items: center;
font-size: 1.2em;
padding: 1em;
margin: 1em;
border-radius: 10px;
background-color: #3B513B;
}
.contact-icon {
margin: 0.1em 0.5em 0.1em 0.1em;
font-size: 1.3em;
}
</style>
|
