Optimized the stylesheet for better performance

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;
+  -webkit-transition: padding-left 0.5s, margin-right 0.5s;
-  -moz-transition: padding-left 0.5s;
+  -moz-transition: padding-left 0.5s, margin-right 0.5s;
-  -o-transition: padding-left 0.5s;
+  -o-transition: padding-left 0.5s, margin-right 0.5s;
-  -ms-transition: padding-left 0.5s;
+  -ms-transition: padding-left 0.5s, margin-right 0.5s;
-  transition: padding-left 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;
   }

src/theme/index.hbs

@@ -94,18 +94,27 @@
                     {{{ content }}}
                 </div>
 
-                <!-- Mobile navigation buttons -->
+                <!--
-                {{#previous}}
+                Constrain the space between buttons on small screen so the total
-                    <a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
+                width of the buttons group will not exceed the main content
-                        <i class="fa fa-angle-left"></i>
+                above.
-                    </a>
+                -->
-                {{/previous}}
+                <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}}
+                    {{#next}}
-                    <a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
+                        <a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
-                        <i class="fa fa-angle-right"></i>
+                            <i class="fa fa-angle-right"></i>
-                    </a>
+                        </a>
-                {{/next}}
+                    {{/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(){

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
+  }
+}

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 {

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

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