[PIE-8] Add recipe detail view And Other Major Changes (!6)

- Adds /recipe/:id page
- (Almost!) fully designed and functional recipe view
- Has steps, images, ingredients, peripheral info (work/wait time, rating, description, servings)
- New colour scheme! Much more monotone but in a nice way (imo)
- New font, not condensed
- Several more smaller design changes
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

src/components/Detail/IngredientTableView.astro

@@ -0,0 +1,42 @@
+---
+// const { ingredients } = Astro.props
+
+const { class: className, ingredients } = Astro.props
+---
+
+<!-- <div class=`bg-[#2a2b2c] rounded-lg grid grid-cols-3 text-center ${className}`>
+    <span class="font-bold">Quantity</span>
+    <span class="font-bold">Unit</span>
+    <span class="font-bold">Food</span>
+    {
+        ingredients.map(ing => (
+            <span>{ing.quantity}</span>
+            <span>{ing.unit}</span>
+            <span>{ing.name}</span>
+        ))
+    }
+
+</div> -->
+
+<table class={`table-auto text-left bg-[#2a2b2c] rounded-lg ${className} w-full`}>
+    <thead>
+        <tr>
+            <th class="px-4 py-2">Quantity</th>
+            <th class="px-4 py-2">Unit</th>
+            <th class="px-4 py-2">Food</th>
+        </tr>
+    </thead>
+    <tbody>
+        {
+        ingredients.map(ing => (
+            <>
+                <tr class="border-t border-gray-600">
+                    <td class="px-4 py-2">{ing.quantity}</td>
+                    <td class="px-4 py-2">{ing.unit}</td>
+                    <td class="px-4 py-2">{ing.name}</td>
+                </tr>
+            </>
+        ))
+        }
+    </tbody>
+</table>