Improve responsive design on mobile devices (vuejs#428)

lin-lu · kazupon · commit 7bd44b5e3a99 · 2016-10-02T23:55:18.000+09:00
* Fix menu button on tablets

* Hide menu, collapse header on tablets

* Center content on mobile devices
diff --git a/themes/vue/source/css/_sidebar.styl b/themes/vue/source/css/_sidebar.styl
@@ -58,7 +58,7 @@
         display none
         padding-left 0
 
-@media screen and (max-width: 720px)
+@media screen and (max-width: 900px)
     .sidebar
         position fixed
         z-index 8
diff --git a/themes/vue/source/css/page.styl b/themes/vue/source/css/page.styl
@@ -140,7 +140,7 @@
             bottom 12px
             left 140px
 
-@media screen and (max-width: 720px)
+@media screen and (max-width: 900px)
     #ad
         width 100%
     body
@@ -162,7 +162,7 @@
         padding 1.2em 1em
     .content
         &.with-sidebar
-            margin-left 0
+            margin auto
     .footer
         margin-left 0
         text-align center
