From 6e90e520d60dc7dad28f6e3976c4c386746bad1a Mon Sep 17 00:00:00 2001
From: Shane Nelson <stgn@users.noreply.github.com>
Date: Sun, 17 Dec 2017 22:53:25 -0500
Subject: [PATCH 1/4] Avoid resizing page/content on sidebar toggle

---
 src/theme/book.css              | 28 +++++++++++++---------------
 src/theme/stylus/general.styl   |  1 +
 src/theme/stylus/page.styl      | 22 ++++++++++------------
 src/theme/stylus/variables.styl |  3 ++-
 4 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 4699400d..6417c67b 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -6,6 +6,7 @@ body {
 body {
   margin: 0;
   font-size: 1rem;
+  overflow-x: hidden;
 }
 code {
   font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
@@ -109,28 +110,25 @@ table thead td {
   white-space: nowrap;
 }
 .page-wrapper {
-  padding-left: 300px;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 100%;
-  -webkit-transition: padding-left 0.5s, margin-right 0.5s;
-  -moz-transition: padding-left 0.5s, margin-right 0.5s;
-  -o-transition: padding-left 0.5s, margin-right 0.5s;
-  -ms-transition: padding-left 0.5s, margin-right 0.5s;
-  transition: padding-left 0.5s, margin-right 0.5s;
-}
-@media only screen and (max-width: 1060px) {
-  .page-wrapper {
-    padding-left: 0;
-  }
-}
-.sidebar-hidden .page-wrapper {
-  padding-left: 0;
+  width: 100%;
+  -webkit-transition: padding-left 0.5s, margin-left 0.5s;
+  -moz-transition: padding-left 0.5s, margin-left 0.5s;
+  -o-transition: padding-left 0.5s, margin-left 0.5s;
+  -ms-transition: padding-left 0.5s, margin-left 0.5s;
+  transition: padding-left 0.5s, margin-left 0.5s;
 }
 .sidebar-visible .page-wrapper {
   padding-left: 300px;
-  margin-right: -300px;
+}
+@media only screen and (max-width: 1079px) {
+  .sidebar-visible .page-wrapper {
+    padding-left: 0;
+    margin-left: 300px;
+  }
 }
 .page {
   outline: 0;
diff --git a/src/theme/stylus/general.styl b/src/theme/stylus/general.styl
index 9a5cc974..9d2ff94c 100644
--- a/src/theme/stylus/general.styl
+++ b/src/theme/stylus/general.styl
@@ -6,6 +6,7 @@ html, body {
 body {
     margin: 0;
     font-size: 1rem;
+    overflow-x: hidden
 }
 
 code {
diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl
index 447444a5..8ba72245 100644
--- a/src/theme/stylus/page.styl
+++ b/src/theme/stylus/page.styl
@@ -1,26 +1,24 @@
 @require 'variables'
 
 .page-wrapper {
-    padding-left: $sidebar-width
     box-sizing: border-box
 
     min-height: 100%
+    width: 100%
 
     // Animation: slide away
-    transition: padding-left 0.5s, margin-right 0.5s
-
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        padding-left: 0
-    }
-}
-
-.sidebar-hidden .page-wrapper {
-    padding-left: 0
+    transition: padding-left 0.5s, margin-left 0.5s
 }
 
 .sidebar-visible .page-wrapper {
     padding-left: $sidebar-width
-    margin-right: - $sidebar-width
+}
+
+@media only screen and (max-width: $page-plus-sidebar-width - 1) {
+    .sidebar-visible .page-wrapper {
+        padding-left: 0
+        margin-left: $sidebar-width
+    }
 }
 
 .page {
@@ -30,7 +28,7 @@
 
 .content {
     margin-left: auto
-    margin-right:auto
+    margin-right: auto
     max-width: $content-max-width
     padding-bottom: 50px
 
diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl
index db1609bd..c02af07b 100644
--- a/src/theme/stylus/variables.styl
+++ b/src/theme/stylus/variables.styl
@@ -1,4 +1,5 @@
 $sidebar-width = 300px
 $page-padding = 15px
-$max-page-width-with-hidden-sidebar = 1060px
 $content-max-width = 750px
+$max-page-width-with-hidden-sidebar = 1060px
+$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2

From 71689da6b151c922f0bb69c54f0bc6545d585652 Mon Sep 17 00:00:00 2001
From: Shane Nelson <stgn@users.noreply.github.com>
Date: Fri, 13 Oct 2017 18:25:12 -0400
Subject: [PATCH 2/4] Force hidden sidebar on load for screen widths smaller
 than sidebar plus content and simplify styles

---
 src/theme/book.css              | 24 +++++-------------------
 src/theme/book.js               |  8 --------
 src/theme/index.hbs             |  7 ++++---
 src/theme/stylus/nav-icons.styl | 16 +++++-----------
 src/theme/stylus/sidebar.styl   |  8 --------
 5 files changed, 14 insertions(+), 49 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 6417c67b..cce56a22 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -67,20 +67,12 @@ table thead td {
   -ms-transition: left 0.5s;
   transition: left 0.5s;
 }
-@media only screen and (max-width: 1060px) {
-  .sidebar {
-    left: -300px;
-  }
-}
 .sidebar code {
   line-height: 2em;
 }
 .sidebar-hidden .sidebar {
   left: -300px;
 }
-.sidebar-visible .sidebar {
-  left: 0;
-}
 .chapter {
   list-style: none outside none;
   padding-left: 0;
@@ -243,26 +235,20 @@ table thead td {
   text-decoration: none;
 }
 .previous {
-  left: 315px;
+  left: 15px;
   -webkit-transition: left 0.5s;
   -moz-transition: left 0.5s;
   -o-transition: left 0.5s;
   -ms-transition: left 0.5s;
   transition: left 0.5s;
 }
-@media only screen and (max-width: 1060px) {
-  .previous {
-    left: 15px;
-  }
-}
 .next {
   right: 15px;
 }
-.sidebar-hidden .previous {
-  left: 15px;
-}
-.sidebar-visible .previous {
-  left: 315px;
+@media only screen and (min-width: 1251px) {
+  .sidebar-visible .previous {
+    left: 315px;
+  }
 }
 @media only screen and (max-width: 1060px) {
   .nav-wrapper {
diff --git a/src/theme/book.js b/src/theme/book.js
index 0f147a22..c85e7be1 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -68,14 +68,6 @@ $( document ).ready(function() {
     // Toggle sidebar
     $("#sidebar-toggle").click(sidebarToggle);
 
-    // Hide sidebar on section link click if it occupies large space
-    // in relation to the whole screen (phone in portrait)
-    $("#sidebar a").click(function(event){
-        if (sidebar.width() > window.screen.width * 0.4) {
-            sidebarToggle();
-        }
-    });
-
     // Scroll sidebar to current active section
     var activeSection = sidebar.find(".active");
     if(activeSection.length) {
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index bc5855f4..9df89a7e 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -62,9 +62,10 @@
 
         <!-- Hide / unhide sidebar before it is displayed -->
         <script type="text/javascript">
-            var sidebar = store.get('mdbook-sidebar');
-            if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
-            else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
+            var sidebar = 'hidden';
+            if (document.body.clientWidth >= 1080)
+                sidebar = store.get('mdbook-sidebar') || 'visible';
+            $("html").addClass("sidebar-" + sidebar);
         </script>
 
         <div id="sidebar" class="sidebar">
diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl
index 9e8b8b69..222cf444 100644
--- a/src/theme/stylus/nav-icons.styl
+++ b/src/theme/stylus/nav-icons.styl
@@ -20,21 +20,15 @@
 .mobile-nav-chapters { display: none }
 .nav-chapters:hover { text-decoration: none }
 .previous {
-    left: $sidebar-width + $page-padding
+    left: $page-padding
     transition: left 0.5s
-
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        left: $page-padding
-    }
 }
 .next { right: $page-padding }
 
-.sidebar-hidden .previous {
-  left: $page-padding
-}
-
-.sidebar-visible .previous {
-  left: $sidebar-width + $page-padding
+@media only screen and (min-width: 1251px) {
+    .sidebar-visible .previous {
+        left: $sidebar-width + $page-padding
+    }
 }
 
 .nav-wrapper {
diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl
index 122ae648..a3a15b37 100644
--- a/src/theme/stylus/sidebar.styl
+++ b/src/theme/stylus/sidebar.styl
@@ -15,10 +15,6 @@
     // Animation: slide away
     transition: left 0.5s
 
-    @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
-        left: - $sidebar-width
-    }
-
     code {
         line-height: 2em;
     }
@@ -28,10 +24,6 @@
     left: - $sidebar-width
 }
 
-.sidebar-visible .sidebar {
-    left: 0
-}
-
 .chapter {
     list-style: none outside none
     padding-left: 0

From a2759b7bd2dcb007252802e1d887543e5e63fb1f Mon Sep 17 00:00:00 2001
From: Shane Nelson <stgn@users.noreply.github.com>
Date: Fri, 13 Oct 2017 19:09:28 -0400
Subject: [PATCH 3/4] Prevent horizontal scroll on mobile browsers if page
 wrapper is pushed off-screen

---
 src/theme/book.css            | 4 ++--
 src/theme/stylus/general.styl | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index cce56a22..32cbbf1b 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -1,7 +1,7 @@
-html,
-body {
+html {
   font-family: "Open Sans", sans-serif;
   color: #333;
+  overflow-x: hidden;
 }
 body {
   margin: 0;
diff --git a/src/theme/stylus/general.styl b/src/theme/stylus/general.styl
index 9d2ff94c..1145e8fa 100644
--- a/src/theme/stylus/general.styl
+++ b/src/theme/stylus/general.styl
@@ -1,6 +1,7 @@
-html, body {
+html {
     font-family: "Open Sans", sans-serif
     color: #333
+    overflow-x: hidden
 }
 
 body {

From 31fb4435625e543d373cc71ae57b6ef05f15fa21 Mon Sep 17 00:00:00 2001
From: Shane Nelson <stgn@users.noreply.github.com>
Date: Mon, 18 Dec 2017 00:14:25 -0500
Subject: [PATCH 4/4] Cleanup and various fixes

---
 src/theme/book.css                | 72 +++++++++++--------------------
 src/theme/index.hbs               | 40 ++++++++---------
 src/theme/stylus/nav-icons.styl   | 48 ++++++++++++++-------
 src/theme/stylus/theme-popup.styl | 35 +--------------
 src/theme/stylus/variables.styl   |  1 -
 5 files changed, 75 insertions(+), 121 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 32cbbf1b..7e83864b 100644
--- a/src/theme/book.css
+++ b/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;
-  -webkit-transition: left 0.5s;
-  -moz-transition: left 0.5s;
-  -o-transition: left 0.5s;
-  -ms-transition: left 0.5s;
-  transition: left 0.5s;
+  float: left;
 }
 .next {
+  float: right;
   right: 15px;
 }
-@media only screen and (min-width: 1251px) {
-  .sidebar-visible .previous {
-    left: 315px;
+@media only screen and (max-width: 1080px) {
+  .nav-chapters {
+    display: none;
+  }
+  .nav-wrapper {
+    display: block;
   }
 }
-@media only screen and (max-width: 1060px) {
-  .nav-wrapper {
-    max-width: 750px;
-    margin: 0 auto;
+@media only screen and (max-width: 1380px) {
+  .sidebar-visible .nav-chapters {
+    display: none;
+  }
+  .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;
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 9df89a7e..3a6a596f 100644
--- a/src/theme/index.hbs
+++ b/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}}
diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl
index 222cf444..d756a8f8 100644
--- a/src/theme/stylus/nav-icons.styl
+++ b/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) {
-    max-width: $content-max-width
-    margin: 0 auto
-  }
+    margin-top: 50px
+    display: none
+}
+
+.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 }
+    }
 }
diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl
index 2a0a87b0..fc51bc35 100644
--- a/src/theme/stylus/theme-popup.styl
+++ b/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
-    }
-}
+}
\ No newline at end of file
diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl
index c02af07b..3d2c95b2 100644
--- a/src/theme/stylus/variables.styl
+++ b/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