Move to Tailwind 3

3 files changed, 235 insertions, 239 deletions

diff --git a/themes/simple/layouts/partials/head.html b/themes/simple/layouts/partials/head.html
index 256608d..d7fbec6 100755
--- a/themes/simple/layouts/partials/head.html
+++ b/themes/simple/layouts/partials/head.html
@@ -4,6 +4,8 @@
 
 <link rel="alternate" type="application/rss+xml" href="/index.xml" title="{{ .Site.Author.name }}">
 
+<link rel="stylesheet" href="/general/index.css">
+
 <link
   href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA=="
   rel="icon" type="image/x-icon" />
@@ -16,7 +18,3 @@
 <meta property="og:description" content="{{ if .Summary }}{{ .Summary }}{{ else }}{{ .Site.Params.Description }}{{ end }}">
 <meta property="og:url" content="https://mitjafelicijan.com/{{ .Params.url }}">
 <meta property="og:image" content="https://mitjafelicijan.com/general/og.jpg">
-
-<script src="https://cdn.tailwindcss.com"></script>
-
-{{ partial "tailwind.html" . }}
diff --git a/themes/simple/layouts/partials/tailwind.html b/themes/simple/layouts/partials/tailwind.html
deleted file mode 100755
index b6fd763..0000000
--- a/themes/simple/layouts/partials/tailwind.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<style type="text/tailwindcss">
-  @layer utilities {
-
-    /* Container */
-    .container-blog {
-      max-width: 700px;
-    }
-
-    /* User text selection */
-    ::selection {
-      @apply bg-yellow-100 text-black;
-    }
-
-    ::-moz-selection {
-      @apply bg-yellow-100 text-black;
-    }
-
-    /* Headings */
-    article.single h2 {
-      @apply text-2xl font-bold mb-4 mt-8;
-    }
-
-    article.single h3 {
-      @apply text-xl font-bold mb-4 mt-8;
-    }
-
-    article.single h4 {
-      @apply text-lg font-bold mb-4 mt-8;
-    }
-
-    /* Paragraph */
-    article.single p {
-      @apply mb-5;
-    }
-
-    /* Links */
-    article.single a {
-      @apply underline hover:bg-yellow-100;
-    }
-
-    /* Blockquote */
-    article.single blockquote {
-      background-image: url('/general/alert-light.svg');
-      background-size: 30px 30px;
-      background-repeat: no-repeat;
-      background-position: 0 5px;
-      @apply pl-12 my-8;
-    }
-
-    /* Media: Images, audio, video */
-    article.single img {
-      @apply rounded w-full !bg-gray-50 my-8;
-    }
-
-    article.single video {
-      @apply rounded w-full !bg-gray-50;
-    }
-
-    article.single audio {
-      @apply w-full mb-6;
-    }
-
-    /* Code */
-    article.single code {
-      @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
-    }
-
-    article.single pre {
-      @apply !bg-gray-50 rounded text-xs p-4 mb-6 overflow-x-auto;
-    }
-
-    article.single pre code {
-      background: unset;
-      padding: unset;
-      @apply leading-relaxed;
-    }
-
-    /* Tables */
-    article.single table {
-      @apply w-full border border-black border-collapse mb-4;
-    }
-
-    article.single table tr,
-    article.single table td,
-    article.single table th {
-      @apply px-4 py-2 border text-left;
-    }
-
-    /* Unordered list */
-    article.single ul {
-      @apply list-disc pl-6 md:pl-10 mb-6;
-    }
-
-    /* Ordered list */
-    article.single ol {
-      @apply list-decimal pl-8 md:pl-10;
-    }
-
-    /* Katex */
-    article.single .katex-display {
-      @apply my-10;
-    }
-
-    /* Lazy loading of iframes */
-    article.single .ll-iframe {
-      @apply bg-gray-100 rounded;
-    }
-
-    article.single .ll-iframe::before {
-      @apply h-full flex border-2 border-gray-300 rounded justify-center items-center font-medium text-sm cursor-pointer animate-pulse;
-      content: 'Click here to load resource…';
-    }
-
-    article.single .ll-iframe.empty::before {
-      content: none;
-    }
-
-    /* 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 h-32 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 hover:bg-gray-300 font-medium px-6 py-2 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-8 h-8 rounded-full;
-    }
-
-    .cactus-container .cactus-comment .cactus-comment-avatar-placeholder {
-      @apply w-8 h-8 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-container .cactus-comment .cactus-message-text code {
-      @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
-    }
-
-    /* Unordered list */
-    .cactus-container .cactus-comment .cactus-message-text  ul {
-      @apply list-disc pl-2 md:pl-6;
-    }
-
-    /* Ordered list */
-    .cactus-container .cactus-comment .cactus-message-text  ol {
-      @apply list-decimal pl-2 md:pl-6;
-    }
-
-    /* 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>
diff --git a/themes/simple/static/css/tailwind.css b/themes/simple/static/css/tailwind.css
new file mode 100644
index 0000000..199f1c6
--- /dev/null
+++ b/themes/simple/static/css/tailwind.css
@@ -0,0 +1,233 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Container */
+.container-blog {
+  max-width: 700px;
+}
+
+/* User text selection */
+::selection {
+  @apply bg-yellow-100 text-black;
+}
+
+::-moz-selection {
+  @apply bg-yellow-100 text-black;
+}
+
+/* Headings */
+article.single h2 {
+  @apply text-2xl font-bold mb-4 mt-8;
+}
+
+article.single h3 {
+  @apply text-xl font-bold mb-4 mt-8;
+}
+
+article.single h4 {
+  @apply text-lg font-bold mb-4 mt-8;
+}
+
+/* Paragraph */
+article.single p {
+  @apply mb-5;
+}
+
+/* Links */
+article.single a {
+  @apply underline hover:bg-yellow-100;
+}
+
+/* Blockquote */
+article.single blockquote {
+  background-image: url('/general/alert-light.svg');
+  background-size: 30px 30px;
+  background-repeat: no-repeat;
+  background-position: 0 5px;
+  @apply pl-12 my-8;
+}
+
+/* Media: Images, audio, video */
+article.single img {
+  @apply rounded w-full !bg-gray-50 my-8;
+}
+
+article.single video {
+  @apply rounded w-full !bg-gray-50;
+}
+
+article.single audio {
+  @apply w-full mb-6;
+}
+
+/* Code */
+article.single code {
+  @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
+}
+
+article.single pre {
+  @apply !bg-gray-50 rounded text-xs p-4 mb-6 overflow-x-auto;
+}
+
+article.single pre code {
+  background: unset;
+  padding: unset;
+  @apply leading-relaxed;
+}
+
+/* Tables */
+article.single table {
+  @apply w-full border border-black border-collapse mb-4;
+}
+
+article.single table tr,
+article.single table td,
+article.single table th {
+  @apply px-4 py-2 border text-left;
+}
+
+/* Unordered list */
+article.single ul {
+  @apply list-disc pl-6 md:pl-10 mb-6;
+}
+
+/* Ordered list */
+article.single ol {
+  @apply list-decimal pl-8 md:pl-10;
+}
+
+/* Katex */
+article.single .katex-display {
+  @apply my-10;
+}
+
+/* Lazy loading of iframes */
+article.single .ll-iframe {
+  @apply bg-gray-100 rounded;
+}
+
+article.single .ll-iframe::before {
+  @apply h-full flex border-2 border-gray-300 rounded justify-center items-center font-medium text-sm cursor-pointer animate-pulse;
+  content: 'Click here to load resource…';
+}
+
+article.single .ll-iframe.empty::before {
+  content: none;
+}
+
+/* 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 h-32 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 hover:bg-gray-300 font-medium px-6 py-2 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-8 h-8 rounded-full;
+}
+
+.cactus-container .cactus-comment .cactus-comment-avatar-placeholder {
+  @apply w-8 h-8 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-container .cactus-comment .cactus-message-text code {
+  @apply bg-yellow-100 rounded px-2 py-1 text-xs font-medium;
+}
+
+/* Unordered list */
+.cactus-container .cactus-comment .cactus-message-text ul {
+  @apply list-disc pl-2 md:pl-6;
+}
+
+/* Ordered list */
+.cactus-container .cactus-comment .cactus-message-text ol {
+  @apply list-decimal pl-2 md:pl-6;
+}
+
+/* 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;
+}