Fix duplicate horizontal ruler before footnotes

assets/css/dark.css

@@ -12,6 +12,7 @@ html.dark {
         line {
             fill: none;
         }
+
         circle {
             fill: none;
         }

assets/css/input.css

@@ -39,16 +39,23 @@
 
     /* roboto-regular - latin */
     @font-face {
-        font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+        font-display: swap;
+        /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
         font-family: 'Roboto';
         font-style: normal;
         font-weight: 400;
-        src: url(fonts/Roboto/roboto-v30-latin-regular.eot); /* IE9 Compat Modes */
+        src: url(fonts/Roboto/roboto-v30-latin-regular.eot);
-        src: url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
+        /* IE9 Compat Modes */
-            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */
+        src: url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'),
-            url(fonts/Roboto/roboto-v30-latin-regular.woff) format('woff'), /* Modern Browsers */
+            /* IE6-IE8 */
-            url(fonts/Roboto/roboto-v30-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */
+            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'),
-            url(fonts/Roboto/roboto-v30-latin-regular.svg#Roboto) format('svg'); /* Legacy iOS */
+            /* Super Modern Browsers */
+            url(fonts/Roboto/roboto-v30-latin-regular.woff) format('woff'),
+            /* Modern Browsers */
+            url(fonts/Roboto/roboto-v30-latin-regular.ttf) format('truetype'),
+            /* Safari, Android, iOS */
+            url(fonts/Roboto/roboto-v30-latin-regular.svg#Roboto) format('svg');
+        /* Legacy iOS */
     }
 
     li {

assets/css/nav.css

@@ -1,9 +1,11 @@
 a#mode {
     display: block;
+
     line {
         stroke: var(--color);
         fill: var(--color);
     }
+
     circle {
         fill: var(--color);
         stroke: var(--color);

assets/css/post.css

@@ -16,6 +16,7 @@
 
 .post-header {
     margin-top: 1em;
+    margin-bottom: 1em;
 }
 
 .post-title {
@@ -23,12 +24,12 @@
     font-size: 2em;
     line-height: 1.2;
     margin-top: 10px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     font-weight: 700;
 }
 
 .post-banner {
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 .post-meta {
@@ -41,11 +42,15 @@
     padding-top: 8px;
 }
 
-.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
+.post-content h1,
+.post-content h2,
+.post-content h3,
+.post-content h4,
+.post-content h5,
+.post-content h6 {
     color: var(--post-header-color);
     font-weight: 700;
     letter-spacing: .03rem;
-    margin-top: 30px;
 }
 
 .post-content h1 {
@@ -138,6 +143,11 @@ pre {
     overflow-x: auto;
     scrollbar-width: thin;
     font-size: small;
+    margin-bottom: 20px;
+}
+
+hr {
+    margin-bottom: 20px;
 }
 
 .footnotes {

content/the_curious_case_of_digital_signatures/index.md

@@ -417,7 +417,7 @@ Makes sense? Still reading?
 
 If so, you potentially even learned a lot about how _digital certificates_ work on accident. They are basically digital signatures that verify the identify of entities via trusted third parties ([Certificate Authorities](https://www.digicert.com/blog/what-is-a-certificate-authority)) and with more metadata associated. At least that's my simplistic explanation. But how the [Public Key Infrastructure](https://www.okta.com/identity-101/public-key-infrastructure/) works is a topic for another day.
 
----
+
 
 [^1]: I'll assume some basic Linux skills since those are more often than not very handy. You might even acquire the "required" Linux skills by accident while reading this just by the context the commands are used in—just like human languages.
 

static/tailwind.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -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";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
+1. Use the user's configured `mono` font-family by default.
-2. Correct the odd `em` font sizing in all browsers.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -201,6 +211,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -224,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
+input:where([type='button']),
-[type='reset'],
+input:where([type='reset']),
-[type='submit'] {
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -472,10 +484,14 @@ hr {
 
   /* IE9 Compat Modes */
 
-  src: url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
+  src: url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'),
-            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'), /* Super Modern Browsers */
+            /* IE6-IE8 */
-            url(fonts/Roboto/roboto-v30-latin-regular.woff) format('woff'), /* Modern Browsers */
+            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'),
-            url(fonts/Roboto/roboto-v30-latin-regular.ttf) format('truetype'), /* Safari, Android, iOS */
+            /* Super Modern Browsers */
+            url(fonts/Roboto/roboto-v30-latin-regular.woff) format('woff'),
+            /* Modern Browsers */
+            url(fonts/Roboto/roboto-v30-latin-regular.ttf) format('truetype'),
+            /* Safari, Android, iOS */
             url(fonts/Roboto/roboto-v30-latin-regular.svg#Roboto) format('svg');
 
   /* Legacy iOS */
@@ -538,6 +554,10 @@ li > p {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -588,6 +608,10 @@ li > p {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 .container {