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">
-	<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>
+</div>
-</section>
 {% endif %}

content/changelog/index.md

@@ -4,6 +4,8 @@ title: Nathan Upchurch | Changelog
 structuredData: none
 ---
 # Changelog
+* 2026-02-04
+	* Added post comments via [Isso](https://isso-comments.de/). Please don't make me regret this.
 * 2026-02-01
 	* Added [Woo-Woo Incense Description Generator](/special/woo-woo-incense-description-generator).
 * 2026-01-21

public/css/index.css

@@ -271,7 +271,7 @@ section {
 		grid-column: var(--span-grid);
 	}
 	/* Add fleuron to last <p> in section */
-	> p:not(blockquote > p):last-child:after {
+	> p:not(blockquote > p, p.isso-post-action):last-child:after {
 		content: "\2766";
 		display: inline;
 		font-size: var(--step-1);
@@ -372,7 +372,7 @@ main > p > a > img {
 pre {
 	grid-column: var(--span-grid);
 }
-p:not(.quizQuestion) {
+p:not(.quizQuestion, .isso-input-wrapper) {
 	margin-block: 0 1lh;
 }
 p,
@@ -526,12 +526,13 @@ table th {
 		"WONK" 1;
 }
 
-/* Comments */
+/* Mastodon */
 .continue-discussion {
 	grid-column: var(--span-grid);
 }
 .continue-discussion button {
-	margin-top: var(--space-xs);
+	margin-top: calc(var(--space-s) * -1);
+	margin-bottom: var(--space-m);
 }
 
 /* Code Fences */