docs: improve small screen compatibility for Intro & Layout component

Author: PeachScript

docs/.vuepress/theme/components/Intro.vue

@@ -15,6 +15,7 @@
     <ul class="feat-list"
       v-if="data.features && data.features">
       <li v-for="(feature, index) in data.features">
+        <div class="feat-img"></div>
         <h3 v-text="feature.title"></h3>
         {{ feature.details }}
       </li>
@@ -61,10 +62,16 @@ export default {
   @media (max-width 1080px)
     width 590px
 
+  @media (max-width $mq-mobile)
+    width auto
+
   > p
     margin 0 0 40px
     color $c-basic-light
 
+    @media (max-width $mq-mobile)
+      line-height 1.28
+
   .button + .button
     margin-left 20px
 
@@ -74,33 +81,45 @@ export default {
     margin-top 60px
     padding 0
 
+    @media (max-width $mq-mobile)
+      flex-direction column
+      margin-top 40px
+
     li
       flex 1
       color $c-basic-light
       line-height 1.42857
       word-break break-all
 
       &:not(:last-child)
-        margin-right 40px
+        @media (min-width $mq-mobile + 1)
+          margin-right 40px
+
+        @media (max-width $mq-mobile)
+          margin-bottom 20px
+
+      .feat-img
+        margin 0 auto
+        max-width 200px
 
-      &::before
-        content ''
-        display block
-        padding-top 57%
-        background no-repeat center top/90%
-        filter grayscale(50%)
-        transition filter 0.3s
+        &::before
+          content ''
+          display block
+          padding-top 57%
+          background no-repeat center top/90%
+          filter grayscale(50%)
+          transition filter 0.3s
 
-      &:first-child::before
+      &:first-child .feat-img::before
         background-image url('../assets/images/icon-box.png')
 
-      &:nth-child(2)::before
+      &:nth-child(2) .feat-img::before
         background-image url('../assets/images/icon-dir.png')
 
-      &:last-child::before
+      &:last-child .feat-img::before
         background-image url('../assets/images/icon-msg.png')
 
-      &:hover::before
+      &:hover .feat-img::before
         filter none
 
       h3

docs/.vuepress/theme/layouts/Layout.vue

@@ -121,18 +121,18 @@ body
     transition all 0.3s
 
 .sidebar
-  @media (min-width $mq-mobile)
+  @media (min-width $mq-mobile + 1)
     width $s-sidebar-width * 0.82
     background $c-bg
 
-  @media (min-width $mq-narrow)
+  @media (min-width $mq-narrow + 1)
     width $s-sidebar-width
 
 .page
-  @media (min-width $mq-mobile)
+  @media (min-width $mq-mobile + 1)
     padding-left $s-sidebar-width * 0.82
 
-  @media (min-width $mq-narrow)
+  @media (min-width $mq-narrow + 1)
     padding-left $s-sidebar-width
 
 .theme-container
@@ -171,6 +171,11 @@ body
       margin-left 0
       transform translateX(-50%)
 
+    @media (max-width $mq-mobile)
+      top 60px
+      width 150px
+      height 150px
+
     + h1
       position absolute
       z-index 100
@@ -189,6 +194,10 @@ body
         margin-left 0
         transform translateX(-50%)
 
+      @media (max-width $mq-mobile)
+        top 200px
+        font-size 26px
+
     &,
     + h1
       transition all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1)
@@ -211,6 +220,9 @@ body
       transform translateX(-50%)
       transition-delay 0.3s
 
+    @media (max-width $mq-mobile)
+      top 250px
+
   .footer
     margin-top 800px
     padding 15px 0
@@ -223,7 +235,7 @@ body
       color lighten($c-basic-light, 15%)
       font-size 14px
 
-  @media (min-width $mq-narrow)
+  @media (min-width $mq-narrow + 1)
     .page
      margin-right $s-preview-width + $s-edge-gap