improvements to the post layout

_layouts/post.html

@@ -5,18 +5,45 @@ layout: default
 <h1 id='post-title'>{{ page.title }}</h1>
 <main>
 	<article id='post-content'>
-		<section id='post-info'><i class='material-icons'>person</i> By {{ page.author }} <i class='material-icons'>access_time</i> Published {{ page.date | date_to_long_string: "ordinal" }}</section>
+		<section id='post-info'>
+			<i class='material-icons'>person</i> By {{ page.author }} <br>
+			<i class='material-icons'>access_time</i> Published {{ page.date | date_to_long_string: "ordinal" }} <br>
+			<i class='material-icons'>group_work</i> Categories:
+			{{ " " }}{%- for category in page.categories -%}
+			<a href='/categories/{{ category }}'>{{ category }}</a>
+			{%- unless category == page.categories.last %}, {% endunless %}
+			{%- endfor %} <br>
+			<i class='material-icons'>label</i> Tags:
+			{{ " " }}{%- for tag in page.tags -%}
+			<a href='/tags/{{ category }}'>{{ tag }}</a>
+			{%- unless tag == page.tags.last %}, {% endunless %}
+			{%- endfor %}
+		</section>
 		<section id='post-body'>
 			{{ content }}
 		</section>
 		<!-- <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a> -->
 		<hr>
+		<section id='post-related'>
+			<h2 id='related'>Posts like this</h2>
+			<div id='post-related-posts'>
+				{% for post in site.related_posts | limit: 3 -%}
+				<div class='related-post'>
+					<div class='related-title'>{{ post.title }}</div>
+					<p>
+						{% if post.summary %}{{ post.summary }}{% else %}{{ post.excerpt | summarise }}{% endif %}
+					</p>
+					<a href='{{ post.url }}'>Read more</a>
+				</div>
+				{%- endfor %}
+			</div>
+		</section>
 		<section id='post-share'>
-			<h2>Share this post</h2>
+			<h2 id='share'>Share this post</h2>
 			coming soon uwu
 		</section>
 		<section id='post-comments'>
-			<h2>Leave a comment</h2>
+			<h2 id='comments'>Leave a comment</h2>
 			coming soon uwu
 		</section>
 	</article>

assets/style.css

@@ -1,6 +1,7 @@
 body {
 	font-family: "Liberation Sans", "Nimbus Sans", "Arial", "Helvetica", sans-serif;
 	margin: 0;
+	margin-bottom: 20px;
 }
 
 h1 {
@@ -47,25 +48,31 @@ main {
 
 a {
 	color: #222;
-	text-decoration-style: dotted;
+	text-decoration-thickness: 3px;
+	text-decoration-skip-ink: none;
+	text-decoration-color: #9fc;
 }
 h1 a,
-h2 a {
+h2 a,
+nav a {
 	text-decoration: none;
 }
-
 .post h2 {
 	margin-bottom: 5px;
 }
-
 .post-excerpt h2 {
 	display: none;
 }
 
+p, li {
+	line-height: 1.6em;
+}
+
 /* post view */
 
 #post-title {
 	font-family: serif;
+	margin-bottom: 1rem;
 }
 
 #post-content h2 {
@@ -80,29 +87,33 @@ h2 a {
 	color: #333;
 }
 
+.post-nav-link {
+	margin-left: 5px;
+}
+
 /* the content of the posts */
-#post-body {
+#post-body > p {
-	line-height: 1.6em;
+	text-align: justify;
 }
 
 #post-body img {
 	margin: 5px auto;
-	max-width: 800px;
 	display: block;
-	box-shadow: 0 0 10px grey; 
+	/* box-shadow: 0 0 10px grey;  */
+}
+#post-body img,
+#post-body video {
+	max-width: 800px;
 }
 
 #post-body figure.video {
 	text-align: center;
-	display: flex;
-	flex-direction: column;
-	width: min-content;
 	margin: 0 auto;
 	padding: 10px;
+	width: 80%;
 }
 #post-body figure.video video {
-	max-width: max-content;
+	max-width: 100%;
-	margin: 0 auto;
 }
 #post-body figure.video figcaption {
 	font-style: italic;
@@ -140,6 +151,31 @@ h2 a {
 	border: none;
 }
 
+/* related posts */
+
+.related-post {
+	border: thin black solid;
+	border-radius: 2px;
+}
+
+#post-related-posts {
+	display: flex;
+	justify-content: space-between;
+}
+
+.related-post {
+	flex: 1;
+	margin: 5px;
+	padding: 10px;
+}
+
+.related-title {
+	text-align: center;
+	font-family: serif;
+	font-size: 1.3em;
+}
+
+
 /* material icons */
 .material-icons {
 	font-family: 'Material Icons';