From 7ddbb8d65d9ede5824a24e861e4ed0dbd4bfd0bf Mon Sep 17 00:00:00 2001
From: reco_luan <recoluan@outlook.com>
Date: Sun, 19 Jul 2020 11:36:07 +0800
Subject: [PATCH] refactor(vuepress-theme-reco): show blog info on the mobile
 terminal

---
 .../components/HomeBlog.vue                   | 47 ++++++++++++++-----
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/vuepress-theme-reco/components/HomeBlog.vue b/packages/vuepress-theme-reco/components/HomeBlog.vue
index f759f04..4b56d91 100644
--- a/packages/vuepress-theme-reco/components/HomeBlog.vue
+++ b/packages/vuepress-theme-reco/components/HomeBlog.vue
@@ -4,13 +4,20 @@
       <div
         class="mask"
         :style="{
-      background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`}"></div>
+          background: `
+            url(${$frontmatter.bgImage ?
+            $withBase($frontmatter.bgImage) :
+            require('../images/home-bg.jpg')}) center/cover no-repeat
+          `
+        }"
+      ></div>
       <ModuleTransition>
         <img
           v-if="recoShowModule && $frontmatter.heroImage"
           :style="heroImageStyle || {}"
           :src="$withBase($frontmatter.heroImage)"
-          alt="hero">
+          alt="hero"
+        />
       </ModuleTransition>
       <ModuleTransition delay="0.04">
         <h1 v-if="recoShowModule && $frontmatter.heroText !== null">
@@ -219,20 +226,22 @@ export default {
       }
     }
     .info-wrapper {
-      position: -webkit-sticky;
-      position: sticky;
-      top: 70px;
+      position -webkit-sticky;
+      position sticky;
+      top 70px
+      overflow hidden
       transition all .3s
-      margin-left 15px;
+      margin-top 15px
+      margin-left 15px
       flex 0 0 300px
-      height auto;
-      box-shadow var(--box-shadow);
+      height auto
+      box-shadow var(--box-shadow)
       border-radius $borderRadius
       box-sizing border-box
       padding 0 15px
       background var(--background-color)
       &:hover {
-        box-shadow: var(--box-shadow-hover);
+        box-shadow var(--box-shadow-hover)
       }
       h4 {
         color var(--text-color)
@@ -301,8 +310,16 @@ export default {
       }
     }
     .home-blog-wrapper {
+      display block!important
+      .blog-list {
+        width auto
+      }
       .info-wrapper {
-        display none!important
+        // display none!important
+        margin-left 0
+        .personal-info-wrapper {
+          display none
+        }
       }
     }
   }
@@ -341,8 +358,16 @@ export default {
     }
 
     .home-blog-wrapper {
+      display block!important
+      .blog-list {
+        width auto
+      }
       .info-wrapper {
-        display none!important
+        // display none!important
+        margin-left 0
+        .personal-info-wrapper {
+          display none
+        }
       }
     }
   }