adjust layout for mobile

Author: imeoer

README.md

@@ -14,8 +14,8 @@ run `npm run build` , build to dist folder
 
 ## Deploy
 
-`pm2 start website.sh`
+run `./build.sh`, build to dist folder
 
-## Restart
+## Quotas Update
 
-`pm2 restart website`
+modify `js/quotas.json`, confirm it's a valid JSON file

css/base.css

@@ -61,6 +61,10 @@ $whiteGray: #fcfcfc;
       display: none;
     }
   }
+  @media (--small-viewport) {
+    position: static;
+    padding-bottom: 10px;
+  }
 }
 
 html, body {

css/common.css

@@ -14,6 +14,10 @@ body > .main .container {
     padding-left: 70px;
     padding-right: 70px;
   }
+  @media (--small-viewport) {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
   .fa-heart {
     color: #ca0000;
     font-size: 32px;

css/index/features.css

@@ -2,6 +2,9 @@
   background: url(/assets/features_bg1.svg);
   background-size: contain;
   overflow: hidden;
+  @media (--small-viewport) {
+    background-size: auto;
+  }
   .bg {
     position: absolute;
     left: -150px;
@@ -18,10 +21,6 @@
     }
   }
   .intro-wrap {
-    @media (--laptop-viewport) {
-      transform: scale(0.85);
-      padding: 10px;
-    }
     padding: 100px 10px 50px 10px;
     display: flex;
     align-items: flex-start;
@@ -30,6 +29,14 @@
     width: 100%;
     margin: 0 auto;
     max-width: 1224px;
+    @media (--laptop-viewport) {
+      transform: scale(0.85);
+      padding: 10px;
+    }
+    @media (--small-viewport) {
+      flex-direction: column;
+      padding: 20px 10px 20px 10px;
+    }
     .list {
       list-style: circle;
       margin-left: 16px;
@@ -40,6 +47,13 @@
     .intro-title {
       @mixin title;
       position: relative;
+      @media (--small-viewport) {
+        text-align: center;
+        margin-bottom: 50px;
+        &::after {
+          display: none;
+        }
+      }
     }
     &.right {
       flex-flow: row-reverse;
@@ -49,22 +63,39 @@
           left: auto;
         }
       }
+      @media (--small-viewport) {
+        flex-direction: column;
+      }
     }
     .intro-line {
       width: 600px;
       justify-content: space-between;
+      @media (--small-viewport) {
+        width: auto;
+      }
     }
     .intro {
       margin-bottom: 20px;
       text-align: left;
       display: flex;
       align-items: flex-start;
+      @media (--small-viewport) {
+        flex-direction: column;
+        text-align: center;
+      }
       .image {
         min-width: 100px;
         margin-right: 40px;
+        @media (--small-viewport) {
+          margin: 0 auto;
+          margin-bottom: 10px;
+        }
       }
       .info {
         text-align: left;
+        @media (--small-viewport) {
+          text-align: center;
+        }
         .head {
           font-family: 'Fjalla One';
           font-weight: bold;

css/index/news.css

@@ -109,9 +109,7 @@
           font-size: 14px;
           font-style: italic;
           @media (--small-viewport) {
-            width: 40px;
-            height: 40px;
-            line-height: 40px;
+            display: none;
           }
           &:hover {
             opacity: 0.9;

css/index/prices.css

@@ -36,6 +36,9 @@ $itemStart: 3.16em;
         .icon {
           width: 65px;
           margin-bottom: 5px;
+          @media (--small-viewport) {
+            width: 55px;
+          }
         }
         .name {
           font-size: 18px;

css/responsive/index/cases.css

@@ -1,5 +1,5 @@
 @media (--small-viewport ) {
-  #index .container > .cases {
+  #index .container.cases {
 
 
     .content .group {

css/responsive/index/intro.css

@@ -1,5 +1,5 @@
 @media (--small-viewport ) {
-  #index .container > .intro {
+  #index .container.intro {
     &, &.right { flex-direction: column; }
     &.right .title { border-left: 0; }
     .title {

css/responsive/index/prices.css

@@ -1,5 +1,5 @@
 @media (--ipad-viewport) {
-  #index .container > .prices {
+  #index .container.prices {
     .content {
       .slider {
         min-width: 50em;
@@ -14,7 +14,7 @@
 
 
 @media (--small-than-ipad-viewport) {
-  #index .container > .prices {
+  #index .container.prices {
     .content {
       .slider {
         min-width: 30em;
@@ -28,7 +28,7 @@
 }
 
 @media (--small-viewport) {
-  #index .container > .prices {
+  #index .container.prices {
     .content {
       .items {
         min-width: 20em;