mirror of
https://github.com/rust-lang/mdBook
synced 2024-12-13 14:22:35 +00:00
Prevent navigation arrows from collapsing with text on smaller screen. Fix #42
This commit is contained in:
parent
5990c80a00
commit
8e9dc3643f
2 changed files with 68 additions and 11 deletions
|
@ -37,6 +37,8 @@ html, body {
|
|||
background: none repeat scroll 0 0 #FFF;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
/* Animation: slide away */
|
||||
-webkit-transition: left 0.5s; /* Safari */
|
||||
-o-transition: left 0.5s; /* Opera */
|
||||
|
@ -44,22 +46,14 @@ html, body {
|
|||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1060px) {
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
}
|
||||
.page-wrapper {
|
||||
left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
padding-right: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
@ -202,6 +196,8 @@ html, body {
|
|||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.mobile-nav-chapters { display: none; }
|
||||
|
||||
.nav-chapters:hover {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
|
@ -214,3 +210,51 @@ html, body {
|
|||
.next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 1060px) {
|
||||
.sidebar {
|
||||
left: -300px;
|
||||
}
|
||||
.page-wrapper {
|
||||
left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix the navigation arrows that collapsed with the text on smaller screens */
|
||||
|
||||
@media only screen and (max-width: 1250px) {
|
||||
.nav-chapters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-nav-chapters {
|
||||
color: #CCC;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
max-width: 150px;
|
||||
min-width: 90px;
|
||||
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 50px;
|
||||
|
||||
border-radius: 5px;
|
||||
background-color: #E0E0E0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.next {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.previous {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -29,8 +29,21 @@
|
|||
<div id="content" class="content">
|
||||
{{{ content }}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile navigation buttons -->
|
||||
{{#previous}}
|
||||
<a href="{{link}}" class="mobile-nav-chapters previous">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
{{/previous}}
|
||||
|
||||
{{#next}}
|
||||
<a href="{{link}}" class="mobile-nav-chapters next">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
{{/next}}
|
||||
|
||||
</div>
|
||||
|
||||
{{#previous}}
|
||||
<a href="{{link}}" class="nav-chapters previous">
|
||||
|
|
Loading…
Reference in a new issue