src/pages/index.astro

@@ -7,16 +7,18 @@ const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>
-	<p class="text-3xl font-medium">Recipie</p>
+	<p class="w-full bg-yellow-100 p-5 text-3xl pb-4 font-medium">Recipie</p>
 	
-	What would you like today?
+	<div id="content" class="p-5">
+		<p class="pb-2">What would you like today?</p>
 
-	<div class="grid md:gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-		{
-			recipies.map(r => (
-				<OverviewCard recipe={r} />
-			))
-		}
+		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+			{
+				recipies.map(r => (
+					<OverviewCard recipe={r} />
+				))
+			}
+		</div>
 	</div>
 
 </PageLayout>

src/styles/global.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 
 html {
-    @apply bg-white;
-    @apply p-5;
+    @apply bg-yellow-50;
 }