diff --git a/src/theme/book.css b/src/theme/book.css index 1dbd1ecd..9fb4c5d1 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -3,6 +3,9 @@ body { font-family: "Open Sans", sans-serif; color: #333; } +body { + margin: 0; +} code { font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; font-size: 0.875em; @@ -41,7 +44,7 @@ table thead td { font-weight: 700; } .sidebar { - position: absolute; + position: fixed; left: 0; top: 0; bottom: 0; @@ -102,44 +105,31 @@ table thead td { white-space: nowrap; } .page-wrapper { - position: absolute; - overflow-y: auto; - left: 315px; - right: 0; - top: 0; - bottom: 0; + padding-left: 300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; - -webkit-overflow-scrolling: touch; min-height: 100%; - -webkit-transition: left 0.5s; - -moz-transition: left 0.5s; - -o-transition: left 0.5s; - -ms-transition: left 0.5s; - transition: left 0.5s; + -webkit-transition: padding-left 0.5s; + -moz-transition: padding-left 0.5s; + -o-transition: padding-left 0.5s; + -ms-transition: padding-left 0.5s; + transition: padding-left 0.5s; } @media only screen and (max-width: 1060px) { .page-wrapper { - left: 15px; - padding-right: 15px; + padding-left: 0; } } .sidebar-hidden .page-wrapper { - left: 15px; + padding-left: 0; } .sidebar-visible .page-wrapper { - left: 315px; + padding-left: 300px; } .page { - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; outline: 0; - padding-right: 15px; - overflow-y: auto; + padding: 0 15px; } .content { margin-left: auto; @@ -210,7 +200,7 @@ table thead td { font-size: 2.5em; text-align: center; text-decoration: none; - position: absolute; + position: fixed; top: 50px /* Height of menu-bar */; bottom: 0; margin: 0; @@ -250,11 +240,27 @@ table thead td { text-decoration: none; } .previous { - left: 0; + left: 315px; + -webkit-transition: left 0.5s; + -moz-transition: left 0.5s; + -o-transition: left 0.5s; + -ms-transition: left 0.5s; + transition: left 0.5s; +} +@media only screen and (max-width: 1060px) { + .previous { + left: 15px; + } } .next { right: 15px; } +.sidebar-hidden .previous { + left: 15px; +} +.sidebar-visible .previous { + left: 315px; +} .theme-popup { position: relative; left: 10px; diff --git a/src/theme/stylus/general.styl b/src/theme/stylus/general.styl index ed548dfc..7d3a583e 100644 --- a/src/theme/stylus/general.styl +++ b/src/theme/stylus/general.styl @@ -3,6 +3,10 @@ html, body { color: #333 } +body { + margin: 0; +} + code { font-family: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace; font-size: 0.875em; diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl index 211db682..7f5b2b73 100644 --- a/src/theme/stylus/nav-icons.styl +++ b/src/theme/stylus/nav-icons.styl @@ -3,7 +3,7 @@ text-align: center text-decoration: none - position: absolute + position: fixed top: 50px /* Height of menu-bar */ bottom: 0 margin: 0 @@ -19,5 +19,20 @@ .mobile-nav-chapters { display: none } .nav-chapters:hover { text-decoration: none } -.previous { left: 0 } -.next { right: 15px } +.previous { + left: $sidebar-width + $page-padding + transition: left 0.5s + + @media only screen and (max-width: $max-page-width-with-hidden-sidebar) { + left: $page-padding + } +} +.next { right: $page-padding } + +.sidebar-hidden .previous { + left: $page-padding +} + +.sidebar-visible .previous { + left: $sidebar-width + $page-padding +} diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl index 0e38e7b9..9cb21670 100644 --- a/src/theme/stylus/page.styl +++ b/src/theme/stylus/page.styl @@ -1,44 +1,30 @@ @require 'variables' .page-wrapper { - position: absolute - overflow-y: auto - left: $sidebar-width + 15px - right: 0 - top: 0 - bottom: 0 + padding-left: $sidebar-width box-sizing: border-box - -webkit-overflow-scrolling: touch min-height: 100% // Animation: slide away - transition: left 0.5s + transition: padding-left 0.5s - @media only screen and (max-width: 1060px) { - left: 15px; - padding-right: 15px; + @media only screen and (max-width: $max-page-width-with-hidden-sidebar) { + padding-left: 0 } } .sidebar-hidden .page-wrapper { - left: 15px + padding-left: 0 } .sidebar-visible .page-wrapper { - left: $sidebar-width + 15px + padding-left: $sidebar-width } .page { - position: absolute - top: 0 - right: 0 - left: 0 - bottom: 0 outline: 0 - - padding-right: 15px - overflow-y: auto + padding: 0 $page-padding } .content { diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl index 58e7be8c..122ae648 100644 --- a/src/theme/stylus/sidebar.styl +++ b/src/theme/stylus/sidebar.styl @@ -1,7 +1,7 @@ @require 'variables' .sidebar { - position: absolute + position: fixed left: 0 top: 0 bottom: 0 @@ -15,7 +15,7 @@ // Animation: slide away transition: left 0.5s - @media only screen and (max-width: 1060px) { + @media only screen and (max-width: $max-page-width-with-hidden-sidebar) { left: - $sidebar-width } diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl index 66b89df6..c86c75f4 100644 --- a/src/theme/stylus/variables.styl +++ b/src/theme/stylus/variables.styl @@ -1 +1,3 @@ $sidebar-width = 300px +$page-padding = 15px +$max-page-width-with-hidden-sidebar = 1060px