From 8afa44019d69ec0f3c005471705a73912ef63842 Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Wed, 30 Nov 2022 02:07:30 +0100
Subject: [PATCH] Yet another update, hopefully of better quality

---
 layouts/_default/baseof.html | 20 ------------
 layouts/_default/single.html | 62 ++++++++++++++++++------------------
 static/ox-hugo/commento.css  | 44 +++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 51 deletions(-)
 create mode 100644 static/ox-hugo/commento.css

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index fb66904..b6740f0 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -15,26 +15,6 @@
     {{ template "_internal/opengraph.html" . }}
 
     <style>
-    .commento-root .commento-anonymous-checkbox-container input[type="checkbox"] + label,
-    .commento-root .commento-mod-tools button,
-    .commento-root-font * {
-      color: #eceff4 !important;
-    }
-    .commento-root .commento-footer .commento-logo-container .commento-logo-text {
-      color: #34495e !important;
-    }
-    .commento-root .commento-dark-card {
-      background-color: #d08770 !important;
-    }
-    .commento-root input[type="text"], .commento-root textarea {
-      color: #2e3440 !important;
-    }
-    .commento-root .commento-mod-tools::before {
-      color: #b48ead !important;
-    }
-    .commento-root .commento-submit-button {
-      color: #5e81ac !important;
-    }
 
     p code {
       font-family: monospace,monospace;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 46c5eff..d6dfd9d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,35 +1,35 @@
 {{ define "main" }}
-  <article class="post">
-    <header class="post-header">
-      <h1 class ="post-title">{{ .Title }}</h1>
-      <div class="post-meta">
-        <div>
-          {{ partial "icon.html" (dict "ctx" $ "name" "calendar") }}
-          {{ .PublishDate.Format "Jan 2, 2006" }}
-        </div>
-        <div>
-          {{ partial "icon.html" (dict "ctx" $ "name" "clock") }}
-          {{ .ReadingTime }} min read
-        </div>
-        {{- with .Params.tags -}}
-        <div>
-          {{ partial "icon.html" (dict "ctx" $ "name" "tag") }}
-          {{ range . -}}
-            {{- with $.Site.GetPage (printf "/%s/%s" "tags" . ) -}}
-              <a class="tag" href="{{ .Permalink }}">{{ .Title }}</a>
-            {{- end -}}
-          {{- end -}}
-        </div>
-        {{- end -}}
+<article class="post">
+  <header class="post-header">
+    <h1 class="post-title">{{ .Title }}</h1>
+    <div class="post-meta">
+      <div>
+        {{ partial "icon.html" (dict "ctx" $ "name" "calendar") }} {{
+        .PublishDate.Format "Jan 2, 2006" }}
       </div>
-    </header>
-    <div class="post-content">
-      {{ .Content }}
+      <div>
+        {{ partial "icon.html" (dict "ctx" $ "name" "clock") }} {{ .ReadingTime
+        }} min read
+      </div>
+      {{- with .Params.tags -}}
+      <div>
+        {{ partial "icon.html" (dict "ctx" $ "name" "tag") }} {{ range . -}} {{-
+        with $.Site.GetPage (printf "/%s/%s" "tags" . ) -}}
+        <a class="tag" href="{{ .Permalink }}">{{ .Title }}</a>
+        {{- end -}} {{- end -}}
+      </div>
+      {{- end -}}
     </div>
-    <div class="post-footer">
-      {{ template "_internal/disqus.html" . }}
-    </div>
-  </article>
-  <script defer src="https://commento.phundrak.com/js/commento.js"></script>
-  <div id="commento"></div>
+  </header>
+  <div class="post-content">{{ .Content }}</div>
+  <div class="post-footer">
+    <div id="commento"></div>
+  </div>
+</article>
+<script
+  defer
+  src="https://commento.phundrak.com/js/commento.js"
+  data-css-override="http://blog.phundrak.com/ox-hugo/commento.css"
+  data-auto-init="true"
+></script>
 {{ end }}
diff --git a/static/ox-hugo/commento.css b/static/ox-hugo/commento.css
new file mode 100644
index 0000000..b2e7baf
--- /dev/null
+++ b/static/ox-hugo/commento.css
@@ -0,0 +1,44 @@
+:root {
+  --nord0: #2e3440;
+  --nord1: #3b4252;
+  --nord2: #434c5e;
+  --nord3: #4c566a;
+  --nord4: #d8dee9;
+  --nord5: #e5e9f0;
+  --nord6: #eceff4;
+  --nord7: #8fbcbb;
+  --nord8: #88c0d0;
+  --nord9: #81a1c1;
+  --nord10: #5e81ac;
+  --nord11: #bf616a;
+  --nord12: #d08770;
+  --nord13: #ebcb8b;
+  --nord14: #a3be8c;
+  --nord15: #b48ead;
+}
+
+.commento-root
+  .commento-anonymous-checkbox-container
+  input[type="checkbox"]
+  + label,
+.commento-root .commento-mod-tools button,
+.commento-root-font * {
+  color: var(--nord6);
+}
+.commento-root .commento-footer .commento-logo-container .commento-logo-text {
+  color: var(--nord1);
+}
+.commento-root .commento-dark-card {
+  background-color: var(--nord12);
+}
+.commento-root input[type="text"],
+.commento-root textarea {
+  color: var(--nord0);
+}
+.commento-root .commento-mod-tools::before {
+  color: var(--nord15);
+}
+.commento-root .commento-submit-button {
+  background: var(--nord10);
+  color: var(--nord5);
+}