From 81a3a5c6629532aebfa3c15767b3d3ca8e86027f Mon Sep 17 00:00:00 2001
From: Graham Hall <graham@ghall.dev>
Date: Sun, 31 Aug 2025 11:35:32 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Footer=20and=20blog=20page=20des?=
 =?UTF-8?q?ign=20tweaks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.astro      | 41 ++++++++++++++++++++++++++------
 src/components/PostPreview.astro | 11 +++++++++
 src/global.css                   | 14 -----------
 src/pages/blog/index.astro       |  4 ++--
 4 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index ad7045c..34791ad 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,30 +1,57 @@
 ---
 import RssIcon from '../assets/svg/rss.svg';
+import MastodonIcon from '../assets/svg/mastodon.svg';
+
 const year = new Date().getFullYear();
 ---
 
 <footer>
+	<div class="socials">
+		<a href="https://mastodon.social/@ghalldev" target="_blank"
+			><MastodonIcon class="mastodon-icon" width={20} height={20} /> Follow me on
+			Mastodon</a
+		>
+
+		<a href="/rss.xml"
+			><RssIcon class="rss-icon" width={20} height={20} /> Subscribe with RSS</a
+		>
+	</div>
 	<p>
 		Copyright 2022 - {year}, Graham Hall
 
 		<br />
 		Built with <a href="https://astro.build">Astro</a>
 	</p>
-
-	<p>
-		<a href="/rss.xml"
-			><RssIcon class="rss-icon" width={20} height={20} /> Subscribe with RSS</a
-		>
-	</p>
 </footer>
 
 <style>
 	footer {
-		margin: 4rem 0;
+		margin: 2rem 0;
 		text-align: center;
+		border-top: var(--border);
+		padding-top: 24px;
 	}
 
 	.rss-icon {
 		transform: translateY(0.18rem);
 	}
+
+	.socials {
+		display: flex;
+		gap: 24px;
+		justify-content: center;
+	}
+
+	.socials a {
+		color: var(--text);
+	}
+
+	.rss-icon {
+		color: var(--orange);
+	}
+
+	.mastodon-icon {
+		color: var(--blue);
+		transform: translateY(4px);
+	}
 </style>
diff --git a/src/components/PostPreview.astro b/src/components/PostPreview.astro
index eb21989..46ef391 100644
--- a/src/components/PostPreview.astro
+++ b/src/components/PostPreview.astro
@@ -23,3 +23,14 @@ const { data, slug } = post;
 	<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
 	<Tags tags={data.tags} />
 </article>
+
+<style>
+	article {
+		padding-bottom: 20px;
+	}
+
+	article:not(:first-child) {
+		border-top: var(--border);
+		padding-top: 20px;
+	}
+</style>
diff --git a/src/global.css b/src/global.css
index 492f29d..18ebae0 100644
--- a/src/global.css
+++ b/src/global.css
@@ -82,14 +82,6 @@ article img {
 	display: inline;
 }
 
-.blog-header {
-	margin: 1rem 0;
-}
-
-.blog-header > h2 {
-	margin: 0;
-}
-
 blockquote {
 	border-left: 4px solid;
 	border-color: var(--text);
@@ -118,9 +110,3 @@ kbd {
 	font-size: 0.85rem;
 	white-space: nowrap;
 }
-
-@media (max-width: 590px) {
-	header {
-		flex-direction: column;
-	}
-}
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 2961021..d33bdd1 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -20,7 +20,7 @@ const posts = await getCollection('blog');
 	}
 	{
 		posts.length < 6 ? null : (
-			<div class="more-posts">
+			<div class="all-posts">
 				<a href="/blog/archive/all">All Posts</a>
 			</div>
 		)
@@ -28,7 +28,7 @@ const posts = await getCollection('blog');
 </Layout>
 
 <style>
-	.more-posts {
+	.all-posts {
 		text-align: center;
 		padding: 1rem;
 		font-size: 1.2rem;