From 6df0274c3a10a66e1ef1f2603c4e4d13e9476a13 Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Mon, 4 Mar 2024 06:27:43 +0100
Subject: [PATCH] fix(ui): enhance spacing and layout

---
 src/pages/blog.astro           | 46 +++++++++++++++-------------------
 src/pages/blog/[...slug].astro |  3 +--
 2 files changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 7fa695b..0bc3ac3 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -6,32 +6,26 @@ const allBlogposts = await getCollection('blog');
 ---
 
 <BaseLayout>
-	<div class="container mx-auto space-y-12 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
-		<div class="flex flex-col space-y-4">
-			<div class="text-center text-zinc-900 dark:text-zinc-200">
-				<Heading level={1}>Blog</Heading>
-			</div>
-			<hr class="dark:border-zinc-700/75" />
-			<div class="grid grid-cols-1 gap-12 lg:grid-cols-2">
-				{
-					allBlogposts.map((post) => (
-						<div>
-							<h2 class="mb-2 text-lg font-bold sm:text-xl">
-								<a
-									class="leading-7 text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400"
-									href={`/blog/${post.slug}`}>
-									{post.data.title}
-								</a>
-							</h2>
-							<a
-								class="text-sm font-medium text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300"
-								href={`/blog/${post.slug}`}>
-								Read more
-							</a>
-						</div>
-					))
-				}
-			</div>
+	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
+		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
+			<Heading level={1}>Blog</Heading>
+		</div>
+		<hr class="mb-12 dark:border-zinc-700/75" />
+		<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
+			{
+				allBlogposts.map((post) => (
+					<div class="flex flex-col space-y-4">
+						<h2 class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl">
+							<a href={`/blog/${post.slug}`}>{post.data.title}</a>
+						</h2>
+						<a
+							class="text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300 text-sm font-medium"
+							href={`/blog/${post.slug}`}>
+							Read more
+						</a>
+					</div>
+				))
+			}
 		</div>
 	</div>
 </BaseLayout>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 6714b35..c13c58e 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -23,8 +23,7 @@ const { title } = entry.data;
 ---
 
 <BaseLayout>
-	<div
-		class="prose dark:prose-invert container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
+	<div class="prose dark:prose-invert container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
 		<h1 class="text-4xl font-bold">{title}</h1>
 		<Content components={components} />
 	</div>