94 lines
2.0 KiB
Plaintext
94 lines
2.0 KiB
Plaintext
---
|
|
import { css, cx } from '@styled-system/css'
|
|
import { containerClass } from '@/styles/container'
|
|
|
|
interface FooterSection {
|
|
title?: string
|
|
links: {
|
|
label: string
|
|
href: string
|
|
}[]
|
|
}
|
|
|
|
const sections: FooterSection[] = [
|
|
{
|
|
title: 'Code & Work',
|
|
links: [
|
|
{ label: 'GitHub', href: 'https://github.com/SrJuggernaut' },
|
|
{ label: 'Gitea Instance', href: 'https://git.srjuggernaut.dev/' }
|
|
]
|
|
},
|
|
{
|
|
title: 'Social & Contact',
|
|
links: [
|
|
{ label: 'Twitter', href: 'https://twitter.com/SrJuggernaut' },
|
|
{
|
|
label: 'Blue Sky',
|
|
href: 'https://bsky.app/profile/jugger.srjuggernaut.dev'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
const footerContainerClass = cx(
|
|
containerClass,
|
|
css({
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(256px, 1fr))',
|
|
gap: 'lg md'
|
|
})
|
|
)
|
|
|
|
const footerSectionTitleClass = css({
|
|
display: 'block',
|
|
fontWeight: 'bold',
|
|
fontSize: 'h4',
|
|
textAlign: 'center'
|
|
})
|
|
|
|
const footerSectionListClass = css({
|
|
listStyle: 'none'
|
|
})
|
|
|
|
const footerSectionItemClass = css({
|
|
paddingInlineStart: 'sm',
|
|
textIndent: '-xs',
|
|
'&:before': {
|
|
content: '"⟫"',
|
|
paddingInline: 'xs'
|
|
}
|
|
})
|
|
|
|
const footerLegendClass = css({
|
|
paddingBlock: 'md',
|
|
textAlign: 'center',
|
|
fontSize: 'sm'
|
|
})
|
|
|
|
const footerLegendHeartClass = css({
|
|
color: 'red'
|
|
})
|
|
---
|
|
|
|
<footer>
|
|
<div class={footerContainerClass}>
|
|
{sections.map(section => (
|
|
<section>
|
|
<span class={footerSectionTitleClass} role="heading" aria-level="3">{section.title}</span>
|
|
<ul class={footerSectionListClass} >
|
|
{section.links.map(link => (
|
|
<li class={footerSectionItemClass}>
|
|
<a href={link.href}>{link.label}</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
))}
|
|
</div>
|
|
<p class={footerLegendClass}>
|
|
Made with <span class={footerLegendHeartClass}>♥</span> and
|
|
<a href="https://astro.build">Astro</a> by
|
|
<a href="https://srjuggernaut.dev">Jugger</a>
|
|
</p>
|
|
</footer>
|