From 69db9b45dd8704102c612863c8ff73ee4bcdbf72 Mon Sep 17 00:00:00 2001
From: memdmp <memdmp@estrogen.zone>
Date: Wed, 14 Jan 2026 05:07:43 +0100
Subject: feat: a bunch of random temp shit

---
 src/app.css                         | 59 +++++++++++++++++++++++++++++++-----
 src/lib/blog/Post.svelte            |  8 +++--
 src/routes/blog/posts/test-post.svx | 60 +++++++++++++++++++++++++++++++++++--
 3 files changed, 114 insertions(+), 13 deletions(-)

(limited to 'src')

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;
   }
diff --git a/src/lib/blog/Post.svelte b/src/lib/blog/Post.svelte
index 20178e4..8d50be8 100644
--- a/src/lib/blog/Post.svelte
+++ b/src/lib/blog/Post.svelte
@@ -14,6 +14,10 @@
   let PostComp = $derived(post.default);
 </script>
 
-<div id="postmd">
-  <PostComp />
+<div class="flex justify-center">
+  <div class="max-w-2xl">
+    <article id="postmd">
+      <PostComp />
+    </article>
+  </div>
 </div>
diff --git a/src/routes/blog/posts/test-post.svx b/src/routes/blog/posts/test-post.svx
index 418c6e0..a3f8248 100644
--- a/src/routes/blog/posts/test-post.svx
+++ b/src/routes/blog/posts/test-post.svx
@@ -10,7 +10,11 @@ created: "2026-01-14T01:25:14Z"
 updated: "2026-01-14T01:25:14Z"
 ---
 
-# h1
+# Test Post
+
+this is a test blog post
+
+# section testing
 
 ## h2
 
@@ -18,10 +22,60 @@ This is an example test post.
 
 ## h2
 
-content
+Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
+
+Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
+
+Corporis voluptatibus magni dolorem. Et ipsum dolor occaecati. Ut error sunt ipsam vel dignissimos.
+
+Fuga animi voluptate sint nam consequatur adipisci. Nesciunt voluptatum eaque dolorum. Eos non animi aut aut. Debitis dolorum ducimus aspernatur facere aspernatur quasi.
+
+Praesentium at et alias est consectetur debitis sit cumque. Necessitatibus ratione et magni optio necessitatibus ut eius. Optio facere exercitationem consequuntur soluta ratione in. Corporis provident quia minima dicta vel et a.
 
 ### h3
 
+Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
+
+Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
+
+Corporis voluptatibus magni dolorem. Et ipsum dolor occaecati. Ut error sunt ipsam vel dignissimos.
+
+Fuga animi voluptate sint nam consequatur adipisci. Nesciunt voluptatum eaque dolorum. Eos non animi aut aut. Debitis dolorum ducimus aspernatur facere aspernatur quasi.
+
+Praesentium at et alias est consectetur debitis sit cumque. Necessitatibus ratione et magni optio necessitatibus ut eius. Optio facere exercitationem consequuntur soluta ratione in. Corporis provident quia minima dicta vel et a.
+
 #### h4
 
-456
+Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
+
+Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
+
+Corporis voluptatibus magni dolorem. Et ipsum dolor occaecati. Ut error sunt ipsam vel dignissimos.
+
+Fuga animi voluptate sint nam consequatur adipisci. Nesciunt voluptatum eaque dolorum. Eos non animi aut aut. Debitis dolorum ducimus aspernatur facere aspernatur quasi.
+
+Praesentium at et alias est consectetur debitis sit cumque. Necessitatibus ratione et magni optio necessitatibus ut eius. Optio facere exercitationem consequuntur soluta ratione in. Corporis provident quia minima dicta vel et a.
+
+### h3
+
+Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
+
+Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
+
+#### h4
+
+Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
+
+Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
+
+#### h4
+
+Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
+
+Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
+
+## h2
+
+Autem ut nam sapiente et a magni. Qui maiores in qui earum. Veniam veniam omnis id architecto. Et optio et et molestias.
+
+Eaque cum dolores ut enim voluptatibus id velit velit. Iure eveniet alias doloribus. Ratione in in est aspernatur.
-- 
cgit v1.2.3