diff --git a/Cargo.toml b/Cargo.toml index 555f273f..735c3b3f 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -20,6 +20,9 @@ handlebars = "~0.12.0" rustc-serialize = "~0.3.16" pulldown-cmark = "~0.0.3" +[build-dependencies] +sass-rs = "0.0.18" + # Watch feature [dependencies.notify] diff --git a/build.rs b/build.rs index d3177444..784d692a 100644 --- a/build.rs +++ b/build.rs @@ -1,29 +1,26 @@ // build.rs +extern crate sass_rs; -use std::process::Command; use std::env; use std::path::Path; +use std::fs::File; +use std::io::Write; + +use sass_rs::sass_context::SassFileContext; 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"); + let scss_index_file = theme_dir.join("stylus/book.scss"); - 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 css = SassFileContext::new(&scss_index_file.to_string_lossy()) + .compile() + .expect("error compiling SCSS files"); + let mut output_file = File::create(&theme_dir.join("book.css")) + .expect("error creating CSS file"); + output_file.write_all(&mut css.as_bytes()).expect("error writing CSS to file"); } - } diff --git a/src/theme/stylus/_general.scss b/src/theme/stylus/_general.scss new file mode 100644 index 00000000..5f68bcd6 --- /dev/null +++ b/src/theme/stylus/_general.scss @@ -0,0 +1,18 @@ +html, body { + font-family: "Open Sans", sans-serif; + color: #333; +} + +.left { + float: left; +} + +.right { + float: right; +} + +.hidden { + display: none; +} + +h2, h3 { margin-top: 2.5em; } diff --git a/src/theme/stylus/_menu.scss b/src/theme/stylus/_menu.scss new file mode 100644 index 00000000..32c4e68e --- /dev/null +++ b/src/theme/stylus/_menu.scss @@ -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.scss b/src/theme/stylus/_nav-icons.scss new file mode 100644 index 00000000..8f8ae9d4 --- /dev/null +++ b/src/theme/stylus/_nav-icons.scss @@ -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: 15px; } diff --git a/src/theme/stylus/_page.scss b/src/theme/stylus/_page.scss new file mode 100644 index 00000000..c4484405 --- /dev/null +++ b/src/theme/stylus/_page.scss @@ -0,0 +1,55 @@ +@import 'variables'; + +.page-wrapper { + position: absolute; + overflow-y: auto; + left: $sidebar-width + 15px; + 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; + } +} + +.sidebar-hidden .page-wrapper { + left: 15px; +} + +.sidebar-visible .page-wrapper { + left: $sidebar-width + 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.scss b/src/theme/stylus/_print.scss new file mode 100644 index 00000000..a85ce24b --- /dev/null +++ b/src/theme/stylus/_print.scss @@ -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.scss b/src/theme/stylus/_sidebar.scss new file mode 100644 index 00000000..d3bb6e2f --- /dev/null +++ b/src/theme/stylus/_sidebar.scss @@ -0,0 +1,64 @@ +@import 'variables'; + +.sidebar { + position: absolute; + left: 0; + top: 0; + bottom: 0; + width: $sidebar-width; + overflow-y: auto; + padding: 10px 10px; + font-size: 0.875em; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + + // Animation: slide away + transition: ease-out left 0.5s; + + @media only screen and (max-width: 1060px) { + left: -1 * $sidebar-width; + } + + code { + line-height: 2em; + } +} + +.sidebar-hidden .sidebar { + left: -1 * $sidebar-width; +} + +.sidebar-visible .sidebar { + left: 0; +} + +.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.scss b/src/theme/stylus/_theme-popup.scss new file mode 100644 index 00000000..171b85e4 --- /dev/null +++ b/src/theme/stylus/_theme-popup.scss @@ -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/_variables.scss b/src/theme/stylus/_variables.scss new file mode 100644 index 00000000..71119edf --- /dev/null +++ b/src/theme/stylus/_variables.scss @@ -0,0 +1 @@ +$sidebar-width: 300px; diff --git a/src/theme/stylus/book.scss b/src/theme/stylus/book.scss new file mode 100644 index 00000000..e9e3612d --- /dev/null +++ b/src/theme/stylus/book.scss @@ -0,0 +1,8 @@ +@import 'general'; +@import 'menu'; +@import 'nav-icons'; +@import 'page'; +@import 'print'; +@import 'sidebar'; +@import 'theme-popup'; +@import 'themes/index'; diff --git a/src/theme/stylus/book.styl b/src/theme/stylus/book.styl deleted file mode 100644 index f8eaaaf0..00000000 --- a/src/theme/stylus/book.styl +++ /dev/null @@ -1,9 +0,0 @@ -@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 deleted file mode 100644 index e798e8e0..00000000 --- a/src/theme/stylus/general.styl +++ /dev/null @@ -1,18 +0,0 @@ -html, body { - font-family: "Open Sans", sans-serif - color: #333 -} - -.left { - float: left -} - -.right { - float: right -} - -.hidden { - display: none; -} - -h2, h3 { margin-top: 2.5em } diff --git a/src/theme/stylus/menu.styl b/src/theme/stylus/menu.styl deleted file mode 100644 index e3a8a20b..00000000 --- a/src/theme/stylus/menu.styl +++ /dev/null @@ -1,39 +0,0 @@ -.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 deleted file mode 100644 index 211db682..00000000 --- a/src/theme/stylus/nav-icons.styl +++ /dev/null @@ -1,23 +0,0 @@ -.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: 15px } diff --git a/src/theme/stylus/page.styl b/src/theme/stylus/page.styl deleted file mode 100644 index 62bb6cf3..00000000 --- a/src/theme/stylus/page.styl +++ /dev/null @@ -1,55 +0,0 @@ -@require 'variables' - -.page-wrapper { - position: absolute - overflow-y: auto - left: $sidebar-width + 15px - 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; - } -} - -.sidebar-hidden .page-wrapper { - left: 15px -} - -.sidebar-visible .page-wrapper { - left: $sidebar-width + 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 deleted file mode 100644 index 95d68fc9..00000000 --- a/src/theme/stylus/print.styl +++ /dev/null @@ -1,45 +0,0 @@ -@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 deleted file mode 100644 index 292038da..00000000 --- a/src/theme/stylus/sidebar.styl +++ /dev/null @@ -1,64 +0,0 @@ -@require 'variables' - -.sidebar { - position: absolute - left: 0 - top: 0 - bottom: 0 - width: $sidebar-width - 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: - $sidebar-width - } - - code { - line-height: 2em; - } -} - -.sidebar-hidden .sidebar { - left: - $sidebar-width -} - -.sidebar-visible .sidebar { - left: 0 -} - -.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 deleted file mode 100644 index 53c06cb2..00000000 --- a/src/theme/stylus/theme-popup.styl +++ /dev/null @@ -1,47 +0,0 @@ -.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.scss similarity index 60% rename from src/theme/stylus/themes/base.styl rename to src/theme/stylus/themes/_base.scss index 0a87b587..c301eae6 100644 --- a/src/theme/stylus/themes/base.styl +++ b/src/theme/stylus/themes/_base.scss @@ -1,4 +1,4 @@ -.{unquote($theme-name)} { +.#{$theme-name} { /* Inline code */ :not(pre) > .hljs { display: inline-block; @@ -23,58 +23,58 @@ } } - color: $fg - background-color: $bg + color: $fg; + background-color: $bg; .sidebar { - background-color: $sidebar-bg - color: $sidebar-fg + background-color: $sidebar-bg; + color: $sidebar-fg; } .chapter li { - color: $sidebar-non-existant + color: $sidebar-non-existant; - a { color: $sidebar-fg } + a { color: $sidebar-fg; } .active, a:hover { /* Animate color change */ - color: $sidebar-active + color: $sidebar-active; } } .chapter .spacer { - background-color: $sidebar-spacer + background-color: $sidebar-spacer; } .menu-bar, .nav-chapters, .mobile-nav-chapters { - color: $icons + color: $icons; } .menu-bar i:hover, .nav-chapters:hover, .mobile-nav-chapters i:hover { - color: $icons-hover + color: $icons-hover; } .mobile-nav-chapters i:hover { - color: $sidebar-fg + color: $sidebar-fg; } .mobile-nav-chapters { - background-color: $sidebar-bg + background-color: $sidebar-bg; } .content a:link { - color: $links + color: $links; } .theme-popup { - background: $theme-popup-bg - border: 1px solid $theme-popup-border + background: $theme-popup-bg; + border: 1px solid $theme-popup-border; - .theme:hover { background-color: $theme-hover } + .theme:hover { background-color: $theme-hover; } } } diff --git a/src/theme/stylus/themes/_coal.scss b/src/theme/stylus/themes/_coal.scss new file mode 100644 index 00000000..a7f7b06c --- /dev/null +++ b/src/theme/stylus/themes/_coal.scss @@ -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.scss b/src/theme/stylus/themes/_index.scss new file mode 100644 index 00000000..1a153455 --- /dev/null +++ b/src/theme/stylus/themes/_index.scss @@ -0,0 +1,4 @@ +@import 'light'; +@import 'coal'; +@import 'navy'; +@import 'rust'; diff --git a/src/theme/stylus/themes/_light.scss b/src/theme/stylus/themes/_light.scss new file mode 100644 index 00000000..3d1fd7bb --- /dev/null +++ b/src/theme/stylus/themes/_light.scss @@ -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.scss b/src/theme/stylus/themes/_navy.scss new file mode 100644 index 00000000..37358f59 --- /dev/null +++ b/src/theme/stylus/themes/_navy.scss @@ -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.scss b/src/theme/stylus/themes/_rust.scss new file mode 100644 index 00000000..f7ea975e --- /dev/null +++ b/src/theme/stylus/themes/_rust.scss @@ -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'; diff --git a/src/theme/stylus/themes/coal.styl b/src/theme/stylus/themes/coal.styl deleted file mode 100644 index 0abb10a0..00000000 --- a/src/theme/stylus/themes/coal.styl +++ /dev/null @@ -1,21 +0,0 @@ -$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 deleted file mode 100644 index f364b5aa..00000000 --- a/src/theme/stylus/themes/index.styl +++ /dev/null @@ -1,4 +0,0 @@ -@import 'light' -@import 'coal' -@import 'navy' -@import 'rust' diff --git a/src/theme/stylus/themes/light.styl b/src/theme/stylus/themes/light.styl deleted file mode 100644 index 871b0a8c..00000000 --- a/src/theme/stylus/themes/light.styl +++ /dev/null @@ -1,21 +0,0 @@ -$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 deleted file mode 100644 index 51d5aaf6..00000000 --- a/src/theme/stylus/themes/navy.styl +++ /dev/null @@ -1,21 +0,0 @@ -$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 deleted file mode 100644 index 98227960..00000000 --- a/src/theme/stylus/themes/rust.styl +++ /dev/null @@ -1,21 +0,0 @@ -$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' diff --git a/src/theme/stylus/variables.styl b/src/theme/stylus/variables.styl deleted file mode 100644 index 66b89df6..00000000 --- a/src/theme/stylus/variables.styl +++ /dev/null @@ -1 +0,0 @@ -$sidebar-width = 300px