From e377f4702f0be18171aa4743ca3807ca6c31cd9c Mon Sep 17 00:00:00 2001 From: Mathieu David Date: Fri, 18 Sep 2015 12:05:55 +0200 Subject: [PATCH 1/4] Preliminary setup for switching from pure css to stylus --- .travis.yml | 7 + Cargo.toml | 1 + README.md | 8 + build.rs | 21 ++ src/theme/_book.css | 512 ++++++++++++++++++++++++++++++++++++ src/theme/book.css | 513 +------------------------------------ src/theme/stylus/book.styl | 3 + 7 files changed, 554 insertions(+), 511 deletions(-) create mode 100644 build.rs create mode 100644 src/theme/_book.css create mode 100644 src/theme/stylus/book.styl diff --git a/.travis.yml b/.travis.yml index f9c4d80a..1e1d68ca 100644 --- a/.travis.yml +++ b/.travis.yml @@ -9,5 +9,12 @@ matrix: env: global: secure: l3/qEC4krRerllLQzni8j5AjngFi6pluWvBWj//1mJLoIEYwxlQ9mYxEdd9BqccWWFn3K0bVYCVC/64+tP6sRfLkZCe2gPUtwe7ITwCDbapUxmkiRObVJCs5yMQZt6idyhHUDKAXKgNCrusfI2BM3tKGBfRK7Cnn/R/7p/U9+q7D1sgJtUKp6ypVzK6A3jLNp3dFLFI19a5KmbZMVsaa7tOhtdDJjjr7ebsc9z7HMW5/OItiWU3FSauVQQlUMaCiEgFuIG7H7OnBAYWB/gNEtLuwfLqU9UjtWk/njNNRnmJ7m3y5HbQhv5H5F5mJUOq9XFlPLwPwyTeVztSGdQm6k8Pp2pgKBUjY27afBl9BWU+msmN6k0oXfhvIebiBPe/x2udiKeFik1xqOOEU1q9dF0sZiuPxCSM1n7tgWklJ8epgaRQaMPPQw9pO/2H5/ynHCJqBlw6WcdiqWtwAyyr/GEx62u/cg5IVkqb7KLmYsWzjS8wYG4CYs1eIxCw2xPZxP0FGuUXvxTBUPipFze6Z7FqxVauXtVe2D7c1P4738HZP660rmR0GYtHtKLny1QxCCK9sxd9JmcezFCSz4YeQ1od9xc0OzGJ2ullKNGizmGfYmgL6X8faNylLIEdaiHAcY16xV3L0g3fXL1Qg360UHQyj7GIv+0nqQnf+H9xRTTU= +addons: + apt: + packages: + - nodejs + - npm +install: + - npm install stylus after_success: - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && bash deploy.sh diff --git a/Cargo.toml b/Cargo.toml index 24b20596..449191b0 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,6 +8,7 @@ repository = "https://github.com/azerupi/mdBook" keywords = ["book", "gitbook", "rustbook", "markdown"] license = "MPL-2.0" readme = "README.md" +build = "build.rs" exclude = [ "book-example/*", ] diff --git a/README.md b/README.md index 04052c79..4a8bea15 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,14 @@ To have an idea of what a rendered book looks like,take a look at the [**Documen ## Installation +Before building mdBook, make sure that you installed `stylus` from `npm` because it is used to compile the stylesheets + +Install [node.js](https://nodejs.org/en/) + +``` +npm install -g stylus +``` + ``` git clone --depth=1 https://github.com/azerupi/mdBook.git cd mdBook diff --git a/build.rs b/build.rs new file mode 100644 index 00000000..7860cff9 --- /dev/null +++ b/build.rs @@ -0,0 +1,21 @@ +// build.rs + +use std::process::Command; +use std::env; +use std::path::Path; + +fn main() { + + // Compile stylus stylesheet to css + let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap(); + + let theme_dir = Path::new(&manifest_dir).join("src/theme/"); + let stylus_dir = theme_dir.join("stylus"); + + Command::new("stylus") + .arg(format!("{}", stylus_dir.to_str().unwrap())) + .arg("--out") + .arg(format!("{}", theme_dir.to_str().unwrap())) + .status().unwrap(); + +} diff --git a/src/theme/_book.css b/src/theme/_book.css new file mode 100644 index 00000000..45338e67 --- /dev/null +++ b/src/theme/_book.css @@ -0,0 +1,512 @@ +html, body { + font-family: "Open Sans", sans-serif; + color: #333; +} + +@media only screen { + /* Light theme */ + .light .sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.07); + background-color: #fafafa; + color: #364149; + } + .light .page-wrapper { + background: none repeat scroll 0 0 #FFF; + } + .light .chapter li { + color: #aaa; + } + .light .chapter li .active, + .light .chapter li a:hover { + /* Animate color change */ + color: #008cff; + } + .light .menu-bar, + .light .nav-chapters { + color: #CCC; + } + .light .chapter li a, + .light .menu-bar i:hover, + .light .nav-chapters:hover { + /* Animate color change */ + color: #333; + } + .light .content a { + color: #4183c4; + } + /* Theme changer */ + .light .theme-popup { + background: #fafafa; + border: 1px solid #ccc; + } + .light .theme-popup .theme:hover { + background-color: #e6e6e6; + } + + /* Coal theme */ + .coal { + color: #98a3ad; + background-color: #141617; + } + .coal .sidebar { + background-color: #292c2f; + color: #a1adb8; + } + .coal .chapter li { + color: #505254; + } + .coal .chapter li .active, + .coal .chapter li a:hover { + /* Animate color change */ + color: #3473ad; + } + .coal .menu-bar, + .coal .nav-chapters { + color: #43484d; + } + .coal .chapter li a, + .coal .menu-bar i:hover, + .coal .nav-chapters:hover { + color: #b3c0cc; + } + .coal .content a { + color: #2b79a2; + } + /* Theme changer */ + .coal .theme-popup { + background: #141617; + border: 1px solid #43484d; + } + .coal .theme-popup .theme:hover { + background-color: #1f2124; + } + /* Dark blue colored theme */ + .navy { + background-color: #161923; + color: #bcbdd0; + } + .navy .sidebar { + background-color: #282d3f; + color: #c8c9db; + } + .navy .chapter li { + color: #505274; + } + .navy .chapter li .active, + .navy .chapter li a:hover { + /* Animate color change */ + color: #2b79a2; + } + .navy .menu-bar, + .navy .nav-chapters { + color: #737480; + } + .navy .chapter li a, + .navy .menu-bar i:hover, + .navy .nav-chapters:hover { + color: #b7b9cc; + } + .navy .content a { + color: #2b79a2; + } + /* Theme changer */ + .navy .theme-popup { + background: #161923; + border: 1px solid #737480; + } + .navy .theme-popup .theme:hover { + background-color: #282e40; + } + /* Rust theme */ + .rust { + background-color: #e1e1db; + color: #262625; + } + .rust .sidebar { + background-color: #3b2e2a; + color: #c8c9db; + } + .rust .chapter li { + color: #505254; + } + .rust .chapter li .active, + .rust .chapter li a:hover { + /* Animate color change */ + color: #e69f67; + } + .rust .menu-bar, + .rust .nav-chapters { + color: #737480; + } + .rust .chapter li a { + color: #bfbfba; + } + .rust .menu-bar i:hover, + .rust .nav-chapters:hover { + color: #262625; + } + .rust .content a { + color: #2b79a2; + } + /* Theme changer */ + .rust .theme-popup { + background: #e1e1db; + border: 1px solid #b38f6b; + } + .rust .theme-popup .theme:hover { + background-color: #99908a; + } + .sidebar { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 300px; + overflow-y: auto; + padding: 10px 10px; + font-size: 14px; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + + /* Animation: slide away */ + -webkit-transition: left 0.5s; /* Safari */ + -o-transition: left 0.5s; /* Opera */ + -moz-transition: left 0.5s; /* Mozilla Firefox */ + transition: left 0.5s; + } + + .page-wrapper { + position: absolute; + overflow-y: auto; + left: 315px; + right: 0; + top: 0; + bottom: 0; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + + min-height: 100%; + + /* Animation: slide away */ + -webkit-transition: left 0.5s; /* Safari */ + -o-transition: left 0.5s; /* Opera */ + -moz-transition: left 0.5s; /* Mozilla Firefox */ + transition: left 0.5s; + } + + .page { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + + padding-right: 15px; + overflow-y: auto; + } + + .content { + margin-left: auto; + margin-right:auto; + max-width: 750px; + padding-bottom: 50px; + } + + .chapter { + list-style: none outside none; + padding-left: 0; + line-height: 30px; + } + + .section { + list-style: none outside none; + padding-left: 20px; + line-height: 40px; + } + + .section li { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + .chapter li a { + padding: 5px 0; + text-decoration: none; + } + + .chapter li a:hover { + text-decoration: none; + } + + .chapter .affix { + + } + + .chapter .spacer { + width: 100%; + height: 3px; + background-color: #f4f4f4; + margin: 10px 0px; + } + + .navy .chapter .spacer { + background-color: #2d334f; + } + + .coal .chapter .spacer { + background-color: #393939; + } + + .rust .chapter .spacer { + background-color: #45373a; + } + + .menu-bar { + position: relative; + height: 50px; + } + + .menu-bar i { + position: relative; + margin: 0 10px; + z-index: 10; + line-height: 50px; + -webkit-transition: color 0.5s; /* Safari */ + -o-transition: color 0.5s; /* Opera */ + -moz-transition: color 0.5s; /* Mozilla Firefox */ + transition: color 0.5s; + } + + .menu-bar .left-buttons { + float: left; + } + + .menu-bar .right-buttons { + float: right; + } + + .menu-bar i:hover { + cursor: pointer; + } + + .menu-title { + display: inline-block; + font-weight: 200; + font-size: 20px; + line-height: 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + text-align: center; + margin: 0; + + opacity: 0; + -webkit-transition: opacity 0.5s ease-in-out; /* Safari */ + -o-transition: opacity 0.5s ease-in-out; /* Opera */ + -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */ + transition: opacity 0.5s ease-in-out; + } + + .menu-bar:hover .menu-title { + opacity: 1; + } + + .left { + float: left; + } + + .right { + float: right; + } + + /* Content */ + + .content a { + text-decoration: none; + } + + .content a:hover { + text-decoration: underline; + } + + .content img { + max-width: 100%; + } + + /* Nav icons */ + .nav-chapters { + font-size: 40px; + text-align: center; + text-decoration: none; + + position: absolute; + top: 50px; /* Height of menu-bar */ + bottom: 0; + margin: 0; + max-width: 150px; + min-width: 90px; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; + + -webkit-transition: color 0.5s; /* Safari */ + -o-transition: color 0.5s; /* Opera */ + -moz-transition: color 0.5s; /* Mozilla Firefox */ + transition: color 0.5s; + } + + .mobile-nav-chapters { display: none; } + + .nav-chapters:hover { + text-decoration: none; + } + + .previous { + left: 0; + } + + .next { + right: 0; + } + + + /* Theme Popup */ + .theme-popup { + position: fixed; + left: -40px; + + border-radius: 4px; + + font-size: 0.7em; + } + + .theme-popup .theme { + margin: 0; + padding: 2px 10px; + line-height: 25px; + white-space: nowrap; + } +} + + +@media only screen and (max-width: 1060px) { + .sidebar { + left: -300px; + } + .page-wrapper { + left: 15px; + padding-right: 15px; + } +} + +/* Fix the navigation arrows that collapsed with the text on smaller screens */ + +@media only screen and (max-width: 1250px) { + /* Light theme */ + .light .mobile-nav-chapters { + background-color: #E0E0E0; + color: #999; + } + .light .mobile-nav-chapters i:hover { + color: #333; + } + /* Coal theme */ + .coal .mobile-nav-chapters { + background-color: #212426; + color: #43484d; + } + .coal .mobile-nav-chapters i:hover { + color: #b3c0cc; + } + /* Navy theme */ + .navy .mobile-nav-chapters { + background-color: #242838; + color: #737480; + } + .navy .mobile-nav-chapters i:hover { + color: #b7b9cc; + } + /* Rust theme */ + .rust .mobile-nav-chapters { + background-color: #4d413d; + color: #737480; + } + .rust .mobile-nav-chapters i:hover { + color: #b7b9cc; + } + .nav-chapters { + display: none; + } + + .mobile-nav-chapters { + font-size: 40px; + 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; + } +} + +@media only print { + .sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters { + display: none; + } + + .page-wrapper { + left: 0; + } + + .content { + max-width: 100%; + } + + code { + background-color: #666666; + border-radius: 5px; + + /* Force background to be printed in Chrome */ + -webkit-print-color-adjust: exact; + } + + a, a:visited, a:active, a:hover { + color: #4183c4; + text-decoration: none; + } + + h1, h2, h3, h4, h5, h6 { + page-break-inside: avoid; + page-break-after: avoid; + /*break-after: avoid;*/ + } + + pre, code { + page-break-inside: avoid; + white-space: pre-wrap; /* CSS 3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ + } +} diff --git a/src/theme/book.css b/src/theme/book.css index 45338e67..8fb49149 100644 --- a/src/theme/book.css +++ b/src/theme/book.css @@ -1,512 +1,3 @@ -html, body { - font-family: "Open Sans", sans-serif; - color: #333; -} - -@media only screen { - /* Light theme */ - .light .sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); - background-color: #fafafa; - color: #364149; - } - .light .page-wrapper { - background: none repeat scroll 0 0 #FFF; - } - .light .chapter li { - color: #aaa; - } - .light .chapter li .active, - .light .chapter li a:hover { - /* Animate color change */ - color: #008cff; - } - .light .menu-bar, - .light .nav-chapters { - color: #CCC; - } - .light .chapter li a, - .light .menu-bar i:hover, - .light .nav-chapters:hover { - /* Animate color change */ - color: #333; - } - .light .content a { - color: #4183c4; - } - /* Theme changer */ - .light .theme-popup { - background: #fafafa; - border: 1px solid #ccc; - } - .light .theme-popup .theme:hover { - background-color: #e6e6e6; - } - - /* Coal theme */ - .coal { - color: #98a3ad; - background-color: #141617; - } - .coal .sidebar { - background-color: #292c2f; - color: #a1adb8; - } - .coal .chapter li { - color: #505254; - } - .coal .chapter li .active, - .coal .chapter li a:hover { - /* Animate color change */ - color: #3473ad; - } - .coal .menu-bar, - .coal .nav-chapters { - color: #43484d; - } - .coal .chapter li a, - .coal .menu-bar i:hover, - .coal .nav-chapters:hover { - color: #b3c0cc; - } - .coal .content a { - color: #2b79a2; - } - /* Theme changer */ - .coal .theme-popup { - background: #141617; - border: 1px solid #43484d; - } - .coal .theme-popup .theme:hover { - background-color: #1f2124; - } - /* Dark blue colored theme */ - .navy { - background-color: #161923; - color: #bcbdd0; - } - .navy .sidebar { - background-color: #282d3f; - color: #c8c9db; - } - .navy .chapter li { - color: #505274; - } - .navy .chapter li .active, - .navy .chapter li a:hover { - /* Animate color change */ - color: #2b79a2; - } - .navy .menu-bar, - .navy .nav-chapters { - color: #737480; - } - .navy .chapter li a, - .navy .menu-bar i:hover, - .navy .nav-chapters:hover { - color: #b7b9cc; - } - .navy .content a { - color: #2b79a2; - } - /* Theme changer */ - .navy .theme-popup { - background: #161923; - border: 1px solid #737480; - } - .navy .theme-popup .theme:hover { - background-color: #282e40; - } - /* Rust theme */ - .rust { - background-color: #e1e1db; - color: #262625; - } - .rust .sidebar { - background-color: #3b2e2a; - color: #c8c9db; - } - .rust .chapter li { - color: #505254; - } - .rust .chapter li .active, - .rust .chapter li a:hover { - /* Animate color change */ - color: #e69f67; - } - .rust .menu-bar, - .rust .nav-chapters { - color: #737480; - } - .rust .chapter li a { - color: #bfbfba; - } - .rust .menu-bar i:hover, - .rust .nav-chapters:hover { - color: #262625; - } - .rust .content a { - color: #2b79a2; - } - /* Theme changer */ - .rust .theme-popup { - background: #e1e1db; - border: 1px solid #b38f6b; - } - .rust .theme-popup .theme:hover { - background-color: #99908a; - } - .sidebar { - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 300px; - overflow-y: auto; - padding: 10px 10px; - font-size: 14px; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - - /* Animation: slide away */ - -webkit-transition: left 0.5s; /* Safari */ - -o-transition: left 0.5s; /* Opera */ - -moz-transition: left 0.5s; /* Mozilla Firefox */ - transition: left 0.5s; - } - - .page-wrapper { - position: absolute; - overflow-y: auto; - left: 315px; - right: 0; - top: 0; - bottom: 0; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - - min-height: 100%; - - /* Animation: slide away */ - -webkit-transition: left 0.5s; /* Safari */ - -o-transition: left 0.5s; /* Opera */ - -moz-transition: left 0.5s; /* Mozilla Firefox */ - transition: left 0.5s; - } - - .page { - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - - padding-right: 15px; - overflow-y: auto; - } - - .content { - margin-left: auto; - margin-right:auto; - max-width: 750px; - padding-bottom: 50px; - } - - .chapter { - list-style: none outside none; - padding-left: 0; - line-height: 30px; - } - - .section { - list-style: none outside none; - padding-left: 20px; - line-height: 40px; - } - - .section li { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .chapter li a { - padding: 5px 0; - text-decoration: none; - } - - .chapter li a:hover { - text-decoration: none; - } - - .chapter .affix { - - } - - .chapter .spacer { - width: 100%; - height: 3px; - background-color: #f4f4f4; - margin: 10px 0px; - } - - .navy .chapter .spacer { - background-color: #2d334f; - } - - .coal .chapter .spacer { - background-color: #393939; - } - - .rust .chapter .spacer { - background-color: #45373a; - } - - .menu-bar { - position: relative; - height: 50px; - } - - .menu-bar i { - position: relative; - margin: 0 10px; - z-index: 10; - line-height: 50px; - -webkit-transition: color 0.5s; /* Safari */ - -o-transition: color 0.5s; /* Opera */ - -moz-transition: color 0.5s; /* Mozilla Firefox */ - transition: color 0.5s; - } - - .menu-bar .left-buttons { - float: left; - } - - .menu-bar .right-buttons { - float: right; - } - - .menu-bar i:hover { - cursor: pointer; - } - - .menu-title { - display: inline-block; - font-weight: 200; - font-size: 20px; - line-height: 50px; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - text-align: center; - margin: 0; - - opacity: 0; - -webkit-transition: opacity 0.5s ease-in-out; /* Safari */ - -o-transition: opacity 0.5s ease-in-out; /* Opera */ - -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */ - transition: opacity 0.5s ease-in-out; - } - - .menu-bar:hover .menu-title { - opacity: 1; - } - - .left { - float: left; - } - - .right { - float: right; - } - - /* Content */ - - .content a { - text-decoration: none; - } - - .content a:hover { - text-decoration: underline; - } - - .content img { - max-width: 100%; - } - - /* Nav icons */ - .nav-chapters { - font-size: 40px; - text-align: center; - text-decoration: none; - - position: absolute; - top: 50px; /* Height of menu-bar */ - bottom: 0; - margin: 0; - max-width: 150px; - min-width: 90px; - display: flex; - justify-content: center; - align-content: center; - flex-direction: column; - - -webkit-transition: color 0.5s; /* Safari */ - -o-transition: color 0.5s; /* Opera */ - -moz-transition: color 0.5s; /* Mozilla Firefox */ - transition: color 0.5s; - } - - .mobile-nav-chapters { display: none; } - - .nav-chapters:hover { - text-decoration: none; - } - - .previous { - left: 0; - } - - .next { - right: 0; - } - - - /* Theme Popup */ - .theme-popup { - position: fixed; - left: -40px; - - border-radius: 4px; - - font-size: 0.7em; - } - - .theme-popup .theme { - margin: 0; - padding: 2px 10px; - line-height: 25px; - white-space: nowrap; - } -} - - -@media only screen and (max-width: 1060px) { - .sidebar { - left: -300px; - } - .page-wrapper { - left: 15px; - padding-right: 15px; - } -} - -/* Fix the navigation arrows that collapsed with the text on smaller screens */ - -@media only screen and (max-width: 1250px) { - /* Light theme */ - .light .mobile-nav-chapters { - background-color: #E0E0E0; - color: #999; - } - .light .mobile-nav-chapters i:hover { - color: #333; - } - /* Coal theme */ - .coal .mobile-nav-chapters { - background-color: #212426; - color: #43484d; - } - .coal .mobile-nav-chapters i:hover { - color: #b3c0cc; - } - /* Navy theme */ - .navy .mobile-nav-chapters { - background-color: #242838; - color: #737480; - } - .navy .mobile-nav-chapters i:hover { - color: #b7b9cc; - } - /* Rust theme */ - .rust .mobile-nav-chapters { - background-color: #4d413d; - color: #737480; - } - .rust .mobile-nav-chapters i:hover { - color: #b7b9cc; - } - .nav-chapters { - display: none; - } - - .mobile-nav-chapters { - font-size: 40px; - 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; - } -} - -@media only print { - .sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters { - display: none; - } - - .page-wrapper { - left: 0; - } - - .content { - max-width: 100%; - } - - code { - background-color: #666666; - border-radius: 5px; - - /* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact; - } - - a, a:visited, a:active, a:hover { - color: #4183c4; - text-decoration: none; - } - - h1, h2, h3, h4, h5, h6 { - page-break-inside: avoid; - page-break-after: avoid; - /*break-after: avoid;*/ - } - - pre, code { - page-break-inside: avoid; - white-space: pre-wrap; /* CSS 3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - } +body { + font-size: 2px; } diff --git a/src/theme/stylus/book.styl b/src/theme/stylus/book.styl new file mode 100644 index 00000000..81b0e5b3 --- /dev/null +++ b/src/theme/stylus/book.styl @@ -0,0 +1,3 @@ +body { + font-size: 2px; +} From bd99a4382f051817f6e0eebc2fff6cc43afbca02 Mon Sep 17 00:00:00 2001 From: Mathieu David Date: Fri, 18 Sep 2015 22:13:55 +0200 Subject: [PATCH 2/4] Converted all css to stylus --- .gitignore | 2 + .travis.yml | 2 +- README.md | 4 +- build.rs | 17 +- src/theme/_book.css | 512 ----------------------------- src/theme/book.css | 3 - src/theme/stylus/book.styl | 12 +- src/theme/stylus/general.styl | 12 + src/theme/stylus/menu.styl | 39 +++ src/theme/stylus/nav-icons.styl | 23 ++ src/theme/stylus/page.styl | 45 +++ src/theme/stylus/print.styl | 45 +++ src/theme/stylus/sidebar.styl | 50 +++ src/theme/stylus/theme-popup.styl | 47 +++ src/theme/stylus/themes/base.styl | 52 +++ src/theme/stylus/themes/coal.styl | 21 ++ src/theme/stylus/themes/index.styl | 4 + src/theme/stylus/themes/light.styl | 21 ++ src/theme/stylus/themes/navy.styl | 21 ++ src/theme/stylus/themes/rust.styl | 21 ++ 20 files changed, 426 insertions(+), 527 deletions(-) delete mode 100644 src/theme/_book.css delete mode 100644 src/theme/book.css create mode 100644 src/theme/stylus/general.styl create mode 100644 src/theme/stylus/menu.styl create mode 100644 src/theme/stylus/nav-icons.styl create mode 100644 src/theme/stylus/page.styl create mode 100644 src/theme/stylus/print.styl create mode 100644 src/theme/stylus/sidebar.styl create mode 100644 src/theme/stylus/theme-popup.styl create mode 100644 src/theme/stylus/themes/base.styl create mode 100644 src/theme/stylus/themes/coal.styl create mode 100644 src/theme/stylus/themes/index.styl create mode 100644 src/theme/stylus/themes/light.styl create mode 100644 src/theme/stylus/themes/navy.styl create mode 100644 src/theme/stylus/themes/rust.styl diff --git a/.gitignore b/.gitignore index 68208bcb..a7224236 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ Cargo.lock book-test book-example/book + +src/theme/book.css diff --git a/.travis.yml b/.travis.yml index 1e1d68ca..b880e4f8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -15,6 +15,6 @@ addons: - nodejs - npm install: - - npm install stylus + - npm install stylus nib after_success: - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && bash deploy.sh diff --git a/README.md b/README.md index 4a8bea15..36f5af29 100644 --- a/README.md +++ b/README.md @@ -12,12 +12,12 @@ To have an idea of what a rendered book looks like,take a look at the [**Documen ## Installation -Before building mdBook, make sure that you installed `stylus` from `npm` because it is used to compile the stylesheets +Before building mdBook, make sure that you installed `stylus` and `nib` from `npm` because it is used to compile the stylesheets Install [node.js](https://nodejs.org/en/) ``` -npm install -g stylus +npm install -g stylus nib ``` ``` diff --git a/build.rs b/build.rs index 7860cff9..36a9eaba 100644 --- a/build.rs +++ b/build.rs @@ -10,12 +10,17 @@ fn main() { let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap(); let theme_dir = Path::new(&manifest_dir).join("src/theme/"); - let stylus_dir = theme_dir.join("stylus"); + let stylus_dir = theme_dir.join("stylus/book.styl"); - Command::new("stylus") - .arg(format!("{}", stylus_dir.to_str().unwrap())) - .arg("--out") - .arg(format!("{}", theme_dir.to_str().unwrap())) - .status().unwrap(); + if !Command::new("stylus") + .arg(format!("{}", stylus_dir.to_str().unwrap())) + .arg("--out") + .arg(format!("{}", theme_dir.to_str().unwrap())) + .arg("--use") + .arg("nib") + .status().unwrap() + .success() { + panic!("Stylus encoutered an error"); + } } diff --git a/src/theme/_book.css b/src/theme/_book.css deleted file mode 100644 index 45338e67..00000000 --- a/src/theme/_book.css +++ /dev/null @@ -1,512 +0,0 @@ -html, body { - font-family: "Open Sans", sans-serif; - color: #333; -} - -@media only screen { - /* Light theme */ - .light .sidebar { - border-right: 1px solid rgba(0, 0, 0, 0.07); - background-color: #fafafa; - color: #364149; - } - .light .page-wrapper { - background: none repeat scroll 0 0 #FFF; - } - .light .chapter li { - color: #aaa; - } - .light .chapter li .active, - .light .chapter li a:hover { - /* Animate color change */ - color: #008cff; - } - .light .menu-bar, - .light .nav-chapters { - color: #CCC; - } - .light .chapter li a, - .light .menu-bar i:hover, - .light .nav-chapters:hover { - /* Animate color change */ - color: #333; - } - .light .content a { - color: #4183c4; - } - /* Theme changer */ - .light .theme-popup { - background: #fafafa; - border: 1px solid #ccc; - } - .light .theme-popup .theme:hover { - background-color: #e6e6e6; - } - - /* Coal theme */ - .coal { - color: #98a3ad; - background-color: #141617; - } - .coal .sidebar { - background-color: #292c2f; - color: #a1adb8; - } - .coal .chapter li { - color: #505254; - } - .coal .chapter li .active, - .coal .chapter li a:hover { - /* Animate color change */ - color: #3473ad; - } - .coal .menu-bar, - .coal .nav-chapters { - color: #43484d; - } - .coal .chapter li a, - .coal .menu-bar i:hover, - .coal .nav-chapters:hover { - color: #b3c0cc; - } - .coal .content a { - color: #2b79a2; - } - /* Theme changer */ - .coal .theme-popup { - background: #141617; - border: 1px solid #43484d; - } - .coal .theme-popup .theme:hover { - background-color: #1f2124; - } - /* Dark blue colored theme */ - .navy { - background-color: #161923; - color: #bcbdd0; - } - .navy .sidebar { - background-color: #282d3f; - color: #c8c9db; - } - .navy .chapter li { - color: #505274; - } - .navy .chapter li .active, - .navy .chapter li a:hover { - /* Animate color change */ - color: #2b79a2; - } - .navy .menu-bar, - .navy .nav-chapters { - color: #737480; - } - .navy .chapter li a, - .navy .menu-bar i:hover, - .navy .nav-chapters:hover { - color: #b7b9cc; - } - .navy .content a { - color: #2b79a2; - } - /* Theme changer */ - .navy .theme-popup { - background: #161923; - border: 1px solid #737480; - } - .navy .theme-popup .theme:hover { - background-color: #282e40; - } - /* Rust theme */ - .rust { - background-color: #e1e1db; - color: #262625; - } - .rust .sidebar { - background-color: #3b2e2a; - color: #c8c9db; - } - .rust .chapter li { - color: #505254; - } - .rust .chapter li .active, - .rust .chapter li a:hover { - /* Animate color change */ - color: #e69f67; - } - .rust .menu-bar, - .rust .nav-chapters { - color: #737480; - } - .rust .chapter li a { - color: #bfbfba; - } - .rust .menu-bar i:hover, - .rust .nav-chapters:hover { - color: #262625; - } - .rust .content a { - color: #2b79a2; - } - /* Theme changer */ - .rust .theme-popup { - background: #e1e1db; - border: 1px solid #b38f6b; - } - .rust .theme-popup .theme:hover { - background-color: #99908a; - } - .sidebar { - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 300px; - overflow-y: auto; - padding: 10px 10px; - font-size: 14px; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - - /* Animation: slide away */ - -webkit-transition: left 0.5s; /* Safari */ - -o-transition: left 0.5s; /* Opera */ - -moz-transition: left 0.5s; /* Mozilla Firefox */ - transition: left 0.5s; - } - - .page-wrapper { - position: absolute; - overflow-y: auto; - left: 315px; - right: 0; - top: 0; - bottom: 0; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - - min-height: 100%; - - /* Animation: slide away */ - -webkit-transition: left 0.5s; /* Safari */ - -o-transition: left 0.5s; /* Opera */ - -moz-transition: left 0.5s; /* Mozilla Firefox */ - transition: left 0.5s; - } - - .page { - position: absolute; - top: 0; - right: 0; - left: 0; - bottom: 0; - - padding-right: 15px; - overflow-y: auto; - } - - .content { - margin-left: auto; - margin-right:auto; - max-width: 750px; - padding-bottom: 50px; - } - - .chapter { - list-style: none outside none; - padding-left: 0; - line-height: 30px; - } - - .section { - list-style: none outside none; - padding-left: 20px; - line-height: 40px; - } - - .section li { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - - .chapter li a { - padding: 5px 0; - text-decoration: none; - } - - .chapter li a:hover { - text-decoration: none; - } - - .chapter .affix { - - } - - .chapter .spacer { - width: 100%; - height: 3px; - background-color: #f4f4f4; - margin: 10px 0px; - } - - .navy .chapter .spacer { - background-color: #2d334f; - } - - .coal .chapter .spacer { - background-color: #393939; - } - - .rust .chapter .spacer { - background-color: #45373a; - } - - .menu-bar { - position: relative; - height: 50px; - } - - .menu-bar i { - position: relative; - margin: 0 10px; - z-index: 10; - line-height: 50px; - -webkit-transition: color 0.5s; /* Safari */ - -o-transition: color 0.5s; /* Opera */ - -moz-transition: color 0.5s; /* Mozilla Firefox */ - transition: color 0.5s; - } - - .menu-bar .left-buttons { - float: left; - } - - .menu-bar .right-buttons { - float: right; - } - - .menu-bar i:hover { - cursor: pointer; - } - - .menu-title { - display: inline-block; - font-weight: 200; - font-size: 20px; - line-height: 50px; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - text-align: center; - margin: 0; - - opacity: 0; - -webkit-transition: opacity 0.5s ease-in-out; /* Safari */ - -o-transition: opacity 0.5s ease-in-out; /* Opera */ - -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */ - transition: opacity 0.5s ease-in-out; - } - - .menu-bar:hover .menu-title { - opacity: 1; - } - - .left { - float: left; - } - - .right { - float: right; - } - - /* Content */ - - .content a { - text-decoration: none; - } - - .content a:hover { - text-decoration: underline; - } - - .content img { - max-width: 100%; - } - - /* Nav icons */ - .nav-chapters { - font-size: 40px; - text-align: center; - text-decoration: none; - - position: absolute; - top: 50px; /* Height of menu-bar */ - bottom: 0; - margin: 0; - max-width: 150px; - min-width: 90px; - display: flex; - justify-content: center; - align-content: center; - flex-direction: column; - - -webkit-transition: color 0.5s; /* Safari */ - -o-transition: color 0.5s; /* Opera */ - -moz-transition: color 0.5s; /* Mozilla Firefox */ - transition: color 0.5s; - } - - .mobile-nav-chapters { display: none; } - - .nav-chapters:hover { - text-decoration: none; - } - - .previous { - left: 0; - } - - .next { - right: 0; - } - - - /* Theme Popup */ - .theme-popup { - position: fixed; - left: -40px; - - border-radius: 4px; - - font-size: 0.7em; - } - - .theme-popup .theme { - margin: 0; - padding: 2px 10px; - line-height: 25px; - white-space: nowrap; - } -} - - -@media only screen and (max-width: 1060px) { - .sidebar { - left: -300px; - } - .page-wrapper { - left: 15px; - padding-right: 15px; - } -} - -/* Fix the navigation arrows that collapsed with the text on smaller screens */ - -@media only screen and (max-width: 1250px) { - /* Light theme */ - .light .mobile-nav-chapters { - background-color: #E0E0E0; - color: #999; - } - .light .mobile-nav-chapters i:hover { - color: #333; - } - /* Coal theme */ - .coal .mobile-nav-chapters { - background-color: #212426; - color: #43484d; - } - .coal .mobile-nav-chapters i:hover { - color: #b3c0cc; - } - /* Navy theme */ - .navy .mobile-nav-chapters { - background-color: #242838; - color: #737480; - } - .navy .mobile-nav-chapters i:hover { - color: #b7b9cc; - } - /* Rust theme */ - .rust .mobile-nav-chapters { - background-color: #4d413d; - color: #737480; - } - .rust .mobile-nav-chapters i:hover { - color: #b7b9cc; - } - .nav-chapters { - display: none; - } - - .mobile-nav-chapters { - font-size: 40px; - 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; - } -} - -@media only print { - .sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters { - display: none; - } - - .page-wrapper { - left: 0; - } - - .content { - max-width: 100%; - } - - code { - background-color: #666666; - border-radius: 5px; - - /* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact; - } - - a, a:visited, a:active, a:hover { - color: #4183c4; - text-decoration: none; - } - - h1, h2, h3, h4, h5, h6 { - page-break-inside: avoid; - page-break-after: avoid; - /*break-after: avoid;*/ - } - - pre, code { - page-break-inside: avoid; - white-space: pre-wrap; /* CSS 3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - } -} diff --git a/src/theme/book.css b/src/theme/book.css deleted file mode 100644 index 8fb49149..00000000 --- a/src/theme/book.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - font-size: 2px; -} diff --git a/src/theme/stylus/book.styl b/src/theme/stylus/book.styl index 81b0e5b3..f8eaaaf0 100644 --- a/src/theme/stylus/book.styl +++ b/src/theme/stylus/book.styl @@ -1,3 +1,9 @@ -body { - font-size: 2px; -} +@import "nib" + +@import 'general' +@import 'sidebar' +@import 'page' +@import 'menu' +@import 'nav-icons' +@import 'theme-popup' +@import 'themes' diff --git a/src/theme/stylus/general.styl b/src/theme/stylus/general.styl new file mode 100644 index 00000000..8a92e25f --- /dev/null +++ b/src/theme/stylus/general.styl @@ -0,0 +1,12 @@ +html, body { + font-family: "Open Sans", sans-serif; + color: #333; +} + +.left { + float: left; +} + +.right { + float: right; +} diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl new file mode 100644 index 00000000..e3a8a20b --- /dev/null +++ b/src/theme/stylus/menu.styl @@ -0,0 +1,39 @@ +.menu-bar { + position: relative + height: 50px + + i { + position: relative + margin: 0 10px + z-index: 10 + line-height: 50px + + transition: color 0.5s + + &:hover { cursor: pointer } + } + + .left-buttons { float: left } + .right-buttons { float: right } +} + +.menu-title { + display: inline-block + font-weight: 200 + font-size: 20px + line-height: 50px + position: absolute + top: 0 + left: 0 + right: 0 + bottom: 0 + text-align: center + margin: 0 + + opacity: 0 + transition: opacity 0.5s ease-in-out +} + +.menu-bar:hover .menu-title { + opacity: 1 +} diff --git a/src/theme/stylus/nav-icons.styl b/src/theme/stylus/nav-icons.styl new file mode 100644 index 00000000..2ffb93f7 --- /dev/null +++ b/src/theme/stylus/nav-icons.styl @@ -0,0 +1,23 @@ +.nav-chapters { + font-size: 2.5em + text-align: center + text-decoration: none + + position: absolute + top: 50px /* Height of menu-bar */ + bottom: 0 + margin: 0 + max-width: 150px + min-width: 90px + display: flex + justify-content: center + align-content: center + flex-direction: column + + transition: color 0.5s +} + +.mobile-nav-chapters { display: none } +.nav-chapters:hover { text-decoration: none } +.previous { left: 0 } +.next { right: 0 } diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl new file mode 100644 index 00000000..8ca5de37 --- /dev/null +++ b/src/theme/stylus/page.styl @@ -0,0 +1,45 @@ +.page-wrapper { + position: absolute + overflow-y: auto + left: 315px + right: 0 + top: 0 + bottom: 0 + box-sizing: border-box + -webkit-overflow-scrolling: touch + + min-height: 100% + + // Animation: slide away + transition: left 0.5s + + @media only screen and (max-width: 1060px) { + left: 15px; + padding-right: 15px; + } +} + +.page { + position: absolute + top: 0 + right: 0 + left: 0 + bottom: 0 + + padding-right: 15px + overflow-y: auto +} + +.content { + margin-left: auto + margin-right:auto + max-width: 750px + padding-bottom: 50px + + a { + text-decoration: none; + &:hover { text-decoration: underline; } + } + + img { max-width: 100%; } +} diff --git a/src/theme/stylus/print.styl b/src/theme/stylus/print.styl new file mode 100644 index 00000000..95d68fc9 --- /dev/null +++ b/src/theme/stylus/print.styl @@ -0,0 +1,45 @@ +@media only print { + + .sidebar, + .menu-bar, + .nav-chapters, + .mobile-nav-chapters { + display: none + } + + .page-wrapper { + left: 0 + } + + .content { + max-width: 100% + } + + code { + background-color: #666666 + border-radius: 5px + + /* Force background to be printed in Chrome */ + -webkit-print-color-adjust: exact + } + + a, a:visited, a:active, a:hover { + color: #4183c4 + text-decoration: none + } + + h1, h2, h3, h4, h5, h6 { + page-break-inside: avoid + page-break-after: avoid + /*break-after: avoid*/ + } + + pre, code { + page-break-inside: avoid + white-space: pre-wrap /* CSS 3 */ + white-space: -moz-pre-wrap /* Mozilla, since 1999 */ + white-space: -pre-wrap /* Opera 4-6 */ + white-space: -o-pre-wrap /* Opera 7 */ + word-wrap: break-word /* Internet Explorer 5.5+ */ + } +} diff --git a/src/theme/stylus/sidebar.styl b/src/theme/stylus/sidebar.styl new file mode 100644 index 00000000..9feb5a18 --- /dev/null +++ b/src/theme/stylus/sidebar.styl @@ -0,0 +1,50 @@ +.sidebar { + position: absolute + left: 0 + top: 0 + bottom: 0 + width: 300px + overflow-y: auto + padding: 10px 10px + font-size: 0.875em + box-sizing: border-box + -webkit-overflow-scrolling: touch + + // Animation: slide away + transition: left 0.5s + + @media only screen and (max-width: 1060px) { + left: -300px + } +} + +.chapter { + list-style: none outside none + padding-left: 0 + line-height: 1.9em + + li a { + padding: 5px 0 + text-decoration: none + + &:hover { text-decoration: none } + } + + .spacer { + width: 100% + height: 3px + margin: 10px 0px + } +} + +.section { + list-style: none outside none + padding-left: 20px + line-height: 2.5em + + li { + text-overflow: ellipsis + overflow: hidden + white-space: nowrap + } +} diff --git a/src/theme/stylus/theme-popup.styl b/src/theme/stylus/theme-popup.styl new file mode 100644 index 00000000..53c06cb2 --- /dev/null +++ b/src/theme/stylus/theme-popup.styl @@ -0,0 +1,47 @@ +.theme-popup { + position: fixed + left: -40px + + border-radius: 4px + font-size: 0.7em + + .theme { + margin: 0 + padding: 2px 10px + line-height: 25px + white-space: nowrap + } +} + +@media only screen and (max-width: 1250px) { + + .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 + } +} diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl new file mode 100644 index 00000000..5411b2bf --- /dev/null +++ b/src/theme/stylus/themes/base.styl @@ -0,0 +1,52 @@ +.{unquote($theme-name)} { + color: $fg + background-color: $bg + + .sidebar { + background-color: $sidebar-bg + color: $sidebar-fg + } + + .chapter li { + color: $sidebar-non-existant + + a { color: $sidebar-fg } + + .active, + a:hover { + /* Animate color change */ + color: $sidebar-active + } + } + + .chapter .spacer { + background-color: $sidebar-spacer + } + + .menu-bar, + .nav-chapters, + .mobile-nav-chapters { + color: $icons + } + + .menu-bar i:hover, + .nav-chapters:hover, + .mobile-nav-chapters i:hover { + color: $icons-hover + } + + .mobile-nav-chapters { + background-color: $sidebar-bg + } + + .content a { + color: $links + } + + .theme-popup { + background: $theme-popup-bg + border: 1px solid $theme-popup-border + + .theme:hover { background-color: $theme-hover } + } +} diff --git a/src/theme/stylus/themes/coal.styl b/src/theme/stylus/themes/coal.styl new file mode 100644 index 00000000..0abb10a0 --- /dev/null +++ b/src/theme/stylus/themes/coal.styl @@ -0,0 +1,21 @@ +$theme-name = 'coal' + +$bg = #141617 +$fg = #98a3ad + +$sidebar-bg = #292c2f +$sidebar-fg = #a1adb8 +$sidebar-non-existant = #505254 +$sidebar-active = #3473ad +$sidebar-spacer = #393939 + +$icons = #43484d +$icons-hover = #b3c0cc + +$links = #2b79a2 + +$theme-popup-bg = #141617 +$theme-popup-border = #43484d +$theme-hover = #1f2124 + +@import 'base' diff --git a/src/theme/stylus/themes/index.styl b/src/theme/stylus/themes/index.styl new file mode 100644 index 00000000..f364b5aa --- /dev/null +++ b/src/theme/stylus/themes/index.styl @@ -0,0 +1,4 @@ +@import 'light' +@import 'coal' +@import 'navy' +@import 'rust' diff --git a/src/theme/stylus/themes/light.styl b/src/theme/stylus/themes/light.styl new file mode 100644 index 00000000..871b0a8c --- /dev/null +++ b/src/theme/stylus/themes/light.styl @@ -0,0 +1,21 @@ +$theme-name = 'light' + +$bg = #ffffff +$fg = #333333 + +$sidebar-bg = #fafafa +$sidebar-fg = #364149 +$sidebar-non-existant = #aaaaaa +$sidebar-active = #008cff +$sidebar-spacer = #f4f4f4 + +$icons = #cccccc +$icons-hover = #333333 + +$links = #4183c4 + +$theme-popup-bg = #fafafa +$theme-popup-border = #cccccc +$theme-hover = #e6e6e6 + +@import 'base' diff --git a/src/theme/stylus/themes/navy.styl b/src/theme/stylus/themes/navy.styl new file mode 100644 index 00000000..51d5aaf6 --- /dev/null +++ b/src/theme/stylus/themes/navy.styl @@ -0,0 +1,21 @@ +$theme-name = 'navy' + +$bg = #161923 +$fg = #bcbdd0 + +$sidebar-bg = #282d3f +$sidebar-fg = #c8c9db +$sidebar-non-existant = #505274 +$sidebar-active = #2b79a2 +$sidebar-spacer = #2d334f + +$icons = #737480 +$icons-hover = #b7b9cc + +$links = #2b79a2 + +$theme-popup-bg = #161923 +$theme-popup-border = #737480 +$theme-hover = #282e40 + +@import 'base' diff --git a/src/theme/stylus/themes/rust.styl b/src/theme/stylus/themes/rust.styl new file mode 100644 index 00000000..98227960 --- /dev/null +++ b/src/theme/stylus/themes/rust.styl @@ -0,0 +1,21 @@ +$theme-name = 'rust' + +$bg = #e1e1db +$fg = #262625 + +$sidebar-bg = #3b2e2a +$sidebar-fg = #c8c9db +$sidebar-non-existant = #505254 +$sidebar-active = #e69f67 +$sidebar-spacer = #45373a + +$icons = #737480 +$icons-hover = #262625 + +$links = #2b79a2 + +$theme-popup-bg = #e1e1db +$theme-popup-border = #b38f6b +$theme-hover = #99908a + +@import 'base' From efc0f4046658263c8ed1a8e9bcbf5dc3dd57e910 Mon Sep 17 00:00:00 2001 From: Mathieu David Date: Thu, 24 Sep 2015 00:18:13 +0200 Subject: [PATCH 3/4] Fix low contrast in mobile nav buttons #57 --- src/theme/stylus/themes/base.styl | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/theme/stylus/themes/base.styl b/src/theme/stylus/themes/base.styl index 5411b2bf..fdbcc9dc 100644 --- a/src/theme/stylus/themes/base.styl +++ b/src/theme/stylus/themes/base.styl @@ -35,6 +35,10 @@ color: $icons-hover } + .mobile-nav-chapters i:hover { + color: $sidebar-fg + } + .mobile-nav-chapters { background-color: $sidebar-bg } From a177a9e10dc6a2d4b1a4abea62b81eb252739486 Mon Sep 17 00:00:00 2001 From: Mathieu David Date: Thu, 24 Sep 2015 15:37:20 +0200 Subject: [PATCH 4/4] Only regenerate css when feature regenerate-css is enabled --- .gitignore | 2 - Cargo.toml | 1 + build.rs | 29 +-- src/theme/book.css | 447 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 464 insertions(+), 15 deletions(-) create mode 100644 src/theme/book.css diff --git a/.gitignore b/.gitignore index a7224236..68208bcb 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,3 @@ Cargo.lock book-test book-example/book - -src/theme/book.css diff --git a/Cargo.toml b/Cargo.toml index 449191b0..56a9ab90 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -26,6 +26,7 @@ tempdir = "*" default = ["output"] debug = [] output = [] +regenerate-css = [] [[bin]] doc = false diff --git a/build.rs b/build.rs index 36a9eaba..d3177444 100644 --- a/build.rs +++ b/build.rs @@ -6,21 +6,24 @@ use std::path::Path; fn main() { - // Compile stylus stylesheet to css - let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap(); + if let Ok(_) = env::var("CARGO_FEATURE_REGENERATE_CSS") { - let theme_dir = Path::new(&manifest_dir).join("src/theme/"); - let stylus_dir = theme_dir.join("stylus/book.styl"); + // Compile stylus stylesheet to css + let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap(); - if !Command::new("stylus") - .arg(format!("{}", stylus_dir.to_str().unwrap())) - .arg("--out") - .arg(format!("{}", theme_dir.to_str().unwrap())) - .arg("--use") - .arg("nib") - .status().unwrap() - .success() { - panic!("Stylus encoutered an error"); + let theme_dir = Path::new(&manifest_dir).join("src/theme/"); + let stylus_dir = theme_dir.join("stylus/book.styl"); + + if !Command::new("stylus") + .arg(format!("{}", stylus_dir.to_str().unwrap())) + .arg("--out") + .arg(format!("{}", theme_dir.to_str().unwrap())) + .arg("--use") + .arg("nib") + .status().unwrap() + .success() { + panic!("Stylus encoutered an error"); + } } } diff --git a/src/theme/book.css b/src/theme/book.css new file mode 100644 index 00000000..e8d13469 --- /dev/null +++ b/src/theme/book.css @@ -0,0 +1,447 @@ +html, +body { + font-family: "Open Sans", sans-serif; + color: #333; +} +.left { + float: left; +} +.right { + float: right; +} +.sidebar { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: 300px; + overflow-y: auto; + padding: 10px 10px; + font-size: 0.875em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + -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) { + .sidebar { + left: -300px; + } +} +.chapter { + list-style: none outside none; + padding-left: 0; + line-height: 1.9em; +} +.chapter li a { + padding: 5px 0; + text-decoration: none; +} +.chapter li a:hover { + text-decoration: none; +} +.chapter .spacer { + width: 100%; + height: 3px; + margin: 10px 0px; +} +.section { + list-style: none outside none; + padding-left: 20px; + line-height: 2.5em; +} +.section li { + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +.page-wrapper { + position: absolute; + overflow-y: auto; + left: 315px; + right: 0; + top: 0; + bottom: 0; + -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; +} +@media only screen and (max-width: 1060px) { + .page-wrapper { + left: 15px; + padding-right: 15px; + } +} +.page { + position: absolute; + top: 0; + right: 0; + left: 0; + bottom: 0; + padding-right: 15px; + overflow-y: auto; +} +.content { + margin-left: auto; + margin-right: auto; + max-width: 750px; + padding-bottom: 50px; +} +.content a { + text-decoration: none; +} +.content a:hover { + text-decoration: underline; +} +.content img { + max-width: 100%; +} +.menu-bar { + position: relative; + height: 50px; +} +.menu-bar i { + position: relative; + margin: 0 10px; + z-index: 10; + line-height: 50px; + -webkit-transition: color 0.5s; + -moz-transition: color 0.5s; + -o-transition: color 0.5s; + -ms-transition: color 0.5s; + transition: color 0.5s; +} +.menu-bar i:hover { + cursor: pointer; +} +.menu-bar .left-buttons { + float: left; +} +.menu-bar .right-buttons { + float: right; +} +.menu-title { + display: inline-block; + font-weight: 200; + font-size: 20px; + line-height: 50px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + text-align: center; + margin: 0; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; + filter: alpha(opacity=0); + -webkit-transition: opacity 0.5s ease-in-out; + -moz-transition: opacity 0.5s ease-in-out; + -o-transition: opacity 0.5s ease-in-out; + -ms-transition: opacity 0.5s ease-in-out; + transition: opacity 0.5s ease-in-out; +} +.menu-bar:hover .menu-title { + opacity: 1; + -ms-filter: none; + filter: none; +} +.nav-chapters { + font-size: 2.5em; + text-align: center; + text-decoration: none; + position: absolute; + top: 50px /* Height of menu-bar */; + bottom: 0; + margin: 0; + max-width: 150px; + min-width: 90px; + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: box; + display: flex; + -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; + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -o-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-transition: color 0.5s; + -moz-transition: color 0.5s; + -o-transition: color 0.5s; + -ms-transition: color 0.5s; + transition: color 0.5s; +} +.mobile-nav-chapters { + display: none; +} +.nav-chapters:hover { + text-decoration: none; +} +.previous { + left: 0; +} +.next { + right: 0; +} +.theme-popup { + position: fixed; + left: -40px; + -webkit-border-radius: 4px; + border-radius: 4px; + font-size: 0.7em; +} +.theme-popup .theme { + margin: 0; + padding: 2px 10px; + line-height: 25px; + white-space: nowrap; +} +@media only screen and (max-width: 1250px) { + .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; + -webkit-border-radius: 5px; + border-radius: 5px; + } + .next { + float: right; + } + .previous { + float: left; + } +} +.light { + color: #333; + background-color: #fff; +} +.light .sidebar { + background-color: #fafafa; + color: #364149; +} +.light .chapter li { + color: #aaa; +} +.light .chapter li a { + color: #364149; +} +.light .chapter li .active, +.light .chapter li a:hover { +/* Animate color change */ + color: #008cff; +} +.light .chapter .spacer { + background-color: #f4f4f4; +} +.light .menu-bar, +.light .nav-chapters, +.light .mobile-nav-chapters { + color: #ccc; +} +.light .menu-bar i:hover, +.light .nav-chapters:hover, +.light .mobile-nav-chapters i:hover { + color: #333; +} +.light .mobile-nav-chapters i:hover { + color: #364149; +} +.light .mobile-nav-chapters { + background-color: #fafafa; +} +.light .content a { + color: #4183c4; +} +.light .theme-popup { + background: #fafafa; + border: 1px solid #ccc; +} +.light .theme-popup .theme:hover { + background-color: #e6e6e6; +} +.coal { + color: #98a3ad; + background-color: #141617; +} +.coal .sidebar { + background-color: #292c2f; + color: #a1adb8; +} +.coal .chapter li { + color: #505254; +} +.coal .chapter li a { + color: #a1adb8; +} +.coal .chapter li .active, +.coal .chapter li a:hover { +/* Animate color change */ + color: #3473ad; +} +.coal .chapter .spacer { + background-color: #393939; +} +.coal .menu-bar, +.coal .nav-chapters, +.coal .mobile-nav-chapters { + color: #43484d; +} +.coal .menu-bar i:hover, +.coal .nav-chapters:hover, +.coal .mobile-nav-chapters i:hover { + color: #b3c0cc; +} +.coal .mobile-nav-chapters i:hover { + color: #a1adb8; +} +.coal .mobile-nav-chapters { + background-color: #292c2f; +} +.coal .content a { + color: #2b79a2; +} +.coal .theme-popup { + background: #141617; + border: 1px solid #43484d; +} +.coal .theme-popup .theme:hover { + background-color: #1f2124; +} +.navy { + color: #bcbdd0; + background-color: #161923; +} +.navy .sidebar { + background-color: #282d3f; + color: #c8c9db; +} +.navy .chapter li { + color: #505274; +} +.navy .chapter li a { + color: #c8c9db; +} +.navy .chapter li .active, +.navy .chapter li a:hover { +/* Animate color change */ + color: #2b79a2; +} +.navy .chapter .spacer { + background-color: #2d334f; +} +.navy .menu-bar, +.navy .nav-chapters, +.navy .mobile-nav-chapters { + color: #737480; +} +.navy .menu-bar i:hover, +.navy .nav-chapters:hover, +.navy .mobile-nav-chapters i:hover { + color: #b7b9cc; +} +.navy .mobile-nav-chapters i:hover { + color: #c8c9db; +} +.navy .mobile-nav-chapters { + background-color: #282d3f; +} +.navy .content a { + color: #2b79a2; +} +.navy .theme-popup { + background: #161923; + border: 1px solid #737480; +} +.navy .theme-popup .theme:hover { + background-color: #282e40; +} +.rust { + color: #262625; + background-color: #e1e1db; +} +.rust .sidebar { + background-color: #3b2e2a; + color: #c8c9db; +} +.rust .chapter li { + color: #505254; +} +.rust .chapter li a { + color: #c8c9db; +} +.rust .chapter li .active, +.rust .chapter li a:hover { +/* Animate color change */ + color: #e69f67; +} +.rust .chapter .spacer { + background-color: #45373a; +} +.rust .menu-bar, +.rust .nav-chapters, +.rust .mobile-nav-chapters { + color: #737480; +} +.rust .menu-bar i:hover, +.rust .nav-chapters:hover, +.rust .mobile-nav-chapters i:hover { + color: #262625; +} +.rust .mobile-nav-chapters i:hover { + color: #c8c9db; +} +.rust .mobile-nav-chapters { + background-color: #3b2e2a; +} +.rust .content a { + color: #2b79a2; +} +.rust .theme-popup { + background: #e1e1db; + border: 1px solid #b38f6b; +} +.rust .theme-popup .theme:hover { + background-color: #99908a; +}