[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/Card/OverviewCard.astro

@@ -1,27 +1,31 @@
 ---
 import client from "@/data/pocketbase"
+import TagRow from "./TagRow.astro"
+
 const { recipe } = Astro.props;
 
 const headerImage = await client.collection("images").getOne(recipe.images[0])
 const image = await client.files.getURL(headerImage, headerImage.image)
 ---
 
-<div class="relative z-0 flex h-60">
+<div class="relative z-0 flex h-50">
     <img
         class="w-full h-full object-cover rounded-xl"
         src={ image }
     />
 
-    <div class="absolute bottom-0 left-0 w-full p-2 h-25 backdrop-filter backdrop-blur-lg rounded-b-xl">
-        <p class="text-[14pt] text-white opacity-90 font-bold" >{recipe.name}</p>
-        <p class="text-white text-[10pt]"> {recipe.description} </p>
+    <div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
+        <p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
+        <!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
 
-        <div class="flex flex-row">
-            {recipe.tags.map(async tag => (
-                <p class="text-white bg-white/20 px-2 mr-2 mt-2 rounded-md">{ 
-                    (await client.collection("tags").getOne(tag)).name
-                }</p>
-            ))}
+        <div id="tag-row" class="">
+            <TagRow tagIds={recipe.tags}/>
         </div>
     </div>
+
+    <a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
+        <span class="block w-full h-full hover:bg-black/10 transition-colors">
+        </span>
+    </a>
+    
 </div>