From fc0f82df427017d9d3043fadfa93a94c325459aa Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Tue, 28 Apr 2020 23:20:17 +0800
Subject: [PATCH] style: optimize modules style

---
 layout/_partial/article-meta-info.ejs         |  2 +-
 layout/_partial/comments/valine.ejs           |  1 +
 layout/_partial/scripts.ejs                   |  2 +-
 layout/_partial/sidebar.ejs                   | 11 +++++-
 layout/article-content.ejs                    |  9 ++++-
 .../css/layout/_partial/comments/valine.styl  |  2 +-
 source/css/layout/_partial/header.styl        |  3 +-
 .../css/layout/_partial/sidebar-category.styl |  8 +++-
 source/css/layout/_partial/sidebar-toc.styl   | 15 ++++++--
 source/css/layout/_partial/sidebar.styl       | 20 ++++++----
 source/css/layout/_partial/site-info.styl     | 17 ++++-----
 source/css/layout/_partial/tools.styl         |  1 +
 source/css/layout/about.styl                  |  2 +-
 source/css/layout/archive-content.styl        |  2 +-
 source/css/layout/article-content.styl        | 38 ++++++++++++++++++-
 source/css/layout/common/animated.styl        |  9 ++++-
 source/css/layout/common/magic-theme.styl     |  5 ++-
 source/css/layout/common/variables.styl       |  3 +-
 source/css/layout/home-content.styl           |  2 +-
 source/css/layout/page.styl                   | 13 +++----
 source/js/header-shrink.js                    |  9 +++++
 21 files changed, 127 insertions(+), 47 deletions(-)

