fix(toc): update height to use 100dvh for better responsiveness (#688)

* fix(toc): update height to use 100dvh for better responsiveness

* fix(toc): adjust backdrop color and add blur effect for improved visibility

assets/css/_mixin/_blur.scss

@@ -1,4 +1,5 @@
 @mixin blur {
+  // TODO refactor blur with backdrop-filter
   .blur & {
     @include filter(blur(1.5px));
   }

assets/css/_partials/_single/_toc.scss

@@ -250,7 +250,7 @@
   opacity: 0;
   translate: 100vw 0;
   width: MIN(calc(100% - 4rem), 460px);
-  height: 100%;
+  height: 100dvh;
   max-width: 100%;
   max-height: 100%;
   margin-right: 0;
@@ -272,14 +272,15 @@
       font-size: max($toc-content-font-size, 1rem);
 
       nav {
-        max-height: calc(100vh - 5rem);
+        max-height: calc(100dvh - 5rem);
         overflow: auto;
       }
     }
   }
 
   &::backdrop {
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(2px);
     transition:
       display 0.5s allow-discrete,
       overlay 0.5s allow-discrete,