From 7fc2c8ece0292ecabc56393dfebea32aa85e8133 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Sun, 9 Oct 2022 17:17:28 +0800
Subject: [PATCH] style: optimize global styles in the mobile

---
 source/css/common/basic.styl           | 14 ++++++++++++++
 source/css/layout/article-content.styl |  4 ++++
 source/js/utils.js                     | 14 +++++++++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl
index 8f8e495..4fb26b9 100644
--- a/source/css/common/basic.styl
+++ b/source/css/common/basic.styl
@@ -55,6 +55,20 @@ body {
     height 0.6rem
   }
 
+  +keep-tablet() {
+    &::-webkit-scrollbar {
+      width 0.5rem
+      height 0.5rem
+    }
+  }
+
+  +keep-mobile() {
+    &::-webkit-scrollbar {
+      width 0.4rem
+      height 0.4rem
+    }
+  }
+
   +keep-tablet() {
     font-size $default-font-size * 0.96
     line-height $default-font-line-height * 0.96
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index b968620..d9ccff2 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -10,6 +10,10 @@ $article-title-font-size = 1.6rem
   +keep-mobile() {
     padding 1.2rem 0.2rem
     box-shadow none
+
+    &:hover {
+      box-shadow none
+    }
   }
 
   .article-title {
diff --git a/source/js/utils.js b/source/js/utils.js
index f50be6f..da0e500 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -223,7 +223,7 @@ KEEP.initUtils = () => {
 
     // zoom in image
     zoomInImage() {
-      const SIDE_GAP = 30
+      let SIDE_GAP = 40
       let isZoomIn = false
       let selectedImgDom = null
       const imgDomList = document.querySelectorAll('.markdown-body img')
@@ -253,11 +253,23 @@ KEEP.initUtils = () => {
         })
       }
 
+      const setSideGap = () => {
+        const w = document.body.offsetWidth
+        if (w <= 500) {
+          SIDE_GAP = 10
+        } else if (w <= 780) {
+          SIDE_GAP = 20
+        } else {
+          SIDE_GAP = 40
+        }
+      }
+
       if (imgDomList.length) {
         zoomOutHandle()
         imgDomList.forEach((img) => {
           img.addEventListener('click', () => {
             isZoomIn = !isZoomIn
+            setSideGap()
             zoomInImg.setAttribute('src', img.getAttribute('src'))
             selectedImgDom = img
             if (isZoomIn) {