From bfa9145a235588c1db16e2067abcd5aeeb7f6f71 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Mon, 4 Jan 2021 21:16:07 +0800
Subject: [PATCH] style: optimize the overall style

---
 source/css/layout/_partial/first-screen.styl |  8 +++++
 source/css/layout/_partial/header.styl       |  5 +--
 source/css/layout/common/variables.styl      |  2 +-
 source/css/layout/page.styl                  | 38 +++++++++++++++++---
 source/js/header-shrink.js                   |  3 ++
 5 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl
index 17404ec..58bc3f9 100644
--- a/source/css/layout/_partial/first-screen.styl
+++ b/source/css/layout/_partial/first-screen.styl
@@ -12,6 +12,14 @@ $first-screen-img = $temp-img ? $temp-img:'/images/bg.svg';
   background: url($first-screen-img) center center / cover no-repeat;
   background-position-y: $header-height - 2px;
 
+  +keep-tablet() {
+    background-position-y: $header-height * 0.9 - 2px;
+  }
+
+  +keep-mobile() {
+    background-position-y: $header-height * 0.8 - 2px;
+  }
+
   .content {
     position: relative;
     box-sizing: border-box;
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index 453c5f2..8d167bd 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -58,10 +58,9 @@ $menu-bar-line-height = 2.5px;
           font-size: $logo-title-font-size * 0.8;
         }
       }
-
-
     }
 
+
     .right {
 
       .pc {
@@ -317,11 +316,13 @@ $menu-bar-line-height = 2.5px;
 
             a:hover {
               &::after {
+                transition();
                 bottom: -($header-shrink-height / 2 - 12);
               }
             }
 
             .active::after {
+              transition();
               bottom: -($header-shrink-height / 2 - 12);
             }
           }
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index 26abae9..9aa35e9 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -6,10 +6,10 @@
 // layout
 // ========================================================================
 $header-height = 76px;                          // 头部默认高度
+$header-shrink-height = $header-height * 0.8;   // 头部收缩高度
 $main-content-width = 80%;                      // 中间内容区域宽度（PC）
 $main-content-width-tablet = 85%;               // 中间内容区域宽度（平板）
 $main-content-width-mobile = 90%;               // 中间内容区域宽度（手机）
-$header-shrink-height = 56px;                   // 头部收缩高度
 $circle-button-width = 40px;                    // tools 圆形工具按钮宽度
 $tools-button-width = 32px;                     // tools 方形工具按钮宽度
 $component-interspace = 30px;                   // 组件/模块的间隔值（PC）
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index f6c5fe3..41fc514 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -1,6 +1,6 @@
 $header-progress-height = 2.8px;
 $temp-width = hexo-config('style.left_side_width');
-$page-aside-width = $temp-width ? convert($temp-width) : 260px;
+$page-aside-width = $temp-width ? convert($temp-width):260px;
 
 .page-container {
   position: relative;
@@ -50,12 +50,12 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
         height: $header-height;
 
         +keep-tablet() {
-          height: $header-height - 8px;
+          height: $header-height * 0.9;
           padding-left: 0 !important;
         }
 
         +keep-mobile() {
-          height: $header-height - 16px;
+          height: $header-height  * 0.8;
         }
 
         z-index: $z-index-5;
@@ -106,11 +106,27 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
 
 
     .page-main-content-top-shrink {
-      transition();
       padding-top: $header-shrink-height;
+      transition();
+
+      +keep-tablet() {
+        padding-top: $header-shrink-height * 0.9;
+      }
+
+      +keep-mobile() {
+        padding-top: $header-shrink-height * 0.8;
+      }
 
       .page-main-content-top {
         height: $header-shrink-height;
+
+        +keep-tablet() {
+          height: $header-shrink-height * 0.9;
+        }
+
+        +keep-mobile() {
+          height: $header-shrink-height * 0.8;
+        }
       }
 
     }
@@ -145,13 +161,27 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px;
     right: $component-interspace;
     transition();
 
+    &.shrink {
+      top: $header-shrink-height + $component-interspace;
+
+      +keep-tablet() {
+        top: $header-shrink-height * 0.9 + $component-interspace;
+      }
+
+      +keep-mobile() {
+        top: $header-shrink-height * 0.8 + $component-interspace;
+      }
+    }
+
     +keep-tablet() {
+      top: $header-height * 0.9 + $component-interspace;
       right: 10px;
       transform: scale(0.82);
       transform-origin: right top;
     }
 
     +keep-mobile() {
+      top: $header-height * 0.8 + $component-interspace;
       right: 5px;
       transform: scale(0.72);
       transform-origin: right top;
diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js
index f6f61e0..22fb91a 100644
--- a/source/js/header-shrink.js
+++ b/source/js/header-shrink.js
@@ -3,6 +3,7 @@ KEEP.initHeaderShrink = () => {
 
     pageTemplateDom: document.querySelector('.page-main-content'),
     headerDom: document.querySelector('.header-wrapper'),
+    sidebarToolsDom: document.querySelector('.sidebar-tools'),
     isHeaderShrink: false,
     isShowHeaderDrawer: false,
 
@@ -18,10 +19,12 @@ KEEP.initHeaderShrink = () => {
         this.isHeaderShrink = true;
         this.headerDom.classList.add('header-wrapper-shrink');
         this.pageTemplateDom.classList.add('page-main-content-top-shrink');
+        this.sidebarToolsDom && this.sidebarToolsDom.classList.add('shrink');
       } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
         this.isHeaderShrink = false;
         this.headerDom.classList.remove('header-wrapper-shrink');
         this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
+        this.sidebarToolsDom && this.sidebarToolsDom.classList.remove('shrink');
       }
 
     },