Standardize header and subtitle styling across all pages

- Replace Posts page custom styles with Tailwind classes matching other pages
- Use consistent text-4xl md:text-5xl font-light for all h1 headers
- Use consistent text-xl text-gray-600 mb-16 font-light leading-relaxed for subtitles
- Remove duplicate padding from About, Contact, and Resources pages
- All pages now have uniform, elegant light typography

Amp-Thread-ID: https://ampcode.com/threads/T-f2ee7636-9f82-4ca0-a96e-321ffd778fb5
Co-authored-by: Amp <amp@ampcode.com>

Author: colmarius

src/pages/about.astro

@@ -7,7 +7,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="About – Marius Colacioiu">
-  <div class="max-w-4xl mx-auto px-6 py-16">
+  <div class="max-w-4xl mx-auto">
     <h1 class="text-4xl md:text-5xl font-light mb-4 text-gray-900">
       About
     </h1>

src/pages/contact.astro

@@ -4,7 +4,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="Contact – Marius Colacioiu">
-  <div class="max-w-4xl mx-auto px-6 py-16">
+  <div class="max-w-4xl mx-auto">
     <h1 class="text-4xl md:text-5xl font-light mb-4 text-gray-900">
       Contact
     </h1>

src/pages/posts/index.astro

@@ -15,8 +15,8 @@ const sortedPosts = posts.sort((a, b) => a.data.order - b.data.order);
 <Layout title="Posts - Marius Colacioiu">
 	<div class="posts-container">
 		<header class="posts-header">
-			<h1>Posts</h1>
-			<p class="posts-description">
+			<h1 class="text-4xl md:text-5xl font-light mb-4 text-gray-900">Posts</h1>
+			<p class="text-xl text-gray-600 mb-16 font-light leading-relaxed">
 				Thoughts on coding, AI agents, and software engineering.
 			</p>
 		</header>
@@ -58,19 +58,6 @@ const sortedPosts = posts.sort((a, b) => a.data.order - b.data.order);
 		margin-bottom: 3rem;
 	}
 
-	.posts-header h1 {
-		font-size: 3rem;
-		font-weight: 700;
-		margin-bottom: 1rem;
-		color: #111827;
-	}
-
-	.posts-description {
-		font-size: 1.25rem;
-		color: #6b7280;
-		line-height: 1.6;
-	}
-
 	.posts-list {
 		display: flex;
 		flex-direction: column;
@@ -150,14 +137,6 @@ const sortedPosts = posts.sort((a, b) => a.data.order - b.data.order);
 	}
 
 	@media (max-width: 640px) {
-		.posts-header h1 {
-			font-size: 2.5rem;
-		}
-
-		.posts-description {
-			font-size: 1.125rem;
-		}
-
 		.post-card h2 {
 			font-size: 1.25rem;
 		}

src/pages/resources/books.astro

@@ -5,7 +5,7 @@ import Layout from '../../layouts/Layout.astro';
 ---
 
 <Layout title="Marius Colacioiu – Resources – Books">
-  <div class="max-w-4xl mx-auto px-6 py-16">
+  <div class="max-w-4xl mx-auto">
     <ResourcesNav active="books" />
 
     <h1 class="text-3xl md:text-4xl font-light mb-4 text-gray-900">

src/pages/resources/coding-with-agents.astro

@@ -16,7 +16,7 @@ const manifest = entries.map((e) => ({
 ---
 
 <Layout title="Marius Colacioiu – Resources – Coding with Agents">
-  <div class="max-w-4xl mx-auto px-6 py-16">
+  <div class="max-w-4xl mx-auto">
     <ResourcesNav active="coding-with-agents" />
 
     <h1 class="text-3xl md:text-4xl font-light mb-4 text-gray-900">

src/pages/resources/index.astro

@@ -7,7 +7,7 @@ import Layout from '../../layouts/Layout.astro';
 ---
 
 <Layout title="Marius Colacioiu – Resources">
-  <div class="max-w-5xl mx-auto px-6 py-16">
+  <div class="max-w-5xl mx-auto">
     <h1 class="text-4xl md:text-5xl font-light mb-4 text-gray-900">
       Resources
     </h1>

src/pages/resources/newsletters.astro

@@ -5,7 +5,7 @@ import Layout from '../../layouts/Layout.astro';
 ---
 
 <Layout title="Marius Colacioiu – Resources – Newsletters">
-  <div class="max-w-4xl mx-auto px-6 py-16">
+  <div class="max-w-4xl mx-auto">
     <ResourcesNav active="newsletters" />
 
     <h1 class="text-3xl md:text-4xl font-light mb-4 text-gray-900">