💄 Style: adjust toc style (#65)

assets/css/_core/_base.scss

@@ -15,6 +15,7 @@ html {
 }
 
 /* scrollbar, only support webkit */
+// TODO
 ::-webkit-scrollbar {
   width: .5rem;
   height: .5rem;

assets/css/_core/_media.scss

@@ -1,26 +1,38 @@
 @media only screen and (min-width: 1441px) {
   .page {
-    width: 66%;
+    width: 60%;
 
     [page-style=wide] & {
       width: 70%;
     }
   }
+  
+  #toc-auto {
+    width: 20%!important;
+  }
 }
 
 @media only screen and (max-width: 1440px) {
   .page {
-    width: 60%;
+    width: 56%;
 
     [page-style=wide] & {
-      width: 66%;
+      width: 60%;
     }
   }
+
+  #toc-auto {
+    width: 20%!important;
+  }
 }
 
 @media only screen and (max-width: 1200px) {
   .page {
-    width: 56%!important;
+    width: 52%!important;
+  }
+
+  #toc-auto {
+    width: 20%!important;
   }
 
   #header-desktop .header-wrapper {

assets/css/_partial/_single/_toc.scss

@@ -49,29 +49,18 @@
 
 #toc-auto {
   display: block;
-  // position: absolute;
-  // width: $MAX_LENGTH;
-  // max-width: 0;
-  width: 15%; // TODO
+  position: sticky;
+  top: $header-height + 1rem;
+  height: 100%;
   padding-left: .8rem;
   padding-right: .8rem;
-  margin-left: 1rem;
+  margin: 1rem;
   border-left: 4px solid $global-border-color;
   @include overflow-wrap(break-word);
   box-sizing: border-box;
-  // top: 10rem;
   left: 0;
   visibility: hidden;
 
-  [header-desktop] & {
-    margin-top: $header-height + 5rem;
-  }
-
-  [header-desktop=normal] & {
-    // top: 5rem;
-    margin-top: 5rem;
-  }
-
   @include blur;
 
   [theme=dark] & {