4 files changed, 124 insertions, 4 deletions

diff --git a/themes/simple/layouts/partials/comments.html b/themes/simple/layouts/partials/comments.html
new file mode 100644
index 0000000..dd73bb4
--- /dev/null
+++ b/themes/simple/layouts/partials/comments.html
@@ -0,0 +1,20 @@
+<section class="comments">
+  <p class="mb-4">You can write me an email at <a href="mailto:m@mitjafelicijan.com" class="underline hover:bg-yellow-100">m@mitjafelicijan.com</a> or comment bellow.</p>
+  <div id="comment-section"></div>
+
+  <script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script>
+  <link rel="stylesheet" href="_https://latest.cactus.chat/style.css" type="text/css">
+
+  <script>
+    window.addEventListener('load', () => {
+      initComments({
+        node: document.getElementById("comment-section"),
+        defaultHomeserverUrl: "https://matrix.cactus.chat:8448",
+        serverName: "cactus.chat",
+        siteName: "mitjafelicijan.com",
+        commentSectionId: "{{.File}}",
+        updateInterval: 15
+      });
+    });
+  </script>
+</section>
diff --git a/themes/simple/layouts/partials/footer.html b/themes/simple/layouts/partials/footer.html
index 8881f46..95a1771 100644
--- a/themes/simple/layouts/partials/footer.html
+++ b/themes/simple/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer class="container-blog px-6 md:p-0 text-gray-400 text-sm">
+<footer class="container-blog mx-auto px-6 md:p-0 text-gray-400 text-sm">
   <p class="pb-12">
     This website does not track you.
     Content is made available under the <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer" class="underline hover:text-gray-800">CC BY 4.0 license</a> unless specified otherwise.
@@ -11,6 +11,5 @@
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
 <script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
 
-
 <!-- Fathom - beautiful, simple website analytics -->
 <script src="https://cdn.usefathom.com/script.js" data-site="XHQARKXP" defer></script>
diff --git a/themes/simple/layouts/partials/header.html b/themes/simple/layouts/partials/header.html
index 1e8ee13..1cbc47e 100644
--- a/themes/simple/layouts/partials/header.html
+++ b/themes/simple/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<div class="container-blog px-6 md:p-0">
+<div class="container-blog mx-auto px-6 md:p-0">
   <header class="flex py-4 mt-4 mb-6">
     <h3 class="flex-grow">
       <a href="/" itemprop="url" class="text-xl font-bold hover:bg-yellow-100">Mitja Felicijan</a>
diff --git a/themes/simple/layouts/partials/tailwind.html b/themes/simple/layouts/partials/tailwind.html
index 2492d72..1786ffd 100644
--- a/themes/simple/layouts/partials/tailwind.html
+++ b/themes/simple/layouts/partials/tailwind.html
@@ -4,7 +4,6 @@
     /* Container */
     .container-blog {
       max-width: 700px;
-      margin: 0 auto;
     }
 
     /* User text selection */
@@ -102,5 +101,107 @@
       @apply my-10;
     }
 
+    /* Cactus Comments */
+    .comments img {
+      max-width: auto !important;
+      max-width: unset !important;
+      max-width: inherit !important;
+    }
+    .cactus-container .cactus-editor-textarea {
+      @apply border w-full px-3 py-2 outline-none rounded mb-2;
+    }
+
+    .cactus-container .cactus-editor-name input {
+      @apply border w-full px-3 py-2 mb-2 outline-none rounded;
+    }
+
+    .cactus-container .cactus-editor-name {
+      @apply mb-1;
+    }
+
+    /* Cactus: Buttons */
+    .cactus-editor-buttons {
+      @apply flex gap-2;
+    }
+
+    .cactus-container .cactus-button {
+      @apply text-base bg-gray-200 font-medium px-4 py-1 rounded;
+    }
+
+    .cactus-container .cactus-editor {
+      @apply mb-10;
+    }
+
+    /* Cactus: Comment List */
+    .cactus-container .cactus-comments-list {
+      @apply flex flex-col gap-8;
+    }
+
+    .cactus-container .cactus-comment {
+      @apply flex gap-4;
+    }
+
+    .cactus-container .cactus-comment .cactus-comment-avatar img {
+      @apply w-10 h-10 rounded-full;
+    }
+
+    .cactus-container .cactus-comment .cactus-comment-avatar-placeholder {
+      @apply w-10 h-10 rounded-full bg-gray-300;
+    }
+
+    .cactus-container .cactus-comment .cactus-comment-header {
+      @apply flex gap-2 items-center;
+    }
+
+    .cactus-container .cactus-comment .cactus-comment-header .cactus-comment-displayname {
+      @apply font-semibold;
+    }
+
+    .cactus-container .cactus-comment .cactus-comment-header .cactus-comment-time {
+      @apply text-gray-400 text-sm;
+    }
+
+    /* Cactus: Login */
+    .cactus-container .cactus-login-form-wrapper {
+      @apply border mb-6 p-3 relative rounded;
+    }
+
+    .cactus-container .cactus-login-form .cactus-login-close {
+      @apply absolute right-3 top-3 w-4 h-4;
+    }
+
+    .cactus-container .cactus-login-form .cactus-login-title {
+      @apply font-bold mb-4 mt-0 pt-0;
+    }
+
+    /* Cactus: Login with a button */
+    .cactus-container .cactus-login-form .cactus-login-client {
+      @apply mb-6;
+    }
+
+    .cactus-container .cactus-login-form .cactus-login-client-title {
+      @apply font-semibold mb-2;
+    }
+
+    /* Cactus: Login with credentials */
+    .cactus-container .cactus-login-form .cactus-login-credentials {
+    }
+
+    .cactus-container .cactus-login-form .cactus-login-credentials-title {
+      @apply font-semibold mb-1;
+    }
+
+    .cactus-container .cactus-login-form .cactus-login-field {
+      @apply flex gap-4 mb-2 items-center;
+    }
+
+    .cactus-container .cactus-login-form .cactus-login-label {
+      @apply w-20;
+    }
+
+    .cactus-container .cactus-login-form input {
+      @apply border px-2 py-1 rounded;
+    }
+
   }
 </style>