From 4a27de63711f35d45c1baddef9e4da75877e0311 Mon Sep 17 00:00:00 2001
From: wires <benaultowski@proton.me>
Date: Tue, 12 May 2026 02:55:42 -0400
Subject: [PATCH] Import Theme

---
 src/pages/Squash.svelte | 48 -------------------------------
 src/pages/bounce.svelte | 63 -----------------------------------------
 src/pages/index.astro   | 26 +++++++++++------
 3 files changed, 18 insertions(+), 119 deletions(-)
 delete mode 100644 src/pages/Squash.svelte
 delete mode 100644 src/pages/bounce.svelte

diff --git a/src/pages/Squash.svelte b/src/pages/Squash.svelte
deleted file mode 100644
index a8f6039..0000000
--- a/src/pages/Squash.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-  import ScrollerSquash from '@components/ScrollerAnimate/ScrollerAnimate.svelte';
-
-  // Types
-  import type {
-    ContainerWidth,
-    ForegroundPosition,
-  } from '@components/@types/global';
-  
-  type Graphic = {
-    src: string;
-    srcset: string;
-    alt: string;
-    title?: string;
-    description?: string;
-    notes?: string;
-    width?: ContainerWidth;
-  };
-  
-  interface Props {
-    graphics: Graphic[];
-    /** Duration of the animation, milliseconds **/
-    animationDuration?: number;
-    /** The moment when the animation is at its peak.
-     ** It is here that we transition between steps and swap the graphic. 0-1 **/
-    animationPeak?: number;
-    /** Width of the background */
-    backgroundWidth?: ContainerWidth;
-    /** Position of the foreground */
-    foregroundPosition?: ForegroundPosition;
-  }
-
-  let { 
-    graphics, 
-    backgroundWidth = 'fluid',
-    foregroundPosition = 'middle',
-    animationDuration = 350, 
-    animationPeak = 0.8, 
-  }: Props = $props();
-</script>
-
-<ScrollerSquash 
-  {graphics} 
-  {animationDuration}
-  {animationPeak}
-  {backgroundWidth}
-  {foregroundPosition}
-/>
\ No newline at end of file
diff --git a/src/pages/bounce.svelte b/src/pages/bounce.svelte
deleted file mode 100644
index 4d5c5e7..0000000
--- a/src/pages/bounce.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-
-<h1>Proving Ground, Squashy</h1>
-<br />
-<div class="shapes">
-    <div class="box" bind:this={box}>
-  </div>
-  <button on:click={restart}>Restart animation</button>
-</div>
-
-<script>
-        let box;
-
-        const restart = () => {
-        if (!box) return;
-
-        box.style.animation = "none";
-        box.offsetHeight;
-        box.style.animation = null;
-        };
-</script>
-
-
-<style>
-/**    :global(body) {
-    padding: 16px;
-    }
-**/
-    .box {
-    background: transparent;
-    border: 2px solid hotpink;
-    border-radius: 10px;
-    aspect-ratio: 1;
-    width: 150px;
-    animation: squash 1s ease forwards 1;
-    transform-origin: bottom;
-    }
-
-    @keyframes squash {
-    0% {
-        scale: 1;
-        translate: 0;
-        transform-origin: bottom;
-    }
-
-    50% {
-        scale: 0.8 1.2;
-        translate: 0 -2px;
-        transform-origin: bottom;
-    }
-
-    80% {
-        scale: 1.4 0.6;
-        translate: 0 -2px;
-    }
-
-    100% {
-        transform-origin: bottom;
-        scale: 1;
-        translate: 0 -50px;
-    }
-    }
-
-</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index afb321a..90fa205 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,6 +5,7 @@ import ScrollerAnimate from '@components/ScrollerAnimate/ScrollerAnimate.svelte'
 import Article from '@components/Article/Article.svelte';
 import BodyText from '@components/BodyText/BodyText.svelte';
 import Headline from '@components/Headline/Headline.svelte';
+import Theme from '@components/Theme/Theme.svelte';
 
 import graphicOne from '../assets/Photo-3468.jpg';
 import graphicTwo from '../assets/Photo-3471.jpg';
@@ -30,12 +31,21 @@ const graphics = await Promise.all([
 ---
 
 <Layout>
-  <Headline
-    hed={'Unfriendly skies'}
-  />
-  <Article>
-    <BodyText text="Cras eu consectetur justo, eu luctus felis. Suspendisse lectus enim, bibendum vitae euismod et, condimentum quis tortor. Donec sit amet orci nibh. Vivamus facilisis nunc quis nunc feugiat placerat. Nunc ut augue vitae metus fermentum venenatis vel at dui. Nulla aliquet nibh porttitor odio imperdiet, in ullamcorper augue bibendum. Cras ornare nunc ut sollicitudin egestas. Suspendisse neque ipsum, faucibus eu hendrerit porttitor, tincidunt a tortor. Aliquam at facilisis diam, a ullamcorper lacus. Suspendisse pharetra faucibus venenatis. Donec efficitur condimentum neque ut vehicula." />
-    <ScrollerAnimate client:only="svelte" {graphics} backgroundWidth="normal" />
-    <BodyText text="Sed feugiat, lacus id elementum tristique, urna elit consectetur mauris, in commodo ipsum neque sed turpis. Ut elit ex, pharetra laoreet leo vitae, rhoncus condimentum ligula. Morbi et sagittis tellus. Proin sed felis euismod ipsum lacinia feugiat. Donec finibus pretium dignissim. Integer ornare egestas scelerisque. Donec purus elit, viverra vitae felis at, volutpat sollicitudin tellus. Vivamus fermentum dictum dapibus. Phasellus non ligula ac augue efficitur ultrices sit amet at quam. Fusce dapibus luctus ex, non semper massa commodo eget." />
-  </Article>
+  <Theme>
+    <Headline
+      hed={'Proving Ground'}
+      dek="Hello, there!"
+      hedSize="bigger"
+    />
+    <Article>
+      <BodyText text="Cras eu consectetur justo, eu luctus felis. Suspendisse lectus enim, bibendum vitae euismod et, condimentum quis tortor. Donec sit amet orci nibh. Vivamus facilisis nunc quis nunc feugiat placerat. Nunc ut augue vitae metus fermentum venenatis vel at dui. Nulla aliquet nibh porttitor odio imperdiet, in ullamcorper augue bibendum. Cras ornare nunc ut sollicitudin egestas. Suspendisse neque ipsum, faucibus eu hendrerit porttitor, tincidunt a tortor. Aliquam at facilisis diam, a ullamcorper lacus. Suspendisse pharetra faucibus venenatis. Donec efficitur condimentum neque ut vehicula." />
+      <ScrollerAnimate
+        client:only="svelte"
+        {graphics}
+        
+        backgroundWidth="normal"
+      />
+      <BodyText text="Sed feugiat, lacus id elementum tristique, urna elit consectetur mauris, in commodo ipsum neque sed turpis. Ut elit ex, pharetra laoreet leo vitae, rhoncus condimentum ligula. Morbi et sagittis tellus. Proin sed felis euismod ipsum lacinia feugiat. Donec finibus pretium dignissim. Integer ornare egestas scelerisque. Donec purus elit, viverra vitae felis at, volutpat sollicitudin tellus. Vivamus fermentum dictum dapibus. Phasellus non ligula ac augue efficitur ultrices sit amet at quam. Fusce dapibus luctus ex, non semper massa commodo eget." />
+    </Article>
+  </Theme>
 </Layout>