style(toc): optimize TOC style

source/css/common/variables.styl

@@ -87,6 +87,8 @@ $text-color-4 = lighten($text-color-3, 30%)
 $text-color-5 = lighten($text-color-3, 60%)
 $text-color-6 = lighten($text-color-3, 90%)
 
+$toc-text-color = lighten($text-color-3, 20%)
+
 $badge-color = darken($background-color-1, 6%)
 $badge-background-color = lighten($text-color-3, 40%)
 
@@ -123,6 +125,8 @@ $dark-text-color-4 = darken($dark-text-color-3, 20%)
 $dark-text-color-5 = darken($dark-text-color-3, 50%)
 $dark-text-color-6 = darken($dark-text-color-3, 70%)
 
+$dark-toc-text-color = darken($dark-text-color-3, 15%)
+
 $dark-badge-color = lighten($dark-background-color-1, 10%)
 $dark-badge-background-color = lighten($dark-text-color-3, 40%)
 
@@ -184,6 +188,9 @@ root-color(mode) {
   --text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5
   --text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6
 
+  // toc text color
+  --toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color
+
   // badge color
   --badge-color mode == 'light' ? $badge-color : $dark-badge-color
   --badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color

source/css/layout/_partial/toc.styl

@@ -19,7 +19,7 @@
 
     ol {
       margin 0
-      padding 0 2px 12px 10px
+      padding 0 0.1rem 0.8rem 0.6rem
       text-align left
       list-style none
 
@@ -39,6 +39,7 @@
 
 
     .nav-item {
+      margin-bottom 0.2rem
       overflow hidden
       line-height 1.8
       white-space nowrap
@@ -66,14 +67,13 @@
 
       .nav-number
       .nav-text {
-        color var(--text-color-3)
+        color var(--toc-text-color)
       }
 
       .active > a {
         .nav-number
         .nav-text {
           color var(--primary-color)
-          font-weight bold
         }
       }
 
@@ -81,7 +81,6 @@
         .nav-number
         .nav-text {
           color var(--primary-color)
-          font-weight bold
         }
       }
     }

source/css/layout/article-content.styl

@@ -2,7 +2,7 @@ $avatarWidth = 3rem
 $arrow-icon-width = 1rem
 $post-nav-max-width = 14rem
 $article-title-font-size = 1.6rem
-$toc-container-width = 16rem
+$toc-container-width = 15rem
 
 
 .post-page-container {
@@ -269,7 +269,7 @@ $toc-container-width = 16rem
     box-sizing border-box
     width $toc-container-width
     max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
-    padding 2rem 0 2rem 2rem
+    padding 2rem 0 2rem 1.4rem
     transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
 
     .header-shrink & {