Move to Tailwind 3

12 files changed, 1493 insertions, 408 deletions

diff --git a/.gitignore b/.gitignore
index 07b13ad..b77ef62 100755
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,7 @@ hugo.linux
 
 # Openring build
 themes/simple/layouts/partials/openring.html
+
+# NodeJS
+node_modules/
+package-lock.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ff1c838..2bf2809 100755
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,9 @@
   "[xsl]": {
     "editor.formatOnSave": false,
     "editor.formatOnPaste": false
-  }
+  },
+  "[css]": {
+    "editor.formatOnSave": false,
+    "editor.formatOnPaste": false
+  },
 }
diff --git a/Makefile b/Makefile
index 67c54b9..1bd84a3 100755
--- a/Makefile
+++ b/Makefile
@@ -1,7 +1,23 @@
-dev: openring
+MAKEFLAGS=-j4
+
+dev: tailwind-watch dev-server
+
+dev-server: openring
         hugo server --bind=0.0.0.0 --buildDrafts
 
-deploy: openring
+tailwind-watch:
+        npx tailwindcss \
+                -i ./themes/simple/static/css/tailwind.css \
+                -o ./static/general/index.css \
+                --jit --minify --watch
+
+tailwind-build:
+        npx tailwindcss \
+                -i ./themes/simple/static/css/tailwind.css \
+                -o ./static/general/index.css \
+                --jit --minify
+
+deploy: openring tailwind-build
         hugo --gc --minify
         rsync -az --delete public/ root@165.22.87.180:/var/www/html/mitjafelicijan.com/
         ssh root@165.22.87.180 chown www-data:www-data /var/www/html/mitjafelicijan.com/ -Rf
@@ -18,6 +34,7 @@ openring:
                 > themes/simple/layouts/partials/openring.html
 
 provision:
