glitchedmob · Oct 4, 2026 · Oct 4, 2026 · Oct 4, 2026 · Oct 4, 2026 · Oct 4, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,7 +17,6 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
-    "@fontsource-variable/source-sans-3": "^5.3.0",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
     "@fortawesome/free-brands-svg-icons": "^7.3.1",
     "@fortawesome/free-regular-svg-icons": "^7.3.1",

diff --git a/src/app.css b/src/app.css
@@ -1,13 +1,87 @@
 @import "tailwindcss";
+@import "@fortawesome/fontawesome-svg-core/styles.css";
 @plugin "@tailwindcss/typography";
 
+@font-face {
+    font-family: "Source Sans 3";
+    font-style: normal;
+    font-weight: 200 900;
+    font-display: swap;
+    src: url("/fonts/source-sans-3/da8a9dd0d68e512b-s.0n8i_inn0i2i9.woff2") format("woff2");
+    unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+@font-face {
+    font-family: "Source Sans 3";
+    font-style: normal;
+    font-weight: 200 900;
+    font-display: swap;
+    src: url("/fonts/source-sans-3/94b4a5dc1fe84361-s.3wm_n5jv1to7s.woff2") format("woff2");
+    unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
+}
+
+@font-face {
+    font-family: "Source Sans 3";
+    font-style: normal;
+    font-weight: 200 900;
+    font-display: swap;
+    src: url("/fonts/source-sans-3/ff5be760267bb4bc-s.3dkqd4mro2h3_.woff2") format("woff2");
+    unicode-range: U+1F??;
+}
+
+@font-face {
+    font-family: "Source Sans 3";
+    font-style: normal;
+    font-weight: 200 900;
+    font-display: swap;
+    src: url("/fonts/source-sans-3/99596c30eb072d3c-s.2fp9tilo6sy14.woff2") format("woff2");
+    unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
+}
+
+@font-face {
+    font-family: "Source Sans 3";
+    font-style: normal;
+    font-weight: 200 900;
+    font-display: swap;
+    src: url("/fonts/source-sans-3/e5864b32625b6bc3-s.0m7i6b77o5yxd.woff2") format("woff2");
+    unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+    font-family: "Source Sans 3";
+    font-style: normal;
+    font-weight: 200 900;
+    font-display: swap;
+    src: url("/fonts/source-sans-3/e285ad1a914469f0-s.15241mr5-1s6i.woff2") format("woff2");
+    unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+    font-family: "Source Sans 3";
+    font-style: normal;
+    font-weight: 200 900;
+    font-display: swap;
+    src: url("/fonts/source-sans-3/47df9ba1c7236d3b-s.p.137759vg1sbmi.woff2") format("woff2");
+    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+    font-family: "Source Sans 3 Fallback";
+    src: local(Arial);
+    ascent-override: 109.21%;
+    descent-override: 42.66%;
+    line-gap-override: 0%;
+    size-adjust: 93.76%;
+}
+
 @theme {
     --color-primary: #D72F32;
     --color-secondary: #1E1E1E;
-    --font-sans: "Source Sans 3 Variable", sans-serif;
+    --font-sans: "Source Sans 3", "Source Sans 3 Fallback";
 }
 
 @layer base {
+    html,
     body {
         font-family: var(--font-sans);
     }
@@ -45,6 +119,26 @@
         }
     }
 
+    .text-input-root {
+        position: relative;
+        isolation: isolate;
+    }
+
+    .text-input-backdrop {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 0;
+        height: 50%;
+        background-color: #000;
+    }
+
+    .text-input-field {
+        position: relative;
+        z-index: 1;
+    }
+
     .links a {
         @apply text-primary underline;
     }

