💄 Footer and blog page design tweaks

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>

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>

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;
-	}
-}

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;