From 70baaeb4e78d12c329a03e929fd30d41730ed2b1 Mon Sep 17 00:00:00 2001
From: Mitja Felicijan <mitja.felicijan@gmail.com>
Date: Sun, 28 Aug 2022 05:39:44 +0200
Subject: Moved statis assets and converted all CSS to Tailwind

---
 themes/simple/layouts/partials/footer.html   |  10 +-
 themes/simple/layouts/partials/head.html     | 179 +--------------------------
 themes/simple/layouts/partials/tailwind.html | 106 ++++++++++++++++
 3 files changed, 116 insertions(+), 179 deletions(-)
 create mode 100644 themes/simple/layouts/partials/tailwind.html

(limited to 'themes/simple')

diff --git a/themes/simple/layouts/partials/footer.html b/themes/simple/layouts/partials/footer.html
index 3d1e481..8881f46 100644
--- a/themes/simple/layouts/partials/footer.html
+++ b/themes/simple/layouts/partials/footer.html
@@ -1,7 +1,9 @@
-<footer class="container-blog px-6 md:p-0 text-gray-400 text-sm mb-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.
-  Blog feed is available as <a href="/index.xml" target="_blank" class="underline hover:text-gray-800">RSS</a> feed.
+<footer class="container-blog 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.
+    Blog feed is available as <a href="/index.xml" target="_blank" class="underline hover:text-gray-800">RSS</a> feed.
+  </p>
 </footer>
 
 <!-- katex math library -->
diff --git a/themes/simple/layouts/partials/head.html b/themes/simple/layouts/partials/head.html
index fc79650..28e4466 100644
--- a/themes/simple/layouts/partials/head.html
+++ b/themes/simple/layouts/partials/head.html
@@ -2,187 +2,16 @@
 <meta name="theme-color" content="#ffffff">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-<script src="https://cdn.tailwindcss.com"></script>
 
 <link rel="alternate" type="application/rss+xml" href="/index.xml">
 
 <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" />
+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" />
 
 <title>{{.Title}}</title>
 <meta name="description" content="{{ .Site.Params.description }}" />
 
+<script src="https://cdn.tailwindcss.com"></script>
 
-<style>
-  .container-blog {
-    max-width: 640px;
-    margin: 0 auto;
-  }
-
-  ::selection {
-    background: rgb(255, 241, 177);
-    color: #000;
-  }
-
-  ::-moz-selection {
-    background: rgb(255, 241, 177);
-    color: #000;
-  }
-
-  article.single img {
-    max-width: 110%;
-    width: 110%;
-    position: relative;
-    left: -5%;
-    margin: 40px auto;
-    display: block;
-    border-radius: 5px;
-  }
-
-  article.single p {
-    display: block;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-  }
-
-  article.single ol {
-    display: block;
-    list-style-type: decimal;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    padding-inline-start: 40px;
-  }
-
-  article.single ol>li>ol {
-    margin-block-start: 0 !important;
-    margin-block-end: 0 !important;
-    padding-inline-start: 20px;
-  }
-
-  article.single ul {
-    display: block;
-    list-style-type: disc;
-    margin-block-start: 1em;
-    margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
-    padding-inline-start: 40px;
-  }
-
-  article.single code {
-    font-family: monospace;
-    background: rgb(255, 241, 177);
-    border-radius: 5px;
-    padding: 2px 8px;
-    font-weight: 500;
-  }
-
-  article.single pre {
-    background: unset;
-    padding: unset;
-
-    overflow-x: auto;
-    background: #f8f8f8 !important;
-    padding: 15px 20px;
-    border-radius: 5px;
-
-    margin-block-start: 40px;
-    margin-block-end: 40px;
-  }
-
-  article.single pre>code {
-    background: unset;
-    padding: unset;
-    font-weight: 400;
-  }
-
-  article.single h2 {
-    font-size: 180%;
-    line-height: 1.2em;
-    font-weight: 700;
-    margin-block-start: 40px;
-    margin-block-end: 20px;
-  }
-
-  article.single h3 {
-    margin-block-start: 30px;
-    margin-block-end: 20px;
-    font-size: 160%;
-    line-height: 1.2em;
-    font-weight: 700;
-  }
-
-  table {
-    width: 100%;
-  }
-
-  table,
-  th,
-  td {
-    border: 1px solid black;
-    text-align: left;
-  }
-
-  th,
-  td {
-    padding: 5px 10px;
-  }
-
-  article.single a {
-    text-decoration: underline;
-  }
-
-  article.single blockquote {
-    margin-left: 40px;
-    position: relative;
-    margin-block-start: 30px;
-    margin-block-end: 30px;
-    margin-right: 0;
-  }
-
-  article.single blockquote:before {
-    content: ' ';
-    background-image: url('/general/alert-light.svg');
-    background-size: 30px 30px;
-    height: 30px;
-    width: 30px;
-    position: absolute;
-    left: -40px;
-    top: 6px;
-  }
-
-  article.single blockquote p {
-    padding-left: 10px;
-  }
-
-  article.single video {
-    max-width: 100%;
-    margin: 30px auto;
-    display: block;
-    border-radius: 5px;
-    background: #f8f8f8 !important;
-  }
-
-  article.single audio {
-    width: 100%;
-    outline: none;
-  }
-
-  article.single .katex-display {
-    margin-block-start: 40px;
-    margin-block-end: 40px;
-  }
-
-  @media only screen and (max-width: 600px) {
-    article img {
-      max-width: 100%;
-      position: initial;
-      margin: 20px auto;
-    }
-  }
-</style>
+{{ partial "tailwind.html" . }}
diff --git a/themes/simple/layouts/partials/tailwind.html b/themes/simple/layouts/partials/tailwind.html
new file mode 100644
index 0000000..078882c
--- /dev/null
+++ b/themes/simple/layouts/partials/tailwind.html
@@ -0,0 +1,106 @@
+<style type="text/tailwindcss">
+  @layer utilities {
+
+    /* Container */
+    .container-blog {
+      max-width: 640px;
+      margin: 0 auto;
+    }
+
+    /* 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-200;
+    }
+
+    /* 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-200 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;
+    }
+
+  }
+</style>
-- 
cgit v1.2.3