From 2c27ba7bcf2ae992bc160bb08692beb41c8179b6 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Fri, 22 Jan 2021 18:20:13 +0800
Subject: [PATCH] style: optimize home page style

---
 source/css/common/keep-theme.styl          |  4 ++--
 source/css/layout/_partial/side-tools.styl | 13 +++++++++----
 source/css/layout/article-content.styl     |  2 +-
 source/css/layout/home-content.styl        | 10 ++++------
 source/js/utils.js                         |  4 ++--
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/source/css/common/keep-theme.styl b/source/css/common/keep-theme.styl
index d20dc0d..021a41a 100644
--- a/source/css/common/keep-theme.styl
+++ b/source/css/common/keep-theme.styl
@@ -1,7 +1,7 @@
 $keep-container-border-radius = 5px;
 
 hover-style(isTransform, scaleX, scaleY) {
-  box-shadow: 2px 2px 6px var(--shadow-color);
+  box-shadow: 2px 2px 5px var(--shadow-color);
   transition-t("transform", "0", "0.2", "linear");
 
   &:hover {
@@ -10,7 +10,7 @@ hover-style(isTransform, scaleX, scaleY) {
     }
 
     if (hexo-config('style.hover.shadow')) {
-      box-shadow: 3px 3px 10px var(--shadow-hover-color);
+      box-shadow: 2px 2px 8px var(--shadow-hover-color);
     }
   }
 }
diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl
index 7f86c84..6ad7677 100644
--- a/source/css/layout/_partial/side-tools.styl
+++ b/source/css/layout/_partial/side-tools.styl
@@ -81,21 +81,26 @@ $tools-item-border-radius = 1px;
       .tool-scroll-to-top {
         display: none;
 
+        &.show {
+          display: flex;
+        }
 
         &:hover {
 
+          .percent {
+            display: none;
+          }
+
           .arrow-up {
             display: flex;
           }
 
-          .percent {
-            display: none;
-          }
+
         }
 
 
         .arrow-up, .percent {
-          transition-t("display", "0", "0.2", "linear");
+          transition-t("display", "5", "0.2", "linear");
         }
 
 
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 245dc12..feed424 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -116,7 +116,7 @@ $article-title-font-size = 1.6rem;
       height: 100%;
       box-sizing: border-box;
 
-      keep-container(true, 1.05, 1.05, 10px, 0);
+      keep-container(true, 1.03, 1.03, 10px, 0);
 
       a {
         position: relative;
diff --git a/source/css/layout/home-content.styl b/source/css/layout/home-content.styl
index 55c8742..91e9b37 100644
--- a/source/css/layout/home-content.styl
+++ b/source/css/layout/home-content.styl
@@ -7,7 +7,7 @@
     .home-article-item {
       position: relative;
 
-      keep-container(true, 1.02, 1.02, 28px, 38px);
+      keep-container(true, 1.015, 1.015, 28px, 38px);
 
       .top-icon {
         position: absolute;
@@ -27,8 +27,8 @@
       .home-article-title {
         position: relative;
         font-weight: 600;
-        font-size: 1.38rem;
-        line-height: 1;
+        font-size: 1.4rem;
+        line-height: 1.5;
         color: var(--second-text-color);
 
 
@@ -50,9 +50,7 @@
         word-wrap: break-word;
         text-align: justify;
         margin: 20px 0;
-        line-height: 2rem;
         color: var(--default-text-color);
-
       }
 
 
@@ -60,7 +58,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        font-size: 0.95rem;
+        font-size: 0.92rem;
         color: var(--third-text-color);
 
 
diff --git a/source/js/utils.js b/source/js/utils.js
index 37bdcd7..eb75bc4 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -35,9 +35,9 @@ KEEP.initUtils = () => {
       if (this.isHasScrollPercent) {
         const percent_dom = this.back2TopButton_dom.querySelector('.percent');
         if (percent === '0') {
-          this.back2TopButton_dom.style.display = 'none';
+          this.back2TopButton_dom.classList.remove('show');
         } else {
-          this.back2TopButton_dom.style.display = 'flex';
+          this.back2TopButton_dom.classList.add('show');
           percent_dom.innerHTML = percent;
         }
       }