updating the layout and look. I might like this

src/app.css

@@ -250,20 +250,26 @@ video {
 
 body {
   min-height: 100vh;
-    padding: 0 1rem;
-    /* background-color:; */
-    /* '3px-tile.png', */
-    /* 'arabesque.png', */
-    /* 'beige-paper.png', */
-    /* 'binding-dark.png', */
-    /* '45-degree-fabric-light.png' */
-    background-image: url("/patterns/arabesque.png"),
-      linear-gradient(
-        var(--gradient-degree),
-        var(--primary-12) 10%,
-        var(--primary-10) 70%
-      );
-    background-attachment: fixed;
-
+  padding: 1rem;
+  /* '3px-tile.png', */
+  /* 'arabesque.png', */
+  /* 'beige-paper.png', */
+  /* 'binding-dark.png', */
+  /* '45-degree-fabric-light.png' */
+  background-image: url("/patterns/arabesque.png"),
+    linear-gradient(
+      var(--gradient-degree),
+      var(--primary-12) 10%,
+      var(--primary-10) 70%
+    );
+  background-attachment: fixed;
+  display: flex;
+  flex-direction: column;
 }
 
+@media screen and (min-width: 640px) {
+  body {
+    display: flex;
+    flex-direction: row;
+  }
+}

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import "../app.css";
+  import sludgeLogo from "$lib/assests/SF26-embroidery.svg";
   interface Props {
     data: {};
     children: any;
@@ -32,11 +33,11 @@
 <nav>
   <a href="/">Sludge</a>
   <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>
-
+<hr />
 <main>
   {@render children()}
 </main>
@@ -47,13 +48,11 @@
     flex-wrap: wrap;
     padding: 0.5rem 0;
     gap: 1rem;
-    justify-content: flex-end;
     text-shadow: 3px 3px 3px var(--secondary-7);
     a {
       font-weight: 700;
       color: var(--secondary-1);
-      line-height: 2rem;
-      font-size: 1.5rem;
+      font-size: 1.25rem;
       line-height: 1.5rem;
       text-decoration: none;
       &:first-child {
@@ -70,8 +69,6 @@
       width: fit-content;
       height: fit-content;
       padding: 0.375rem 0.5rem;
-      margin: auto 0;
-      font-family: "Baskerville";
       font-size: 1.5rem;
       line-height: 1.5rem;
       font-weight: 900;
@@ -82,19 +79,31 @@
     }
   }
 
+  hr {
+    display: none;
+  }
+
   main {
     display: flex;
-    flex-direction: row;
-    // padding: 1rem;
-    justify-content: center;
+    justify-content: start;
+    width: 100%;
   }
 
   @media screen and (min-width: 640px) {
+    hr {
+      display: block;
+      margin: 0 1.5rem;
+      color: var(--secondary-3);
+    }
     nav {
-      padding: 1rem 20%;
-      flex-direction: row;
+      margin-top: 4rem;
+      flex-direction: column;
+      gap: 1.5rem;
+      a {
+        text-align: right;
+      }
       button {
-        margin: 0 auto 0 0;
+        align-self: end;
       }
     }
   }

src/routes/+page.svelte

@@ -29,7 +29,7 @@
 </script>
 
 <section>
-  <h1><b title="Sludge">S</b>&amp;<b title="Friends">F</b></h1>
+  <h1><b title="Sludge">S</b><b title="Friends">F</b></h1>
   <h3>Here we make friends and mistakes</h3>
   <div>
     {#each cards as { href, name, blurb }}
@@ -45,7 +45,8 @@
 
 <style lang="scss">
   section {
-    max-width: 60rem;
+    // max-width: 60rem;
+    width: 100%;
     display: flex;
     gap: 1rem;
     flex-direction: column;
@@ -58,11 +59,11 @@
         color: var(--secondary-3);
       }
       div {
-        background: transparent(var(--secondary-9));
+        background: transparent(var(--secondary-4));
         gap: 0.5rem;
         padding: 0.25rem 1.5rem 2rem 1.5rem;
         border-radius: var(--br);
-        max-width: 40rem;
+        // max-width: 40rem;
       }
     }
     h1 {
@@ -82,7 +83,6 @@
       font-size: 0.75rem;
     }
     h2 {
-      // line-height: 2rem;
       font-size: 1.5rem;
       color: inherit;
     }