Cleanup and various fixes

This commit is contained in:
Shane Nelson 2017-12-18 00:14:25 -05:00
parent a2759b7bd2
commit 31fb443562
5 changed files with 75 additions and 121 deletions

View File

@ -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;

View File

@ -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}}

View File

@ -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 }
}
}

View File

@ -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
}
}
}

View File

@ -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