Improve site style in small screan

scripts/demo.js

@@ -378,7 +378,11 @@ InstantClickChangeFns.push(function() {
   }
 
   $('.nav-phone-icon').click(function() {
-    $(this).prev().toggle();
+    var navMenu = $(this).prev();
+    navMenu.removeClass('nav-hide').addClass('nav-show').focus();
+    navMenu.one('blur', function() {
+      navMenu.removeClass('nav-show').addClass('nav-hide');
+    });
   });
 
   $.easing['jswing'] = $.easing['swing'];

site/static/style.less

@@ -1448,7 +1448,8 @@ a.entry-link:hover .anticon-smile {
 }
 
 @media only screen and (min-width: 320px) and (max-width: 767px) {
-  .nav, .search {
+  #list,
+  .search {
     display: none;
   }
 
@@ -1465,17 +1466,27 @@ a.entry-link:hover .anticon-smile {
   }
 
   .nav {
-    position: absolute;
+    position: fixed;
     z-index: 1000;
-    top: 50px;
+    top: 0;
     right: 0;
     background: #fff;
     overflow: hidden;
-    height: auto;
-    line-height: 50px;
+    line-height: 60px;
     margin-right: 0;
-    border: 1px solid #e9e9e9;
-    width: 50%;
+    width: 44%;
+    height: 100%;
+    box-shadow: -10px 0 12px rgba(0,0,0,0.1);
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  .nav.nav-show {
+    animation: moveRight .2s ease-in forwards;
+  }
+
+  .nav.nav-hide {
+    animation: moveRightOut .2s ease-in forwards;
   }
 
   .nav .bar {
@@ -1492,26 +1503,23 @@ a.entry-link:hover .anticon-smile {
 
   .nav-phone-icon {
     display: block;
-    width: 49px;
-    height: 49px;
-    float: right;
+    width: 18px;
+    height: 50px;
+    position: absolute;
+    right: 30px;
+    top: 30px;
     cursor: pointer;
-    background: #BEC4C8;
   }
 
-  .nav-phone-icon:before,
-  .nav-phone-icon:after {
+  .nav-phone-icon:before {
     content: "";
     display: block;
     border-radius: 1px;
-    width: 15px;
+    width: 18px;
     height: 2px;
-    background: #EBEDEE;
-    margin: 20px 0 0 18px;
-  }
-
-  .nav-phone-icon:after {
-    margin-top: 5px;
+    background: #666;
+    box-shadow: 0 7px 0 0 #666, 0 14px 0 0 #666;
+    position: absolute;
   }
 
   .main {
@@ -1521,6 +1529,9 @@ a.entry-link:hover .anticon-smile {
   .aside-container {
     float: none;
     width: auto;
+    padding-bottom: 30px;
+    border-bottom: 1px solid #e9e9e9;
+    margin-bottom: 30px;
   }
 
   .main-container {
@@ -1533,6 +1544,7 @@ a.entry-link:hover .anticon-smile {
 
   .main-wrapper {
     width: 100%;
+    border-radius: 0;
   }
 
   .main-container {
@@ -1553,3 +1565,25 @@ a.entry-link:hover .anticon-smile {
     width: auto;
   }
 }
+
+@keyframes moveRight {
+  0% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes moveRightOut {
+  0% {
+    transform: translateX(0px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}

site/templates/home.html

@@ -39,6 +39,17 @@
     color: #eee;
   }
 
+  @media only screen and (min-width: 320px) and (max-width: 767px) {
+    header .nav ul li a {
+      color: #666;
+    }
+  }
+
+  .nav-phone-icon:before {
+    background: #eee;
+    box-shadow: 0 7px 0 0 #eee, 0 14px 0 0 #eee;
+  }
+
   .nav ul li a {
     transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
   }
@@ -76,6 +87,10 @@
     border-left-color: #EBEDEE;
   }
 
+  .home-nav-bottom .nav {
+    background: #fff;
+  }
+
   .home-nav-bottom .nav a {
     color: #666;
   }

site/templates/layout.html

@@ -56,7 +56,7 @@
       <div class="search">
         <div id="autoComplete"></div>
       </div>
-      <nav class="nav">
+      <nav class="nav" tabindex="-1">
         <span class="bar"></span>
         <ul>
           <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">