Add article page and credits

src/components/content/global/Footer.astro

@@ -1,11 +1,29 @@
 ---
 const paddingX = 'px-[.75rem]'
 const paddingY = 'py-[.5rem]'
+
+interface NavItem {
+    text: string
+    link: string
+}
+
+const links: NavItem[] = [{ text: 'site credits', link: '/credits' }]
 ---
 
-<footer class={`flex ${paddingX} ${paddingY}`}>
-    <span class="mr-auto">Copyright Ethan Reece</span>
-    <nav>
-        <a>site credits</a>
-    </nav>
-</footer>
+<section>
+    <footer class={`flex ${paddingX} ${paddingY}`}>
+        <span class="mr-auto">Copyright Ethan Reece</span>
+        <nav>
+            {
+                links.map((link) => (
+                    <a
+                        href={link.link}
+                        class="hover:underline focus-visible:underline focus-visible:outline-none"
+                    >
+                        {link.text}
+                    </a>
+                ))
+            }
+        </nav>
+    </footer>
+</section>

src/components/content/global/Navbar.astro

@@ -23,7 +23,7 @@ const mainButtonPaddingX = 'px-[.75rem]'
 const mainButtonPaddingY = 'py-[.5rem]'
 ---
 
-<div class="fixed z-navbar w-full backdrop-blur-sm">
+<section class="fixed z-navbar w-full backdrop-blur-sm">
     <div
         class={`max-h-navbar-h bg-background-light ${paddingX} ${paddingY} opacity-80`}
     >
@@ -45,4 +45,4 @@ const mainButtonPaddingY = 'py-[.5rem]'
             }
         </nav>
     </div>
-</div>
+</section>

src/components/content/index/Section.astro

@@ -11,14 +11,13 @@ const { title, slug, background } = Astro.props.frontmatter
 const fontSize = 'text-[1rem]'
 const fontSizeH2 = 'text-[1.5rem]'
 
-const paddingX = 'px-[1rem]'
 const paddingT = 'pt-[1.5rem]'
 const paddingB = 'pb-[2.5rem]'
 const anchorDistance = 'mt-[-5rem] pt-[5rem]'
 ---
 
 <section
-    class={`${paddingX} ${paddingT} ${paddingB} ${fontSize} ${
+    class={`px-screen-x ${paddingT} ${paddingB} ${fontSize} ${
         background ? 'bg-background-dark' : ''
     }`}
 >

src/layouts/Article.astro

@@ -0,0 +1,28 @@
+---
+import type { MDXLayoutProps } from 'astro'
+import Base from './Base.astro'
+
+type Props = MDXLayoutProps<{
+    title: string
+    description: string
+}>
+
+const { title, description } = Astro.props.frontmatter
+---
+
+<Base title={`${title} - Ethan Reece`} description={description}>
+    <article class="px-screen-x">
+        <div class="mx-auto max-w-page-w">
+            <section>
+                <header>
+                    <h1 class="pb-[1.5rem] pt-[.75rem] text-[2rem] font-bold">
+                        {title}
+                    </h1>
+                </header>
+            </section>
+            <section class="space-y-paragraph">
+                <slot />
+            </section>
+        </div>
+    </article>
+</Base>

src/pages/credits.mdx

@@ -0,0 +1,26 @@
+---
+layout: '../layouts/Article.astro'
+title: 'Site Credits'
+---
+
+Framework: Astro with TypeScript and MDX
+
+Runtime: Node.js
+
+Package management: pnpm
+
+CSS: Tailwind (with Astro extension)
+
+Font: JetBrains Mono (using Fontsource)
+
+Circuitboard Pattern: Hero Patterns
+
+Icons: Hero Icons (using Astro Icon)
+
+IDE: VSCodium
+
+Code formatting: Prettier, ESLint, Astro MDX
+
+Optimization: Astro Prefetch, Astro Sitemap, Astro Imagetools (using Sharp), Astro Robots.txt, Astro SEO, Autoprefixer, CSSNano
+
+Source code: On Forgejo

tailwind.config.cjs

@@ -28,8 +28,8 @@ module.exports = {
             circuitboard: '40rem',
         },
         spacing: {
-            'screen-x': '2rem',
-            'screen-y': '1rem',
+            'screen-x': '1rem',
+            'screen-y': '1.5rem',
             'navbar-h': '4rem',
             paragraph: '1rem',
         },