Merge branch 'css-to-stylus'

.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 nib
 after_success:
   - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && bash deploy.sh

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/*",
 ]
@@ -25,6 +26,7 @@ tempdir = "*"
 default = ["output"]
 debug = []
 output = []
+regenerate-css = []
 
 [[bin]]
 doc = false

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` and `nib` from `npm` because it is used to compile the stylesheets
+
+Install [node.js](https://nodejs.org/en/)
+
+```
+npm install -g stylus nib
+```
+
 ```
 git clone --depth=1 https://github.com/azerupi/mdBook.git
 cd mdBook

build.rs

@@ -0,0 +1,29 @@
+// build.rs
+
+use std::process::Command;
+use std::env;
+use std::path::Path;
+
+fn main() {
+
+    if let Ok(_) = env::var("CARGO_FEATURE_REGENERATE_CSS") {
+
+        // 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/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");
+        }
+    }
+
+}

src/theme/book.css

@@ -1,160 +1,13 @@
-html, body {
+html,
+body {
   font-family: "Open Sans", sans-serif;
   color: #333;
 }
-
+.left {
-@media only screen {
+  float: left;
-    /* Light theme */
-    .light .sidebar {
-        border-right: 1px solid rgba(0, 0, 0, 0.07);
-        background-color: #fafafa;
-        color: #364149;
 }
-    .light .page-wrapper {
+.right {
-        background: none repeat scroll 0 0 #FFF;
+  float: right;
-    }
-    .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;
@@ -164,17 +17,50 @@ html, body {
   width: 300px;
   overflow-y: auto;
   padding: 10px 10px;
-        font-size: 14px;
+  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;
-        /* Animation: slide away */
+  -moz-transition: left 0.5s;
-        -webkit-transition: left 0.5s; /* Safari */
+  -o-transition: left 0.5s;
-        -o-transition: left 0.5s; /* Opera */
+  -ms-transition: left 0.5s;
-        -moz-transition: left 0.5s; /* Mozilla Firefox */
   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;
@@ -182,114 +68,71 @@ html, body {
   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;
-        /* Animation: slide away */
+  -moz-transition: left 0.5s;
-        -webkit-transition: left 0.5s; /* Safari */
+  -o-transition: left 0.5s;
-        -o-transition: left 0.5s; /* Opera */
+  -ms-transition: left 0.5s;
-        -moz-transition: left 0.5s; /* Mozilla Firefox */
   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 {
-    .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;
 }
-
+.content a:hover {
-    .chapter li a:hover {
+  text-decoration: underline;
-        text-decoration: none;
 }
-
+.content img {
-    .chapter .affix {
+  max-width: 100%;
-
 }
-
-    .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 */
+  -webkit-transition: color 0.5s;
-        -o-transition: color 0.5s; /* Opera */
+  -moz-transition: color 0.5s;
-        -moz-transition: color 0.5s; /* Mozilla Firefox */
+  -o-transition: color 0.5s;
+  -ms-transition: color 0.5s;
   transition: color 0.5s;
 }
-
-    .menu-bar .left-buttons {
-        float: left;
-    }
-
-    .menu-bar .right-buttons {
-        float: right;
-    }
-
 .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;
@@ -302,211 +145,303 @@ html, body {
   bottom: 0;
   text-align: center;
   margin: 0;
-
   opacity: 0;
-        -webkit-transition: opacity 0.5s ease-in-out; /* Safari */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-        -o-transition: opacity 0.5s ease-in-out; /* Opera */
+  filter: alpha(opacity=0);
-        -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */
+  -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;
 }
-
-    .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;
+  font-size: 2.5em;
   text-align: center;
   text-decoration: none;
-
   position: absolute;
-        top: 50px; /* Height of menu-bar */
+  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;
-        -webkit-transition: color 0.5s; /* Safari */
+  -moz-transition: color 0.5s;
-        -o-transition: color 0.5s; /* Opera */
+  -o-transition: color 0.5s;
-        -moz-transition: color 0.5s; /* Mozilla Firefox */
+  -ms-transition: color 0.5s;
   transition: color 0.5s;
 }
-
+.mobile-nav-chapters {
-    .mobile-nav-chapters { display: none; }
+  display: none;
-
+}
 .nav-chapters:hover {
   text-decoration: none;
 }
-
 .previous {
   left: 0;
 }
-
 .next {
   right: 0;
 }
-
-
-    /* Theme Popup */
 .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: 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;
+    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 {
-@media only print {
+  color: #333;
-    .sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters {
+  background-color: #fff;
-      display: none;
 }
-
+.light .sidebar {
-    .page-wrapper {
+  background-color: #fafafa;
-      left: 0;
+  color: #364149;
 }
-
+.light .chapter li {
-    .content {
+  color: #aaa;
-      max-width: 100%;
 }
-
+.light .chapter li a {
-    code {
+  color: #364149;
-      background-color: #666666;
-      border-radius: 5px;
-
-      /* Force background to be printed in Chrome */
-      -webkit-print-color-adjust: exact;
 }
-
+.light .chapter li .active,
-    a, a:visited, a:active, a:hover {
+.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;
-      text-decoration: none;
 }
-
+.light .theme-popup {
-    h1, h2, h3, h4, h5, h6 {
+  background: #fafafa;
-        page-break-inside: avoid;
+  border: 1px solid #ccc;
-        page-break-after: avoid;
-        /*break-after: avoid;*/
 }
-
+.light .theme-popup .theme:hover {
-    pre, code {
+  background-color: #e6e6e6;
-        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+ */
 }
+.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;
 }

src/theme/stylus/book.styl

@@ -0,0 +1,9 @@
+@import "nib"
+
+@import 'general'
+@import 'sidebar'
+@import 'page'
+@import 'menu'
+@import 'nav-icons'
+@import 'theme-popup'
+@import 'themes'

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;
+}

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
+}

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 }

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%; }
+}

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+ */
+    }
+}

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
+    }
+}

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
+    }
+}

src/theme/stylus/themes/base.styl

@@ -0,0 +1,56 @@
+.{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 i:hover {
+        color: $sidebar-fg
+    }
+
+    .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 }
+    }
+}

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'

src/theme/stylus/themes/index.styl

@@ -0,0 +1,4 @@
+@import 'light'
+@import 'coal'
+@import 'navy'
+@import 'rust'

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'

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'

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'