feat(ui): enhance scrollbar and navbar styling

• Add custom scrollbar styles for markdown content
• Adjust main scrollbar width and height
• Implement smooth transition for navbar during page navigation
• Remove unused fade-in-down animation
• Update navbar drawer height to use dynamic viewport height

Author: EvanNotFound

layout/_partials/navbar.ejs

@@ -1,6 +1,5 @@
 <header class="navbar-container px-6 md:px-12">
-
-    <div class="navbar-content <%- (theme.home_banner.enable === true && is_home() && !page.prev) ? 'has-home-banner' : '' %>">
+    <div class="navbar-content transition-navbar <%- (theme.home_banner.enable === true && is_home() && !page.prev) ? 'has-home-banner' : '' %>">
         <div class="left">
             <% if (theme.defaults.hasOwnProperty('logo') && theme.defaults.logo) { %>
                 <a class="logo-image h-8 w-8 sm:w-10 sm:h-10 mr-3" href="<%= config.root %>">
@@ -79,7 +78,7 @@
     </div>
 
     <!-- Mobile sheet -->
-    <div class="navbar-drawer h-screen w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
+    <div class="navbar-drawer h-dvh w-full absolute top-0 left-0 bg-background-color flex flex-col justify-between">
         <ul class="drawer-navbar-list flex flex-col px-4 justify-center items-start">
             <% for (let i in theme.navbar.links) { %>
                 <% if (theme.navbar.links[i].path !== 'none') { %>

source/css/common/animated.styl

@@ -27,11 +27,6 @@ transition-t(property, delay, duration, function)
   transition-duration convert($temp-duration)
   transition-timing-function convert($temp-function)
 
-.fade-in-down-animation
-  animation-fill-mode both
-  animation-duration 1s
-  animation-name fade-in-down
-  will-change transform
 
 @keyframes fade-in-down
   0%

source/css/common/basic.styl

@@ -15,10 +15,25 @@ redefine-mobile()
 *
   transition-g()
 
+
+// html, body
+html, body
+  position relative
+  width 100%
+  height 100%
+  margin 0
+  padding 0
+  color var(--default-text-color)
+  background var(--background-color)
+  font-family $default-font-family
+  font-weight $default-font-weight
+  font-size $default-font-size
+  line-height $default-line-height
+
   // Custom scrollbar
   &::-webkit-scrollbar
-    width 6px
-    height 6px
+    width 14px
+    height 8px
     transition all 0.2s ease
     display block
 
@@ -38,24 +53,6 @@ redefine-mobile()
     background-clip content-box
     border 3px solid transparent
 
-// html, body
-html, body
-  position relative
-  width 100%
-  height 100%
-  margin 0
-  padding 0
-  color var(--default-text-color)
-  background var(--background-color)
-  font-family $default-font-family
-  font-weight $default-font-weight
-  font-size $default-font-size
-  line-height $default-line-height
-
-  &::-webkit-scrollbar
-    width 14px
-    height 8px
-
   +redefine-tablet()
     font-size: $default-font-size * 0.96
     line-height: $default-line-height * 0.96

source/css/common/markdown.styl

@@ -251,6 +251,23 @@
     text-align center /* Center the content */
     padding-bottom 8px
 
+    &:hover::-webkit-scrollbar-thumb
+      border 3px solid rgba(183, 183, 183, 0.3)
+
+    &::-webkit-scrollbar
+      width 6px
+      height 6px
+      transition all 0.2s ease
+      display block
+
+    &::-webkit-scrollbar-track
+      background transparent
+      border none
+
+    &::-webkit-scrollbar-thumb
+      border-radius 20px
+      border 3px solid rgba(183, 183, 183, 0)
+      transition all 0.2s ease
 
     svg
       display inline-block /* Allow content to be centered properly */
@@ -262,5 +279,24 @@
     overflow-x auto
     text-align center
 
+    &:hover::-webkit-scrollbar-thumb
+      border 3px solid rgba(183, 183, 183, 0.3)
+
+    &::-webkit-scrollbar
+      width 6px
+      height 6px
+      transition all 0.2s ease
+      display block
+
+    &::-webkit-scrollbar-track
+      background transparent
+      border none
+
+    &::-webkit-scrollbar-thumb
+      border-radius 20px
+      border 3px solid rgba(183, 183, 183, 0)
+      transition all 0.2s ease
+
+
     svg
       display inline-block

source/css/layout/_partials/navbar.styl

@@ -308,3 +308,11 @@ $logo-image-box-width = 34px
 .icon-rotated {
   transform: rotate(90deg);
 }
+
+.transition-navbar
+  transition max-width 0.3s ease-out
+
+html.is-animating
+  .transition-navbar
+    max-width $navbar-width-pages !important
+    transition max-width 0.2s ease-out

source/css/layout/page.styl

@@ -140,17 +140,7 @@
   transition 0.4s
   opacity 1
 
-.transition-navbar
-  transition 0.3s ease
-  transform translateY(0)
-  opacity 1
-
 html.is-animating
   .transition-fade
     opacity 0
-    transition 0.4s
-
-  .transition-navbar
-    transform translateY(-105%)
-    opacity 0
-    transition 0.3s ease
+    transition 0.4s