[PIE-13] New recipe page (!11)

Add `/recipe/new` path with form to add new recipe
Mostly designed but not fully: steps and ingredients are inputtable with final styling but it cannot be submitted yet, and other crucial components like description, rating, etc are not yet implemented.
Many design changes too cos i couldnt help myself

More additions will certainly be required but this PR is huge so I will split it out into more
Reviewed-on: #11
Co-authored-by: june <self@breadone.net>
Co-committed-by: june <self@breadone.net>

src/components/Detail/StepIngredientSideView.astro

@@ -10,7 +10,7 @@ const ings = await Promise.all(
 
 <div class={className}>
     {ings.map(i => (
-        <div>
+        <div class="text-sm">
             <p>• {i.quantity} {i.unit || " "}  {i.name}</p>
         </div>
     ))}

src/components/Detail/StepView.astro

@@ -3,10 +3,10 @@ import { record } from "astro:schema"
 import client from "@/data/pocketbase"
 import StepIngredientSideView from "./StepIngredientSideView.astro"
 
-const { steps } = Astro.props
+const { steps, class: className } = Astro.props
 ---
 
-<div class="md:ml-5 mt-2 md:mt-0">
+<div class={className}>
     <p class="text-[22pt] font-bold md:hidden">Steps</p>
     { steps.map(s => (
         <div class="bg-[#2a2b2c] rounded-lg mb-2 p-3">
@@ -15,7 +15,7 @@ const { steps } = Astro.props
             <div class="flex flex-col md:flex-row md:items-stretch">
                 <p class="w-full md:flex-2/3 pr-1 text-left">{s.instruction}</p>
                 {s.ingredients && s.ingredients.length > 0 && (
-                    <div class="w-full md:w-auto md:flex-1/3 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
+                    <div class="w-full md:w-auto md:flex-2/5 mt-2 md:mt-0 md:ml-2 md:pl-3 md:border-l text-white/70 border-white/70">
                         <StepIngredientSideView class="text-left" ingredients={s.ingredients} />
                     </div>
                 )}

src/components/Header.astro

@@ -7,8 +7,8 @@
     </a>
 
     <div class="ml-auto space-x-5">
-        <a>new</a>
-        <a>tags</a>
-        <a>search</a>
+        <a class="hover:underline underline-offset-4 "  href="/recipe/new">new</a>
+        <a class="hover:underline underline-offset-4 " >tags</a>
+        <a class="hover:underline underline-offset-4 " >search</a>
     </div>
 </div>