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

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

1 files changed, 93 insertions, 2 deletions

diff --git a/src/app.css b/src/app.css
index ae807c9..7dcddd4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -13,7 +13,8 @@
   --font-sans: 
     InterVariable, Inter, "Noto Sans",
     ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
+  --font-space-grotesk: "Space Grotesk", var(--font-sans), sans-serif;
   --font-bios:
     'Ac437 IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
   --font-grub:
@@ -23,6 +24,43 @@
     'PxPlus IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
   --font-genericmono:
     'JetBrainsMono NF', 'Jetbrains Mono', 'JetBrains Mono', monospace;
+  --color-formatted-table-border: var(--color-neutral-900);
+  --color-formatted-table-background: var(--color-neutral-950);
+  --color-codeblock-border: var(--color-neutral-900);
+  --color-codeblock-background: var(--color-neutral-950);
+}
+
+@utility afterunderline-* {
+  @apply relative;
+  &::before {
+    content: '';
+    background: --value(--color-*);
+    @apply absolute top-full left-0 -mt-0.5 h-[0.2rem] w-full transition-all -z-10;
+  }
+}
+@utility afterunderline-hoverstate {
+  &::before {
+    @apply top-0 left-0 mt-0 h-full w-full;
+  }
+}
+
+@utility formatted-table {
+  @apply relative overflow-x-auto shadow-xs rounded-xl border bg-formatted-table-background border-formatted-table-border;
+  table {
+    @apply w-full text-sm text-left rtl:text-right bg-formatted-table-background;
+    thead {
+      @apply text-sm border-b rounded-xl border-formatted-table-border;
+    }
+    tbody tr {
+      @apply not-last:border-b border-formatted-table-border;
+    }
+    th,td {
+      @apply px-6 py-3;
+    }
+    td > b:first-child:last-child {
+      @apply px-6 py-4 font-medium whitespace-nowrap;
+    }
+  }
 }
 
 @utility internal-header-active {
@@ -35,8 +73,11 @@
 }
 #postmd {
   @apply font-sans;
+  a {
+    @apply text-red-400 transition-all afterunderline-red-400 hover:afterunderline-hoverstate hover:text-white;
+  }
   h1 {
-    @apply first:font-bios first:text-5xl text-4xl mb-1.5 mt-2;
+    @apply text-4xl mb-1.5 mt-2;
   }
   h2 {
     @apply my-1.5 text-2xl;
@@ -62,6 +103,9 @@
     &:hover::after {
       @apply -ml-3 bg-gray-200/75;
     }
+    &:hover ~ p:is(p)::after {
+      @apply bg-gray-200/4;
+    }
   }
   h1 {
     &:not(:hover):has(~*:hover):not(:has(~h1~*:hover)) {
@@ -94,6 +138,53 @@
   p {
     @apply my-1;
   }
+  code {
+    @apply font-genericmono;
+  }
+  p code {
+    @apply bg-codeblock-background -my-1 p-1 rounded-lg;
+  }
+  pre {
+    @apply p-3 -mx-2 overflow-scroll bg-codeblock-background border border-codeblock-border rounded-lg transition-colors max-h-[min(75vh,38rem)];
+    code {
+      .token {
+        @apply text-red-500;
+      }
+      &,
+      .token.builtin,
+      .token.interpolation {
+        @apply text-[#9CDCFE] selection:bg-[#9CDCFE] selection:text-black;
+      }
+      .token.operator {
+        @apply text-[#d4d4d4] selection:bg-[#d4d4d4] selection:text-black;
+      }
+      .token.class-name {
+        @apply text-[#4ec9b0] selection:bg-[#4ec9b0] selection:text-black;
+      }
+      .token.number {
+        @apply text-[#b5cea8] selection:bg-[#b5cea8] selection:text-black;
+      }
+      .token.comment {
+        @apply text-[#6a9955] selection:bg-[#6a9955] selection:text-black;
+      }
+      .token.keyword {
+        @apply text-[#c586c0] selection:bg-[#c586c0] selection:text-black;
+      }
+      .token.punctuation {
+        @apply text-[white] selection:bg-[white] selection:text-black;
+      }
+      .token.function {
+        @apply text-[#dcdcaa] selection:bg-[#dcdcaa] selection:text-black;
+      }
+      .token.string {
+        @apply text-[#ce9178] selection:bg-[#ce9178] selection:text-black;
+      }
+      .token.boolean,
+      .token.interpolation-punctuation {
+        @apply text-[#5293c9] selection:bg-[#5293c9] selection:text-black;
+      }
+    }
+  }
 }
 
 /*