diff --git a/layout/_partial/article-meta-info.ejs b/layout/_partial/article-meta-info.ejs
index 2016ea3..b276aeb 100644
--- a/layout/_partial/article-meta-info.ejs
+++ b/layout/_partial/article-meta-info.ejs
@@ -4,7 +4,7 @@
     </span>
     <% if (articleObject.categories.length) { %>
         <span class="article-categories article-meta-item">
-            <i class="fa fa-bookmark"></i>
+            <i class="fa fa-folder"></i>
             <ul>
                 <% articleObject.categories.forEach((category, i) => { %>
                     <li>
diff --git a/layout/_partial/comments/valine.ejs b/layout/_partial/comments/valine.ejs
index 6400c6d..810050a 100755
--- a/layout/_partial/comments/valine.ejs
+++ b/layout/_partial/comments/valine.ejs
@@ -11,6 +11,7 @@
                 el: '#vcomments',
                 appId: '<%= theme.comments.valine.appid %>',
                 appKey: '<%= theme.comments.valine.appkey %>',
+                meta: '<%= theme.comments.valine.meta %>'.split(','),
                 avatar: 'wavatar',
                 enableQQ: true,
                 placeholder: '<%= theme.comments.valine.placeholder %>',
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 3733c72..3b32705 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -14,7 +14,7 @@
         <%- js('js/code-copy.js') %>
     <% } %>
 
-    <% if (theme.toc.enable && theme.magic.enable && theme.magic.sidebar.enable) { %>
+    <% if (theme.toc.enable) { %>
         <%- js(['lib/anime.min.js', 'js/toc.js']) %>
     <% } %>
 
diff --git a/layout/_partial/sidebar.ejs b/layout/_partial/sidebar.ejs
index c715d09..93ddf25 100644
--- a/layout/_partial/sidebar.ejs
+++ b/layout/_partial/sidebar.ejs
@@ -1,6 +1,13 @@
-<div class="sidebar">
+<div class="sidebar fade-in-down-animation">
     <% if (is_home()) { %>
-        <%- partial('sidebar-category') %>
+        <div class="home-sidebar-container">
+            <div class="home-sidebar-item">
+                <%- partial('site-info') %>
+            </div>
+            <div class="home-sidebar-item">
+                <%- partial('sidebar-category') %>
+            </div>
+        </div>
     <% } else if (is_archive()) { %>
         <%- partial('site-info') %>
     <% } else if (is_post() && theme.toc.enable ) { %>
diff --git a/layout/article-content.ejs b/layout/article-content.ejs
index 01fd7fb..fd97c35 100644
--- a/layout/article-content.ejs
+++ b/layout/article-content.ejs
@@ -1,4 +1,5 @@
 <div class="article-content-container">
+
     <div class="article-title">
         <h3><a class="title-hover-animation"><%= page.title %></a></h3>
     </div>
@@ -31,4 +32,10 @@
     <div class="comment-container">
         <%- partial('_partial/comments/comment') %>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<% if ( (theme.magic.enable && !theme.magic.sidebar.enable && theme.toc.enable) || (!theme.magic.enable && theme.toc.enable)) { %>
+    <div class="article-toc-container">
+        <%- partial('_partial/sidebar-toc') %>
+    </div>
+<% } %>
\ No newline at end of file
diff --git a/source/css/layout/_partial/comments/valine.styl b/source/css/layout/_partial/comments/valine.styl
index 4266d99..f75387b 100644
--- a/source/css/layout/_partial/comments/valine.styl
+++ b/source/css/layout/_partial/comments/valine.styl
@@ -15,7 +15,7 @@
           border-color: var(--third-text-color);
 
           &:focus {
-            border-bottom: 1px solid var(--primary-color) !important;
+            border-bottom: 1px dashed var(--primary-color) !important;
           }
         }
       }
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 22f1e95..8a1abab 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -229,7 +229,8 @@
 
 
 .header-wrapper-shrink {
-  if (hexo-config('magic') == false) {
+
+  if (hexo-config('magic.enable') == false) {
     box-shadow: 0 1px 2px var(--border-color);
   }
 
diff --git a/source/css/layout/_partial/sidebar-category.styl b/source/css/layout/_partial/sidebar-category.styl
index fd069d8..8063f07 100644
--- a/source/css/layout/_partial/sidebar-category.styl
+++ b/source/css/layout/_partial/sidebar-category.styl
@@ -1,7 +1,11 @@
+@require "../common/magic-theme.styl"
+
+
 .sidebar-category {
 
-  padding: 20px;
-  position: relative;
+  position relative
+  background: var(--background-color);
+  magic-container(1.02, 30px);
 
   .category-label {
     margin-bottom: 10px;
diff --git a/source/css/layout/_partial/sidebar-toc.styl b/source/css/layout/_partial/sidebar-toc.styl
index f5ae4f5..d1cff78 100644
--- a/source/css/layout/_partial/sidebar-toc.styl
+++ b/source/css/layout/_partial/sidebar-toc.styl
@@ -1,17 +1,24 @@
 @require '../common/variables.styl'
+@require '../common/animated.styl'
+@require '../common/magic-theme.styl'
 
 .post-toc-wrap {
   width: 100%;
   height: 100%;
-  font-size: 0.9em;
-  padding: 10px;
+  font-size: 0.88em;
+  box-sizing: border-box;
+  background: var(--background-color);
+
+  if (hexo-config('magic.enable') && hexo-config('magic.sidebar.enable')) {
+    magic-container(1.02, 30px);
+  }
 
   .post-toc {
 
     ol {
       list-style: none;
       margin: 0;
-      padding: 0 2px 5px 10px;
+      padding: 0 2px 12px 10px;
       text-align: left;
 
       &:last-child {
@@ -24,7 +31,7 @@
 
       a {
         transition-property: all;
-        the-transition();
+        //transition();
       }
     }
 
diff --git a/source/css/layout/_partial/sidebar.styl b/source/css/layout/_partial/sidebar.styl
index 2463950..43821f6 100644
--- a/source/css/layout/_partial/sidebar.styl
+++ b/source/css/layout/_partial/sidebar.styl
@@ -1,15 +1,19 @@
 @require "../common/variables.styl"
+@require "../common/magic-theme.styl"
 .sidebar {
   position: fixed;
   width: $sidebar-width;
-  background: var(--background-color);
-  box-shadow: 0 0 3px var(--border-color);
-  transition: all 0.3s ease;
-  border-radius: 2px;
+  box-sizing: border-box;
+
+  .home-sidebar-container {
+
+    .home-sidebar-item {
+      margin-bottom: $component-interspace;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
 
-  &:hover {
-    box-shadow: 0 0 8px var(--border-color);
-    transform: scale(1.02);
   }
-
 }
\ No newline at end of file
diff --git a/source/css/layout/_partial/site-info.styl b/source/css/layout/_partial/site-info.styl
index 1ff295e..1a6990b 100644
--- a/source/css/layout/_partial/site-info.styl
+++ b/source/css/layout/_partial/site-info.styl
@@ -1,5 +1,12 @@
+@require "../common/magic-theme.styl"
+
+
 .site-info-container {
   width: 100%;
+  box-sizing: border-box;
+  background: var(--background-color);
+
+  magic-container(1.02, 30px);
 
   .justify-center {
     display: flex;
@@ -7,12 +14,8 @@
   }
 
   .avatar-box {
-
-    padding: 20px 0;
-
     .avatar {
       width: 40%;
-      //border-radius: 50%;
       border-radius: 5px;
       padding: 2px;
       border: 1px solid var(--border-color);
@@ -23,14 +26,10 @@
   .author {
     font-size: 1.6em;
     letter-spacing: 1px;
+    margin: 20px 0;
   }
 
-
   .description {
-    padding: 20px;
     text-align center
   }
-
-
-
 }
\ No newline at end of file
diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl
index 25f24b2..9b7708c 100644
--- a/source/css/layout/_partial/tools.styl
+++ b/source/css/layout/_partial/tools.styl
@@ -3,6 +3,7 @@
 @require "../common/magic-theme.styl";
 
 $li-border-radius = 5px;
+//$li-border-radius = 50%;
 $li-margin-bottom = 12px;
 
 .tools-container {
diff --git a/source/css/layout/about.styl b/source/css/layout/about.styl
index 0893034..d86b5e2 100644
--- a/source/css/layout/about.styl
+++ b/source/css/layout/about.styl
@@ -4,7 +4,7 @@
 
   background: var(--background-color);
 
-  magic-container(1.01);
+  magic-container(1.01, 30px);
 
   .about-content {
 
diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl
index 9ba172b..f40cf70 100644
--- a/source/css/layout/archive-content.styl
+++ b/source/css/layout/archive-content.styl
@@ -9,7 +9,7 @@ $article-date-font-size = 0.8em;
 
   background: var(--background-color);
 
-  magic-container(1.01);
+  magic-container(1.01, 30px);
 
   .archive-item {
     margin-bottom: 40px;
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 0b1ab66..83dd6fc 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -1,10 +1,12 @@
 @require 'common/variables.styl'
+@require 'common/magic-theme.styl'
 
 .article-content-container {
 
   background: var(--background-color);
 
   if (hexo-config('magic.enable') == true) {
+
     box-shadow: 0 0 3px var(--border-color);
     padding: 30px;
     transition: all 0.3s ease;
@@ -12,10 +14,11 @@
 
     &:hover {
       box-shadow: 0 0 8px var(--border-color);
-      transform: scaleX(1.008) scaleY(1.004);
+      transform: scaleX(1.008) scaleY(1.002);
     }
   }
 
+
   .article-title {
 
     h3 {
@@ -56,3 +59,36 @@
   }
 
 }
+
+
+if ((hexo-config('magic.enable') == true && hexo-config('magic.sidebar.enable') == false && hexo-config('toc.enable') == true) || (hexo-config('magic.enable') == false && hexo-config('toc.enable') == true)) {
+  .article-toc-container {
+    position: fixed;
+    top: $header-height + $component-interspace;
+    background: var(--background-color);
+    max-width: 200px;
+    max-height: 600px;
+
+    if (hexo-config('side-tools.position') == left) {
+      right: 30px;
+    } else {
+      left: 30px;
+    }
+
+    if (hexo-config('magic.enable') == true) {
+      magic-container(1.02, 20px);
+    } else {
+      transition();
+      border: 1px solid var(--border-color);
+      padding: 20px;
+    }
+
+
+  }
+
+  .article-toc-container-shrink {
+    top: $header-shrink-height + $component-interspace !important;
+  }
+}
+
+
diff --git a/source/css/layout/common/animated.styl b/source/css/layout/common/animated.styl
index 9cc2b01..520ced6 100644
--- a/source/css/layout/common/animated.styl
+++ b/source/css/layout/common/animated.styl
@@ -14,22 +14,26 @@ the-transition-ease-in() {
   transition-delay: 0s;
 }
 
+
 the-transition-ease-out() {
   transition-duration: 0.2s;
   transition-timing-function: ease-out;
   transition-delay: 0s;
 }
 
+
 .fade-in-down-animation {
   animation-fill-mode: both;
   animation-duration: 1s;
-  animation-name fade-in-down
+  animation-name: fade-in-down;
 }
 
 @keyframes fade-in-down {
   0% {
     opacity: 0;
-    transform: translateY(-20px);
+    //transform: translateY(-20px);
+    //transform: translateX(-20px);
+    transform: translateX(20px);
   }
 
   100% {
@@ -37,6 +41,7 @@ the-transition-ease-out() {
     transform: translateY(0);
   }
 }
+
 .title-hover-animation {
   display: inline-block;
   position: relative;
diff --git a/source/css/layout/common/magic-theme.styl b/source/css/layout/common/magic-theme.styl
index 6359f61..ceed901 100644
--- a/source/css/layout/common/magic-theme.styl
+++ b/source/css/layout/common/magic-theme.styl
@@ -1,4 +1,5 @@
 @require "animated.styl"
+
 magic-style(scale) {
   if (hexo-config('magic.enable') == true) {
 
@@ -14,10 +15,10 @@ magic-style(scale) {
 
 }
 
-magic-container(scale) {
+magic-container(scale, padding) {
   if (hexo-config('magic.enable') == true) {
     magic-style(scale);
-    padding: 30px;
+    padding: padding;
     border-radius: 2px;
   }
 }
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index deea658..02b91c3 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -15,12 +15,13 @@ if (hexo-config('magic.enable') == true && hexo-config('magic.sidebar.enable') =
   $main-content-width = 80%;
   $sidebar-width = 280px;       // 侧边栏宽度
 } else {
-  $main-content-width = 66%;
+  $main-content-width = 60%;
 }
 
 $header-shrink-height = 60px; // 头部收缩高度
 $media-max-width = 760px;     // 媒体查询最大宽度
 $tool-button-width = 36px;    // 方形工具按钮宽度
+$component-interspace = 30px;  // 组件间隔
 
 
 // ===============================
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 3833f97..2946da9 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -11,7 +11,7 @@
 
       if (hexo-config('magic.enable') == true) {
 
-        magic-container(1.02);
+        magic-container(1.02, 30px);
         margin-bottom: 30px;
 
       } else {
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index 84e8c16..4623966 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -1,9 +1,6 @@
 @require "common/variables.styl";
 @require "./common/animated.styl";
 
-// 组件间隔
-$component-interspace = 30px;
-
 .page-template {
   padding-top: $header-height;
   position: relative;
@@ -18,7 +15,6 @@ $component-interspace = 30px;
     transition();
   }
 
-
   .page-middle {
     width: 100%;
     display: flex;
@@ -66,6 +62,7 @@ $component-interspace = 30px;
       transition();
     }
 
+
     .scroll-to-top {
       display: none;
       position: fixed;
@@ -103,12 +100,16 @@ $component-interspace = 30px;
     }
   }
 
+
   .page-bottom {
     width: 100%;
   }
 }
 
 .page-top-shrink {
+
+  transition();
+
   padding-top: $header-shrink-height;
 
   .page-top {
@@ -119,9 +120,6 @@ $component-interspace = 30px;
     top: $header-shrink-height + $component-interspace !important;
   }
 
-  .sidebar-toc {
-    top: $header-shrink-height + $component-interspace !important;
-  }
 }
 
 @media screen and (max-width: $media-max-width) {
@@ -143,7 +141,6 @@ $component-interspace = 30px;
   //.sidebar-toc {
   //  right: 2% !important;
   //}
-
   .scroll-to-top {
     if (hexo-config('back2top.position') == left) {
       left: 2% !important;
diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js
index a1584b3..cdef2f2 100644
--- a/source/js/header-shrink.js
+++ b/source/js/header-shrink.js
@@ -1,4 +1,5 @@
 const pageTemplateDom = document.querySelector('.page-template');
+const articleTocContainerDom = document.querySelector('.article-toc-container');
 const headerDom = document.querySelector('.header-wrapper');
 const menuBarDom = document.querySelector('.menu-bar');
 const windowMaskDom = document.querySelector('.window-mask');
@@ -13,10 +14,18 @@ window.addEventListener('scroll', function (_e) {
         isHeaderShrink = true;
         headerDom.classList.add('header-wrapper-shrink');
         pageTemplateDom.classList.add('page-top-shrink');
+
+        if (articleTocContainerDom) {
+            articleTocContainerDom.classList.add('article-toc-container-shrink');
+        }
     } else if (isHeaderShrink && scrollTop <= headerHeight) {
         isHeaderShrink = false;
         headerDom.classList.remove('header-wrapper-shrink');
         pageTemplateDom.classList.remove('page-top-shrink');
+
+        if (articleTocContainerDom) {
+            articleTocContainerDom.classList.remove('article-toc-container-shrink');
+        }
     }
 });