From e377f4702f0be18171aa4743ca3807ca6c31cd9c Mon Sep 17 00:00:00 2001 From: Mathieu David Date: Fri, 18 Sep 2015 12:05:55 +0200 Subject: [PATCH] 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; +}