Cleanup and various fixes
This commit is contained in:
Shane Nelson
parent
a2759b7bd2
commit
31fb443562
|
|
@ -228,32 +228,41 @@ table thead td {
|
|||
-ms-transition: color 0.5s;
|
||||
transition: color 0.5s;
|
||||
}
|
||||
.mobile-nav-chapters {
|
||||
display: none;
|
||||
}
|
||||
.nav-chapters:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-wrapper {
|
||||
margin-top: 50px;
|
||||
display: none;
|
||||
}
|
||||
.mobile-nav-chapters {
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 90px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.previous {
|
||||
left: 15px;
|
||||
-webkit-transition: left 0.5s;
|
||||
-moz-transition: left 0.5s;
|
||||
-o-transition: left 0.5s;
|
||||
-ms-transition: left 0.5s;
|
||||
transition: left 0.5s;
|
||||
float: left;
|
||||
}
|
||||
.next {
|
||||
float: right;
|
||||
right: 15px;
|
||||
}
|
||||
@media only screen and (min-width: 1251px) {
|
||||
.sidebar-visible .previous {
|
||||
left: 315px;
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.nav-chapters {
|
||||
display: none;
|
||||
}
|
||||
.nav-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1060px) {
|
||||
.nav-wrapper {
|
||||
max-width: 750px;
|
||||
margin: 0 auto;
|
||||
@media only screen and (max-width: 1380px) {
|
||||
.sidebar-visible .nav-chapters {
|
||||
display: none;
|
||||
}
|
||||
.sidebar-visible .nav-wrapper {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.theme-popup {
|
||||
|
|
@ -275,37 +284,6 @@ table thead td {
|
|||
border-top-left-radius: inherit;
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
@media only screen and (max-width: 1060px) {
|
||||
.nav-chapters {
|
||||
display: none;
|
||||
}
|
||||
.mobile-nav-chapters {
|
||||
font-size: 2.5em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
max-width: 150px;
|
||||
min-width: 90px;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-o-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
-webkit-align-content: center;
|
||||
align-content: center;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.next {
|
||||
float: right;
|
||||
}
|
||||
.previous {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.light {
|
||||
color: #333;
|
||||
background-color: #fff;
|
||||
|
|
|
|||
|
|
@ -93,30 +93,24 @@
|
|||
|
||||
<div id="content" class="content">
|
||||
{{{ content }}}
|
||||
|
||||
<div class="nav-wrapper">
|
||||
<!-- Mobile navigation buttons -->
|
||||
{{#previous}}
|
||||
<a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
{{/previous}}
|
||||
|
||||
{{#next}}
|
||||
<a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
{{/next}}
|
||||
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
Constrain the space between buttons on small screen so the total
|
||||
width of the buttons group will not exceed the main content
|
||||
above.
|
||||
-->
|
||||
<div class="nav-wrapper">
|
||||
<!-- Mobile navigation buttons -->
|
||||
{{#previous}}
|
||||
<a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter">
|
||||
<i class="fa fa-angle-left"></i>
|
||||
</a>
|
||||
{{/previous}}
|
||||
|
||||
{{#next}}
|
||||
<a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
|
||||
<i class="fa fa-angle-right"></i>
|
||||
</a>
|
||||
{{/next}}
|
||||
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{#previous}}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
margin: 0
|
||||
max-width: 150px
|
||||
min-width: 90px
|
||||
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-content: center
|
||||
|
|
@ -17,23 +18,38 @@
|
|||
transition: color 0.5s
|
||||
}
|
||||
|
||||
.mobile-nav-chapters { display: none }
|
||||
.nav-chapters:hover { text-decoration: none }
|
||||
.previous {
|
||||
left: $page-padding
|
||||
transition: left 0.5s
|
||||
}
|
||||
.next { right: $page-padding }
|
||||
|
||||
@media only screen and (min-width: 1251px) {
|
||||
.sidebar-visible .previous {
|
||||
left: $sidebar-width + $page-padding
|
||||
}
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
|
||||
max-width: $content-max-width
|
||||
margin: 0 auto
|
||||
}
|
||||
margin-top: 50px
|
||||
display: none
|
||||
}
|
||||
|
||||
.mobile-nav-chapters {
|
||||
font-size: 2.5em
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
width: 90px
|
||||
border-radius: 5px
|
||||
}
|
||||
|
||||
.previous {
|
||||
float: left
|
||||
}
|
||||
|
||||
.next {
|
||||
float: right
|
||||
right: $page-padding
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $page-plus-sidebar-width) {
|
||||
.nav-chapters { display: none }
|
||||
.nav-wrapper { display: block }
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $page-plus-sidebar-width + $sidebar-width) {
|
||||
.sidebar-visible {
|
||||
.nav-chapters { display: none }
|
||||
.nav-wrapper { display: block }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,37 +21,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
|
||||
|
||||
.nav-chapters {
|
||||
display: none
|
||||
}
|
||||
|
||||
.mobile-nav-chapters {
|
||||
font-size: 2.5em
|
||||
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
|
||||
}
|
||||
|
||||
.next {
|
||||
float: right
|
||||
}
|
||||
|
||||
.previous {
|
||||
float: left
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
$sidebar-width = 300px
|
||||
$page-padding = 15px
|
||||
$content-max-width = 750px
|
||||
$max-page-width-with-hidden-sidebar = 1060px
|
||||
$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2
|
||||
|
|
|
|||
Loading…
Reference in New Issue