@import url("/assets/md.css")feat: write a bit

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

1 files changed, 32 insertions, 25 deletions

diff --git a/src/app.css b/src/app.css
index 4b1b53d..81a7926 100644
--- a/src/app.css
+++ b/src/app.css
@@ -71,15 +71,32 @@
   &: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 {
@@ -97,22 +114,24 @@
   h4 {
     @apply my-1 text-lg;
   }
-  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,12 +155,13 @@
       @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 {
@@ -195,20 +215,7 @@
     }
   }
   blockquote:not(.default-blockquote) {
-    @apply -ml-1 pl-4 p-2 relative my-1;
-    &::before {
-      @apply absolute w-1 bg-violet-500/50 transition-colors left-0 top-[10%] h-[80%];
-      content: '';
-      --colour-full: var(--color-violet-500);
-    }
-    &:hover::before {
-      background-color: var(--colour-full);
-    }
-    p {
-      &::after {
-        @apply hidden;
-      }
-    }
+    @apply blockquote-violet-500;
   }
 }