Improve CSS for the content

corneadoug · corneadoug · commit d31cf3fd30cb · 2016-08-31T10:07:59.000+09:00
diff --git a/_includes/themes/zeppelin/sideMenu.html b/_includes/themes/zeppelin/sideMenu.html
@@ -1,15 +1,15 @@
 <div class="row">
   {% if page.menu %}
-    <div class="sideMenu col-md-3">
+    <div class="sideMenu col-sm-3">
       {% assign pages_list = site.pages %}
       {% assign group = page.menu %}
       {% include JB/pages_list %}
     </div>
-    <div class="col-md-9">
+    <div class="col-sm-9">
       {{ content }}
     </div>
   {% else %}
-    <div class="col-md-12">
+    <div class="col-sm-12">
       {{ content }}
     </div>
   {% endif %}
diff --git a/assets/themes/zeppelin/css/style.css b/assets/themes/zeppelin/css/style.css
@@ -142,19 +142,6 @@ body {
   background: #3071a9;
 }
 
-@media (max-width: 768px) {
-  .navbar-collapse.in {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4);
-  }
-
-  .bigFingerButton {
-    margin-top: 12px;
-    display: block;
-    margin-right: auto;
-    margin-left: auto;
-  }
-}
-
 .bigFingerButton {
   margin-right: 10px;
 }
@@ -233,15 +220,6 @@ body {
   margin-bottom: 0;
 }
 
-@media screen and (min-width: 768px) {
-  .carousel-indicators {
-    margin-bottom: -60px;
-  }
-  .carousel-caption {
-    padding-bottom: 60px;
-  }
-}
-
 /* screenshot img inside of doc */
 .screenshot {
   width: 800px;
@@ -260,29 +238,14 @@ body {
 /* Custom container */
 .content {
   word-wrap: break-word;
+  max-width: 1024px;
+  padding: 2rem 2rem;
+  margin: 0 auto;
 }
 .content :first-child {
   margin-top: 0;
 }
 
-@media screen and (min-width: 64em) {
-  .content {
-    max-width: 64em;
-    padding: 2rem 6rem;
-    margin: 0 auto;
-  }
-}
-@media screen and (min-width: 42em) and (max-width: 64em) {
-  .content {
-    padding: 2rem 4rem;
-  }
-}
-@media screen and (max-width: 42em) {
-  .content {
-    padding: 2rem 1rem;
-  }
-}
-
 /* <a> */
 .content a {
   color: #4183C4;
@@ -613,3 +576,41 @@ and (max-width: 1024px) {
   padding: 3px 10px 10px 10px;
   font-size: 13px;
 }
+
+/*
+** Media Queries CSS
+*/
+
+
+
+@media (max-width: 991px) {
+  .navbar-inverse .navbar-brand {
+    font-size: 28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .navbar-collapse.in {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4);
+  }
+
+  .bigFingerButton {
+    margin-top: 12px;
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .sideMenu {
+    margin-bottom: 15px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .carousel-indicators {
+    margin-bottom: -60px;
+  }
+  .carousel-caption {
+    padding-bottom: 60px;
+  }
+}
