diff --git a/layout/_partial/archive-list.ejs b/layout/_partial/archive-list.ejs
index 48b333d0..7553dda5 100644
--- a/layout/_partial/archive-list.ejs
+++ b/layout/_partial/archive-list.ejs
@@ -8,10 +8,10 @@
             <ul class="article-list border-box">
                 <% postItem.postList.forEach(post => { %>
                     <li class="article-item border-box">
+                        <span class="article-date border-box"><%= date(post.date, 'MM-DD') %></span>
                         <a class="article-title border-box text-ellipsis"
                            href="<%- url_for(post.path) %>"
                         ><%= post.title %></a>
-                        <span class="article-date border-box"><%= date(post.date, 'MM-DD') %></span>
                     </li>
                 <% }) %>
             </ul>
diff --git a/layout/_partial/comment/comment.ejs b/layout/_partial/comment/comment.ejs
index 3e565109..a53db81b 100644
--- a/layout/_partial/comment/comment.ejs
+++ b/layout/_partial/comment/comment.ejs
@@ -6,9 +6,8 @@ const {
 %>
 
 <% if (theme_comment_enable === true && theme_comment_use) { %>
-    <div class="comments-container">
-        <div id="comments-anchor"></div>
-        <div class="comment-area-title">
+    <div class="comments-container border-box">
+        <div id="comments-anchor" class="comment-area-title border-box">
             <i class="fas fa-comments"></i>&nbsp;<%- __('comments') %>
         </div>
         <% if  (theme_comment_use === 'valine') { %>
diff --git a/layout/_partial/toc.ejs b/layout/_partial/toc.ejs
index db00a643..9b5ab63c 100644
--- a/layout/_partial/toc.ejs
+++ b/layout/_partial/toc.ejs
@@ -1,5 +1,5 @@
-<div class="post-toc-wrap">
-    <div class="post-toc">
+<div class="post-toc-wrap border-box">
+    <div class="post-toc border-box">
         <%- toc(
                 page.content,
                 {
diff --git a/layout/category-content.ejs b/layout/category-content.ejs
index 3461e71c..81792a7c 100644
--- a/layout/category-content.ejs
+++ b/layout/category-content.ejs
@@ -1,5 +1,5 @@
 <div class="fade-in-down-animation">
-    <div class="category-container">
+    <div class="category-container border-box">
         <div class="category-name">
             <i class="fas fa-folder"></i>&nbsp;<%= page.category %>
         </div>
diff --git a/layout/home-content.ejs b/layout/home-content.ejs
index 99db67a2..a525131a 100644
--- a/layout/home-content.ejs
+++ b/layout/home-content.ejs
@@ -9,7 +9,7 @@
                     >
                         <% if (post.sticky) { %>
                             <div class="post-sticky-box cover">
-                                <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                                <i class="fas fa-thumbtack"></i><span class="sticky-name">&nbsp;<%- __('top') %></span>
                             </div>
                         <% } %>
                         <img class="cover-img" src="<%= post.cover %>" alt="<%= post.title %>">
@@ -18,8 +18,8 @@
 
                 <div class="home-article-item-bottom border-box">
                     <% if (post.sticky && !post?.cover) { %>
-                        <div class="post-sticky-box">
-                            <i class="fas fa-thumbtack"></i>&nbsp;<%- __('top') %>
+                        <div class="post-sticky-box card">
+                            <i class="fas fa-thumbtack"></i><span class="sticky-name">&nbsp;<%- __('top') %></span>
                         </div>
                     <% } %>
                     <h3 class="home-article-title border-box">
diff --git a/layout/tag-content.ejs b/layout/tag-content.ejs
index f351ac3e..5bd2c36a 100644
--- a/layout/tag-content.ejs
+++ b/layout/tag-content.ejs
@@ -1,6 +1,6 @@
 <div class="fade-in-down-animation">
-    <div class="tag-container">
-        <div class="tag-name"><i class="fas fa-tag"></i>&nbsp;<%= page.tag %>
+    <div class="tag-container border-box">
+        <div class="tag-name"><i class="fas fa-hashtag"></i>&nbsp;<%= page.tag %>
         </div>
         <div class="tag-post-list">
             <%- partial('_partial/archive-list', { archive_posts: page.posts }) %>
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
index 2ae71f29..0c51ca18 100644
--- a/source/css/common/basic.styl
+++ b/source/css/common/basic.styl
@@ -1,6 +1,7 @@
-@import 'variables.styl'
+@import 'css-variables.styl'
+@import 'stylus-variables.styl'
 @import 'animated.styl'
-@import 'keep-theme.styl'
+@import 'keep-style.styl'
 
 // ======================================================================
 // all
diff --git a/source/css/common/code-block/code-theme.styl b/source/css/common/code-block/code-theme.styl
index 3f609165..3dde6d21 100644
--- a/source/css/common/code-block/code-theme.styl
+++ b/source/css/common/code-block/code-theme.styl
@@ -1,4 +1,4 @@
-@import "../variables.styl"
+@import "../stylus-variables.styl"
 
 // A single line block of code
 $code-foreground = lighten($text-color-3, 2%)
diff --git a/source/css/common/css-vars.styl b/source/css/common/css-variables.styl
similarity index 98%
rename from source/css/common/css-vars.styl
rename to source/css/common/css-variables.styl
index 90a95137..8986eb13 100644
--- a/source/css/common/css-vars.styl
+++ b/source/css/common/css-variables.styl
@@ -1,4 +1,4 @@
-@import "variables.styl"
+@import "stylus-variables.styl"
 
 :root {
   // ==============================================================================================
diff --git a/source/css/common/keep-style.styl b/source/css/common/keep-style.styl
new file mode 100644
index 00000000..5ba8ba1d
--- /dev/null
+++ b/source/css/common/keep-style.styl
@@ -0,0 +1,161 @@
+@import 'stylus-variables.styl'
+
+keep-container(sValue, pValue, mbValue) {
+  box-sizing border-box
+  margin-bottom mbValue
+  padding pValue
+  background var(--content-background-color)
+  border-radius var(--box-border-radius)
+  box-shadow 0 0 8px var(--shadow-color)
+
+  if (sValue != 1) {
+    transition-t("transform", "0", "0.2", "linear")
+  }
+
+  &:hover {
+    if (sValue != 1) {
+      transform scale(sValue)
+    }
+    box-shadow 0 0 12px var(--shadow-hover-color)
+  }
+
+  +keep-tablet() {
+    margin-bottom mbValue * 0.8
+    padding pValue * 0.8
+    border-radius calc(var(--box-border-radius) * 0.8)
+  }
+
+
+  +keep-mobile() {
+    margin-bottom mbValue * 0.6
+    padding pValue * 0.6
+    border-radius calc(var(--box-border-radius) * 0.6)
+  }
+}
+
+
+disable-user-select() {
+  -moz-user-select none
+  -ms-user-select none
+  -webkit-user-select none
+  user-select none
+}
+
+
+not-text-size-adjust() {
+  -ms-text-size-adjust none
+  -moz-text-size-adjust none
+  -webkit-text-size-adjust none
+}
+
+
+keep-tablet() {
+  @media (max-width $media-max-width) {
+    { block }
+  }
+}
+
+
+keep-mobile() {
+  @media (max-width $media-max-width-mobile) {
+    { block }
+  }
+}
+
+
+root-color(mode) {
+  // primary color
+  --primary-color $primary-color
+  --primary-color-light-1 $primary-color-light-1
+  --primary-color-light-2 $primary-color-light-2
+  --primary-color-dark-1 $primary-color-dark-1
+  --primary-color-dark-2 $primary-color-dark-2
+
+  // background color
+  --background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
+  --background-color-1-transparent mode == 'light' ? $background-color-1-transparent : $dark-background-color-1-transparent
+  --background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
+  --background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
+
+  // content background color
+  --content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color
+
+  // text color
+  --text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1
+  --text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2
+  --text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3
+  --text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4
+  --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
+
+  // border color
+  --border-color mode == 'light' ? $border-color : $dark-border-color
+
+  // selection color
+  --selection-color mode == 'light' ? $selection-color : $dark-selection-color
+
+  // shadow color
+  --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
+  --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
+
+  // scrollbar color
+  --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
+  --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
+  --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
+
+  // copyright icon background color
+  --copyright-icon-bg-color mode == 'light' ? $copyright-icon-bg-color : $dark-copyright-icon-bg-color
+
+  // avatar background color
+  --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
+
+  // header transparent background color
+  --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
+  --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
+
+  // pjax progress bar color
+  --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
+
+  // article aging tips primary color
+  --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color
+  --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color
+  --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color
+
+  --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color
+}
+
+
+:root {
+  root-color('light')
+}
+
+
+@media (prefers-color-scheme light) {
+  :root {
+    root-color('light')
+  }
+}
+
+
+@media (prefers-color-scheme dark) {
+  :root {
+    root-color('dark')
+  }
+}
+
+
+.light-mode {
+  root-color('light')
+}
+
+
+.dark-mode {
+  root-color('dark')
+}
diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl
deleted file mode 100644
index dfd1944a..00000000
--- a/source/css/common/keep-theme.styl
+++ /dev/null
@@ -1,50 +0,0 @@
-keep-container(sValue, pValue, mbValue) {
-  box-sizing border-box
-  margin-bottom mbValue
-  padding pValue
-  background var(--content-background-color)
-  border-radius var(--box-border-radius)
-  box-shadow 0 0 8px var(--shadow-color)
-
-  if (sValue != 1) {
-    transition-t("transform", "0", "0.2", "linear")
-  }
-
-  &:hover {
-    if (sValue != 1) {
-      transform scale(sValue)
-    }
-    box-shadow 0 0 12px var(--shadow-hover-color)
-  }
-
-  +keep-tablet() {
-    margin-bottom mbValue * 0.8
-    padding pValue * 0.8
-    border-radius calc(var(--box-border-radius) * 0.8)
-  }
-
-
-  +keep-mobile() {
-    margin-bottom mbValue * 0.6
-    padding pValue * 0.6
-    border-radius calc(var(--box-border-radius) * 0.6)
-  }
-}
-
-
-
-disable-user-select() {
-  -moz-user-select none
-  -ms-user-select none
-  -webkit-user-select none
-  user-select none
-}
-
-
-not-text-size-adjust() {
-  -ms-text-size-adjust none
-  -moz-text-size-adjust none
-  -webkit-text-size-adjust none
-}
-
-
diff --git a/source/css/common/variables.styl b/source/css/common/stylus-variables.styl
similarity index 61%
rename from source/css/common/variables.styl
rename to source/css/common/stylus-variables.styl
index e4379533..5da84174 100644
--- a/source/css/common/variables.styl
+++ b/source/css/common/stylus-variables.styl
@@ -26,18 +26,6 @@ $has-fs-content-max-width = $content-max-width * 1.2
 $media-max-width = 800px                                 // media query max width (tablet)
 $media-max-width-mobile = 500px                          // media query max width (mobile)
 
-keep-tablet() {
-  @media (max-width $media-max-width) {
-    { block }
-  }
-}
-
-keep-mobile() {
-  @media (max-width $media-max-width-mobile) {
-    { block }
-  }
-}
-
 
 // ==============================================================================================
 // z-index
@@ -76,7 +64,7 @@ $primary-color-dark-2 = darken($primary-color, 20%)
 
 
 // ==============================================================================================
-// theme light mode color set
+// theme light mode color
 // ==============================================================================================
 $background-color-1 = #fff
 $background-color-1-transparent = alpha($background-color-1, 0.6)
@@ -123,7 +111,7 @@ $post-h-bottom-border-color = alpha($text-color-3, 0.15)
 
 
 // ==============================================================================================
-// theme dark mode color set
+// theme dark mode color
 // ==============================================================================================
 $dark-background-color-1 = #22272e
 $dark-background-color-1-transparent = alpha($dark-background-color-1, 0.6)
@@ -167,102 +155,3 @@ $dark-article-aging-tips-background-color = alpha($dark-article-aging-tips-color
 $dark-article-aging-tips-border-color = alpha($dark-article-aging-tips-color, 0.6)
 
 $dark-post-h-bottom-border-color = alpha($dark-text-color-3, 0.15)
-
-
-// ==============================================================================================
-//  light/dark mode color
-// ==============================================================================================
-root-color(mode) {
-  // primary color
-  --primary-color $primary-color
-  --primary-color-light-1 $primary-color-light-1
-  --primary-color-light-2 $primary-color-light-2
-  --primary-color-dark-1 $primary-color-dark-1
-  --primary-color-dark-2 $primary-color-dark-2
-
-  // background color
-  --background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
-  --background-color-1-transparent mode == 'light' ? $background-color-1-transparent : $dark-background-color-1-transparent
-  --background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
-  --background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
-
-  // content background color
-  --content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color
-
-  // text color
-  --text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1
-  --text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2
-  --text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3
-  --text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4
-  --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
-
-  // border color
-  --border-color mode == 'light' ? $border-color : $dark-border-color
-
-  // selection color
-  --selection-color mode == 'light' ? $selection-color : $dark-selection-color
-
-  // shadow color
-  --shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
-  --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
-
-  // scrollbar color
-  --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
-  --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
-  --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
-
-  // copyright icon background color
-  --copyright-icon-bg-color mode == 'light' ? $copyright-icon-bg-color : $dark-copyright-icon-bg-color
-
-  // avatar background color
-  --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
-
-  // header transparent background color
-  --header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
-  --header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
-
-  // pjax progress bar color
-  --pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
-
-  // article aging tips primary color
-  --article-aging-tips-color mode == 'light' ? $article-aging-tips-color : $dark-article-aging-tips-color
-  --article-aging-tips-background-color mode == 'light' ? $article-aging-tips-background-color : $dark-article-aging-tips-background-color
-  --article-aging-tips-border-color mode == 'light' ? $article-aging-tips-border-color : $dark-article-aging-tips-border-color
-
-  --post-h-bottom-border-color mode == 'light' ? $post-h-bottom-border-color : $dark-post-h-bottom-border-color
-}
-
-
-:root {
-  root-color('light')
-}
-
-@media (prefers-color-scheme light) {
-  :root {
-    root-color('light')
-  }
-}
-
-@media (prefers-color-scheme dark) {
-  :root {
-    root-color('dark')
-  }
-}
-
-
-.light-mode {
-  root-color('light')
-}
-
-
-.dark-mode {
-  root-color('dark')
-}
diff --git a/source/css/layout/_partial/archive-list.styl b/source/css/layout/_partial/archive-list.styl
index a8e19089..4fe926f2 100644
--- a/source/css/layout/_partial/archive-list.styl
+++ b/source/css/layout/_partial/archive-list.styl
@@ -2,6 +2,8 @@ $archive-year-font-size = 1.6rem
 $article-title-font-size = 1.2rem
 $article-date-font-size = 1rem
 $article-date-width = 3.6rem
+$article-item-padding = 1.2rem
+$timeline-circle-width = 0.6rem
 
 .archive-list-container {
 
@@ -29,41 +31,55 @@ $article-date-width = 3.6rem
 
 
     .article-list {
+      padding-left $article-item-padding
+
 
       .article-item {
         display flex
         align-items center
         justify-content space-between
         width 100%
-        margin-top 1.3rem
+        padding ($article-item-padding * 0.68) 0 ($article-item-padding * 0.68) $article-item-padding
         font-size 1rem
-
-        +keep-tablet() {
-          margin-top 1.1rem
+        border-left 1px dashed var(--border-color)
+
+        &::before {
+          position absolute
+          top 50%
+          left -($timeline-circle-width * 0.5)
+          z-index $z-index-1
+          box-sizing border-box
+          width $timeline-circle-width
+          height $timeline-circle-width
+          background var(--text-color-5)
+          border-radius 50%
+          transform translateY(-50%)
+          content ''
         }
 
-        +keep-mobile() {
-          margin-top 1rem
-        }
 
         &:hover {
-          a.article-title
-          .article-date {
-            color var(--primary-color)
+          &::before {
+            background var(--text-color-4)
           }
-        }
 
 
-        a.article-title {
-          width 'calc(100% - %s)' % $article-date-width
-          color var(--text-color-3)
+          a.article-title {
+            color var(--primary-color)
+          }
         }
 
         .article-date {
           width $article-date-width
+          margin-right $article-item-padding
           color var(--text-color-3)
           font-size $article-date-font-size
-          text-align right
+        }
+
+
+        a.article-title {
+          width 'calc(100% - %s)' % $article-date-width
+          color var(--text-color-3)
         }
       }
     }
diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl
index 60a50408..43feed60 100644
--- a/source/css/layout/_partial/article-copyright-info.styl
+++ b/source/css/layout/_partial/article-copyright-info.styl
@@ -33,6 +33,7 @@
       margin-top 1rem
 
       .bottom-item {
+        z-index $z-index-10
         margin-right 1.2rem
 
         .type {
@@ -62,6 +63,10 @@
       color var(--copyright-icon-bg-color)
       font-size 14rem
       transform translateY(-50%)
+
+      +keep-mobile() {
+        font-size 12rem
+      }
     }
   }
 
diff --git a/source/css/layout/_partial/comment/comment.styl b/source/css/layout/_partial/comment/comment.styl
index 54d6d106..511b5d30 100644
--- a/source/css/layout/_partial/comment/comment.styl
+++ b/source/css/layout/_partial/comment/comment.styl
@@ -18,24 +18,17 @@ if (hexo-config('comment') && hexo-config('comment.enable') == true && hexo-conf
   width 100%
   margin-top $component-spacing-value
 
-  #comments-anchor {
-    width 100%
-    height 0.8rem
-  }
-
-
   .comment-area-title {
     width 100%
-    margin 0.8rem 0
     color var(--text-color-3)
     font-size 1.38rem
+    line-height 2
 
     i {
       color var(--text-color-3)
     }
 
     +keep-tablet() {
-      margin 0.4rem 0
       font-size 1.2rem
     }
   }
diff --git a/source/css/layout/_partial/toc.styl b/source/css/layout/_partial/toc.styl
index 7678fa6d..11255be3 100644
--- a/source/css/layout/_partial/toc.styl
+++ b/source/css/layout/_partial/toc.styl
@@ -1,6 +1,4 @@
 .post-toc-wrap {
-  position relative
-  box-sizing border-box
   width 100%
   height 100%
   overflow-y auto
@@ -18,74 +16,94 @@
   .post-toc {
 
     ol {
+      position relative
+      box-sizing border-box
       margin 0
-      padding 0 0.1rem 0.8rem 0.6rem
       text-align left
       list-style none
 
-      &:last-child {
-        padding-bottom 0
-      }
-
-      > ol {
-        padding-left 0
-      }
-
       a {
         transition-property all
-        transition()
       }
     }
 
 
-    .nav-item {
-      margin-bottom 0.2rem
-      overflow hidden
-      line-height 1.8
-      white-space nowrap
-      text-overflow ellipsis
-    }
+    .nav {
 
+      .nav-item {
+        position relative
+        box-sizing border-box
+        overflow hidden
+        line-height 2
+        white-space nowrap
+        text-overflow ellipsis
 
-    .nav {
-      .nav-child {
-        if (hexo-config('toc') && hexo-config('toc.expand_all') == true) {
-          display block
-        }
-        else {
-          display none
-        }
-      }
 
-      .active > .nav-child {
-        display block
-      }
+        &.active {
+          > .nav-child {
+            display block
+          }
+        }
 
-      .active-current > .nav-child {
-        display block
 
-        > .nav-item {
-          display block
+        .nav-link {
+          position relative
+          box-sizing border-box
+          padding-left 0.8rem
+
+          &:hover {
+            .nav-number
+            .nav-text {
+              color var(--primary-color)
+            }
+          }
+
+          &.active-current {
+            > .nav-child {
+              display block
+
+              > .nav-item {
+                display block
+              }
+            }
+
+
+            &::before {
+              position absolute
+              top 50%
+              left 0
+              width 0.2rem
+              height 1.2rem
+              background var(--primary-color)
+              border-radius 0.2rem
+              transform translateY(-50%)
+              content ''
+            }
+
+            .nav-number
+            .nav-text {
+              color var(--primary-color)
+            }
+          }
+
+
+          .nav-number
+          .nav-text {
+            color var(--toc-text-color)
+          }
         }
-      }
 
 
-      .nav-number
-      .nav-text {
-        color var(--toc-text-color)
-      }
+        .nav-child {
+          padding-left 1rem
 
-      .active > a {
-        .nav-number
-        .nav-text {
-          color var(--primary-color)
-        }
-      }
 
-      .active-current > a {
-        .nav-number
-        .nav-text {
-          color var(--primary-color)
+          if (hexo-config('toc') && hexo-config('toc.expand_all') == true) {
+            display block
+          }
+          else {
+            display none
+          }
         }
       }
     }
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 069bd766..709cc4d4 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -44,7 +44,7 @@ $spacer-padding = 2rem
     keep-container(1, 0, 2rem)
 
     +keep-mobile() {
-      padding 0 !important
+      padding 0 0.2rem !important
       box-shadow none !important
 
       &:hover {
@@ -392,15 +392,16 @@ $spacer-padding = 2rem
     box-sizing border-box
     width $toc-container-width
     max-height 'calc(100vh - %s)' % ('calc(var(--header-height) + %s)' % $component-spacing-value)
-    padding 2rem 0 2rem 1.4rem
     transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
 
     &.right-toc {
       order 1
+      padding 2rem 0 2rem 1.8rem
     }
 
     &.left-toc {
       order -1
+      padding 2rem 1.8rem 2rem 0
     }
 
     .header-shrink & {
diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl
index 8c0db40e..ad7dc8b9 100644
--- a/source/css/layout/category-content.styl
+++ b/source/css/layout/category-content.styl
@@ -6,11 +6,9 @@ $category-name-font-size = 1.5rem
 
   .category-name {
     margin-bottom $component-spacing-value
-    padding-bottom 1rem
     color var(--text-color-2)
     font-weight 600
     font-size $category-name-font-size
-    border-bottom 0.1rem solid var(--border-color)
 
     i {
       color var(--text-color-2)
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 952724f6..67362bbd 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -12,8 +12,6 @@
 
       .post-sticky-box {
         position absolute
-        top 0.8rem
-        right 0.8rem
         z-index $z-index-1
         display flex
         align-items center
@@ -24,7 +22,7 @@
         letter-spacing 1px
         background var(--background-color-3)
         border-radius 0.3rem
-        transform scale(0.88)
+        transform scale(0.86)
         cursor default
         disable-user-select()
 
@@ -32,6 +30,21 @@
           top 0.6rem
           right 0.6rem
         }
+
+        &.card {
+          top 0.8rem
+          right 0.8rem
+        }
+
+        +keep-mobile() {
+          padding 0
+          background none
+          transform rotate(45deg)
+
+          .sticky-name {
+            display none
+          }
+        }
       }
 
 
diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl
index 05a2b5b9..52eb306a 100644
--- a/source/css/layout/tag-content.styl
+++ b/source/css/layout/tag-content.styl
@@ -6,11 +6,9 @@ $tag-name-font-size = 1.5rem
 
   .tag-name {
     margin-bottom $component-spacing-value
-    padding-bottom 1rem
     color var(--text-color-2)
     font-weight 600
     font-size $tag-name-font-size
-    border-bottom 0.1rem solid var(--border-color)
 
     i {
       color var(--text-color-2)
diff --git a/source/css/style.styl b/source/css/style.styl
index b35d3c2f..ed1378de 100644
--- a/source/css/style.styl
+++ b/source/css/style.styl
@@ -1,4 +1,3 @@
-@import "common/css-vars.styl"
 @import "common/basic.styl"
 @import "common/markdown.styl"
 @import "common/code-block/highlight.styl"