update blog index page ui

src/routes/blog/+page.svelte

@@ -46,9 +46,11 @@
 	{/if}
 </div>
 
-{#each data.blogArticles as article (article.slug)}
-	<div class="flex gap-2 px-4">
-		<a href={resolve('/blog/[slug]', { slug: article.slug })}>{article.title}</a>
+<div class="flex flex-col items-center gap-2">
+	{#each data.blogArticles as article (article.slug)}
+		<a href={resolve('/blog/[slug]', { slug: article.slug })}>
+			<div class="flex gap-2 py-2 px-4 border rounded min-w-100">
+				<p class="font-bold text-md">{article.title}</p>
 				{#if data.isAdmin && article.status === 'draft'}
 					<span class="text-xs uppercase text-orange-500">draft</span>
 					<a href={resolve('/blog/[slug]/edit', { slug: article.slug })} class="text-xs underline"
@@ -57,7 +59,9 @@
 				{/if}
 				<p>{article.createdAt?.toDateString()}</p>
 			</div>
-{/each}
+		</a>
+	{/each}
+</div>
 
 {#if createNewArticlePopup}
 	<div class="fixed inset-0 flex items-center justify-center bg-black/40">