renamed a bunch of photos

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

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);
       }
     }