Implement comments via Isso

_includes/issoCommenting.njk

@@ -0,0 +1,62 @@
+<script data-isso="https://isso.upchur.ch" src="https://isso.upchur.ch/js/embed.min.js"></script>
+
+<section id="isso-thread">
+    <noscript>Javascript needs to be activated to view comments.</noscript>
+</section>
+
+<style>
+	h4.isso-thread-heading {
+		font-size: var(--step-2) !important;
+		font-variation-settings: "opsz" 50, "wght" 350, "SOFT" 20, "WONK" 1 !important;
+		line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important;
+		margin-bottom: var(--space-m) !important;
+		margin-top: var(--space-m)  !important;
+		padding-bottom: 0 !important;
+		padding-top: 0 !important;
+		text-wrap: pretty;
+	}
+
+	.isso-text > h1, .isso-text > h2 {
+		padding: 0 0 0 0 !important;
+	}
+
+	.isso-form-wrapper > .isso-auth-section > .isso-post-action > input {
+		background-color: var(--contrast-color) !important;
+		border: none !important;
+		border-radius: var(--border-radius) !important;
+		color: var(--background-color) !important;
+		font-family: var(--font-family-ui) !important;
+		font-size: var(--step--2) !important;
+		font-variation-settings: var(--font-variation-ui) !important;
+		height: var(--space-m-l) !important;
+		letter-spacing: var(--ui-letter-spacing) !important;
+		margin: var(--space-xs) 0 0 0 !important;
+		padding: 0 var(--space-xs) !important;
+		text-transform: uppercase !important;
+		transition: var(--transition-normal) !important;
+		white-space: nowrap !important;
+	}
+
+		p.isso-input-wrapper {
+		display: block !important;
+		max-width: 100% !important;
+		& > label, & > input {
+			font-family: var(--font-family-ui) !important;
+			font-size: var(--step--2) !important;
+			font-variation-settings: var(--font-variation-ui) !important;
+		}
+		& input {
+			margin-block: inherit !important;
+		}
+	}
+
+	.isso-post-action {
+		display: inline-block !important;
+		float: inherit !important;
+		margin: 0 var(--space-2xs) 0 0 !important;
+		max-width: var(--space-3xl) !important;
+		&::after {
+			content: "" !important;
+		}
+	}
+</style>

_includes/layouts/post.njk

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 ---
 <article class="post">
 <h1>{{ title | safe }}</h1>
+{% include "mastodonComments.njk" %}
 {% if not hideMetadata %}
 <div class="post-metadata">
 	{% if author %}
@@ -41,4 +42,4 @@ layout: layouts/base.njk
 {% endif %}
 {{ content | safe }}
 </article>
-{% include "mastodonComments.njk" %}
+{% include "issoCommenting.njk" %}

_includes/mastodonComments.njk

@@ -1,12 +1,10 @@
 {% if mastodon_id %}
-<section class="" id="comment-section">
-	<div class="continue-discussion">
-		<a class="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">
-			<button type="button">
-			<img src="/img/mastodon.svg">
-				Discuss on Mastodon &#187;
-			</button>
-		</a>
-	</div>
-</section>
+<div class="continue-discussion">
+	<a class="link-button" href="https://{{ metadata.mastodonHost }}/@{{ metadata.mastodonUser }}/{{ mastodon_id }}">
+		<button type="button">
+		<img src="/img/mastodon.svg">
+			Discuss on Mastodon &#187;
+		</button>
+	</a>
+</div>
 {% endif %}