site: improve responsive design

site/theme/static/common.less

@@ -32,7 +32,7 @@ a {
   position: relative;
 }
 
-div.main-container {
+.main-container {
   padding: 0 130px 120px 40px;
   margin-left: -1px;
   background: #fff;

site/theme/static/footer.less

@@ -6,34 +6,30 @@ footer {
   z-index: 1;
   color: @text-color;
   box-shadow: 0 1000px 0 1000px #fff;
-}
-
-footer ul {
-  overflow: hidden;
-  margin: 0 2%;
-  list-style: none;
-}
-
-footer ul li {
-  float: left;
-  width: 25%;
-  padding: 24px 2%;
-}
-
-footer ul li > h2 {
-  font-size: 14px;
-  margin: 0 auto 8px;
-  font-weight: 500;
-  position: relative;
-  > .anticon {
-    font-size: 16px;
-    position: absolute;
-    left: -22px;
-    top: 3px;
-    color: #aaa;
-  }  
-}
-
-footer ul li > div {
-  margin: 0 8px 5px 0;
+  ul {
+    overflow: hidden;
+    margin: 0 2%;
+    list-style: none;
+    li {
+      float: left;
+      width: 25%;
+      padding: 24px 2%;
+      > h2 {
+        font-size: 14px;
+        margin: 0 auto 8px;
+        font-weight: 500;
+        position: relative;
+        > .anticon {
+          font-size: 16px;
+          position: absolute;
+          left: -22px;
+          top: 3px;
+          color: #aaa;
+        }
+      }
+      > div {
+        margin: 0 0 5px;
+      }
+    }
+  }
 }

site/theme/static/header.less

@@ -66,11 +66,12 @@
 .version {
   float: right;
   margin-top: 29px;
-  margin-left: 12px;
+  margin-left: 10px;
 }
 
 .version {
-  width: 68px;
+  width: 66px;
+  margin-left: 0;
 }
 
 #nav {

site/theme/static/responsive.less

@@ -9,17 +9,16 @@
   cursor: pointer;
 }
 
-@media only screen and (min-width: 320px) and (max-width: 1280px) {
+@media only screen and (min-width: 0px) and (max-width: 1280px) {
   #search-box {
     display: none;
   }
 }
 
-@media only screen and (min-width: 320px) and (max-width: 1024px) {
+@media only screen and (min-width: 0px) and (max-width: 992px) {
   .code-boxes-col-2-1, .code-boxes-col-1-1 {
     float: none;
     width: 100%;
-    padding: 0!important;
   }
   .preview-image-boxes {
     margin: 0!important;
@@ -30,9 +29,7 @@
     padding-left: 0;
     margin: 10px 0;
   }
-}
 
-@media only screen and (min-width: 320px) and (max-width: 1024px) {
   a#logo {
     width: 150px;
     margin-left: auto;
@@ -177,9 +174,9 @@
   }
 
   .main-container {
-    padding-left: 30px;
-    padding-right: 30px;
-    margin-left: 0;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-right: 0;
     > .markdown > * {
       width: 100%!important;
     }
@@ -193,10 +190,12 @@
 
   footer {
     text-align: center;
-  }
-
-  footer ul li {
-    float: none;
-    width: auto;
+    ul li {
+      float: none;
+      width: auto;
+      > h2 .anticon {
+        display: none;
+      }
+    }
   }
 }

site/theme/template/Content/MainContent.jsx

@@ -195,8 +195,10 @@ export default class MainContent extends React.Component {
     return (
       <div className="main-wrapper">
         <Row>
-          <Col lg={4} md={6} sm={24} xs={24}>
-            <Menu className="aside-container" mode="inline"
+          <Col lg={4} md={6} sm={0} xs={0}>
+            <Menu
+              className="aside-container"
+              mode="inline"
               openKeys={this.state.openKeys}
               selectedKeys={[activeMenuItem]}
               onOpenChange={this.handleMenuOpenChange}

site/theme/template/Layout/Header.jsx

@@ -27,7 +27,7 @@ export default class Header extends React.Component {
 
     /* eslint-disable global-require */
     require('enquire.js')
-      .register('only screen and (min-width: 320px) and (max-width: 1024px)', {
+      .register('only screen and (min-width: 0px) and (max-width: 992px)', {
         match: () => {
           this.setState({ menuMode: 'inline' });
         },