Mirrors/mdBook
2
0
Fork 0
mirror of https://github.com/rust-lang/mdBook synced 2024-12-15 07:12:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #742 from mattico/narrow-device-style-fixes

Browse source 
Reduce the margins on header icons on narrow devices
This commit is contained in:
Matt Ickstadt 2018-07-25 13:41:33 -05:00 committed by GitHub
commit a287a0dcc8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/theme/book.css
View file

@ -217,7 +217,7 @@ table thead td {
#menu-bar i, #menu-bar i,
#menu-bar .icon-button { #menu-bar .icon-button {
position: relative; position: relative;
margin: 0 10px; margin: 0 8px;
z-index: 10; z-index: 10;
line-height: 50px; line-height: 50px;
cursor: pointer; cursor: pointer;
@ -227,6 +227,12 @@ table thead td {
-ms-transition: color 0.5s; -ms-transition: color 0.5s;
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 { #menu-bar #print-button {
margin: 0 15px; margin: 0 15px;
} }
@ -237,6 +243,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
-ms-transform: translateY(-60px); -ms-transform: translateY(-60px);
transform: translateY(-60px); transform: translateY(-60px);
} }
.left-buttons {
margin: 0 5px;
}
.no-js .left-buttons { .no-js .left-buttons {
display: none; display: none;
} }

10
src/theme/stylus/menu.styl
View file

@ -14,7 +14,10 @@
i, .icon-button { i, .icon-button {
position: relative position: relative
margin: 0 10px margin: 0 8px
@media only screen and (max-width: $narrow-device-max-width) {
margin: 0 5px
}
z-index: 10 z-index: 10
line-height: 50px line-height: 50px
cursor: pointer cursor: pointer
@ -30,8 +33,9 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
transform: translateY(-60px); transform: translateY(-60px);
} }
.no-js .left-buttons { .left-buttons {
display: none .no-js & { display: none }
margin: 0 5px
} }
.menu-title { .menu-title {

1
src/theme/stylus/variables.styl
View file

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