From 37ff7586fa5f1e7797b4e541c87c2a68d6af2279 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 21 Oct 2022 10:36:35 +0800
Subject: [PATCH] style(toc): optimize TOC style

---
 source/css/common/variables.styl       | 7 +++++++
 source/css/layout/_partial/toc.styl    | 7 +++----
 source/css/layout/article-content.styl | 4 ++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl
index a3725e0..c7283e9 100644
--- a/source/css/common/variables.styl
+++ b/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
diff --git a/source/css/layout/_partial/toc.styl b/source/css/layout/_partial/toc.styl
index 4ea0618..6e0143f 100644
--- a/source/css/layout/_partial/toc.styl
+++ b/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
         }
       }
     }
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 0e6e503..f1b679d 100644
--- a/source/css/layout/article-content.styl
+++ b/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 & {