docs: improve Components layout for different locales

Author: PeachScript

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

@@ -72,8 +72,18 @@ export default {
     @media (max-width $mq-mobile)
       line-height 1.28
 
-  .button + .button
-    margin-left 20px
+  .button
+    white-space nowrap
+
+    @media (max-width $mq-mobile)
+      margin-bottom 20px
+
+    + .button
+      @media (min-width $mq-mobile + 1)
+        margin-left 20px
+
+      @media (max-width $mq-mobile)
+        margin-bottom 0
 
   .feat-list
     list-style none
@@ -89,7 +99,7 @@ export default {
       flex 1
       color $c-basic-light
       line-height 1.42857
-      word-break break-all
+      word-break break-word
 
       &:not(:last-child)
         @media (min-width $mq-mobile + 1)

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

@@ -138,7 +138,7 @@ body
 .theme-container
   .previewer
     position absolute
-    z-index 100
+    z-index 10
     top $s-header-height + 10
     right 100% - $s-home-divide-ratio
     margin-right $s-home-middle-gap
@@ -154,7 +154,7 @@ body
 
   #logo
     position absolute
-    z-index 100
+    z-index 21
     top 100px
     left $s-home-divide-ratio
     display inline-block
@@ -178,7 +178,7 @@ body
 
     + h1
       position absolute
-      z-index 100
+      z-index 21
       top 280px
       left $s-home-divide-ratio
       margin-left 164px + $s-home-middle-gap
@@ -204,7 +204,7 @@ body
 
   .intro-container
     position absolute
-    z-index 10
+    z-index 1
     top 346px
     left $s-home-divide-ratio
     margin-left $s-home-middle-gap
@@ -230,6 +230,12 @@ body
     background-color #fff
     transition all 0.3s
 
+    @media (max-width $mq-mobile)
+      margin-top 1250px
+
+    @media (max-width $mq-mobile-narrow)
+      margin-top 1300px
+
     p
       margin 0
       color lighten($c-basic-light, 15%)
@@ -324,6 +330,7 @@ body
         transform translate(-50%, 30px)
 
     .footer
+      margin-top 0
       opacity 0
       visibility hidden
 

docs/.vuepress/theme/styles/button.styl

@@ -52,3 +52,9 @@ button-shadow-generator($color, $offsetx = 0) {
 
     &:hover
       button-shadow-generator(rgba(28, 90, 160, 0.5), 1px)
+
+a.button
+  display inline-block
+
+  &:hover
+    text-decoration none !important