From ba0c0081d5a7e6e213bf536a22d72439c7c50765 Mon Sep 17 00:00:00 2001
From: Neil Brommer <NeilBrommer@users.noreply.github.com>
Date: Mon, 10 Jul 2023 16:31:04 -0700
Subject: [PATCH] Improve spacing

---
 src/_includes/layouts/post-layout.njk | 13 +++++++------
 src/_includes/posts-list.njk          | 13 +++++++------
 src/css/Components/_base.scss         |  2 +-
 src/css/Components/_posts.scss        | 24 ++++++++++++++++--------
 4 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/_includes/layouts/post-layout.njk b/src/_includes/layouts/post-layout.njk
index f035e2d..630de99 100644
--- a/src/_includes/layouts/post-layout.njk
+++ b/src/_includes/layouts/post-layout.njk
@@ -2,8 +2,8 @@
 layout: layouts/layout.njk
 ---
 
-<div class="postMetadata">
-	<dl class="postDate">
+<dl class="postMetadata">
+	<div>
 		<dt>
 			<svg class="icon">
 				<use href="/images/feather-sprite.svg#clock" />
@@ -13,8 +13,9 @@ layout: layouts/layout.njk
 		<dd>
 			{{ page.date.toLocaleDateString("en-US") }}
 		</dd>
-	</dl>
-	<dl class="tags">
+	</div>
+
+	<div>
 		<dt>
 			<svg class="icon">
 				<use href="/images/feather-sprite.svg#tag" />
@@ -26,7 +27,7 @@ layout: layouts/layout.njk
 				<dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd>
 			{% endif %}
 		{% endfor %}
-	</dl>
-</div>
+	</div>
+</dl>
 
 {{ content | safe }}
diff --git a/src/_includes/posts-list.njk b/src/_includes/posts-list.njk
index 0af3bf7..4688aa4 100644
--- a/src/_includes/posts-list.njk
+++ b/src/_includes/posts-list.njk
@@ -2,8 +2,8 @@
 	{% for post in postsList | filterDrafts | reverse %}
 		<section class="posts-list-post">
 			<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
-			<div class="postMetadata">
-				<dl class="postDate">
+			<dl class="postMetadata">
+				<div>
 					<dt>
 						<svg class="icon">
 							<use href="/images/feather-sprite.svg#clock" />
@@ -13,8 +13,9 @@
 					<dd>
 						{{ post.date.toLocaleDateString("en-US") }}
 					</dd>
-				</dl>
-				<dl class="tags">
+				</div>
+
+				<div>
 					<dt>
 						<svg class="icon">
 							<use href="/images/feather-sprite.svg#tag" />
@@ -26,8 +27,8 @@
 							<dd><a href="{{ "/posts/tags/" + (tag | slugify) | url }}">{{ tag }}</a></dd>
 						{% endif %}
 					{% endfor %}
-				</dl>
-			</div>
+				</div>
+			</dl>
 			<p>{{ post.data.description }}</p>
 		</section>
 	{% endfor %}
diff --git a/src/css/Components/_base.scss b/src/css/Components/_base.scss
index 49fdc97..5d76582 100644
--- a/src/css/Components/_base.scss
+++ b/src/css/Components/_base.scss
@@ -24,7 +24,7 @@ body {
 
 	@media (min-width: #{variables.$sidebar-breakpoint}) {
 		display: flex;
-		gap: 2rem;
+		gap: 1rem;
 		justify-content: center;
 	}
 }
diff --git a/src/css/Components/_posts.scss b/src/css/Components/_posts.scss
index 510cb63..d919a19 100644
--- a/src/css/Components/_posts.scss
+++ b/src/css/Components/_posts.scss
@@ -2,21 +2,25 @@
 	margin-bottom: 2rem;
 }
 
+h2 {
+	margin-bottom: 0.15em;
+}
+
 .postMetadata {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	column-gap: 2em;
+	align-items: center;
+	column-gap: 2rem;
 
 	font-size: 0.8rem;
-}
 
-dl.postDate, dl.tags {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	margin: 0;
+	div {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		column-gap: 1em;
+	}
 
 	dt {
 		display: inline-flex;
@@ -33,4 +37,8 @@ dl.postDate, dl.tags {
 			content: ":";
 		}
 	}
+
+	dd {
+		margin: 0;
+	}
 }