+        npm install
         cd ~/Junk \
         git clone https://git.sr.ht/~sircmpwn/openring \
         cd openring \
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e09a1fd
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "mitjafelicijan.com",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@git.mitjafelicijan.com:/home/git/mitjafelicijan.com.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "10.4.13",
+    "postcss": "8.4.18",
+    "tailwindcss": "3.2.1"
+  }
+}
diff --git a/static/general/index.css b/static/general/index.css
new file mode 100644
index 0000000..9c47e94
--- /dev/null
+++ b/static/general/index.css
@@ -0,0 +1,1197 @@
+/*
+! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+*/
+
+html {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden] {
+  display: none;
+}
+
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.list-disc {
+  list-style-type: disc;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-0 {
+  border-width: 0px;
+}
+
+.border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
+.bg-orange-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.pb-12 {
+  padding-bottom: 3rem;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.font-extrabold {
+  font-weight: 800;
+}
+
+.leading-tight {
+  line-height: 1.25;
+}
+
+.leading-relaxed {
+  line-height: 1.625;
+}
+
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.underline {
+  text-decoration-line: underline;
+}
+
+.no-underline {
+  text-decoration-line: none;
+}
+
+/* Container */
+
+.container-blog {
+  max-width: 700px;
+}
+
+/* User text selection */
+
+::-moz-selection {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+::selection {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+::-moz-selection {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+/* Headings */
+
+article.single h2 {
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+}
+
+article.single h3 {
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+article.single h4 {
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+/* Paragraph */
+
+article.single p {
+  margin-bottom: 1.25rem;
+}
+
+/* Links */
+
+article.single a {
+  text-decoration-line: underline;
+}
+
+article.single a:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
+/* Blockquote */
+
+article.single blockquote {
+  background-image: url('/general/alert-light.svg');
+  background-size: 30px 30px;
+  background-repeat: no-repeat;
+  background-position: 0 5px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding-left: 3rem;
+}
+
+/* Media: Images, audio, video */
+
+article.single img {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  width: 100%;
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
+}
+
+article.single video {
+  width: 100%;
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
+}
+
+article.single audio {
+  margin-bottom: 1.5rem;
+  width: 100%;
+}
+
+/* Code */
+
+article.single code {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+}
+
+article.single pre {
+  margin-bottom: 1.5rem;
+  overflow-x: auto;
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
+  padding: 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+article.single pre code {
+  background: unset;
+  padding: unset;
+  line-height: 1.625;
+}
+
+/* Tables */
+
+article.single table {
+  margin-bottom: 1rem;
+  width: 100%;
+  border-collapse: collapse;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+article.single table tr,
+article.single table td,
+article.single table th {
+  border-width: 1px;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-align: left;
+}
+
+/* Unordered list */
+
+article.single ul {
+  margin-bottom: 1.5rem;
+  list-style-type: disc;
+  padding-left: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  article.single ul {
+    padding-left: 2.5rem;
+  }
+}
+
+/* Ordered list */
+
+article.single ol {
+  list-style-type: decimal;
+  padding-left: 2rem;
+}
+
+@media (min-width: 768px) {
+  article.single ol {
+    padding-left: 2.5rem;
+  }
+}
+
+/* Katex */
+
+article.single .katex-display {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+/* Lazy loading of iframes */
+
+article.single .ll-iframe {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+article.single .ll-iframe::before {
+  display: flex;
+  height: 100%;
+}
+
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+article.single .ll-iframe::before {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  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 {
+  margin-bottom: 0.5rem;
+  height: 8rem;
+  width: 100%;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.cactus-container .cactus-editor-name input {
+  margin-bottom: 0.5rem;
+  width: 100%;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.cactus-container .cactus-editor-name {
+  margin-bottom: 0.25rem;
+}
+
+/* Cactus: Buttons */
+
+.cactus-editor-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.cactus-container .cactus-button {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 500;
+}
+
+.cactus-container .cactus-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.cactus-container .cactus-editor {
+  margin-bottom: 2.5rem;
+}
+
+/* Cactus: Comment List */
+
+.cactus-container .cactus-comments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.cactus-container .cactus-comment {
+  display: flex;
+  gap: 1rem;
+}
+
+.cactus-container .cactus-comment .cactus-comment-avatar img {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 9999px;
+}
+
+.cactus-container .cactus-comment .cactus-comment-avatar-placeholder {
+  height: 2rem;
+  width: 2rem;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
+.cactus-container .cactus-comment .cactus-comment-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.cactus-container .cactus-comment .cactus-comment-header .cactus-comment-displayname {
+  font-weight: 600;
+}
+
+.cactus-container .cactus-comment .cactus-comment-header .cactus-comment-time {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.cactus-container .cactus-comment .cactus-message-text code {
+  border-radius: 0.25rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+}
+
+/* Unordered list */
+
+.cactus-container .cactus-comment .cactus-message-text ul {
+  list-style-type: disc;
+  padding-left: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .cactus-container .cactus-comment .cactus-message-text ul {
+    padding-left: 1.5rem;
+  }
+}
+
+/* Ordered list */
+
+.cactus-container .cactus-comment .cactus-message-text ol {
+  list-style-type: decimal;
+  padding-left: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .cactus-container .cactus-comment .cactus-message-text ol {
+    padding-left: 1.5rem;
+  }
+}
+
+/* Cactus: Login */
+
+.cactus-container .cactus-login-form-wrapper {
+  position: relative;
+  margin-bottom: 1.5rem;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  padding: 0.75rem;
+}
+
+.cactus-container .cactus-login-form .cactus-login-close {
+  position: absolute;
+  right: 0.75rem;
+  top: 0.75rem;
+  height: 1rem;
+  width: 1rem;
+}
+
+.cactus-container .cactus-login-form .cactus-login-title {
+  margin-bottom: 1rem;
+  margin-top: 0px;
+  padding-top: 0px;
+  font-weight: 700;
+}
+
+/* Cactus: Login with a button */
+
+.cactus-container .cactus-login-form .cactus-login-client {
+  margin-bottom: 1.5rem;
+}
+
+.cactus-container .cactus-login-form .cactus-login-client-title {
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+/* Cactus: Login with credentials */
+
+.cactus-container .cactus-login-form .cactus-login-credentials {
+}
+
+.cactus-container .cactus-login-form .cactus-login-credentials-title {
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+}
+
+.cactus-container .cactus-login-form .cactus-login-field {
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.cactus-container .cactus-login-form .cactus-login-label {
+  width: 5rem;
+}
+
+.cactus-container .cactus-login-form input {
+  border-radius: 0.25rem;
+  border-width: 1px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.hover\:bg-yellow-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
+}
+
+.hover\:text-gray-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.hover\:underline:hover {
+  text-decoration-line: underline;
+}
+
+@media (min-width: 768px) {
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .md\:block {
+    display: block;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:p-0 {
+    padding: 0px;
+  }
+}
diff --git a/static/yap/feed.xml b/static/yap/feed.xml
deleted file mode 100755
index 0f00861..0000000
--- a/static/yap/feed.xml
+++ /dev/null
@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<?xml-stylesheet type="text/xsl" href="theme.xsl"?>
-<rss version="2.0">
-  <channel>
-
-    <title>Microblog - Mitja Felicijan</title>
-    <pageTitle>Mitja Felicijan</pageTitle>
-    <link>https://mitjafelicijan.com/yap/feed.xml</link>
-    <description>You do not learn by relaxing. You learn by violently assaulting your problem until it surrenders its mysteries to you.</description>
-    <managingEditor>m@mitjafelicijan.com (Mitja Felicijan)</managingEditor>
-    <generator>YapYap</generator>
-
-    <!-- RFC 2882 generator: https://epochtimestamp.com/ -->
-
-    <!-- October, 2022 -->
-
-    <item>
-      <title>I have started playing Torchlight 2 again. Forgot how much fun this game actually is. Since I am working on my own game in my spare time, it's interesting to see how they managed to keep their systems simple, yet interesting. Still have no idea if there is end-game, but leveling up is for sure fun.</title>
-      <pubDate>Mon, 10 Oct 2022 22:37:24 +02:00</pubDate>
-    </item>
-
-    <item>
-      <title>Managing all the requirements for Gtk4 development looked more and more like a huge pain, so I moved to Gnome Builder for development of desktop apps. Builder is really impressive piece of software! 👀</title>
-      <pubDate>Sat, 08 Oct 2022 22:53:08 +02:00</pubDate>
-    </item>
-
-    <item>
-      <title>Gtk4 is really missing some quality Python documentation! All that you can find is examples for Gtk3, and it is not really completely compatible with v4. This makes working with it extremely frustrating. 😠</title>
-      <pubDate>Sat, 08 Oct 2022 02:42:52 +02:00</pubDate>
-    </item>
-
-    <item>
-      <title>I started work on a hobby project that uses Gtk4 to display various data like CSV, SQLite, MySQL and Redis. Essentially, a data exploration tool with some plotting features.</title>
-      <pubDate>Sat, 08 Oct 2022 02:22:04 +02:00</pubDate>
-    </item>
-
-    <item>
-      <title>An interesting use-case for this type of blogging is also that it is by default RSS reader friendly, making subscribing to these feeds incredibly convenient.</title>
-      <pubDate>Sat, 08 Oct 2022 01:47:47 +02:00</pubDate>
-    </item>
-
-    <item>
-      <title>I added comments to my site finally. I choose https://cactus.chat/. Really simple implementation and uses Matrix protocol, which makes it even more cool. 🎉</title>
-      <pubDate>Sat, 08 Oct 2022 00:38:18 +02:00</pubDate>
-    </item>
-
-    <item>
-      <title>I have been testing ideas how to implement microblogging as a replacement for Twitter. Using XSL and XML is an interesting idea that is supported through major browser. View the source of this page and check it out in action.</title>
-      <pubDate>Sat, 07 Oct 2022 01:38:18 +02:00</pubDate>
-    </item>
-
-  </channel>
-</rss>
diff --git a/static/yap/images/2022-10-10 22-32-46.png b/static/yap/images/2022-10-10 22-32-46.png
deleted file mode 100644
index e49532c..0000000
--- a/static/yap/images/2022-10-10 22-32-46.png
+++ /dev/null
diff --git a/static/yap/theme.xsl b/static/yap/theme.xsl
deleted file mode 100755
index 4706f95..0000000
--- a/static/yap/theme.xsl
+++ /dev/null
@@ -1,113 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-  <xsl:template match="/">
-
-    <html>
-
-      <head>
-
-        <meta charset="utf-8" />
-        <meta name="theme-color" content="#ffffff" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-
-        <title>Microblog - Mitja Felicijan</title>
-        <link rel="icon" type="image/gif" href="/general/favicon.gif" />
-
-        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
-
-        <style>
-          .container-blog {
-            max-width: 700px;
-          }
-        </style>
-
-        <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
-        <script>
-          window.addEventListener('load', () => {
-            document.querySelectorAll('time').forEach(el => {
-              const formattedDate = dayjs(el.getAttribute('datetime')).format('dddd, MMMM D, YYYY h:mm A');
-              el.innerText = formattedDate;
-            });
-          });
-        </script>
-
-        <!--
-          Examples:
-
-          <item>
-            <guid>1</guid>
-            <title>Example of Image post</title>
-            <pubDate>Wed, 02 Oct 2002 08:00:00 EST</pubDate>
-            <enclosure url="https://placeimg.com/550/300/tech" />
-          </item>
-          <item>
-            <title>Example of Text post</title>
-            <pubDate>Wed, 02 Oct 2002 08:00:00 EST</pubDate>
-          </item>
-        -->
-
-      </head>
-
-      <body>
-
-        <header class="container-blog mx-auto px-6 md:p-0">
-          <div class="flex py-4 mt-4 mb-6 items-center gap-2">
-            <h1>
-              <a href="/" class="text-xl font-bold hover:bg-yellow-100">
-                <xsl:value-of select="rss/channel/pageTitle" />
-              </a>
-            </h1>
-          </div>
-        </header>
-
-        <main class="container-blog mx-auto px-6 md:p-0 mb-32">
-
-          <xsl:for-each select="rss/channel/item">
-            <xsl:sort select="guid" data-type="number" order="descending" />
-
-            <article class="flex flex-col md:flex-row gap-4 mb-10">
-
-              <xsl:if test="enclosure/@url">
-                <a class="w-full md:w-90 block" target="_blank">
-                  <xsl:attribute name="href">
-                    <xsl:value-of select="enclosure/@url" />
-                  </xsl:attribute>
-
-                  <img class="rounded w-full object-contain md:object-fill">
-                    <xsl:attribute name="src">
-                      <xsl:value-of select="enclosure/@url" />
-                    </xsl:attribute>
-                  </img>
-                </a>
-              </xsl:if>
-
-              <section>
-                <xsl:if test="pubDate">
-                  <div class="text-gray-400 text-xs font-medium mb-1">
-                    <time>
-                      <xsl:attribute name="datetime">
-                        <xsl:value-of select="pubDate" />
-                      </xsl:attribute>
-                      <xsl:value-of select="pubDate" />
-                    </time>
-                  </div>
-                </xsl:if>
-
-                <xsl:if test="title">
-                  <div>
-                    <xsl:value-of select="title" />
-                  </div>
-                </xsl:if>
-              </section>
-
-            </article>
-          </xsl:for-each>
-
-        </main>
-
-      </body>
-    </html>
-
-  </xsl:template>
-</xsl:stylesheet>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..a7c7dc5
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./content/**/*.{html,js}",
+    "./layouts/**/*.{html,js}",
+    "./themes/**/*.{html,js}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
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;
+}