update main page and layout with transparency and shirts

src/routes/+layout.svelte

@@ -29,8 +29,9 @@
 <div id="buddy">
   <nav>
     <a href="/">Sludge</a>
-    <button onclick={change_theme}>&#127752;</button>
+    <button onclick={change_theme}>&#127922&#127752;</button>
-    <a href="/fest">Fest</a>
+    <!-- <a href="/fest">Fest</a> -->
+    <a href="/shirts">Shirts</a>
     <a href="/pork">Pork</a>
   </nav>
 
@@ -41,7 +42,6 @@
 
 <style lang="scss">
   :root {
-    --green-42: oklch(0.42 0.042 142);
     --br: 0.375rem;
     --bs: 2px 2px 9px var(--primary-8);
 
@@ -230,7 +230,7 @@
       border: 0;
       font-size: 100%;
       // font: inherit;
-      color: var(--primary-2);
+      color: var(--primary-1);
       font-family: "Garamond", serif;
       font-size-adjust: 0.75;
       vertical-align: baseline;
@@ -247,7 +247,7 @@
     text-shadow: 3px 3px 3px var(--secondary-7);
     a {
       font-weight: 700;
-      color: var(--secondary-4);
+      color: var(--secondary-1);
       line-height: 2rem;
       font-size: 1.5rem;
       line-height: 1.5rem;
@@ -256,11 +256,11 @@
         margin-right: auto;
       }
       &:hover {
-        color: var(--secondary-2);
+        color: var(--secondary-3);
       }
     }
     button {
-      background: var(--secondary-4);
+      background: transparent(var(--secondary-5));
       border-radius: var(--br);
       border: none;
       width: fit-content;
@@ -282,6 +282,7 @@
     display: flex;
     flex-direction: row;
     padding: 1rem;
+    justify-content: center;
   }
 
   @media screen and (min-width: 640px) {

src/routes/+page.svelte

@@ -1,40 +1,53 @@
 <script lang="ts">
   // let { data, form } = $props<{ html: string }>();
+  const cards = [
+    {
+      href: "/shirts",
+      name: "Shirts",
+      blurb:
+        "Enough people told me they wanted these that I decided to make an order form",
+    },
+    {
+      href: "/fest",
+      name: "Sludge Fest",
+      blurb:
+        "Sludge Fest is a homegrown music festival of friends, fanfare and fuckery; come, join us for a fun weekend out. Make some mates and memories",
+    },
+    {
+      href: "/pork",
+      name: "Pork",
+      blurb:
+        "I made the mistake of getting hogs that are better at their job than I am so please take some of it off my hands",
+    },
+    {
+      href: "https://plotters.sludge.link",
+      name: "Plotters",
+      blurb:
+        "This is a game we slapped together to see if we can agree on things. Its definitely not the same as some of those other games",
+    },
+  ];
 </script>
 
 <section>
   <h1><b title="Sludge">S</b>&amp;<b title="Friends">F</b></h1>
   <h3>Here we make friends and mistakes</h3>
   <div>
-    <div>
+    {#each cards as { href, name, blurb }}
-      <a href="/fest"><h2>Sludge Fest</h2></a>
+      <div>
-      <p>
+        <a {href}><h2>{name}</h2></a>
-        Sludge Fest is a homegrown music festival of friends and fuckery; come
+        <p>
-        join us for a fun weekend out and make some memories
+          {blurb}
-      </p>
+        </p>
-    </div>
+      </div>
-    <div>
+    {/each}
-      <a href="/pork"><h2>Pork</h2></a>
-      <p>
-        I made the mistake of getting hogs that are better at their job than I
-        am so please take some of it off my hands
-      </p>
-    </div>
-    <div>
-      <a href="https://plotters.sludge.link"><h2>Plotters</h2></a>
-      <p>
-        This is a game we slapped together to see if we can agree on things. Its
-        definitely not the same as some of those other games
-      </p>
-    </div>
   </div>
 </section>
 
 <style lang="scss">
   section {
     max-width: 60rem;
-    margin: 1rem auto;
     display: flex;
+    gap: 1rem;
     flex-direction: column;
     align-items: center;
     div {
@@ -45,28 +58,27 @@
         color: var(--secondary-3);
       }
       div {
-        background: var(--secondary-8);
+        background: transparent(var(--secondary-9));
-        padding: 2rem 1.5rem;
+        gap: 0.5rem;
+        padding: 0.25rem 1.5rem 2rem 1.5rem;
         border-radius: var(--br);
         max-width: 40rem;
       }
     }
     h1 {
-      line-height: 5rem;
       font-size: 1.5rem;
       text-align: center;
-      text-justify: center;
+      color: var(--secondary-3);
-      color: var(--secondary-4);
       b {
         font-family: Initials;
-        color: var(--secondary-3);
+        color: inherit;
         font-weight: 500;
         font-size: 3.5rem;
         padding: 0.5rem;
       }
     }
     h3 {
-      color: var(--secondary-4);
+      color: transparent(var(--secondary-2), 65%);
       font-size: 0.75rem;
     }
     h2 {