style: optimize global styles in the mobile

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

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 {

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) {