add toc style

docs/src/layouts/App/base.scss

@@ -53,7 +53,7 @@ body {
   line-height: 1.7;
   font-feature-settings: 'cv05' 1;
   background-color: $colorBlack;
-  color: $colorWhite;
+  color: $colorText;
   height: 100%;
 }
 

docs/src/layouts/App/prism.scss

@@ -27,7 +27,7 @@ pre[class*="language-"] {
 
 :not(pre) > code[class*="language-"] {
   white-space: normal;
-  color: $colorText;
+  color: $colorWhite;
   background: $codeBackground;
   border-radius: 0.2em;
   padding: 0.1em;
@@ -42,7 +42,7 @@ pre > code[class*="language-"] {
 pre[class*="language-"] {
   overflow: auto;
   position: relative;
-  color: $colorText;
+  color: $colorWhite;
   background: $codeBackground;
   padding: 1.2rem 1.5rem !important;
   border-radius: 0.5rem;

docs/src/layouts/App/style.scss

@@ -201,19 +201,21 @@ $menuBreakPoint: 750px;
     height: 100vh;
     overflow: auto;
     overscroll-behavior: contain;
+    border-right: 1px solid rgba($colorWhite, 0.1);
   }
 
   &__content {
     flex: 1 1 auto;
+    min-width: 0;
     padding: 0 2rem 2rem 2rem;
   }
 
   &__top-bar {
-    padding: 2rem;
+    padding: 1rem 0;
     position: sticky;
     z-index: 2;
     top: 0;
-    background-color: rgba($colorBlack, 0.7);
+    background-color: rgba($colorBlack, 0.8);
     backdrop-filter: blur(10px);
   }
 
@@ -248,12 +250,11 @@ $menuBreakPoint: 750px;
   }
 
   &__link {
-    display: block;
-    padding: 0.1rem 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.25rem 0.5rem;
     border-radius: 5px;
-    font-weight: 500;
-    color: rgba($colorWhite, 0.6);
-    margin-bottom: 0.2rem;
+    font-size: 0.85rem;
     margin-left: -0.5rem;
 
     &:hover {
@@ -262,7 +263,7 @@ $menuBreakPoint: 750px;
 
     &.active {
       color: $colorWhite;
-      background-color: rgba($colorWhite, 0.05);
+      background-color: rgba($colorWhite, 0.08);
     }
 
     &--draft {
@@ -270,8 +271,12 @@ $menuBreakPoint: 750px;
     }
 
     &--with-children::after {
-      content: '→';
+      content: '↓';
       color: rgba($colorWhite, 0.2);
     }
   }
+
+  &__main {
+    margin-top: 2rem;
+  }
 }