Skip to content

Commit

Permalink
Reduce the margins on header icons on narrow devices
Browse files Browse the repository at this point in the history
  • Loading branch information
mattico committed Jul 25, 2018
1 parent b4e15e5 commit e7afb33
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 4 deletions.
11 changes: 10 additions & 1 deletion src/theme/book.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
}
Expand Down
10 changes: 7 additions & 3 deletions src/theme/stylus/menu.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions src/theme/stylus/variables.styl
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit e7afb33

Please sign in to comment.