Files
com.gregkilmer.www/src/components/layout/Footer.astro
T
2026-07-04 07:42:24 -04:00

50 lines
1.8 KiB
Plaintext

---
/**
* Footer.astro
* ---------------------------------------------------------------------------
* Minimal footer: social links (mdi icons), copyright, and the spec microcopy
* "Built with intention. Powered by caffeine." No emojis per spec.
*/
import Icon from '@components/Icon.astro';
import { socials, footerMicrocopy, siteIdentity } from '@lib/site';
const year = new Date().getFullYear();
const socialList = Object.values(socials);
---
<footer
class="border-t"
style="border-color: var(--color-border); background: var(--color-surface-sunken);"
>
<div class="container-prose flex flex-col items-center gap-6 py-10 text-center sm:flex-row sm:justify-between sm:text-left">
<div class="flex flex-col gap-1">
<p class="font-sans text-sm font-semibold" style="color: var(--color-text);">
{siteIdentity.name}
</p>
<p class="font-mono text-xs italic" style="color: var(--color-text-subtle);">
{footerMicrocopy}
</p>
</div>
<ul class="flex items-center gap-2">
{socialList.map((s) => (
<li>
<a
href={s.href}
target="_blank"
rel="noopener noreferrer"
aria-label={s.label}
title={s.label}
class="inline-flex h-10 w-10 items-center justify-center rounded-lg border transition-colors hover:bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)]"
style="color: var(--color-text-muted); border-color: var(--color-border);"
>
<Icon name={s.icon} class="h-5 w-5" />
</a>
</li>
))}
</ul>
</div>
<div class="container-prose pb-8 text-center text-xs" style="color: var(--color-text-subtle);">
&copy; {year} {siteIdentity.name}. All rights reserved.
</div>
</footer>