Fix light theme, fix animation bugs, add programmatic scrolling, improve custom card blog component

assets/styles/lists.scss

@@ -18,19 +18,19 @@
 
 .list-style-type {
   &-none {
-    list-style-type: none;
+    list-style-type: none !important;
   }
 
   &-do {
-    list-style-type: do;
+    list-style-type: do !important;
   }
 
   &-enjoy {
-    list-style-type: enjoy;
+    list-style-type: enjoy !important;
   }
 
   &-faq {
-    list-style-type: faq;
+    list-style-type: faq !important;
 
     > li:nth-child(2n):not(:last-child) {
       @apply mb-2;

assets/styles/main.scss

@@ -40,6 +40,7 @@ html {
 
   ::-webkit-scrollbar {
     width: 8px;
+    height: 8px;
   }
 
   ::-webkit-scrollbar-track {
@@ -52,13 +53,21 @@ html {
     background-color: rgb(255 255 255 / 15%);
   }
 
+  ::-webkit-scrollbar-corner {
+    border-radius: 3px;
+    background-color: rgb(255 255 255 / 15%);
+  }
+
   &.light {
     ::-webkit-scrollbar-track {
       background-color: rgb(255 255 255 / 15%);
     }
 
     ::-webkit-scrollbar-thumb {
-      border-radius: 8px;
+      background-color: rgb(0 0 0 / 30%);
+    }
+    
+    ::-webkit-scrollbar-corner {
       background-color: rgb(0 0 0 / 30%);
     }
   }
@@ -137,12 +146,19 @@ body {
     margin: auto;
   }
 
-  :not(nav) > ul {
-    list-style-type: disc;
-    padding-left: 1.5em;
+  :not(nav) {
+    > ul {
+      @apply ps-6;
+      list-style-type: disc;
+    }
+
+    > ol {
+      @apply ps-6;
+      list-style-type: decimal;
+    }
   }
 
-  :is(section, article, aside).page {
+  :where(section, article, aside).page {
     :is(div, p):not(:last-child) {
       @apply mb-4;
     }
@@ -155,30 +171,37 @@ body {
           color: indianred;
         }
       }
-      
+
       &:not(:last-child) {
         @apply mb-2;
       }
     }
 
-    :is(ul, ol):not(:last-child) {
-      @apply mb-4;
+    ul {
+      list-style-type: disc;
     }
 
-    :where(p, li) {
-      code {
-        &:hover {
-          background-color: rgb(138 71 245 / 20%);
-        }
+    ol {
+      list-style-type: decimal;
+    }
 
-        padding: 0.25em;
+    :where(ul, ol) {
+      &:not(:last-child) {
+        @apply mb-4;
+      }
+      
+      li:not(:last-child) {
+        @apply mb-1;
+      }
+    }
 
-        border-radius: 0.5em;
+    code:not(pre *) {
+      @apply px-1 py-0.5 break-words cursor-pointer rounded-lg transition-ease;
 
-        cursor: pointer;
-        background-color: rgb(83 35 162 / 10%);
+      background-color: rgb(83 35 162 / 10%);
 
-        transition: 0.3s ease;
+      &:hover {
+        background-color: rgb(138 71 245 / 20%);
       }
     }
 
@@ -187,56 +210,49 @@ body {
     }
 
     blockquote {
-      padding: 0.75em 1em;
-
-      border-left: 0.25em solid rgb(153 153 255 / 60%);
-      border-top-right-radius: 0.5em;
-      border-bottom-right-radius: 0.5em;
+      @apply px-4 py-3 mb-4 border-l-4 rounded-r-xl transition-ease;
 
+      border-left-color: rgb(153 153 255 / 60%);
       background-color: rgb(153 153 255 / 10%);
 
-      transition: 0.3s ease;
-
       &:hover {
         border-left-color: rgb(153 153 255 / 100%);
         background-color: rgb(153 153 255 / 15%);
       }
-
-      :last-child {
-        margin-bottom: 0;
-      }
     }
 
     pre {
-      font-size: 14px;
-      padding: 1em;
+      @apply relative font-small overflow-auto min-h-14 max-h-[80rem] rounded-xl p-2 mb-4;
 
-      border-radius: 0.5em;
       background-color: rgb(83 35 162 / 5%);
 
-      position: relative;
-
-      overflow-x: auto;
-
-      code {
+      &:hover > .absolute {
+        @apply opacity-100;
+      }
+      
+      > code {
+        @apply scroll-p-2;
+        
         counter-reset: step;
         counter-increment: step 0;
 
-        scroll-padding: 0.5em;
-
         .line::before {
+          @apply inline-block w-4 mr-6 text-right;
+
           content: counter(step);
           counter-increment: step;
 
-          display: inline-block;
-
-          text-align: right;
-
           color: rgb(238 246 250 / 40%);
-
-          width: 1rem;
-          margin-right: 1.5rem;
         }
+
+        > span span:last-child {
+          @apply me-4;
+        }
+      }
+
+      .overlay-action {
+        background-color: rgb(153 153 255 / 10%);
+        border-color: rgb(153 153 255 / 60%);
       }
     }
   }
@@ -480,6 +496,41 @@ rt {
       border-color: rgb(123 123 255 / 80%);
     }
   }
+
+  :is(section, article, aside).page {
+    code:not(pre *) {
+      background-color: rgb(138 71 245 / 20%);
+
+      &:hover {
+        background-color: rgb(83 35 162 / 20%);
+      }
+    }
+
+    blockquote {
+      border-left-color: rgb(153 153 255 / 60%);
+      background-color: rgb(153 153 255 / 10%);
+
+      &:hover {
+        border-left-color: rgb(153 153 255 / 100%);
+        background-color: rgb(153 153 255 / 15%);
+      }
+    }
+
+    pre {
+      background-color: rgb(83 35 162 / 10%);
+
+      code {
+        .line::before {
+          color: rgb(83 85 89 / 40%);
+        }
+      }
+
+      .overlay-action {
+        background-color: rgb(153 153 255 / 30%);
+        border-color: rgb(153 153 255 / 80%);
+      }
+    }
+  }
 }
 
 // Dynamic classes.

assets/styles/transitions.scss

@@ -11,6 +11,18 @@
   }
 }
 
+.switch {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.15s ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
 .transition {
   &-ease {
     transition: all 0.3s ease;