style: some visual elements for headers

src/css/default.css

@@ -30,7 +30,11 @@
     @apply text-2xl font-bold;
   }
   h2 {
-    @apply text-2xl font-medium mt-8;
+    @apply text-2xl font-medium mt-8 relative w-fit;
+  }
+  h2::after {
+    @apply block w-12 h-1 bg-muted-light absolute left-0 dark:bg-muted-dark mt-2 rounded-sm;
+    content: "";
   }
   h3,
   h4,
@@ -51,7 +55,7 @@
     @apply font-math;
   }
   math[display="block"] {
-    @apply overflow-x-auto my-1 text-xl;
+    @apply my-1 text-xl;
   }
   ol,
   ul {

src/templates/default.html

@@ -84,13 +84,18 @@
     class="container max-w-3xl mx-auto px-4 transition-colors duration-[2s]"
   >
     <header class="mt-14 md:mt-24 mb-14">
+      <div class="inline-flex items-center w-full">
         <h1 class="text-4xl md:text-5xl font-serif font-medium">
           <a
             href="/"
-          class="dark:hover:text-muted-dark hover:text-muted-light transition-colors duration-500"
+            class="dark:hover:text-muted-dark hover:text-muted-light transition-colors duration-500 text-nowrap"
             >Gradient Ascent</a
           >
         </h1>
+        <div
+          class="w-full flex-grow flex-shrink rounded-lg h-1 bg-muted-light dark:bg-muted-dark mx-4"
+        ></div>
+      </div>
       <p class="mt-8 mb-3 px-1 italic">
         writing about computers, math, hacks, games, and life.
       </p>

tailwind.config.js

@@ -15,7 +15,7 @@ module.exports = {
           light: "#44403c",
         },
         secondary: {
-          dark: "#2e1065",
+          dark: "#4c1d95",
           light: "#4338ca",
         },
         accent: {