From 3b136689ee6c44134dc970616bf878384c4bd9b3 Mon Sep 17 00:00:00 2001
From: lifta42 <lifta42@outlook.com>
Date: Sat, 2 Dec 2017 14:25:24 +0800
Subject: [PATCH 1/2] Fix a CSS bug to show arrow properly

The arrow for "previous chapter" was on the incorrect position when screen width is between 1060px and 1250px.
---
 src/theme/book.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index f0967be1..65397a68 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -251,7 +251,7 @@ table thead td {
   -ms-transition: left 0.5s;
   transition: left 0.5s;
 }
-@media only screen and (max-width: 1060px) {
+@media only screen and (max-width: 1250px) {
   .previous {
     left: 15px;
   }

From 9143110a439efa0071d08b2ea1c45d45ba5dffc4 Mon Sep 17 00:00:00 2001
From: lifta42 <lifta42@outlook.com>
Date: Wed, 6 Dec 2017 16:20:22 +0800
Subject: [PATCH 2/2] Optimized the stylesheet for better performance

---
 src/theme/book.css                | 21 +++++++++++++-------
 src/theme/index.hbs               | 33 ++++++++++++++++++++-----------
 src/theme/stylus/nav-icons.styl   |  7 +++++++
 src/theme/stylus/page.styl        |  5 +++--
 src/theme/stylus/theme-popup.styl |  2 +-
 src/theme/stylus/variables.styl   |  1 +
 6 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 65397a68..4699400d 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -114,11 +114,11 @@ table thead td {
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   min-height: 100%;
-  -webkit-transition: padding-left 0.5s;
-  -moz-transition: padding-left 0.5s;
-  -o-transition: padding-left 0.5s;
-  -ms-transition: padding-left 0.5s;
-  transition: padding-left 0.5s;
+  -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 {
@@ -130,6 +130,7 @@ table thead td {
 }
 .sidebar-visible .page-wrapper {
   padding-left: 300px;
+  margin-right: -300px;
 }
 .page {
   outline: 0;
@@ -251,7 +252,7 @@ table thead td {
   -ms-transition: left 0.5s;
   transition: left 0.5s;
 }
-@media only screen and (max-width: 1250px) {
+@media only screen and (max-width: 1060px) {
   .previous {
     left: 15px;
   }
@@ -265,6 +266,12 @@ table thead td {
 .sidebar-visible .previous {
   left: 315px;
 }
+@media only screen and (max-width: 1060px) {
+  .nav-wrapper {
+    max-width: 750px;
+    margin: 0 auto;
+  }
+}
 .theme-popup {
   position: absolute;
   left: 10px;
@@ -284,7 +291,7 @@ table thead td {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
 }
-@media only screen and (max-width: 1250px) {
+@media only screen and (max-width: 1060px) {
   .nav-chapters {
     display: none;
   }
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 2a6c34ee..bc5855f4 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -94,18 +94,27 @@
                     {{{ content }}}
                 </div>
 
-                <!-- 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}}
+                <!--
+                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}}
+                    {{#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>
 
@@ -139,7 +148,7 @@
         <script>
             var localAddrs = ["localhost", "127.0.0.1", ""];
 
-            // make sure we don't activate google analytics if the developer is 
+            // make sure we don't activate google analytics if the developer is
             // inspecting the book locally...
             if (localAddrs.indexOf(document.location.hostname) === -1) {
                 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl
index 7f5b2b73..9e8b8b69 100644
--- a/src/theme/stylus/nav-icons.styl
+++ b/src/theme/stylus/nav-icons.styl
@@ -36,3 +36,10 @@
 .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
+  }
+}
diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl
index 9cb21670..447444a5 100644
--- a/src/theme/stylus/page.styl
+++ b/src/theme/stylus/page.styl
@@ -7,7 +7,7 @@
     min-height: 100%
 
     // Animation: slide away
-    transition: padding-left 0.5s
+    transition: padding-left 0.5s, margin-right 0.5s
 
     @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
         padding-left: 0
@@ -20,6 +20,7 @@
 
 .sidebar-visible .page-wrapper {
     padding-left: $sidebar-width
+    margin-right: - $sidebar-width
 }
 
 .page {
@@ -30,7 +31,7 @@
 .content {
     margin-left: auto
     margin-right:auto
-    max-width: 750px
+    max-width: $content-max-width
     padding-bottom: 50px
 
     a {
diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl
index 3bedaa1a..2a0a87b0 100644
--- a/src/theme/stylus/theme-popup.styl
+++ b/src/theme/stylus/theme-popup.styl
@@ -23,7 +23,7 @@
 
 }
 
-@media only screen and (max-width: 1250px) {
+@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
 
     .nav-chapters {
         display: none
diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl
index c86c75f4..db1609bd 100644
--- a/src/theme/stylus/variables.styl
+++ b/src/theme/stylus/variables.styl
@@ -1,3 +1,4 @@
 $sidebar-width = 300px
 $page-padding = 15px
 $max-page-width-with-hidden-sidebar = 1060px
+$content-max-width = 750px