From 2f9168b2706efa7d76f5dc5cddaab960d5e0123e Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Wed, 1 Apr 2020 22:42:24 +0800
Subject: [PATCH] =?UTF-8?q?style:=20CSS=20=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layout/_partial/header.ejs                    |  15 +-
 .../layout/_partial/article-meta-info.styl    |   2 +-
 source/css/layout/_partial/header.styl        | 147 ++++++++++++------
 source/css/layout/_partial/local-search.styl  |   2 +-
 source/css/layout/_partial/valine.styl        |  14 +-
 source/css/layout/archive-content.styl        |   6 +-
 source/css/layout/article-content.styl        |   4 +-
 source/css/layout/category-content.styl       |   2 +-
 source/css/layout/common/basic.styl           |  20 +--
 source/css/layout/common/markdown.styl        |  16 +-
 source/css/layout/common/variables.styl       |  53 +++----
 source/css/layout/home-content.styl           |   6 +-
 source/css/layout/tag-content.styl            |   2 +-
 13 files changed, 166 insertions(+), 123 deletions(-)

diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index 4cb2ede..121f14e 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -2,11 +2,11 @@
 
     <div class="header-content">
 
-        <a class="logo-title vertical-center article-title-hover-animation" href="/">
+        <a class="logo-title article-title-hover-animation" href="/">
             <%= config.title %>
         </a>
 
-        <ul class="menu-list vertical-center">
+        <ul class="menu-list">
             <% for (let i in theme.menu) { %>
                 <li class="menu-item">
                     <a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>"
@@ -24,16 +24,19 @@
             <% } %>
         </ul>
 
-        <div class="menu-bar vertical-center">
-            <i class="fa fa-bars"></i>
+        <div class="menu-bar">
+            <div class="menu-bar-middle"></div>
+            <!--<i class="fa fa-bars"></i>-->
+            <!--<i class="fa fa-remove"></i>-->
         </div>
     </div>
 
     <div class="header-drawer">
         <ul class="drawer-menu-list">
             <% for (let i in theme.menu) { %>
-                <li class="drawer-menu-item <%- isInHomePaging(page.path, theme.menu[i]) ? 'drawer-menu-active' : is_current(theme.menu[i]) ? 'drawer-menu-active' : '' %>">
-                    <a href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()) %></a>
+                <li class="drawer-menu-item">
+                    <a class="<%- isInHomePaging(page.path, theme.menu[i]) ? 'active' : is_current(theme.menu[i]) ? 'active' : '' %>"
+                       href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()).toUpperCase() %></a>
                 </li>
             <% } %>
         </ul>
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl
index 21f06a2..069f064 100644
--- a/source/css/layout/_partial/article-meta-info.styl
+++ b/source/css/layout/_partial/article-meta-info.styl
@@ -23,7 +23,7 @@ $article-meta-info-font-size = 12px;
       color: $article-meta-info-color;
 
       &:hover {
-        color: $a-hover-color;
+        color: $primary-color;
       }
     }
   }
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 121be47..a8740df 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -1,5 +1,4 @@
 @require "../common/variables.styl"
