From e663b95c9e290d0c07b4df12d7428aae476a8a38 Mon Sep 17 00:00:00 2001
From: Oliver Ladner <waste@lugh.ch>
Date: Mon, 24 Feb 2025 14:03:11 +0100
Subject: [PATCH] feat: fancy subtitle, more whitespace between footer elements

---
 static/css/out.css     | 211 ++++++++++++++++++++++++++++++++++++++---
 templates/article.html |  20 ++++
 templates/base.html    |  12 +--
 3 files changed, 224 insertions(+), 19 deletions(-)

diff --git a/static/css/out.css b/static/css/out.css
index 11e62890..949733dd 100644
--- a/static/css/out.css
+++ b/static/css/out.css
@@ -1209,6 +1209,26 @@ code {
   }
 }
 
+.absolute {
+  position: absolute;
+}
+
+.relative {
+  position: relative;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.-z-10 {
+  z-index: -10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -1221,10 +1241,6 @@ code {
   grid-column: span 3 / span 3;
 }
 
-.col-span-7 {
-  grid-column: span 7 / span 7;
-}
-
 .col-span-9 {
   grid-column: span 9 / span 9;
 }
@@ -1257,6 +1273,10 @@ code {
   margin-top: 1.5rem;
 }
 
+.-mt-11 {
+  margin-top: -2.75rem;
+}
+
 .block {
   display: block;
 }
@@ -1290,6 +1310,30 @@ code {
   width: 2rem;
 }
 
+.-rotate-45 {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-12 {
+  --tw-rotate: -12deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-6 {
+  --tw-rotate: -6deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-3 {
+  --tw-rotate: -3deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .list-outside {
   list-style-position: outside;
 }
@@ -1347,6 +1391,10 @@ code {
   border-top-width: 2px;
 }
 
+.border-l-4 {
+  border-left-width: 4px;
+}
+
 .border-rp-dawn-gold {
   --tw-border-opacity: 1;
   border-color: rgb(234 157 52 / var(--tw-border-opacity, 1));
@@ -1357,6 +1405,15 @@ code {
   border-color: rgb(242 233 225 / var(--tw-border-opacity, 1));
 }
 
+.border-rp-dawn-rose {
+  --tw-border-opacity: 1;
+  border-color: rgb(215 130 126 / var(--tw-border-opacity, 1));
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-rp-dawn-base {
   --tw-bg-opacity: 1;
   background-color: rgb(250 244 237 / var(--tw-bg-opacity, 1));
@@ -1372,14 +1429,61 @@ code {
   background-color: rgb(255 250 243 / var(--tw-bg-opacity, 1));
 }
 
-.bg-green-600 {
+.bg-rp-dawn-love {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+  background-color: rgb(180 99 122 / var(--tw-bg-opacity, 1));
 }
 
-.bg-yellow-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
+.bg-gradient-to-r {
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+
+.from-indigo-500 {
+  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-rp-dawn-love {
+  --tw-gradient-from: #b4637a var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(180 99 122 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-rp-dawn-gold {
+  --tw-gradient-from: #ea9d34 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(234 157 52 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.from-10\% {
+  --tw-gradient-from-position: 10%;
+}
+
+.via-sky-500 {
+  --tw-gradient-to: rgb(14 165 233 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #0ea5e9 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-rp-dawn-gold {
+  --tw-gradient-to: rgb(234 157 52 / 0)  var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), #ea9d34 var(--tw-gradient-via-position), var(--tw-gradient-to);
+}
+
+.via-30\% {
+  --tw-gradient-via-position: 30%;
+}
+
+.to-emerald-500 {
+  --tw-gradient-to: #10b981 var(--tw-gradient-to-position);
+}
+
+.to-rp-dawn-pine {
+  --tw-gradient-to: #286983 var(--tw-gradient-to-position);
+}
+
+.to-90\% {
+  --tw-gradient-to-position: 90%;
 }
 
 .p-1 {
@@ -1398,6 +1502,10 @@ code {
   padding: 2rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .pb-60 {
   padding-bottom: 15rem;
 }
@@ -1410,6 +1518,18 @@ code {
   padding-top: 5rem;
 }
 
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1438,6 +1558,16 @@ code {
   line-height: 1.75rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-base {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1470,6 +1600,21 @@ code {
   color: rgb(87 82 121 / var(--tw-text-opacity, 1));
 }
 
+.text-rp-dawn-gold {
+  --tw-text-opacity: 1;
+  color: rgb(234 157 52 / var(--tw-text-opacity, 1));
+}
+
+.text-rp-dawn-base {
+  --tw-text-opacity: 1;
+  color: rgb(250 244 237 / var(--tw-text-opacity, 1));
+}
+
+.text-rp-dawn-overlay {
+  --tw-text-opacity: 1;
+  color: rgb(242 233 225 / var(--tw-text-opacity, 1));
+}
+
 .no-underline {
   text-decoration-line: none;
 }
@@ -2110,6 +2255,25 @@ code {
   }
 }
 
+.hover\:border-l-4:hover {
+  border-left-width: 4px;
+}
+
+.hover\:border-rp-dawn-rose:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(215 130 126 / var(--tw-border-opacity, 1));
+}
+
+.hover\:border-red-700:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));
+}
+
+.hover\:bg-rp-dawn-love:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(180 99 122 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:no-underline:hover {
   text-decoration-line: none;
 }
@@ -2136,10 +2300,6 @@ code {
     grid-column: span 7 / span 7;
   }
 
-  .md\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
   .md\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
@@ -2172,6 +2332,11 @@ code {
     font-size: 1rem;
     line-height: 1.5rem;
   }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -2231,4 +2396,24 @@ code {
     --tw-text-opacity: 1;
     color: rgb(224 222 244 / var(--tw-text-opacity, 1));
   }
+
+  .dark\:text-rp-moon-gold {
+    --tw-text-opacity: 1;
+    color: rgb(246 193 119 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-rp-moon-highlight-low {
+    --tw-text-opacity: 1;
+    color: rgb(42 40 62 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-rp-moon-subtle {
+    --tw-text-opacity: 1;
+    color: rgb(144 140 170 / var(--tw-text-opacity, 1));
+  }
+
+  .dark\:text-rp-moon-highlight-med {
+    --tw-text-opacity: 1;
+    color: rgb(68 65 90 / var(--tw-text-opacity, 1));
+  }
 }
diff --git a/templates/article.html b/templates/article.html
index a59558ad..32cc607f 100644
--- a/templates/article.html
+++ b/templates/article.html
@@ -112,5 +112,25 @@
       </p>
     </div>
     {% endif %}
+    <div class="p-3">
+      <p>
+    <script>
+	var remark_config = {
+		host: 'https://ceres.fly.dev',
+		site_id: 'lugh.ch',
+		components: ['embed', 'last-comments'],
+		max_shown_comments: 15,
+    max_last_comments: 15,
+		theme: 'dark',
+		locale: 'en',
+		show_email_subscription: false,
+		simple_view: true,
+		no_footer: true
+	}
+</script>
+<script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);</script>
+<div id="remark42"></div>
+      </p>
+    </div>
   </article>
 {% endblock %}
diff --git a/templates/base.html b/templates/base.html
index c187d623..bc5dea07 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -59,9 +59,9 @@
         <header>
           <div id="skiptocontent"><a href="#content">skip to main content</a></div>
           <hgroup>
-            <h1 class="text-4xl md:text-7xl font-bold text-rp-dawn-foam"><a class="no-underline text-rp-dawn-pine dark:text-rp-moon-foam" href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
+            <h1 class="z-20 relative text-4xl md:text-7xl font-bold text-rp-dawn-foam"><a class="no-underline text-rp-dawn-pine dark:text-rp-moon-foam" href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
             {% if SITESUBTITLE %}
-            <h2 class="text-xl -mt-9 ml-14 md:text-2xl text-rp-dawn-love dark:text-rp-moon-iris"><tt style="font-family: 'C64 Pro Mono'; letter-spacing: -0.2em;">{{ SITESUBTITLE }}</tt></h2>
+            <h2 class="z-10 bg-gradient-to-r from-rp-dawn-gold from-10% to-rp-dawn-pine to-90% absolute -rotate-3 text-base -mt-11 ml-14 md:text-xl text-rp-dawn-overlay dark:text-rp-moon-highlight-med"><tt style="font-family: 'C64 Pro Mono'; letter-spacing: -0.2em;">{{ SITESUBTITLE }}</tt></h2>
             {% endif %}
           </hgroup>
         </header>
@@ -117,20 +117,20 @@
             <div class="col-span-3 p-4">
               <p>
               Generated by <a href="https://getpelican.com">Pelican</a> with a
-              <a href="https://arrakis.fly.dev/weeheavy/pelican-theme">bespoke</a> theme inspired by <a href="https://rosepinetheme.com">Rosé Pine</a>.
+              <a href="https://arrakis.fly.dev/weeheavy/pelican-theme" rel="nofollow">bespoke</a> theme inspired by <a href="https://rosepinetheme.com">Rosé Pine</a>.
               </p>
               <p>
               <a href="https://buymeacoffee.com/lugh"><b>Buy me a coffee?</b></a>
               </p>
             </div>
             <div class="col-span-3 p-4 md:border-l-4 border-rp-dawn-overlay dark:border-rp-moon-overlay">
-              <p>
+              <p class="pb-4">
               Mostly valid <a href="https://wave.webaim.org/report#/https://lugh.ch">WCAG 2.2 AA</a>
               </p>
-              <p>
+              <p class="pb-4">
               100% organic content licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" rel="license noopener noreferrer" style="display: inline-block">CC BY-SA 4.0</a>
               </p>
-              <p>
+              <p class="pb-4">
               <a href="/feeds/atom.xml">Atom feed</a>
               </p>
             </div>