Cleanup and various fixes

src/theme/book.css

@@ -228,32 +228,41 @@ table thead td {
   -ms-transition: color 0.5s;
   transition: color 0.5s;
 }
-.mobile-nav-chapters {
-  display: none;
-}
 .nav-chapters:hover {
   text-decoration: none;
 }
+.nav-wrapper {
+  margin-top: 50px;
+  display: none;
+}
+.mobile-nav-chapters {
+  font-size: 2.5em;
+  text-align: center;
+  text-decoration: none;
+  width: 90px;
+  border-radius: 5px;
+}
 .previous {
-  left: 15px;
+  float: left;
-  -webkit-transition: left 0.5s;
-  -moz-transition: left 0.5s;
-  -o-transition: left 0.5s;
-  -ms-transition: left 0.5s;
-  transition: left 0.5s;
 }
 .next {
+  float: right;
   right: 15px;
 }
-@media only screen and (min-width: 1251px) {
+@media only screen and (max-width: 1080px) {
-  .sidebar-visible .previous {
+  .nav-chapters {
-    left: 315px;
+    display: none;
+  }
+  .nav-wrapper {
+    display: block;
   }
 }
-@media only screen and (max-width: 1060px) {
+@media only screen and (max-width: 1380px) {
-  .nav-wrapper {
+  .sidebar-visible .nav-chapters {
-    max-width: 750px;
+    display: none;
-    margin: 0 auto;
+  }
+  .sidebar-visible .nav-wrapper {
+    display: block;
   }
 }
 .theme-popup {
@@ -275,37 +284,6 @@ table thead td {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-@media only screen and (max-width: 1060px) {
-  .nav-chapters {
-    display: none;
-  }
-  .mobile-nav-chapters {
-    font-size: 2.5em;
-    text-align: center;
-    text-decoration: none;
-    max-width: 150px;
-    min-width: 90px;
-    -webkit-box-pack: center;
-    -moz-box-pack: center;
-    -o-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -ms-flex-line-pack: center;
-    -webkit-align-content: center;
-    align-content: center;
-    position: relative;
-    display: inline-block;
-    margin-bottom: 50px;
-    border-radius: 5px;
-  }
-  .next {
-    float: right;
-  }
-  .previous {
-    float: left;
-  }
-}
 .light {
   color: #333;
   background-color: #fff;

src/theme/index.hbs

@@ -93,30 +93,24 @@
 
                 <div id="content" class="content">
                     {{{ content }}}
+
+                    <div class="nav-wrapper">
+                        <!-- Mobile navigation buttons -->
+                        {{#previous}}
+                            <a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
+                                <i class="fa fa-angle-left"></i>
+                            </a>
+                        {{/previous}}
+
+                        {{#next}}
+                            <a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
+                                <i class="fa fa-angle-right"></i>
+                            </a>
+                        {{/next}}
+
+                        <div style="clear: both"></div>
+                    </div>
                 </div>
-
-                <!--
-                Constrain the space between buttons on small screen so the total
-                width of the buttons group will not exceed the main content
-                above.
-                -->
-                <div class="nav-wrapper">
-                    <!-- Mobile navigation buttons -->
-                    {{#previous}}
-                        <a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
-                            <i class="fa fa-angle-left"></i>
-                        </a>
-                    {{/previous}}
-
-                    {{#next}}
-                        <a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
-                            <i class="fa fa-angle-right"></i>
-                        </a>
-                    {{/next}}
-
-                    <div style="clear: both"></div>
-                </div>
-
             </div>
 
             {{#previous}}

src/theme/stylus/nav-icons.styl

@@ -9,6 +9,7 @@
     margin: 0
     max-width: 150px
     min-width: 90px
+
     display: flex
     justify-content: center
     align-content: center
@@ -17,23 +18,38 @@
     transition: color 0.5s
 }
 
-.mobile-nav-chapters { display: none }
 .nav-chapters:hover { text-decoration: none }
-.previous {
-    left: $page-padding
-    transition: left 0.5s
-}
-.next { right: $page-padding }
-
-@media only screen and (min-width: 1251px) {
-    .sidebar-visible .previous {
-        left: $sidebar-width + $page-padding
-    }
-}
 
 .nav-wrapper {
-  @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
+    margin-top: 50px
-    max-width: $content-max-width
+    display: none
-    margin: 0 auto
+}
-  }
+
+.mobile-nav-chapters { 
+    font-size: 2.5em
+    text-align: center
+    text-decoration: none
+    width: 90px
+    border-radius: 5px
+}
+
+.previous {
+    float: left
+}
+
+.next {
+    float: right
+    right: $page-padding 
+}
+
+@media only screen and (max-width: $page-plus-sidebar-width) {
+    .nav-chapters { display: none }
+    .nav-wrapper { display: block }
+}
+
+@media only screen and (max-width: $page-plus-sidebar-width + $sidebar-width) {
+    .sidebar-visible {
+        .nav-chapters { display: none }
+        .nav-wrapper { display: block }
+    }
 }

src/theme/stylus/theme-popup.styl

@@ -21,37 +21,4 @@
         }
     }
 
-}
+}
-
-@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-
-    .nav-chapters {
-        display: none
-    }
-
-    .mobile-nav-chapters {
-        font-size: 2.5em
-        text-align: center
-        text-decoration: none
-
-        max-width: 150px
-        min-width: 90px
-
-        justify-content: center
-        align-content: center
-
-        position: relative
-        display: inline-block
-        margin-bottom: 50px
-
-        border-radius: 5px
-    }
-
-    .next {
-        float: right
-    }
-
-    .previous {
-        float: left
-    }
-}

src/theme/stylus/variables.styl

@@ -1,5 +1,4 @@
 $sidebar-width = 300px
 $page-padding = 15px
 $content-max-width = 750px
-$max-page-width-with-hidden-sidebar = 1060px
 $page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2