I did a bunch of stuff. No dev db because that was too hard for me. I got the blag stuff working and figured out the Intials Stuff. I had to build it myself

src/routes/pork/+page.svelte

@@ -21,12 +21,19 @@
   }
   
 </script>
+
+
+<svelte:head>
+  <title>Sludge Farm Pork</title>
+  <meta name="description" content="Please buy some Pork, it tastes good I swear" />
+</svelte:head>
+
 <section>
   <h1><b>F</b>arm Raised Pork</h1>
   <h5>this ain't your grocery store's pork</h5>
   <div id="tui">
     <ol>
-      <li><span>Cut</span><span>Weight</span><span>Stock</span></li>
+      <li><span>Cut</span><span>Weight</span><span class="small">$/#</span><span class="small">Stock</span></li>
       {#each data.pork as {name, raw_cut, preweighed, min_weight, max_weight, stock}}
         {@const price_per_lb = raw_cut ? RAW_COST : PROCESSED_COST}
         <li onmouseenter={change_photo} id={name}>
@@ -34,9 +41,10 @@
           {#if preweighed}
             <span>{min_weight} lb</span>
           {:else}
-            <span>{min_weight} ~ ${max_weight} lbs</span>
+            <span>{min_weight} ~ {max_weight} lbs</span>
           {/if}
-          <span>{stock}</span>
+          <span class="small">{price_per_lb}$</span>
+          <span class="small">{stock}</span>
         </li>
       {/each}
     </ol>
@@ -47,7 +55,10 @@
 <style lang="scss">
   @use '/src/app.scss' as *;
   @use 'sass:color';
+
+
   b{
+    font-family: "Initials";
     font-weight: 100;
   }
   section {
@@ -57,28 +68,26 @@
     align-items: center;
     justify-content: center;
     h1 {
+        font-family: "Initials";
         text-align: center;
         font-size: 2.5rem;
         font-weight: 500;
+        text-shadow: 3px 3px 3px $green;
     }
     h5{
       font-size: 0.75rem;
-      color:transparentize(black, 0.5)
+      color: color.adjust($yellow, $alpha: -0.5)
     }
 
     img {
-      width: 50%;
-      height: fit-content;
-      border-radius: 0.375rem;
-      text-align: center;
-      // min-width: 10rem;
-      // min-height: 10rem;
+      display: none;
     }
 
     #tui{
       display: flex;
       width: 90%;
       font-size: 1rem;
+      gap: 1rem;
 
       ol{
         width: 100%;
@@ -88,54 +97,39 @@
         li{
           display: inherit;
           gap: 1rem;
+          padding-left: 1rem;
           span{
-            flex-basis: 33%;
+            flex-basis: 50%;
+            text-align: center;
+            text-shadow: 3px 3px 3px $green;
+            &.small{
+              flex-basis: 25%;
+            }
+            &:first-child{
+              text-align: left;
+            }
           }
           &:nth-child(2n){
-            background: transparentize(color.to-space($blue, rgb), 0.75);
+            background: color.adjust($blue,  $alpha: -0.75);
           }
           &:not(:first-child):hover{
-            background: transparentize(color.to-space($green, rgb), 0.5);
+            background: color.adjust($green, $alpha: -0.5);
             // background: $green;
           }
         }
       }
     }
+  }
 
-    .list, .used-to-be-div {
-        display: flex;
-        background: $blue;
-        border: 4px solid $green;
-        border-radius: 1rem;
-        flex-direction: column;
-        text-align: center;
-        align-items: center;
-        justify-content: center;
-        gap: 1rem;
-        flex-basis: 30rem;
-        &.list {
-            background: none;
-            flex-direction: row;
-            border: none;
-            flex-wrap: wrap;
-        }
-        h2 {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin: 0;
-        }
-        span {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1rem;
-            margin-bottom: 1rem;
-            p {
-                font-size: 1.25rem;
-                font-weight: 400;
-                margin: 0;
-            }
-        }
+
+  @media screen and (min-width: 640px){
+    img{
+      display: unset!important;
+      width: 50%;
+      height: fit-content;
+      border-radius: 0.375rem;
+      text-align: center;
+      align-self: center;
     }
   }
 </style>