-@import "../common/root.styl"
 
 .header-wrapper {
   width: 100%;
@@ -12,28 +11,27 @@
   transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
 
   .header-content {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
     width: $main-content-width;
     height: 100%;
     position: relative;
     transition: transform 0.5s ease;
-    z-index: 999;
-
-    .vertical-center {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    }
+    z-index: $z-index-5;
 
     .logo-title {
-      left: 0;
       font-size: 28px;
       font-weight: bold;
-      color: #555;
+      letter-spacing: 1px;
+      color: $first-text-color;
+      transform-origin: left center;
+      transition: all 0.5s ease;
     }
 
 
     .menu-list {
-      right: 0;
 
       .menu-item {
         float: left;
@@ -44,10 +42,13 @@
           margin-left: 0;
         }
 
+
         a {
 
           &:hover {
 
+            color: $normal-text-color;
+
             &::after {
               content: '';
               position: absolute;
@@ -56,7 +57,7 @@
               width: 100%;
               height: 2px;
               transform: translateX(-50%);
-              background: $a-hover-color;
+              background: $primary-color;
               transition: all 0.5s ease;
             }
           }
@@ -65,8 +66,8 @@
 
 
         .active {
-          color: #555;
-          font-weight: 700;
+          color: $second-text-color;
+          font-weight: bold;
           transition: all 0.5s ease;
 
           &::after {
@@ -77,7 +78,7 @@
             width: 100%;
             height: 2px;
             transform: translateX(-50%);
-            background: $a-hover-color;
+            background: $primary-color;
             transition: all 0.5s ease;
           }
         }
@@ -87,12 +88,41 @@
 
 
     .menu-bar {
-      right: 0;
-      font-size: 20px;
       display: none;
+      position: relative;
       cursor: pointer;
-    }
 
+      .menu-bar-middle {
+        width: 18px;
+        height: 2px;
+        margin: 6px 0;
+        position: relative;
+        background: $normal-text-color;
+        transition: all 0.3s ease;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: -6px;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background: $normal-text-color;
+          transition: all 0.3s ease;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: -6px;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background: $normal-text-color;
+          transition: all 0.3s ease;
+        }
+      }
+    }
   }
 
 
@@ -104,9 +134,9 @@
     left: 0;
     transform: scaleY(0);
     transform-origin: top;
-    background: white;
+    background: $background-color;
     transition: all 0.5s ease;
-    z-index: 998;
+    z-index: $z-index-2;
 
     .drawer-menu-list {
       display: flex;
@@ -116,23 +146,32 @@
       list-style-type: none;
 
       .drawer-menu-item {
-        display: block;
-        margin: 8px auto;
-        padding: 0 30px;
-        border-radius: 22px;
-        text-align: center;
-        line-height: 42px;
-        font-size: 14px;
-        color: #9ca3ad;
-        transition: all 0.5s ease;
+
+        a {
+          display: block;
+          margin: 8px auto;
+          padding: 0 20px;
+          border-radius: 20px;
+          text-align: center;
+          line-height: 34px;
+          color: $normal-text-color;
+          transition: all 0.5s ease;
+
+          &:hover {
+            color: $second-text-color;
+            font-weight: bold;
+          }
+        }
+
+        .active {
+          border: 1px solid $primary-color;
+          color: $second-text-color;
+          font-weight: bold;
+        }
+
       }
 
 
-      .drawer-menu-active {
-        background: $a-hover-color;
-        color: white;
-      }
-
     }
   }
 
@@ -143,10 +182,10 @@
     width: 100%;
     height: 100vh;
     background: rgba(0, 0, 0, 0.4);
-    z-index: 1;
+    z-index: $z-index-1;
     visibility: hidden;
     opacity: 0;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
   }
 
 
