feat: initialize site with config, logo, and basic layout

src/components/layout/Footer.astro

@@ -0,0 +1,93 @@
+---
+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>