From 50a9106b6c72a97aee9d6c430c1b3dac81ee5d3e Mon Sep 17 00:00:00 2001
From: jeffreytse <jeffreytse.mail@gmail.com>
Date: Sun, 12 Jul 2020 16:19:42 +0800
Subject: feat: change article menu style

---
 _includes/sidebar/article-menu.html |  5 +++--
 _sass/misc/article-menu.scss        | 42 ++++++++++++++++++++++++-------------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/_includes/sidebar/article-menu.html b/_includes/sidebar/article-menu.html
index ff984b6..96a4968 100644
--- a/_includes/sidebar/article-menu.html
+++ b/_includes/sidebar/article-menu.html
@@ -7,7 +7,7 @@
 </style>
 
 <div class="post-menu">
-  <div class="post-menu-title">Contents</div>
+  <div class="post-menu-title">TOC</div>
   <div class="post-menu-content"></div>
 </div>
 
@@ -49,7 +49,8 @@
         var headerHeight = headerTop + headerHeight + 20;
         if (headingRect.top <= headerHeight) {
           var id = 'h-' + h.getAttribute('id');
-          var curActive = menuContent.querySelector('a[href="#' + id  + '"]');
+          var a = menuContent.querySelector('a[href="#' + id  + '"]');
+          var curActive = a.parentNode;
           if (curActive) {
             curActive.classList.add('active');
           }
diff --git a/_sass/misc/article-menu.scss b/_sass/misc/article-menu.scss
index 006f6ee..ff2bf7e 100644
--- a/_sass/misc/article-menu.scss
+++ b/_sass/misc/article-menu.scss
@@ -7,40 +7,54 @@
   max-width: 250px;
 
   .post-menu-title {
-    font-size: $base-font-size * 1.35;
-    margin-bottom: 6px;
+    font-size: $base-font-size * 1.5;
+    margin-bottom: 14px;
     font-weight: 600;
-    color: #4e4e4e;
-
-    &:before {
-      content: '\f02e';
-      margin-right: 5px;
-      font-size: $base-font-size * 1.15;
-    }
+    color: #222;
   }
 
   .post-menu-content {
     ul {
+      border-left: 1px solid #e9ecef;
+      $indent: $base-font-size / 4;
+      $active-bgcolor: #ecebec;
+
       @for $i from 2 to 7 {
         .h-h#{$i} {
-          padding-left: ($i - 2) * $base-font-size * 0.9;
-          font-size: (7 - $i) + $base-font-size * 0.9;
+          padding-inline-start: $indent + ($i - 2) * $base-font-size * 1.3;
+          font-size: $base-font-size * 1.2;
+          line-height: 1.4;
         }
       }
 
       a {
         display: flex;
-        padding: 0px 8px;
+        padding: 2px 8px;
+        color: darken($text-color, 10%);
 
         * {
           pointer-events: none;
         }
+
+        &:hover {
+          text-decoration: none;
+          color: lighten($text-color, 20%)!important;
+        }
       }
 
       .active {
-        color: white;
-        background: mix(invert($theme-color), darkorange);
+        background-color: $active-bgcolor;
         transition: background 0.5s;
+        border-left: 2px solid #202020;
+        margin-left: -2px;
+
+        &:hover {
+          background-color: lighten($active-bgcolor, 2%);
+        }
+
+        a {
+          color: #121416;
+        }
       }
     }
   }
-- 
cgit v1.2.3