@@ -154,26 +193,28 @@
 
 .header-drawer-show {
 
-  .menu-bar {
-    background: rgba(0, 0, 0, 0);
+  .header-content {
+    .menu-bar {
+      .menu-bar-middle {
 
-    &::before {
-      background: #2c3e50;
-      transform: translateY(6px) rotate(45deg);
-    }
+        background: transparent;
 
-    &::after {
-      background: #2c3e50;
-      transform: translateY(-6px) rotate(-45deg);
+        &::before {
+          transform: translateY(6px) rotate(45deg);
+        }
+
+
+        &::after {
+          transform: translateY(-6px) rotate(-45deg);
+        }
+      }
     }
   }
 
-
   .header-drawer {
     transform: scaleY(1);
   }
 
-
   .window-mask {
     visibility: visible;
     opacity: 1;
@@ -183,22 +224,26 @@
 
 
 .header-wrapper-shrink {
-  background: #fff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  background: $background-color;
+  box-shadow: 0 1px 2px $border-color;
 
   .header-content {
 
+    .logo-title {
+      transform: scale(0.86);
+    }
+
     .menu-list {
 
       .menu-item {
         a:hover {
           &::after {
-            bottom: -22px;
+            bottom: -20px;
           }
         }
 
         .active::after {
-          bottom: -22px;
+          bottom: -20px;
         }
       }
 
diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl
index 52f3ac2..2bd527b 100644
--- a/source/css/layout/_partial/local-search.styl
+++ b/source/css/layout/_partial/local-search.styl
@@ -27,7 +27,7 @@ $keyword-red = #ff2a2a;
   z-index: 1001;
 
   .search-icon, .popup-btn-close {
-    color: $default-font-color;
+    color: $normal-text-color;
     font-size: $icon-size;
     padding: 0 10px;
   }
diff --git a/source/css/layout/_partial/valine.styl b/source/css/layout/_partial/valine.styl
index 413cd92..387131e 100644
--- a/source/css/layout/_partial/valine.styl
+++ b/source/css/layout/_partial/valine.styl
@@ -8,7 +8,7 @@
       .vinput {
 
         &:focus {
-          border-bottom: 1px solid $a-hover-color !important;
+          border-bottom: 1px solid $primary-color !important;
         }
       }
     }
@@ -22,13 +22,13 @@
       .col-80 {
         button.vsubmit {
           background: transparent !important;
-          color: $default-font-color !important;
-          border: 1px solid $default-font-color !important;
+          color: $normal-text-color !important;
+          border: 1px solid $normal-text-color !important;
 
 
           &:hover {
-            color: $a-hover-color !important;
-            border: 1px solid $a-hover-color !important;
+            color: $primary-color !important;
+            border: 1px solid $primary-color !important;
           }
         }
 
@@ -44,9 +44,9 @@
           .vnick {
 
             &::before {
-              background: $a-hover-color !important;
+              background: $primary-color !important;
             }
-            color: $a-hover-color;
+            color: $primary-color;
           }
         }
       }
diff --git a/source/css/layout/archive-content.styl b/source/css/layout/archive-content.styl
index 36e1c62..401f42a 100644
--- a/source/css/layout/archive-content.styl
+++ b/source/css/layout/archive-content.styl
@@ -12,7 +12,7 @@ $archive-article-date-font-size = 14px;
     .archive-item-header {
       .archive-year {
         font-size: $archive-year-font-size;
-        color: $article-title-color;
+        color: $second-text-color;
         font-weight: 600;
         margin-right: 20px;
       }
@@ -28,10 +28,10 @@ $archive-article-date-font-size = 14px;
         font-size: $archive-article-item-title-font-size;
 
         a.article-title {
-          color: $archive-article-title-color;
+          color: $normal-text-color;
 
           &:hover {
-            color: $a-hover-color;
+            color: $primary-color;
           }
         }
 
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index f9bea5d..b407911 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -7,13 +7,13 @@
     h3 {
       text-transform: uppercase;
       font-weight: 600;
-      color: $article-title-color;
+      color: $second-text-color;
       font-size: 22px;
       margin: 0;
     }
 
     a {
-      color: $article-title-color;
+      color: $second-text-color;
     }
 
   }
diff --git a/source/css/layout/category-content.styl b/source/css/layout/category-content.styl
index 3ced59c..d2a516e 100644
--- a/source/css/layout/category-content.styl
+++ b/source/css/layout/category-content.styl
@@ -2,7 +2,7 @@
 
 .category-container {
   .category-name {
-    color: $article-title-color
+    color: $second-text-color
     font-size 20px
     font-weight 600
     margin-bottom 10px
diff --git a/source/css/layout/common/basic.styl b/source/css/layout/common/basic.styl
index 051cf2a..0fe8219 100644
--- a/source/css/layout/common/basic.styl
+++ b/source/css/layout/common/basic.styl
@@ -4,11 +4,13 @@
 html, body {
   margin: 0;
   padding: 0;
-  color: $default-font-color;
+  color: $normal-text-color;
   background: $background-color;
   font-size: $default-font-size;
   font-family: $default-font-family;
   font-weight: $default-font-weight;
+  line-height: $default-font-line-height;
+  -webkit-font-smoothing antialiased;
 }
 
 ul, li, ol {
@@ -31,11 +33,11 @@ p {
 
 a {
   text-decoration: none;
-  color: $a-color;
+  color: $normal-text-color;
 }
 
 a:hover, a:active {
-  color: $a-hover-color;
+  color: $primary-color;
 }
 
 
@@ -46,14 +48,14 @@ a:hover, a:active {
   text-align: center;
   cursor: pointer;
   color: $button-color;
-  border: 1px solid $button-border-color;
+  border: 1px solid $border-color;
   white-space: nowrap;
   border-radius: 10em;
   padding: 0.5em 1em;
 
   &:hover {
-    color: $a-hover-color;
-    border: 1px solid $a-hover-color;
+    color: $primary-color;
+    border: 1px solid $primary-color;
   }
 }
 
@@ -62,7 +64,7 @@ a:hover, a:active {
 .article-title-hover-animation {
   display: inline-block;
   position: relative;
-  color: $article-title-color;
+  color: $second-text-color;
   border-bottom: none;
   line-height: 1.3;
   vertical-align: top;
@@ -74,7 +76,7 @@ a:hover, a:active {
     height: 2px;
     bottom: -4px;
     left: 0;
-    background-color: $article-title-color;
+    background-color: $second-text-color;
     visibility: hidden;
     transform: scaleX(0);
     the-transition();
@@ -100,6 +102,6 @@ clearfix() {
 }
 
 ::selection {
-  background: $a-hover-color;
+  background: $primary-color;
   color: #fff;
 }
\ No newline at end of file
diff --git a/source/css/layout/common/markdown.styl b/source/css/layout/common/markdown.styl
index d764245..df7c378 100644
--- a/source/css/layout/common/markdown.styl
+++ b/source/css/layout/common/markdown.styl
@@ -3,7 +3,7 @@
 .markdown {
 
   blockquote {
-    border-left: 5px solid $default-font-color;
+    border-left: 5px solid $normal-text-color;
     margin: 0;
     padding: 0 0 0 10px;
     background: $border-color;
@@ -11,7 +11,7 @@
 
 
   a {
-    color: $a-hover-color;
+    color: $primary-color;
   }
 
 
@@ -21,39 +21,39 @@
 
 
   h1 {
-    color: $article-title-color;
+    color: $second-text-color;
     font-size: 2.2em;
     font-weight: 700;
   }
 
 
   h2 {
-    color: $article-title-color;
+    color: $second-text-color;
     font-size: 2em;
     font-weight: 650;
   }
 
   h3 {
-    color: $article-title-color;
+    color: $second-text-color;
     font-size: 1.8em;
     font-weight: 600;
   }
 
 
   h4 {
-    color: $article-title-color;
+    color: $second-text-color;
     font-size: 1.6em;
     font-weight: 550;
   }
 
   h5 {
-    color: $article-title-color;
+    color: $second-text-color;
     font-size: 1.4em;
     font-weight: 500;
   }
 
   h6 {
-    color: $article-title-color;
+    color: $second-text-color;
     font-size: 1.2em;
     font-weight: 500;
   }
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index be38592..f06e07a 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -1,17 +1,23 @@
+// 主题颜色
+$primary-color = #5ace11
+
+// 第一文本颜色
+$first-text-color = #2c3e50
+
+// 第二文本颜色
+$second-text-color = #525e6b
+
+// 第三文本颜色
+$third-text-color = #9ca3ad
+
+// 通用文本颜色（默认字体颜色）
+$normal-text-color = #616161
+
 // 背景颜色
 $background-color = #fff
 
 // 边框颜色
-$border-color = #f0f0f0
-
-// 网站LOGO标题颜色
-$logo-title-color = #565656
-
-// 网站LOGO描述颜色
-$logo-description-color = #666
-
-// 网站LOGO描述字体大小
-$logo-description-font-size = #666
+$border-color = #ccc
 
 // 默认字体样式
 //$default-font-family = 'PingHei', 'PingFang SC', 'Microsoft YaHei'
@@ -26,29 +32,10 @@ $default-font-line-height = 20px
 // 默认字体加粗程度
 $default-font-weight = 400
 
-// 默认字体颜色
-$default-font-color = #787878
-
-// 文章标题颜色
-$article-title-color = #666
-
-// 归档文章标题颜色
-$archive-article-title-color = #8f8f8f
-
-// 导航项选中的颜色
-$nav-selected-color = #4a4a4a
-
 // 超链接a标签颜色
 $a-color = #666
 
-// 超链接a标签悬浮颜色
-$a-hover-color = #5ace11
 
-// 按钮颜色
-$button-color = $default-font-color
-
-// 按钮边框颜色
-$button-border-color = $default-font-color
 
 // ==================================
 // ils-x variables
@@ -61,4 +48,10 @@ $header-height = 100px
 $header-shrink-height = 60px
 
 // 中间内容区域宽度
-$main-content-width = 70%
\ No newline at end of file
+$main-content-width = 70%
+
+$z-index-1 = 1001
+$z-index-2 = 1002
+$z-index-3 = 1003
+$z-index-4 = 1004
+$z-index-5 = 1005
\ No newline at end of file
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 2ba34e8..cad80e6 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -20,7 +20,7 @@
           left: -16px;
           width: 2px;
           height: 20px;
-          background: $a-hover-color;
+          background: $primary-color;
           transition: all 0.5s ease;
         }
 
@@ -33,12 +33,12 @@
 
 
         font-weight: 600;
-        color: $article-title-color;
+        color: $second-text-color;
         font-size: 22px;
         margin: 0;
 
         a {
-          color: $article-title-color;
+          color: $second-text-color;
         }
       }
 
diff --git a/source/css/layout/tag-content.styl b/source/css/layout/tag-content.styl
index f55d236..bf719c0 100644
--- a/source/css/layout/tag-content.styl
+++ b/source/css/layout/tag-content.styl
@@ -2,7 +2,7 @@
 
 .tag-container {
   .tag-name {
-    color: $article-title-color
+    color: $second-text-color
     font-size 20px
     font-weight 600
     margin-bottom 10px