doing a clean wipe to touch up the sludge links

I suppose I should do a profile here.

src/routes/pork/+page.svelte

@@ -1,41 +1,47 @@
 <script lang="ts">
-  import { RAW_COST, PROCESSED_COST } from '$lib/index';
+  import { RAW_COST, PROCESSED_COST } from "$lib/index";
+  import type { MouseEventHandler } from "svelte/elements";
   let { data } = $props<{ data: { pork: Pork[] } }>();
   interface Pork {
     pork: {
-        name: string;
-        min_weight: number;
-        max_weight: number;
-        stock: number;
-        raw_cut: boolean;
-        id: number;
-        preweighed: boolean;
+      name: string;
+      min_weight: number;
+      max_weight: number;
+      stock: number;
+      raw_cut: boolean;
+      id: number;
+      preweighed: boolean;
     };
   }
 
-  let selected = $state("Chop")
+  let selected = $state("Chop");
+  const PRICE_PER_LB = 6;
 
-  function change_photo({target:{id}}){
-    console.log(id)
-    selected = id
+  function change_photo({ target: { id } }) {
+    console.log(id);
+    selected = id;
   }
-  
 </script>
 
-
 <svelte:head>
   <title>Sludge Farm Pork</title>
-  <meta name="description" content="Please buy some Pork, it tastes good I swear" />
+  <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>
+  <h5>All priced at {PRICE_PER_LB}$/#</h5>
   <div id="tui">
     <ol>
-      <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>
+        <span>Cut</span>
+        <span>Weight</span>
+      </li>
+      {#each data.pork as { name, preweighed, min_weight, max_weight }}
         <li onmouseenter={change_photo} id={name}>
           <span>{name}</span>
           {#if preweighed}
@@ -43,24 +49,22 @@
           {:else}
             <span>{min_weight} ~ {max_weight} lbs</span>
           {/if}
-          <span class="small">{price_per_lb}$</span>
-          <span class="small">{stock}</span>
         </li>
       {/each}
     </ol>
-    <img src={`/pork/${selected.replace(' ', '_')}.jpg`} alt={`Image of a ${selected}`} />
+    <img
+      src={`/pork/${selected.replace(" ", "_")}.jpg`}
+      alt={`Image of a ${selected}`}
+    />
   </div>
 </section>
 
 <style lang="scss">
-  @use '/src/app.scss' as *;
-  @use 'sass:color';
-
-
-  b{
+  b {
     font-family: "Initials";
     font-weight: 100;
   }
+
   section {
     width: 100%;
     display: flex;
@@ -68,63 +72,61 @@
     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;
+      font-family: "Initials";
+      text-align: center;
+      font-size: 2.5rem;
+      font-weight: 500;
+      text-shadow: 3px 3px 3px var(--primary-8);
     }
-    h5{
+    h5 {
       font-size: 0.75rem;
-      color: color.adjust($yellow, $alpha: -0.5)
+      color: var(--primary-8);
     }
 
     img {
       display: none;
     }
 
-    #tui{
+    #tui {
       display: flex;
       width: 90%;
       font-size: 1rem;
       gap: 1rem;
 
-      ol{
+      ol {
         width: 100%;
         display: inherit;
         flex-direction: column;
         list-style: none;
-        li{
+        li {
           display: inherit;
           gap: 1rem;
           padding-left: 1rem;
-          span{
+          span {
             flex-basis: 50%;
             text-align: center;
-            text-shadow: 3px 3px 3px $green;
-            &.small{
+            text-shadow: 3px 3px 3px var(--primary-7);
+            &.small {
               flex-basis: 25%;
             }
-            &:first-child{
+            &:first-child {
               text-align: left;
             }
           }
-          &:nth-child(2n){
-            background: color.adjust($blue,  $alpha: -0.75);
+          &:nth-child(2n) {
+            background: var(--primary-8);
           }
-          &:not(:first-child):hover{
-            background: color.adjust($green, $alpha: -0.5);
-            // background: $green;
+          &:not(:first-child):hover {
+            background: var(--primary-10);
           }
         }
       }
     }
   }
 
-
-  @media screen and (min-width: 640px){
-    img{
-      display: unset!important;
+  @media screen and (min-width: 640px) {
+    img {
+      display: unset !important;
       width: 50%;
       height: fit-content;
       border-radius: 0.375rem;
@@ -132,4 +134,5 @@
       align-self: center;
     }
   }
-</style>
+</style>
+