Improve post metadata styling

src/_includes/layouts/post-layout.njk

@@ -2,6 +2,18 @@
 layout: layouts/layout.njk
 ---
 
+<div class="postMetadata">
+	<dl class="postDate">
+		<dt>
+			<svg class="icon">
+				<use href="/images/feather-sprite.svg#clock" />
+			</svg>
+			Posted
+		</dt>
+		<dd>
+			{{ page.date.toLocaleDateString("en-US") }}
+		</dd>
+	</dl>
 	<dl class="tags">
 		<dt>
 			<svg class="icon">
@@ -15,5 +27,6 @@ layout: layouts/layout.njk
 			{% endif %}
 		{% endfor %}
 	</dl>
+</div>
 
 {{ content | safe }}

src/_includes/posts-list.njk

@@ -1,12 +1,19 @@
 {% if postsList | filterDrafts | IsNotPage(page.url) | length %}
 	{% for post in postsList | filterDrafts | reverse %}
-		<section>
+		<section class="posts-list-post">
 			<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
-			<div>
+			<div class="postMetadata">
+				<dl class="postDate">
+					<dt>
 						<svg class="icon">
 							<use href="/images/feather-sprite.svg#clock" />
 						</svg>
+						Posted
+					</dt>
+					<dd>
 						{{ post.date.toLocaleDateString("en-US") }}
+					</dd>
+				</dl>
 			</div>
 			<p>{{ post.data.description }}</p>
 		</section>

src/css/Components/_lists.scss

@@ -16,25 +16,3 @@ dl {
 		margin-inline-start: 1em;
 	}
 }
-
-dl.tags {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	dt {
-		display: inline-flex;
-		flex-direction: row;
-		align-items: center;
-		padding: 0.25em 0;
-
-		.icon {
-			font-size: 1.5em;
-			padding-right: 0.3em;
-		}
-
-		&::after {
-			content: ":";
-		}
-	}
-}

src/css/Components/_posts.scss

@@ -0,0 +1,36 @@
+.posts-list-post {
+	margin-bottom: 2rem;
+}
+
+.postMetadata {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 2em;
+
+	font-size: 0.8rem;
+}
+
+dl.postDate, dl.tags {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+
+	margin: 0;
+
+	dt {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		padding: 0.25em 0;
+
+		.icon {
+			font-size: 1.5em;
+			padding-right: 0.3em;
+		}
+
+		&::after {
+			content: ":";
+		}
+	}
+}

src/css/site.scss

@@ -11,3 +11,4 @@
 @use 'Components/_mobile-header';
 @use 'Components/_lists';
 @use 'Components/_code';
+@use 'Components/_posts';