Yet another update, hopefully of better quality

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;

layouts/_default/single.html

@@ -4,32 +4,32 @@
     <h1 class="post-title">{{ .Title }}</h1>
     <div class="post-meta">
       <div>
-          {{ partial "icon.html" (dict "ctx" $ "name" "calendar") }}
-          {{ .PublishDate.Format "Jan 2, 2006" }}
+        {{ partial "icon.html" (dict "ctx" $ "name" "calendar") }} {{
+        .PublishDate.Format "Jan 2, 2006" }}
       </div>
       <div>
-          {{ partial "icon.html" (dict "ctx" $ "name" "clock") }}
-          {{ .ReadingTime }} min read
+        {{ 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" . ) -}}
+        {{ partial "icon.html" (dict "ctx" $ "name" "tag") }} {{ range . -}} {{-
+        with $.Site.GetPage (printf "/%s/%s" "tags" . ) -}}
         <a class="tag" href="{{ .Permalink }}">{{ .Title }}</a>
-            {{- end -}}
-          {{- end -}}
+        {{- end -}} {{- end -}}
       </div>
       {{- end -}}
     </div>
   </header>
-    <div class="post-content">
-      {{ .Content }}
-    </div>
+  <div class="post-content">{{ .Content }}</div>
   <div class="post-footer">
-      {{ template "_internal/disqus.html" . }}
+    <div id="commento"></div>
   </div>
 </article>
-  <script defer src="https://commento.phundrak.com/js/commento.js"></script>
-  <div id="commento"></div>
+<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 }}

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);
+}