Fix duplicate horizontal ruler before footnotes

assets/css/dark.css

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

assets/css/footer.css

@@ -19,4 +19,4 @@
     height: 24px;
     margin-left: .2rem;
     margin-right: .2rem;
-}
+}

assets/css/input.css

@@ -19,7 +19,7 @@
     body {
         background-color: var(--background-color);
         color: var(--color);
-        font: 16px/1.85 Roboto,sans-serif;
+        font: 16px/1.85 Roboto, sans-serif;
         /* FIXME: border-color transition does not work */
         transition: background-color 150ms ease-in, border-color 150ms ease-in;
     }
@@ -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?#iefix) format('embedded-opentype'), /* IE6-IE8 */
-            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'), /* 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 */
+        src: url(fonts/Roboto/roboto-v30-latin-regular.eot);
+        /* IE9 Compat Modes */
+        src: url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'),
+            /* IE6-IE8 */
+            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'),
+            /* 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 {
@@ -56,7 +63,7 @@
         list-style-position: inside;
     }
 
-    li > p {
+    li>p {
         display: inline;
     }
 }

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);
@@ -13,4 +15,4 @@ a#mode {
 .nav {
     border: solid 1px transparent;
     border-bottom: solid 1px var(--border-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 {
@@ -80,7 +85,7 @@
     text-decoration: underline;
 }
 
-.post-content > p {
+.post-content>p {
     padding-top: 15px;
     padding-bottom: 15px;
 }
@@ -138,9 +143,14 @@ pre {
     overflow-x: auto;
     scrollbar-width: thin;
     font-size: small;
+    margin-bottom: 20px;
+}
+
+hr {
+    margin-bottom: 20px;
 }
 
 .footnotes {
     border-top: solid 2px var(--border-color);
     font-size: small;
-}
+}

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.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+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'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -437,7 +449,7 @@ video {
 body {
   background-color: var(--background-color);
   color: var(--color);
-  font: 16px/1.85 Roboto,sans-serif;
+  font: 16px/1.85 Roboto, sans-serif;
   /* FIXME: border-color transition does not work */
   transition: background-color 150ms ease-in, border-color 150ms ease-in;
 }
@@ -472,10 +484,14 @@ hr {
 
   /* IE9 Compat Modes */
 
-  src: url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'), /* IE6-IE8 */
-            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'), /* 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 */
+  src: url(fonts/Roboto/roboto-v30-latin-regular.eot?#iefix) format('embedded-opentype'),
+            /* IE6-IE8 */
+            url(fonts/Roboto/roboto-v30-latin-regular.woff2) format('woff2'),
+            /* 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 */
@@ -486,7 +502,7 @@ li {
   list-style-position: inside;
 }
 
-li > p {
+li>p {
   display: inline;
 }
 
@@ -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 {