actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Optimized the stylesheet for better performance

This commit is contained in:
lifta42 2017-12-06 16:20:22 +08:00
parent 3b136689ee
commit 9143110a43
6 changed files with 47 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/theme/book.css
View File

@ -114,11 +114,11 @@ table thead td {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
min-height: 100%; min-height: 100%;
-webkit-transition: padding-left 0.5s; -webkit-transition: padding-left 0.5s, margin-right 0.5s;
-moz-transition: padding-left 0.5s; -moz-transition: padding-left 0.5s, margin-right 0.5s;
-o-transition: padding-left 0.5s; -o-transition: padding-left 0.5s, margin-right 0.5s;
-ms-transition: padding-left 0.5s; -ms-transition: padding-left 0.5s, margin-right 0.5s;
transition: padding-left 0.5s; transition: padding-left 0.5s, margin-right 0.5s;
} }
@media only screen and (max-width: 1060px) { @media only screen and (max-width: 1060px) {
.page-wrapper { .page-wrapper {
@ -130,6 +130,7 @@ table thead td {
} }
.sidebar-visible .page-wrapper { .sidebar-visible .page-wrapper {
padding-left: 300px; padding-left: 300px;
margin-right: -300px;
} }
.page { .page {
outline: 0; outline: 0;
@ -251,7 +252,7 @@ table thead td {
-ms-transition: left 0.5s; -ms-transition: left 0.5s;
transition: left 0.5s; transition: left 0.5s;
} }
@media only screen and (max-width: 1250px) { @media only screen and (max-width: 1060px) {
.previous { .previous {
left: 15px; left: 15px;
} }
@ -265,6 +266,12 @@ table thead td {
.sidebar-visible .previous { .sidebar-visible .previous {
left: 315px; left: 315px;
} }
@media only screen and (max-width: 1060px) {
.nav-wrapper {
max-width: 750px;
margin: 0 auto;
}
}
.theme-popup { .theme-popup {
position: absolute; position: absolute;
left: 10px; left: 10px;
@ -284,7 +291,7 @@ 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: 1250px) { @media only screen and (max-width: 1060px) {
.nav-chapters { .nav-chapters {
display: none; display: none;
} }

31
src/theme/index.hbs
View File

@ -94,18 +94,27 @@
{{{ content }}} {{{ content }}}
</div> </div>
<!-- Mobile navigation buttons --> <!--
{{#previous}} Constrain the space between buttons on small screen so the total
<a rel="prev" href="{{link}}" class="mobile-nav-chapters previous" title="Previous chapter"> width of the buttons group will not exceed the main content
<i class="fa fa-angle-left"></i> above.
</a> -->
{{/previous}} <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}} {{#next}}
<a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter"> <a rel="next" href="{{link}}" class="mobile-nav-chapters next" title="Next chapter">
<i class="fa fa-angle-right"></i> <i class="fa fa-angle-right"></i>
</a> </a>
{{/next}} {{/next}}
<div style="clear: both"></div>
</div>
</div> </div>

7
src/theme/stylus/nav-icons.styl
View File

@ -36,3 +36,10 @@
.sidebar-visible .previous { .sidebar-visible .previous {
left: $sidebar-width + $page-padding 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
}
}

5
src/theme/stylus/page.styl
View File

@ -7,7 +7,7 @@
min-height: 100% min-height: 100%
// Animation: slide away // Animation: slide away
transition: padding-left 0.5s transition: padding-left 0.5s, margin-right 0.5s
@media only screen and (max-width: $max-page-width-with-hidden-sidebar) { @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
padding-left: 0 padding-left: 0
@ -20,6 +20,7 @@
.sidebar-visible .page-wrapper { .sidebar-visible .page-wrapper {
padding-left: $sidebar-width padding-left: $sidebar-width
margin-right: - $sidebar-width
} }
.page { .page {
@ -30,7 +31,7 @@
.content { .content {
margin-left: auto margin-left: auto
margin-right:auto margin-right:auto
max-width: 750px max-width: $content-max-width
padding-bottom: 50px padding-bottom: 50px
a { a {

2
src/theme/stylus/theme-popup.styl
View File

@ -23,7 +23,7 @@
} }
@media only screen and (max-width: 1250px) { @media only screen and (max-width: $max-page-width-with-hidden-sidebar) {
.nav-chapters { .nav-chapters {
display: none display: none

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

@ -1,3 +1,4 @@
$sidebar-width = 300px $sidebar-width = 300px
$page-padding = 15px $page-padding = 15px
$max-page-width-with-hidden-sidebar = 1060px $max-page-width-with-hidden-sidebar = 1060px
$content-max-width = 750px