diff --git a/src/app.d.ts b/src/app.d.ts
@@ -0,0 +1,11 @@
+import type { SharedHead } from '#lib/head.ts';
+
+declare global {
+    namespace App {
+        interface PageData {
+            sharedHead?: SharedHead;
+        }
+    }
+}
+
+export {};
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -0,0 +1,92 @@
+<script lang="ts">
+    import { imageUrl } from '#lib/imageUrl.ts';
+    import type { CmsLink } from '#lib/types.ts';
+    import type { Snippet } from 'svelte';
+
+    interface Props {
+        cmsLink?: CmsLink;
+        url?: string | null;
+        children?: Snippet;
+        class?: string;
+    }
+
+    const buttonClasses = 'button block';
+
+    let { cmsLink, url, children, class: className }: Props = $props();
+
+    const combinedClass = $derived(
+        className ? `${buttonClasses} ${className}` : buttonClasses,
+    );
+
+    const label = $derived(cmsLink?.title ?? '');
+
+    function linkWithQuery(
+        baseUrl: string,
+        queryString?: string | null,
+    ): string {
+        return queryString ? baseUrl + queryString : baseUrl;
+    }
+
+    const resolved = $derived.by(() => {
+        if (cmsLink) {
+            const { route, queryString, target } = cmsLink;
+
+            if (cmsLink.linkType === 'Content' && route?.path) {
+                return {
+                    kind: 'anchor' as const,
+                    href: linkWithQuery(route.path, queryString),
+                    target: target || undefined,
+                };
+            }
+
+            if (cmsLink.linkType === 'External' && cmsLink.url) {
+                return {
+                    kind: 'anchor' as const,
+                    href: linkWithQuery(cmsLink.url, queryString),
+                    target: target || undefined,
+                };
+            }
+
+            if (cmsLink.linkType === 'Media' && cmsLink.url) {
+                return {
+                    kind: 'anchor' as const,
+                    href: imageUrl(linkWithQuery(cmsLink.url, queryString)),
+                    target: target || undefined,
+                };
+            }
+
+            return { kind: 'button' as const };
+        }
+
+        if (!url) {
+            return { kind: 'button' as const };
+        }
+
+        const isExternalUrl =
+            url.startsWith('https://') || url.startsWith('http://');
+
+        return {
+            kind: 'anchor' as const,
+            href: url,
+            target: isExternalUrl ? '_blank' : undefined,
+        };
+    });
+</script>
+
+{#if resolved.kind === 'anchor'}
+    <a class={combinedClass} href={resolved.href} target={resolved.target}>
+        {#if children}
+            {@render children()}
+        {:else}
+            {label}
+        {/if}
+    </a>
+{:else}
+    <button class={combinedClass}>
+        {#if children}
+            {@render children()}
+        {:else}
+            {label}
+        {/if}
+    </button>
+{/if}
diff --git a/src/lib/components/DefaultNav.svelte b/src/lib/components/DefaultNav.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { formatDate } from '#lib/date.ts';
+    import type { ParsedConference } from '#lib/types.ts';
+    import Navigation from './Navigation.svelte';
+
+    interface Props {
+        conference: ParsedConference;
+        params: {
+            conference: string;
+        };
+    }
+
+    let { conference, params }: Props = $props();
+
+    const date = $derived(conference.properties.date);
+</script>
+
+<header>
+    <div class="w-full bg-secondary text-white flex flex-col justify-between">
+        <div class="content-container relative text-center py-14">
+            <img
+                class="max-w-full mx-auto"
+                src="/method-logo.svg"
+                alt="Method Logo"
+            />
+            <h1 class="text-2xl lg:text-5xl lg:font-thin mt-9">
+                <span class="sr-only">Method Conference </span>
+                {date
+                    ? `${formatDate(date, 'EEEE, MMMM do, yyyy')} in `
+                    : ''}Springfield, MO
+            </h1>
+            <p class="text-lg mt-5">
+                An immersive day of code, content, and design
+            </p>
+            <br />
+        </div>
+    </div>
+
+    <Navigation
+        links={[
+            {
+                url: `/${params.conference}/`,
+                title: 'Event Details',
+            },
+            {
+                url: `/${params.conference}/register/`,
+                title: 'Register',
+            },
+        ]}
+    />
+</header>
diff --git a/src/lib/components/FontAwesomeIcon.svelte b/src/lib/components/FontAwesomeIcon.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {
+        icon as renderIcon,
+        type IconDefinition,
+    } from '@fortawesome/fontawesome-svg-core';
+
+    interface Props {
+        icon: IconDefinition;
+        title?: string;
+    }
+
+    let { icon, title }: Props = $props();
+
+    const markup = $derived(renderIcon(icon, { title }).html.join(''));
+</script>
+
+<!-- Trusted static Font Awesome icon HTML from locked @fortawesome packages. -->
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+{@html markup}
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+    import {
+        faInstagram,
+        faLinkedin,
+        faXTwitter,
+        faYoutube,
+    } from '@fortawesome/free-brands-svg-icons';
+    import FontAwesomeIcon from './FontAwesomeIcon.svelte';
+
+    const year = new Date().getFullYear();
+
+    const socialLinks = [
+        {
+            icon: faLinkedin,
+            url: 'https://www.linkedin.com/company/methodconf',
+            title: 'LinkedIn',
+        },
+        {
+            icon: faInstagram,
+            url: 'https://www.instagram.com/methodconference/',
+            title: 'Instagram',
+        },
+        {
+            icon: faXTwitter,
+            url: 'https://twitter.com/methodconf',
+            title: 'X',
+        },
+        {
+            icon: faYoutube,
+            url: 'https://www.youtube.com/c/sgfdevs/videos',
+            title: 'YouTube',
+        },
+    ];
+</script>
+
+<footer
+    class="content-container mx-auto flex justify-between items-center pt-4 pb-8 sm:pt-12 sm:pb-16 flex-col sm:flex-row-reverse"
+>
+    <section class="mb-5 sm:mb-0">
+        <nav class="flex space-x-6" aria-label="Social links">
+            {#each socialLinks as { icon, url, title } (url)}
+                <a
+                    href={url}
+                    target="_blank"
+                    class="text-primary text-lg"
+                    aria-label={title}
+                >
+                    <FontAwesomeIcon {icon} />
+                </a>
+            {/each}
+        </nav>
+    </section>
+
+    <section class="flex items-center flex-col sm:flex-row">
+        <div class="w-16 mb-5 sm:mb-0">
+            <img
+                class="max-w-full mx-auto"
+                src="/sgf-flag.svg"
+                alt="Springfield Flag"
+            />
+        </div>
+        <p class="ml-0 sm:ml-4">
+            We ❤️ Springfield. <span>©{year} Springfield Devs. 501(c)6</span>
+        </p>
+    </section>
+</footer>