1 files changed, 37 insertions, 30 deletions
diff --git a/src/app.css b/src/app.css
index c98a44c..c41d249 100644
--- a/src/app.css
+++ b/src/app.css
@@ -71,48 +71,67 @@
   &:not(:is(p)) {
     @apply text-white/95;
   }
-  &:is(blockquote) {
-    &::before {
-      background-color: var(--colour-full);
-    }
-  }
   &::after {
     @apply -ml-3 bg-gray-200/50;
   }
 }
+
+@utility blockquote-* {
+  @apply pl-4 p-2 relative my-1;
+    &::before {
+      @apply absolute w-1 transition-opacity left-0 top-[10%] h-[80%] opacity-50;
+      content: '';
+      background-color: --value(--color-*);
+    }
+    &:hover::before {
+      @apply opacity-100;
+    }
+    p {
+      &::after {
+        @apply hidden;
+      }
+    }
+}
+@utility md-card-* {
+  @apply p-4 rounded-lg bg-neutral-950 border-[1.8px] my-4 sticky top-4 z-50;
+  border-color: --value(--color-*);
+}
+
 #postmd {
   @apply font-sans;
   a {
-    @apply quicklink;
+    @apply quicklink text-nowrap;
   }
   h1 {
     @apply text-4xl mb-1.5 mt-2;
   }
   h2 {
-    @apply my-1.5 text-2xl;
+    @apply my-1.5 text-3xl;
   }
   h3 {
-    @apply my-1 text-xl;
+    @apply my-1 text-2xl;
   }
   h4 {
-    @apply my-1 text-lg;
+    @apply my-1 text-xl;
   }
-  h1,h2,h3,h4,h5,h6,p {
+  h1,h2,h3,h4,h5,h6,p,blockquote:not(.no-at-a-glance) {
     @apply relative text-white/90 hover:text-white;
     &::after {
       content: "";
       @apply absolute top-[20%] left-0 h-[60%] w-0.5 -ml-4 rounded-full transition-all;
     }
-    &:is(p)::after {
+    &:is(p)::after,
+    &:is(blockquote)::after {
       @apply bg-gray-200/5;
     }
-    &:not(:is(p))::after {
+    &:not(:is(p)):not(:is(blockquote))::after {
       @apply bg-gray-200/15;
     }
     &:hover::after {
       @apply -ml-3 bg-gray-200/75;
     }
-    &:hover ~ p:is(p)::after {
+    &:hover ~ p::after,
+    &:hover ~ blockquote::after {
       @apply bg-gray-200/4;
     }
   }
@@ -136,16 +155,17 @@
       @apply internal-header-active;
     }
   }
-  h5,h6,p {
+  h5,h6,p,blockquote:not(.no-at-a-glance) {
     &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover,~h5~*:hover,~h1:hover,~h2:hover,~h3:hover,~h4:hover,~h5:hover)) {
       @apply internal-header-active;
     }
   }
-  p::after {
+  p::after,
+  blockquote:not(.no-at-a-glance)::after {
     @apply h-[90%] top-[5%];
   }
   p {
-    @apply my-1;
+    @apply my-1.5 leading-5;
   }
   code {
     @apply font-genericmono;
@@ -195,20 +215,7 @@
     }
   }
   blockquote:not(.default-blockquote) {
-    @apply -ml-1 pl-4 p-2 relative my-1;
-    &::before {
-      @apply absolute w-1 bg-accent-primary/50 transition-colors left-0 top-[10%] h-[80%];
-      content: '';
-      --colour-full: var(--color-accent-primary);
-    }
-    &:hover::before {
-      background-color: var(--colour-full);
-    }
-    p {
-      &::after {
-        @apply hidden;
-      }
-    }
+    @apply blockquote-violet-500;
   }
 }