renamed a bunch of photos

fucked up the colors a bunch
hopefully did some good mobile stuff

src/routes/+layout.svelte

@@ -244,9 +244,10 @@
     padding: 1rem;
     gap: 1rem;
     justify-content: flex-end;
-    text-shadow: 3px 3px 3px var(--primary-9);
+    text-shadow: 3px 3px 3px var(--secondary-7);
     a {
       font-weight: 700;
+      color: var(--secondary-4);
       line-height: 2rem;
       font-size: 1.5rem;
       line-height: 1.5rem;
@@ -255,11 +256,11 @@
         margin-right: auto;
       }
       &:hover {
-        color: var(--primary-3);
+        color: var(--secondary-2);
       }
     }
     button {
-      background: var(--primary-8);
+      background: var(--secondary-4);
       border-radius: var(--br);
       border: none;
       width: fit-content;
@@ -270,9 +271,9 @@
       font-size: 1.5rem;
       line-height: 1.5rem;
       font-weight: 900;
-      color: var(--primary-100);
+      color: var(--secondary-5);
       &:hover {
-        background: var(--primary-1);
+        background: var(--secondary-6);
       }
     }
   }
@@ -283,7 +284,7 @@
     padding: 1rem;
   }
 
-  @media screen and (min-width: 600px) {
+  @media screen and (min-width: 640px) {
     nav {
       padding: 1rem 20%;
       flex-direction: row;

src/routes/+page.svelte

@@ -42,10 +42,10 @@
       flex-direction: column;
       gap: 1rem;
       a:hover {
-        color: var(--primary-3);
+        color: var(--secondary-3);
       }
       div {
-        background: var(--primary-8);
+        background: var(--secondary-8);
         padding: 2rem 1.5rem;
         border-radius: var(--br);
         max-width: 40rem;
@@ -56,15 +56,17 @@
       font-size: 1.5rem;
       text-align: center;
       text-justify: center;
+      color: var(--secondary-4);
       b {
         font-family: Initials;
+        color: var(--secondary-3);
         font-weight: 500;
         font-size: 3.5rem;
         padding: 0.5rem;
       }
     }
     h3 {
-      color: var(--primary-9);
+      color: var(--secondary-4);
       font-size: 0.75rem;
     }
     h2 {

src/routes/fest/+page.svelte

@@ -18,11 +18,18 @@
     text-align: center;
     padding-top: 2rem;
     text-shadow: 3px 3px 3px var(--primary-9);
+    a {
+      color: var(--secondary-4);
+      &:hover {
+        color: var(--secondary-2);
+      }
+    }
     h1 {
       font-size: 2rem;
+      color: var(--secondary-4);
     }
     hr {
-      background: var(--primary-4);
+      background: var(--secondary-4);
       border: none;
       height: 0.25rem;
       margin: 2rem 0;
@@ -30,6 +37,9 @@
     }
   }
 
-  @media screen and (min-width: 600px) {
+  @media screen and (min-width: 640px) {
+    section {
+      width: 100%;
+    }
   }
 </style>

src/routes/fest/apply/+page.svelte

@@ -242,15 +242,18 @@
 <style lang="scss">
   section {
     max-width: 50rem;
-    margin: 0 auto;
+    width: 100%;
+    margin: 0.5rem auto;
+    text-align: center;
     div {
+      margin: auto 0.5rem;
       h1 {
+        color: var(--secondary-3);
         font-size: 2rem;
         font-weight: 900;
       }
-      p,
-      li {
-        font-size: 1.15rem;
+      b {
+        color: var(--secondary-2);
       }
     }
     form {
@@ -294,6 +297,7 @@
       padding: 0 1rem 1rem 1rem;
       border-radius: var(--br);
       legend {
+        color: var(--secondary-3);
         font-weight: 900;
         font-size: 1.125rem;
         margin-left: 1rem;
@@ -305,21 +309,24 @@
       }
       label {
         display: flex;
-        gap: 1rem;
+        color: var(--secondary-2);
+        flex-direction: column;
+
         &:has(ul) {
-          flex-direction: column;
+          label {
+            flex-direction: row;
+          }
         }
         p {
-          flex-basis: 50%;
-          text-align: right;
+          color: var(--secondary-2);
         }
         input {
           height: 2rem;
           align-self: center;
+          width: 100%;
         }
         input,
         textarea {
-          flex-basis: 50%;
           background: linear-gradient(
             var(--gradient-degree),
             var(--primary-11),
@@ -343,4 +350,28 @@
       }
     }
   }
+  @media screen and (min-width: 640px) {
+    section {
+      text-align: left;
+      p,
+      li {
+        font-size: 1.15rem;
+      }
+      fieldset {
+        label {
+          flex-direction: row;
+          gap: 1rem;
+          &:has(ul) {
+            flex-direction: column;
+          }
+          p,
+          input,
+          textarea {
+            text-align: right;
+            flex-basis: 50%;
+          }
+        }
+      }
+    }
+  }
 </style>

src/routes/pork/+page.server.ts

@@ -21,7 +21,7 @@ const pork = [
   },
   {
     name: "bacon",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/bacon.jpg",
     cured: true,
     tubed: false,
     lb_package: true,
@@ -35,7 +35,7 @@ const pork = [
   },
   {
     name: "bratwurst",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/bratwursts.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -52,7 +52,7 @@ const pork = [
   },
   {
     name: "rings",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/rings.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -63,7 +63,7 @@ const pork = [
   },
   {
     name: "patties",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/patties.jpg",
     cured: false,
     tubed: false,
     lb_package: true,
@@ -75,7 +75,7 @@ const pork = [
   },
   {
     name: "ham",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/hams.jpg",
     cured: true,
     tubed: false,
     lb_package: false,
@@ -83,63 +83,63 @@ const pork = [
   },
   {
     name: "raw ham",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 15 }
   },
   {
     name: "loin roast",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/loin-roast.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 4 }
   },
   {
     name: "chop",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/chops.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 0.75, max: 1.5 }
   },
   {
     name: "steak",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/steak.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 1.5, max: 3 }
   },
   {
     name: "belly",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 10 }
   },
   {
     name: "spare ribs",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/spare-ribs.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 2, max: 4 }
   },
   {
     name: "butt",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 5 }
   },
   {
     name: "smoked hocks",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/smoked-hocks.jpg",
     cured: true,
     tubed: false,
     avg_weight: { min: 1, max: 2 }
   },
   {
     name: "roast",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/roast.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 4, max: 7 }

src/routes/pork/+page.svelte

@@ -41,7 +41,11 @@
     {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
       <card id={name}>
         <h3>{name}</h3>
-        <img {src} alt="A photo of {name}" />
+        {#if src != undefined}
+          <img {src} alt="A photo of {name}" />
+        {:else}
+          <hr />
+        {/if}
         <div>
           {#if cured}
             <span>Cured!</span>
@@ -82,6 +86,7 @@
   b {
     font-family: "Initials";
     font-weight: 100;
+    color: var(--secondary-5);
   }
 
   section {
@@ -92,6 +97,7 @@
     justify-content: center;
     h1 {
       font-family: "Initials";
+      color: var(--secondary-4);
       text-align: center;
       font-size: 2.5rem;
       font-weight: 500;
@@ -113,7 +119,7 @@
     gap: 1rem;
     width: 100%;
     card {
-      background: var(--primary-9);
+      background: var(--secondary-9);
       border-radius: var(--br);
       padding: 1rem;
       display: flex;
@@ -124,6 +130,12 @@
         width: 100%;
         border-radius: var(--br);
       }
+      hr {
+        height: 1rem;
+        color: var(--secondary-9);
+        border: none;
+        width: 1rem;
+      }
       div {
         display: flex;
         justify-content: space-around;
@@ -132,17 +144,20 @@
       span {
         // font-size: 0.75rem;
         background: var(--primary-5);
+        color: var(--primary-10);
+        font-weight: 900;
         width: fit-content;
         border-radius: var(--br);
         padding: 0.125rem 0.325rem;
       }
       h3 {
         position: absolute;
-        background: var(--primary-9);
+        background: var(--secondary-9);
         border-radius: 0 0 var(--br) 0;
-        padding: 0.125rem 0.325rem;
+        padding: 0.25rem 0.5rem;
         top: 1rem;
         text-transform: capitalize;
+        color: var(--primary-5);
       }
     }