Add related articles

assets/css/style.scss

@@ -581,13 +581,18 @@ select {
 	}
 }
 
+@mixin subarticle-element {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	margin-bottom: 10px;
+	@include color-border(border-top, 1px, dotted, border);
+	@include color-border(border-bottom, 1px, dotted, border);
+}
+
 /* Authorbox */
 .authorbox {
-	padding: 25px 0;
-	margin-bottom: 25px;
+	@include subarticle-element;
 	line-height: 1.5;
-	@include color-border(border-top, 1px, solid, border);
-	@include color-border(border-bottom, 1px, solid, border);
 	display: block;
 	@media screen and (max-width: $break1) {
 		text-align: center;
@@ -596,6 +601,7 @@ select {
 		margin-bottom: 10px;
 	}
 	.author-name {
+		text-transform: uppercase;
 		font-size: 1rem;
 		font-weight: 700;
 	}
@@ -603,9 +609,12 @@ select {
 
 /* Webmentionform */
 .wm-form {
-	margin-bottom: 25px;
+	@include subarticle-element;
 	line-height: 1.5;
 	display: block;
+	@media screen and (max-width: $break1) {
+		text-align: center;
+	}
 	#wm-source {
 		width: 100%;
 		margin-bottom: 10px;
@@ -667,12 +676,8 @@ select {
 
 /* Post Navigation */
 .post-nav {
+	@include subarticle-element;
 	justify-content: space-between;
-	padding-top: 25px;
-	padding-bottom: 25px;
-	margin-bottom: 25px;
-	@include color-border(border-top, 1px, solid, border);
-	@include color-border(border-bottom, 1px, solid, border);
 	display: flex;
 	@media screen and (max-width: $break1) {
 		display: block;
@@ -687,7 +692,7 @@ select {
 			margin-right: auto;
 			text-align: left;
 			@media screen and (max-width: $break1) {
-				padding-bottom: 25px;
+				padding-bottom: 10px;
 				min-width: 100%;
 				text-align: center;
 			}
@@ -718,6 +723,35 @@ select {
 	}
 }
 
+// Related articles
+
+.related {
+	@include subarticle-element;
+	@media screen and (max-width: $break1) {
+		min-width: 100%;
+		text-align: center;
+	}
+	.caption {
+		display: block;
+		margin-bottom: 5px;
+		font-weight: 700;
+		line-height: 1;
+		text-transform: uppercase;
+	}
+	.related-list {
+		list-style: none;
+		.item {
+			.link {
+				.post-title {
+					margin-bottom: 0;
+					overflow: hidden;
+					font-size: .8125rem;
+				}
+			}
+		}
+	}
+}
+
 /* Images / Video */
 img {
 	max-width: 100%;

i18n/de.yaml

@@ -42,4 +42,7 @@
   translation: "Hast du eine Antwort hierzu veröffentlicht? Lass mich den Link wissen:"
 
 - id: wmform_btn
-  translation: "Senden"
+  translation: "Senden"
+
+- id: related
+  translation: "Ähnlich"

i18n/en.yaml

@@ -42,4 +42,7 @@
   translation: "Have you published a response to this? Let me know the link:"
 
 - id: wmform_btn
-  translation: "Send"
+  translation: "Send"
+
+- id: related
+  translation: "Related"

layouts/partials/post_nav.html

@@ -13,4 +13,5 @@
 	{{- end }}
 </nav>
 {{- end }}
+{{ partial "related.html" . }}
 {{- end }}

layouts/partials/related.html

@@ -0,0 +1,11 @@
+{{ $related := .Site.RegularPages.Related . | first 5 }}
+{{ with $related }}
+<div class="related">
+    <span class="caption">{{ T "related" }}</span>
+	<ul class="related-list">
+		{{ range . }}
+		<li class="item"><a class="link" href="{{ .RelPermalink }}"><p class="post-title">{{ .Title }}</p></a></li>
+		{{ end }}
+	</ul>
+</div>
+{{ end }}