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; -ms-transition: color 0.5s;
transition: color 0.5s; transition: color 0.5s;
} }
.mobile-nav-chapters {
display: none;
}
.nav-chapters:hover { .nav-chapters:hover {
text-decoration: none; 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 { .previous {
left: 15px; float: left;
-webkit-transition: left 0.5s;
-moz-transition: left 0.5s;
-o-transition: left 0.5s;
-ms-transition: left 0.5s;
transition: left 0.5s;
} }
.next { .next {
float: right;
right: 15px; right: 15px;
} }
@media only screen and (min-width: 1251px) { @media only screen and (max-width: 1080px) {
.sidebar-visible .previous { .nav-chapters {
left: 315px; display: none;
}
.nav-wrapper {
display: block;
} }
} }
@media only screen and (max-width: 1060px) { @media only screen and (max-width: 1380px) {
.nav-wrapper { .sidebar-visible .nav-chapters {
max-width: 750px; display: none;
margin: 0 auto; }
.sidebar-visible .nav-wrapper {
display: block;
} }
} }
.theme-popup { .theme-popup {
@ -275,37 +284,6 @@ table thead td {
border-top-left-radius: inherit; border-top-left-radius: inherit;
border-top-right-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 { .light {
color: #333; color: #333;
background-color: #fff; background-color: #fff;

View File

@ -93,13 +93,7 @@
<div id="content" class="content"> <div id="content" class="content">
{{{ content }}} {{{ content }}}
</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"> <div class="nav-wrapper">
<!-- Mobile navigation buttons --> <!-- Mobile navigation buttons -->
{{#previous}} {{#previous}}
@ -116,7 +110,7 @@
<div style="clear: both"></div> <div style="clear: both"></div>
</div> </div>
</div>
</div> </div>
{{#previous}} {{#previous}}

View File

@ -9,6 +9,7 @@
margin: 0 margin: 0
max-width: 150px max-width: 150px
min-width: 90px min-width: 90px
display: flex display: flex
justify-content: center justify-content: center
align-content: center align-content: center
@ -17,23 +18,38 @@
transition: color 0.5s transition: color 0.5s
} }
.mobile-nav-chapters { display: none }
.nav-chapters:hover { text-decoration: 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 { .nav-wrapper {
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) { margin-top: 50px
max-width: $content-max-width display: none
margin: 0 auto }
.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

@ -22,36 +22,3 @@
} }
} }
@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 $sidebar-width = 300px
$page-padding = 15px $page-padding = 15px
$content-max-width = 750px $content-max-width = 750px
$max-page-width-with-hidden-sidebar = 1060px
$page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2 $page-plus-sidebar-width = $content-max-width + $sidebar-width + $page-padding * 2