@import url("/assets/md.css")feat: a bunch of random temp shit

@import url("/assets/md.css")

1 files changed, 51 insertions, 8 deletions

diff --git a/src/app.css b/src/app.css
index 49c5f3a..ae807c9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,12 +21,22 @@
     'Courier', 'monospace';
   --font-mono:
     'PxPlus IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
+  --font-genericmono:
+    'JetBrainsMono NF', 'Jetbrains Mono', 'JetBrains Mono', monospace;
 }
 
+@utility internal-header-active {
+  &:not(:is(p)) {
+    @apply text-white/95;
+  }
+  &::after {
+    @apply -ml-3 bg-gray-200/50;
+  }
+}
 #postmd {
   @apply font-sans;
   h1 {
-    @apply font-bios text-5xl mb-1.5 mt-2;
+    @apply first:font-bios first:text-5xl text-4xl mb-1.5 mt-2;
   }
   h2 {
     @apply my-1.5 text-2xl;
@@ -37,17 +47,50 @@
   h4 {
     @apply my-1 text-lg;
   }
-  h1,h2,h3,h4,h5 {
-    @apply relative;
-    &::before {
+  h1,h2,h3,h4,h5,h6,p {
+    @apply relative text-white/90 hover:text-white;
+    &::after {
       content: "";
-      @apply absolute top-[20%] left-0 h-[60%] w-1 -ml-3 rounded-full transition-all bg-gray-200/0;
+      @apply absolute top-[20%] left-0 h-[60%] w-0.5 -ml-4 rounded-full transition-all;
+    }
+    &:is(p)::after {
+      @apply bg-gray-200/5;
+    }
+    &:not(:is(p))::after {
+      @apply bg-gray-200/15;
+    }
+    &:hover::after {
+      @apply -ml-3 bg-gray-200/75;
+    }
+  }
+  h1 {
+    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover)) {
+      @apply internal-header-active;
+    }
+  }
+  h2 {
+    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover)) {
+      @apply internal-header-active;
+    }
+  }
+  h3 {
+    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover)) {
+      @apply internal-header-active;
     }
-    &:hover::before,
-    &:has(+p:hover)::before {
-      @apply -ml-2 bg-gray-200;
+  }
+  h4 {
+    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover)) {
+      @apply internal-header-active;
     }
   }
+  h5,h6,p {
+    &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover,~h5~*:hover)) {
+      @apply internal-header-active;
+    }
+  }
+  p::after {
+    @apply h-[90%] top-[5%];
+  }
   p {
     @apply my-1;
   }