Improve blog design

src/components/blog/Headline.astro

@@ -0,0 +1,10 @@
+---
+const { title = await Astro.slots.render('default'), subtitle = await Astro.slots.render('subtitle') } = Astro.props;
+---
+
+<header class="mb-8 md:mb-16 text-center">
+	<h1 class="text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading">
+		{title}
+	</h1>
+	{subtitle && <div class="mt-2 md:mt-3 text-lg md:text-xl max-w-2xl mx-auto" set:html={subtitle} />}
+</header>

src/components/blog/List.astro

@@ -12,7 +12,7 @@ const { posts } = Astro.props;
 <ul>
 	{
 		posts.map((post) => (
-			<li class="mb-10 md:mb-16">
+			<li class="mb-12 md:mb-20">
 				<Item post={post} />
 			</li>
 		))

src/components/blog/ListItem.astro

@@ -23,7 +23,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 	{
 		image && (
 			<a class="relative block group" href={link ?? 'javascript:void(0)'}>
-				<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
+				<div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg">
 					{image && (
 						<Picture
 							src={image}
@@ -40,11 +40,11 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
 	}
 	<div>
 		<header>
-			<h2 class="text-xl sm:text-2xl font-bold leading-snug mb-2 font-heading">
+			<h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading">
 				{
 					link ? (
 						<a
-							class="hover:text-primary-600 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
+							class="hover:text-primary-600 hover:underline hover:underline-offset-4 hover:decoration-1 hover:decoration-dotted transition ease-in duration-200"
 							href={link}
 						>
 							{post.title}

src/components/blog/Title.astro

@@ -1,8 +0,0 @@
----
----
-
-<header>
-	<h1 class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading">
-		<slot />
-	</h1>
-</header>

src/pages/[...blog]/[...page].astro

@@ -3,7 +3,7 @@ import { SITE, BLOG } from '~/config.mjs';
 
 import Layout from '~/layouts/PageLayout.astro';
 import BlogList from '~/components/blog/List.astro';
-import Title from '~/components/blog/Title.astro';
+import Headline from '~/components/blog/Headline.astro';
 import Pagination from '~/components/common/Pagination.astro';
 
 import { fetchPosts } from '~/utils/blog';
@@ -29,8 +29,10 @@ const meta = {
 ---
 
 <Layout {meta}>
-	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
+	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
-		<Title>News and tutorials about AstroWind</Title>
+		<Headline subtitle="A statically generated blog example with news, tutorials, resources and other interesting content related to AstroWind">
+			Blog
+		</Headline>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
 	</section>

src/pages/[...blog]/[category]/[...page].astro

@@ -3,7 +3,7 @@ import { SITE, BLOG } from '~/config.mjs';
 
 import Layout from '~/layouts/PageLayout.astro';
 import BlogList from '~/components/blog/List.astro';
-import Title from '~/components/blog/Title.astro';
+import Headline from '~/components/blog/Headline.astro';
 import Pagination from '~/components/common/Pagination.astro';
 
 import { fetchPosts } from '~/utils/blog';
@@ -42,7 +42,7 @@ const meta = {
 
 <Layout meta={meta}>
 	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		<Title>Category {category}</Title>
+		<Headline>Category {category}</Headline>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
 	</section>

src/pages/[...blog]/[tag]/[...page].astro

@@ -7,7 +7,7 @@ import Pagination from '~/components/common/Pagination.astro';
 
 import { fetchPosts } from '~/utils/blog';
 import { TAG_BASE } from '~/utils/permalinks';
-import Title from '~/components/blog/Title.astro';
+import Headline from '~/components/blog/Headline.astro';
 
 export async function getStaticPaths({ paginate }) {
 	if (BLOG?.disabled || BLOG?.tag?.disabled) return [];
@@ -42,7 +42,7 @@ const meta = {
 
 <Layout meta={meta}>
 	<section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
-		<Title>Tag: {tag}</Title>
+		<Headline>Tag: {tag}</Headline>
 		<BlogList posts={page.data} />
 		<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
 	</section>