ayco.io-astro/src/components/Footer.astro

107 lines
2 KiB
Text

---
import { Icon } from 'astro-icon/components'
import { footerLinks as links } from '../constants/links'
import WebRings from './WebRings.astro'
const year = new Date().getFullYear()
---
<footer>
<ul id="internal-links">
<li>
<a href="/about">About me</a>
</li>
<li>
<a href="/now">What I'm up to</a>
</li>
<li>
<a href="/threads">My thoughts</a>
</li>
</ul>
<ul>
{
links.map((linkObj) => (
<li title={linkObj.text}>
<a
class:list={[
{
'u-url': !linkObj.excludeHCard,
},
]}
rel={!linkObj.excludeHCard ? 'me' : null}
href={linkObj.url}
aria-label={linkObj.text}
>
<Icon
width="1em"
height="1em"
name={`${linkObj.set ?? 'simple-icons'}:${linkObj.icon}`}
/>
</a>
</li>
))
}
</ul>
<p>
Copyright &#169; 2022-{year}
<a href="/">Ayo Ayco</a>. This website <a
href="https://ayos.blog/stopped-tracking-on-my-sites"
>does not track users</a
>. See the <a href="https://git.sr.ht/~ayoayco/ayco.io-astro"
>source code.</a
>
</p>
<WebRings />
</footer>
<style>
footer {
padding: 1em;
display: grid;
gap: 1em;
grid-auto-flow: row;
p {
font-size: var(--font-size-sm);
}
a {
color: var(--text-color-dark);
&:hover {
color: var(--color-brand-blue-5);
}
@media (prefers-color-scheme: dark) {
color: var(--text-color-light);
&:hover {
color: var(--color-brand-complement);
}
}
}
ul {
list-style: none;
padding: 0;
li {
display: inline-block;
a svg {
margin-right: 1em;
}
}
}
#internal-links li {
&:not(:last-child)::after {
content: ' • ';
}
}
p,
ul {
margin: 0;
}
}
</style>