From e7afb3340caf519edba1d8b580f6e1ce7c267a80 Mon Sep 17 00:00:00 2001
From: Matt Ickstadt <mattico8@gmail.com>
Date: Tue, 24 Jul 2018 12:31:57 -0500
Subject: [PATCH] Reduce the margins on header icons on narrow devices

---
 src/theme/book.css              | 11 ++++++++++-
 src/theme/stylus/menu.styl      | 10 +++++++---
 src/theme/stylus/variables.styl |  1 +
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index e8edd0b5a7..16129aef0a 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -217,7 +217,7 @@ table thead td {
 #menu-bar i,
 #menu-bar .icon-button {
   position: relative;
-  margin: 0 10px;
+  margin: 0 8px;
   z-index: 10;
   line-height: 50px;
   cursor: pointer;
@@ -227,6 +227,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;
 }
@@ -237,6 +243,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
   -ms-transform: translateY(-60px);
   transform: translateY(-60px);
 }
+.left-buttons {
+  margin: 0 5px;
+}
 .no-js .left-buttons {
   display: none;
 }
diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl
index faa55c10aa..66d0c07faa 100644
--- a/src/theme/stylus/menu.styl
+++ b/src/theme/stylus/menu.styl
@@ -14,7 +14,10 @@
 
     i, .icon-button {
         position: relative
-        margin: 0 10px
+        margin: 0 8px
+        @media only screen and (max-width: $narrow-device-max-width) {
+            margin: 0 5px
+        }
         z-index: 10
         line-height: 50px
         cursor: pointer
@@ -30,8 +33,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
     transform: translateY(-60px);
 }
 
-.no-js .left-buttons {
-    display: none
+.left-buttons {
+    .no-js & { display: none }
+    margin: 0 5px
 }
 
 .menu-title {
diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl
index 5249703596..6ffbb73b1f 100644
--- a/src/theme/stylus/variables.styl
+++ b/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