Reduce the margins on header icons on narrow devices

src/theme/book.css

@@ -224,6 +224,12 @@ table thead td {
   -ms-transition: color 0.5s;
   transition: color 0.5s;
 }
+@media only screen and (max-width: 420px) {
+  #menu-bar i,
+  #menu-bar .icon-button {
+    margin: 0 5px;
+  }
+}
 #menu-bar #print-button {
   margin: 0 15px;
 }

src/theme/stylus/menu.styl

@@ -15,6 +15,9 @@
     i, .icon-button {
         position: relative
         margin: 0 10px
+        @media only screen and (max-width: $narrow-device-max-width) {
+            margin: 0 5px
+        }
         z-index: 10
         line-height: 50px
         cursor: pointer

src/theme/stylus/variables.styl

@@ -4,3 +4,4 @@ $content-max-width = 750px
 $content-min-width = 320px
 $page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2
 $sidebar-reflow-width = $sidebar-width + $content-min-width
+$narrow-device-max-width = 420px