[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/pages/index.astro

@@ -7,16 +7,14 @@ const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>	
-	<div id="content" class="p-5 pt-2">
-		<!-- <p class="pb-2">What would you like today?</p> -->
+	<!-- <p class="pb-2">What would you like today?</p> -->
 
-		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
-			{
-				recipies.map(r => (
-					<OverviewCard recipe={r} />
-				))
-			}
-		</div>
+	<div class="grid md:gap-2 gap-3 grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-8">
+		{
+			recipies.map(r => (
+				<OverviewCard recipe={r} />
+			))
+		}
 	</div>
 
 </PageLayout>