From 1b355c869615f74b6a926fd5a3d4b71cce5a9600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yannik=20R=C3=B6del?= <hey@yannik.info>
Date: Mon, 21 Mar 2022 16:45:02 +0100
Subject: [PATCH] Complete basic post styling

---
 src/includes/layouts/post.njk      | 19 ++-------
 src/styles/components/_markup.scss | 64 ++++++++++++++++--------------
 2 files changed, 38 insertions(+), 45 deletions(-)

diff --git a/src/includes/layouts/post.njk b/src/includes/layouts/post.njk
index c7de72f..25a3fc5 100644
--- a/src/includes/layouts/post.njk
+++ b/src/includes/layouts/post.njk
@@ -1,23 +1,10 @@
 ---
 layout: layouts/base.njk
-templateClass: tmpl-post
 ---
 <h1>{{ title }}</h1>
 
-<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
-{%- for tag in tags | filterTagList -%}
-{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}
-<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
-{%- endfor %}
+<p class="post-metadata">
+	<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
+</p>
 
 {{ content | safe }}
-
-{%- set nextPost = collections.posts | getNextCollectionItem(page) %}
-{%- set previousPost = collections.posts | getPreviousCollectionItem(page) %}
-{%- if nextPost or previousPost %}
-<hr>
-<ul>
-	{%- if nextPost %}<li>Next: <a href="{{ nextPost.url | url }}">{{ nextPost.data.title }}</a></li>{% endif %}
-	{%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
-</ul>
-{%- endif %}
diff --git a/src/styles/components/_markup.scss b/src/styles/components/_markup.scss
index 3eeceb4..a24563c 100644
--- a/src/styles/components/_markup.scss
+++ b/src/styles/components/_markup.scss
@@ -154,41 +154,47 @@ ul.link-grid {
 }
 
 .post-list {
-  @extend %content-gutter;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: layout.$normal-gap;
-  margin-top: layout.$huge-gap;
-  margin-bottom: layout.$huge-gap;
+	@extend %content-gutter;
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: layout.$normal-gap;
+	margin-top: layout.$huge-gap;
+	margin-bottom: layout.$huge-gap;
 }
 
 :any-link.post-card {
-  display: inline-block;
-  padding-left: layout.$normal-gap;
-  padding-right: layout.$normal-gap;
-  text-decoration: none;
-  transition: background-color motion.$subtle, color motion.$subtle, box-shadow motion.$subtle;
+	display: inline-block;
+	padding-left: layout.$normal-gap;
+	padding-right: layout.$normal-gap;
+	text-decoration: none;
+	transition: background-color motion.$subtle, color motion.$subtle,
+		box-shadow motion.$subtle;
 
-  &:hover {
-    @include colors.card-shadow;
-    background-color: colors.$yellow-300;
-    color: colors.$blue-800;
-  }
+	&:hover {
+		@include colors.card-shadow;
+		background-color: colors.$yellow-300;
+		color: colors.$blue-800;
+	}
 
-  > h2 {
-    @extend %subheading;
+	> h2 {
+		@extend %subheading;
 
-    &::after {
-      display: none;
-    }
+		&::after {
+			display: none;
+		}
 
-    + time {
-      margin-top: -1 * layout.$normal-gap;
-    }
-  }
+		+ time {
+			margin-top: -1 * layout.$normal-gap;
+		}
+	}
 
-  > time {
-    display: block;
-    color: colors.$gray-600;
-  }
+	> time {
+		display: block;
+		color: colors.$gray-600;
+	}
+}
+
+.post-metadata {
+	text-align: center;
+	color: colors.$blue-800;
 }