Improve home page style in Mobile device

site/theme/static/home.less

@@ -39,6 +39,7 @@
   font-size: 40px;
   font-weight: normal;
   font-family: 'Raleway', 'Hiragino Sans GB';
+  white-space: nowrap;
 }
 .banner-text-wrapper h2 p {
   color: #FF3171;
@@ -129,12 +130,14 @@
     top: 20%;
     left: 10px;
     font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
+    z-index: 1;
   }
   .text-wrapper h2,
   .text-wrapper-bottom h2 {
     font-size: 32px;
     color: #666;
     font-weight: normal;
+    white-space: nowrap;
   }
   .text-wrapper p {
     margin: 10px 0 20px;

site/theme/static/responsive.less

@@ -38,6 +38,10 @@
     display: none;
   }
 
+  #header {
+    position: absolute!important;
+  }
+
   a#logo {
     width: 150px;
     margin-left: auto;
@@ -53,6 +57,51 @@
     text-align: center;
   }
 
+  .image-wrapper {
+    display: none;
+  }
+
+  .banner-wrapper {
+    background-position: 40%;
+  }
+
+  .content-wrapper .text-wrapper {
+    float: none;
+    text-align: center;
+    left: 0;
+    width: 100%;
+    padding: 0;
+    > p {
+      max-width: 100% !important;
+      padding: 0 40px;
+    }
+  }
+
+  .content-wrapper.page {
+    min-height: 300px;
+    height: 300px;
+  }
+
+  .banner-text-wrapper {
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    .start-button {
+      text-align: center;
+      > a {
+        margin: 0 4px;
+      }
+    }
+    .github-btn {
+      text-align: center;
+      float: none;
+      display: inline-block;
+    }
+    .line {
+      display: none;
+    }
+  }
+
   button.lang {
     display: block;
     margin: 29px auto 16px;

site/theme/template/Home/Link.jsx

@@ -1,21 +1,12 @@
 import React from 'react';
 import ScrollLink from 'rc-scroll-anim/lib/ScrollLink';
-import scrollScreen from 'rc-scroll-anim/lib/ScrollScreen';
 
-export default class Link extends React.Component {
+export default () => (
-  componentDidMount() {
+  <div id="list">
-    scrollScreen.init();
+    <ScrollLink className="list-point" to="banner" toHash={false} />
-  }
+    <ScrollLink className="list-point" to="page1" toHash={false} />
-
+    <ScrollLink className="list-point" to="page2" toHash={false} />
-  render() {
+    <ScrollLink className="list-point" to="page3" toHash={false} />
-    return (
+    <ScrollLink className="list-point" to="page4" toHash={false} />
-      <div id="list">
+  </div>
-        <ScrollLink className="list-point" to="banner" toHash={false} />
+);
-        <ScrollLink className="list-point" to="page1" toHash={false} />
-        <ScrollLink className="list-point" to="page2" toHash={false} />
-        <ScrollLink className="list-point" to="page3" toHash={false} />
-        <ScrollLink className="list-point" to="page4" toHash={false} />
-      </div>
-    );
-  }
-}

site/theme/template/Home/Page1.jsx

@@ -21,7 +21,7 @@ function onScrollEvent(e) {
 export default function Page1({ location }) {
   return (
     <ScrollOverPack id="page1" className="content-wrapper page"
-      playScale={1} replay scrollEvent={onScrollEvent}
+      replay scrollEvent={onScrollEvent}
       hideProps={{ image: { reverse: true } }}
     >
       <TweenOne key="image" className="image1 image-wrapper"

site/theme/template/Home/Page2.jsx

@@ -9,7 +9,7 @@ import QueueAnim from 'rc-queue-anim';
 export default function Page2({ location }) {
   return (
     <ScrollOverPack id="page2"
-      className="content-wrapper page" playScale={1} replay
+      className="content-wrapper page" replay
       hideProps={{ image: { reverse: true } }}
     >
       <QueueAnim className="text-wrapper left-text" key="text"

site/theme/template/Home/Page3.jsx

@@ -8,7 +8,7 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page3({ location }) {
   return (
-    <ScrollOverPack id="page3" className="content-wrapper page" playScale={1} replay
+    <ScrollOverPack id="page3" className="content-wrapper page" replay
       hideProps={{ image: { reverse: true } }}
     >
       <TweenOne key="image" className="image3 image-wrapper"

site/theme/template/Home/Page4.jsx

@@ -7,7 +7,7 @@ import QueueAnim from 'rc-queue-anim';
 export default function Page4() {
   return (
     <ScrollOverPack id="page4" className="content-wrapper page"
-      playScale={1} hideProps={{ image: { reverse: true } }}
+      hideProps={{ image: { reverse: true } }}
     >
       <QueueAnim className="text-wrapper-bottom" key="text"
         leaveReverse type="bottom"