feat: change article menu style

1 files changed, 28 insertions, 14 deletions

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;
+        }
       }
     }
   }