diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e703b003..60711c96 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -48,30 +48,6 @@ mdBook builds on stable Rust, if you want to build mdBook from source, here are The resulting binary can be found in `mdBook/target/debug/` under the name `mdBook` or `mdBook.exe`. - -### Making changes to the style - -mdBook doesn't use CSS directly but uses [Stylus](http://stylus-lang.com/), a CSS-preprocessor which compiles to CSS. - -When you want to change the style, it is important to not change the CSS directly because any manual modification to -the CSS files will be overwritten when compiling the stylus files. Instead, you should make your changes directly in the -[stylus files](https://github.com/rust-lang-nursery/mdBook/tree/master/src/theme/stylus) and regenerate the CSS. - -For this to work, you first need [Node and NPM](https://nodejs.org/en/) installed on your machine. -Then run the following command to install both [stylus](http://stylus-lang.com/) and [nib](https://tj.github.io/nib/), you might need `sudo` to install successfully. - -``` -npm install -g stylus nib -``` - -When that finished, you can simply regenerate the CSS files by building mdBook with the following command: - -``` -cargo build --features=regenerate-css -``` - -This should automatically call the appropriate stylus command to recompile the files to CSS and include them in the project. - ### Making a pull-request When you feel comfortable that your changes could be integrated into mdBook, you can create a pull-request on GitHub. diff --git a/Cargo.toml b/Cargo.toml index a9a6ea4e..dc58220c 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -8,7 +8,6 @@ repository = "https://github.com/rust-lang-nursery/mdBook" keywords = ["book", "gitbook", "rustbook", "markdown"] license = "MPL-2.0" readme = "README.md" -build = "build.rs" exclude = [ "book-example/*", "src/theme/stylus/**", @@ -54,9 +53,6 @@ ws = { version = "0.7", optional = true} elasticlunr-rs = { version = "1", optional = true } ammonia = { version = "1.1", optional = true } -[build-dependencies] -error-chain = "0.11" - [dev-dependencies] select = "0.4" pretty_assertions = "0.4" diff --git a/build.rs b/build.rs deleted file mode 100644 index 06c30a2c..00000000 --- a/build.rs +++ /dev/null @@ -1,98 +0,0 @@ -// build.rs - -use std::env; -use std::path::Path; -#[macro_use] -extern crate error_chain; - -#[cfg(windows)] -mod execs { - use std::process::Command; - - pub fn cmd(program: &str) -> Command { - let mut cmd = Command::new("cmd"); - cmd.args(&["/c", program]); - cmd - } -} -#[cfg(not(windows))] -mod execs { - use std::process::Command; - - pub fn cmd(program: &str) -> Command { - Command::new(program) - } -} - - -error_chain!{ - foreign_links { - Io(std::io::Error); - } -} - -fn program_exists(program: &str) -> Result<()> { - execs::cmd(program).arg("-v") - .output() - .chain_err(|| format!("Please install '{}'!", program))?; - Ok(()) -} - -fn npm_package_exists(package: &str) -> Result<()> { - let status = execs::cmd("npm").args(&["list", "-g"]) - .arg(package) - .output(); - - match status { - Ok(ref out) if out.status.success() => Ok(()), - _ => { - bail!("Missing npm package '{0}' install with: 'npm -g install {0}'", - package) - } - } -} - -pub enum Resource<'a> { - Program(&'a str), - Package(&'a str), -} -use Resource::{Package, Program}; - -impl<'a> Resource<'a> { - pub fn exists(&self) -> Result<()> { - match *self { - Program(name) => program_exists(name), - Package(name) => npm_package_exists(name), - } - } -} - -fn run() -> Result<()> { - if let Ok(_) = env::var("CARGO_FEATURE_REGENERATE_CSS") { - // Check dependencies - Program("npm").exists()?; - Program("node").exists().or(Program("nodejs").exists())?; - Package("nib").exists()?; - Package("stylus").exists()?; - - // Compile stylus stylesheet to css - let manifest_dir = env::var("CARGO_MANIFEST_DIR") - .chain_err(|| "Please run the script with: 'cargo build'!")?; - let theme_dir = Path::new(&manifest_dir).join("src/theme/"); - let stylus_dir = theme_dir.join("stylus/book.styl"); - - if !execs::cmd("stylus").arg(stylus_dir) - .arg("--out") - .arg(theme_dir) - .arg("--use") - .arg("nib") - .status()? - .success() - { - bail!("Stylus encountered an error"); - } - } - Ok(()) -} - -quick_main!(run); diff --git a/src/book/init.rs b/src/book/init.rs index 909b8cbf..c7e2f38d 100644 --- a/src/book/init.rs +++ b/src/book/init.rs @@ -127,8 +127,17 @@ impl BookBuilder { let mut index = File::create(themedir.join("index.hbs"))?; index.write_all(theme::INDEX)?; - let mut css = File::create(themedir.join("book.css"))?; - css.write_all(theme::CSS)?; + let mut chrome_css = File::create(themedir.join("chrome.css"))?; + chrome_css.write_all(theme::CHROME_CSS)?; + + let mut general_css = File::create(themedir.join("general.css"))?; + general_css.write_all(theme::GENERAL_CSS)?; + + let mut variables_css = File::create(themedir.join("variables.css"))?; + variables_css.write_all(theme::VARIABLES_CSS)?; + + let mut print_css = File::create(themedir.join("print.css"))?; + print_css.write_all(theme::PRINT_CSS)?; let mut favicon = File::create(themedir.join("favicon.png"))?; favicon.write_all(theme::FAVICON)?; diff --git a/src/renderer/html_handlebars/hbs_renderer.rs b/src/renderer/html_handlebars/hbs_renderer.rs index 8e554ac3..e2eecbbc 100644 --- a/src/renderer/html_handlebars/hbs_renderer.rs +++ b/src/renderer/html_handlebars/hbs_renderer.rs @@ -144,7 +144,10 @@ impl HtmlHandlebars { use utils::fs::write_file; write_file(destination, "book.js", &theme.js)?; - write_file(destination, "book.css", &theme.css)?; + write_file(destination, "css/chrome.css", &theme.chrome_css)?; + write_file(destination, "css/general.css", &theme.general_css)?; + write_file(destination, "css/print.css", &theme.print_css)?; + write_file(destination, "css/variables.css", &theme.variables_css)?; write_file(destination, "favicon.png", &theme.favicon)?; write_file(destination, "highlight.css", &theme.highlight_css)?; write_file(destination, "tomorrow-night.css", &theme.tomorrow_night_css)?; diff --git a/src/theme/css/book.css b/src/theme/css/book.css deleted file mode 100644 index f077bb4f..00000000 --- a/src/theme/css/book.css +++ /dev/null @@ -1,11 +0,0 @@ - -@import "general.css"; -@import "sidebar.css"; -@import "page.css"; -@import "menu.css"; -@import "nav-icons.css"; -@import "theme-popup.css"; -@import "themes/base.css"; -@import "print.css"; -@import "tooltip.css"; -@import "searchbar.css"; diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css new file mode 100644 index 00000000..3af37c25 --- /dev/null +++ b/src/theme/css/chrome.css @@ -0,0 +1,364 @@ +/* Sidebar */ + +.sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: var(--sidebar-width); + overflow-y: auto; + padding: 10px 10px; + font-size: 0.875em; + box-sizing: border-box; + -webkit-overflow-scrolling: touch; + overscroll-behavior-y: contain; + background-color: var(--sidebar-bg); + color: var(--sidebar-fg); + + /* Animation: slide away */ + transition: transform 0.5s +} + +.sidebar::-webkit-scrollbar { + background: var(--sidebar-bg); +} + +.sidebar::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} + +.sidebar code { + line-height: 2em; +} + +.sidebar-hidden .sidebar { + transform: translateX(calc(0px - var(--sidebar-width))); +} + +.chapter { + list-style: none outside none; + padding-left: 0; + line-height: 2.2em; +} + +.chapter li { + color: var(--sidebar-non-existant); +} + +.chapter li a { + color: var(--sidebar-fg); + display: block; + padding: 0; + text-decoration: none; +} + +.chapter li .active, +a:hover { + /* Animate color change */ + color: var(--sidebar-active); +} + +@media (-moz-touch-enabled: 1), (pointer: coarse) { + .chapter li a { + padding: 5px 0; + } +} + +.chapter li a:hover { + text-decoration: none; +} + +.chapter .spacer { + background-color: var(--sidebar-spacer); + width: 100%; + height: 3px; + margin: 5px 0px; +} + +@media (-moz-touch-enabled: 1), (pointer: coarse) { + .chapter .spacer { + margin: 10px 0; + } +} + +.section { + list-style: none outside none; + padding-left: 20px; + line-height: 1.9em; +} + +.section li { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +/* Menu */ + +#menu-bar { + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 101; + margin: auto (- var(--page-padding)); +} + +#menu-bar > #menu-bar-sticky-container { + display: flex; + flex-wrap: wrap; + transition: transform 0.5s, border-bottom-color 0.5s; + background-color: var(--bg); + border-bottom-color: var(--bg); + border-bottom-width: 1px; + border-bottom-style: solid; +} + +#menu-bar.bordered > #menu-bar-sticky-container { + border-bottom-color: var(--table-border-color); +} + +#menu-bar i, .icon-button { + position: relative; + margin: 0 10px; + z-index: 10; + line-height: 50px; + + transition: color 0.5s; +} + +#menu-bar i:hover, +#menu-bar .icon-button:hover { + cursor: pointer; +} + +html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { + transform: translateY(-60px); +} + +.menu-title { + display: inline-block; + font-weight: 200; + font-size: 20px; + line-height: 50px; + text-align: center; + margin: 0; + flex: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; +} + +.menu-bar, +.menu-bar:visited, +.nav-chapters, +.nav-chapters:visited, +.mobile-nav-chapters, +.mobile-nav-chapters:visited, +.menu-bar .icon-button, +.menu-bar a i { + color: var(--icons); +} + +.menu-bar i:hover, +.menu-bar .icon-button:hover, +.nav-chapters:hover, +.mobile-nav-chapters i:hover { + color: var(--icons-hover); +} + +.mobile-nav-chapters i:hover { + color: var(--sidebar-fg); +} + +.mobile-nav-chapters { + background-color: var(--sidebar-bg); +} + +/* Nav Icons */ + +.nav-chapters { + font-size: 2.5em; + text-align: center; + text-decoration: none; + + position: fixed; + 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; +} + +.nav-chapters:hover { text-decoration: none; } + +.nav-wrapper { + margin-top: 50px; + display: none; +} + +.mobile-nav-chapters { + font-size: 2.5em; + text-align: center; + text-decoration: none; + width: 90px; + border-radius: 5px; +} + +.previous { + float: left; +} + +.next { + float: right; + right: var(--page-padding); +} + +@media only screen and (max-width: var(--page-plus-sidebar-width)) { + .nav-wide-wrapper { display: none; } + .nav-wrapper { display: block; } +} + +@media only screen and (max-width: calc(var(--page-plus-sidebar-width) + var(--sidebar-width))) { + .sidebar-visible .nav-wide-wrapper { display: none; } + .sidebar-visible .nav-wrapper { display: block; } +} + +/* Theme Popup */ + +.theme-popup { + position: absolute; + left: 10px; + + z-index: 1000; + + border-radius: 4px; + font-size: 0.7em; + + color: var(--fg); + background: var(--theme-popup-bg); + border: 1px solid var(--theme-popup-border); + margin: 0; + padding: 0; + list-style: none; + display: none; +} + +.theme-popup .default { + color: var(--icons); +} + +.theme-popup .theme { + display: inline; + border: 0; + margin: 0; + padding: 2px 10px; + line-height: 25px; + white-space: nowrap; + text-align: left; + cursor: pointer; + color: inherit; + background: inherit; + font-size: inherit; +} + +.theme-popup .theme:hover { + background-color: var(--theme-hover); +} + +.theme-popup .theme:hover:first-child, +.theme-popup .theme:hover:last-child { + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +/* Searchbar */ + +#searchresults a { + text-decoration: none; +} + +mark { + background-color: var(--search-mark-bg); + border-radius: 2px; + padding: 0 3px 1px 3px; + margin: 0 -3px -1px -3px; + transition: background-color 300ms linear; +} + +.fade-out { + background-color: rgba(0,0,0,0) !important +} + +.searchbar-outer { + display: none; + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); +} + +#searchbar { + display: block; + width: 100%; + margin: 5px auto 0px auto; + padding: 10px 16px; + transition: box-shadow 300ms ease-in-out; + border: 1px solid var(--searchbar-border-color); + border-radius: 3px; + background-color: var(--searchbar-bg); + color: var(--searchbar-fg); +} + +#searchbar:focus, +#searchbar.active { + box-shadow: 0 0 3px var(--searchbar-shadow-color); +} + +.searchresults-header { + color: var(--searchresults-header-fg); + font-weight: bold; + font-size: 1em; + padding: 18px 0 0 5px; +} + +.searchresults-outer { + border-bottom: 1px dashed var(--searchresults-border-color); + display: none; + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); +} + +ul#searchresults { + list-style: none; + padding-left: 20px; +} + +ul#searchresults li { + margin: 10px 0px; + padding: 2px; + border-radius: 2px; +} + +ul#searchresults li.focus { + background-color: var(--searchresults-li-bg); +} + +ul#searchresults span.teaser { + display: block; + clear: both; + margin: 5px 0 0 20px; + font-size: 0.8em; +} + +ul#searchresults span.teaser em { + font-weight: bold; + font-style: normal; +} diff --git a/src/theme/css/general.css b/src/theme/css/general.css index 37a4c82f..049c0a00 100644 --- a/src/theme/css/general.css +++ b/src/theme/css/general.css @@ -1,6 +1,9 @@ + html { font-family: "Open Sans", sans-serif; color: #333; + color: var(--fg); + background-color: var(--bg); } body { @@ -54,9 +57,22 @@ table td { padding: 3px 20px; border: 1px solid; } - +table thead { + background: var(--table-header-bg); +} table thead td { font-weight: 700; + border: none; +} +table thead tr { + border: 1px var(--table-header-bg) solid; +} +table td { + border-color: var(--table-border-color); +} +/* Alternate background colors for rows */ +table tbody tr:nth-child(2n) { + background: var(--table-alternate-bg); } :not(.footnote-definition) + .footnote-definition, @@ -72,3 +88,155 @@ table thead td { .footnote-definition p { display: inline; } + +::-webkit-scrollbar { + background: var(--bg); +} + +::-webkit-scrollbar-thumb { + background: var(--scrollbar); +} + +.icon-button { + border: none; + background: none; + padding: 0; + color: inherit; +} + +.icon-button i { + margin: 0; +} + + +#searchresults a, +.content a:link, +a:visited, +a > .hljs { + color: var(--links); +} + +blockquote { + margin: 20px 0; + padding: 0 20px; + color: var(--fg); + background-color: var(--quote-bg); + border-top: .1em solid var(--quote-border); + border-bottom: .1em solid var(--quote-border); +} + +/* Inline code */ +:not(pre) > .hljs { + display: inline-block; + vertical-align: middle; + padding: 0.1em 0.3em; + border-radius: 3px; + color: var(--inline-code-color); +} + +a:hover > .hljs { + text-decoration: underline; +} + +pre { + position: relative; +} + +pre > .buttons { + position: absolute; + z-index: 100; + right: 5px; + top: 5px; + + color: var(--sidebar-fg); + cursor: pointer; +} +pre > .buttons :hover { + color: var(--sidebar-active); +} +pre > .buttons i { + margin-left: 8px; +} +pre > .buttons button { + color: inherit; + background: transparent; + border: none; + cursor: inherit; +} + +pre > .result { + margin-top: 10px; +} + +.tooltiptext { + position: absolute; + visibility: hidden; + color: #fff; + background-color: #333; + transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ + left: -8px; /* Half of the width of the icon */ + top: -35px; + font-size: 0.8em; + text-align: center; + border-radius: 6px; + padding: 5px 8px; + margin: 5px; + z-index: 1000; +} + +.tooltipped .tooltiptext { + visibility: visible; +} + +.page-wrapper { + box-sizing: border-box; + + /* Animation: slide away */ + transition: padding-left 0.5s, margin-left 0.5s; +} + +.sidebar-visible .page-wrapper { + padding-left: var(--sidebar-width); +} + +@media only screen and (max-width: var(--page-plus-sidebar-width) - 1) { + .sidebar-visible .page-wrapper { + padding-left: 0; + margin-left: var(--sidebar-width); + } +} + +.page { + outline: 0; + padding: 0 var(--page-padding); +} + +.content { + margin-left: auto; + margin-right: auto; + max-width: var(--content-max-width); + padding-bottom: 50px; +} + +.content a { + text-decoration: none; +} + +.content a:hover { + text-decoration: underline; +} + +.content img { + max-width: 100%; +} + +.content .header:link, +.content .header:visited { + color: var(--fg); + pointer: cursor; +} + +.content .header:link, +.content .header:visited:hover { + text-decoration: none; +} diff --git a/src/theme/css/menu.css b/src/theme/css/menu.css deleted file mode 100644 index 458f07c5..00000000 --- a/src/theme/css/menu.css +++ /dev/null @@ -1,44 +0,0 @@ -#menu-bar { - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 101; -} - -#menu-bar > #menu-bar-sticky-container { - display: flex; - flex-wrap: wrap; - transition: transform 0.5s, border-bottom-color 0.5s; -} - -#menu-bar i, .icon-button { - position: relative; - margin: 0 10px; - z-index: 10; - line-height: 50px; - - transition: color 0.5s; -} - -#menu-bar i:hover, -#menu-bar .icon-button:hover { - cursor: pointer; -} - -html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container { - transform: translateY(-60px); -} - -.menu-title { - display: inline-block; - font-weight: 200; - font-size: 20px; - line-height: 50px; - text-align: center; - margin: 0; - flex: 1; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - cursor: pointer; -} diff --git a/src/theme/css/nav-icons.css b/src/theme/css/nav-icons.css deleted file mode 100644 index eb066f98..00000000 --- a/src/theme/css/nav-icons.css +++ /dev/null @@ -1,53 +0,0 @@ -.nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; - - position: fixed; - 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; -} - -.nav-chapters:hover { text-decoration: none; } - -.nav-wrapper { - margin-top: 50px; - display: none; -} - -.mobile-nav-chapters { - font-size: 2.5em; - text-align: center; - text-decoration: none; - width: 90px; - border-radius: 5px; -} - -.previous { - float: left; -} - -.next { - float: right; - right: var(--page-padding); -} - -@media only screen and (max-width: var(--page-plus-sidebar-width)) { - .nav-wide-wrapper { display: none; } - .nav-wrapper { display: block; } -} - -@media only screen and (max-width: var(--page-plus-sidebar-width) + var(--sidebar-width)) { - .sidebar-visible .nav-wide-wrapper { display: none; } - .sidebar-visible .nav-wrapper { display: block; } -} diff --git a/src/theme/css/page.css b/src/theme/css/page.css deleted file mode 100644 index 98b702d0..00000000 --- a/src/theme/css/page.css +++ /dev/null @@ -1,43 +0,0 @@ -@import "variables.css"; - -.page-wrapper { - box-sizing: border-box; - - /* Animation: slide away */ - transition: padding-left 0.5s, margin-left 0.5s; -} - -.sidebar-visible .page-wrapper { - padding-left: var(--sidebar-width); -} - -@media only screen and (max-width: var(--page-plus-sidebar-width) - 1) { - .sidebar-visible .page-wrapper { - padding-left: 0; - margin-left: var(--sidebar-width); - } -} - -.page { - outline: 0; - padding: 0 var(--page-padding); -} - -.content { - margin-left: auto; - margin-right: auto; - max-width: var(--content-max-width); - padding-bottom: 50px; -} - -.content a { - text-decoration: none; -} - -.content a:hover { - text-decoration: underline; -} - -.content img { - max-width: 100%; -} diff --git a/src/theme/css/print.css b/src/theme/css/print.css index 3f4dbceb..4a044f29 100644 --- a/src/theme/css/print.css +++ b/src/theme/css/print.css @@ -1,55 +1,53 @@ -@media only print { - #sidebar, - #menu-bar, - .nav-chapters, - .mobile-nav-chapters { - display: none - } - - #page-wrapper { - left: 0; - overflow-y: initial; - } - - #page-wrapper.page-wrapper { - padding-left: 0px; - } - - #content { - max-width: none; - margin: 0; - padding: 0; - } - - .page { - overflow-y: initial; - } - - code { - background-color: #666666; - border-radius: 5px; - - /* Force background to be printed in Chrome */ - -webkit-print-color-adjust: exact; - } - - pre > .buttons { - z-index: 2; - } - - 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; - } - - pre, code { - page-break-inside: avoid; - white-space: pre-wrap; - } +#sidebar, +#menu-bar, +.nav-chapters, +.mobile-nav-chapters { + display: none +} + +#page-wrapper { + left: 0; + overflow-y: initial; +} + +#page-wrapper.page-wrapper { + padding-left: 0px; +} + +#content { + max-width: none; + margin: 0; + padding: 0; +} + +.page { + overflow-y: initial; +} + +code { + background-color: #666666; + border-radius: 5px; + + /* Force background to be printed in Chrome */ + -webkit-print-color-adjust: exact; +} + +pre > .buttons { + z-index: 2; +} + +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; +} + +pre, code { + page-break-inside: avoid; + white-space: pre-wrap; } diff --git a/src/theme/css/searchbar.css b/src/theme/css/searchbar.css deleted file mode 100644 index 9823b344..00000000 --- a/src/theme/css/searchbar.css +++ /dev/null @@ -1,67 +0,0 @@ -@import "variables.css"; - -#searchresults a { - text-decoration: none; -} - -mark { - border-radius: 2px; - padding: 0 3px 1px 3px; - margin: 0 -3px -1px -3px; - transition: background-color 300ms linear; -} - -.fade-out { - background-color: rgba(0,0,0,0) !important -} - -.searchbar-outer { - display: none; - margin-left: auto; - margin-right: auto; - max-width: var(--content-max-width); -} - -#searchbar { - display: block; - width: 100%; - margin: 5px auto 0px auto; - padding: 10px 16px; - transition: box-shadow 300ms ease-in-out; -} - -.searchresults-header { - font-weight: bold; - font-size: 1em; - padding: 18px 0 0 5px; -} - -.searchresults-outer { - display: none; - margin-left: auto; - margin-right: auto; - max-width: var(--content-max-width); -} - -ul#searchresults { - list-style: none; - padding-left: 20px; -} - -ul#searchresults li { - margin: 10px 0px; - padding: 2px; - border-radius: 2px; -} - -ul#searchresults span.teaser { - display: block; - clear: both; - margin: 5px 0 0 20px; - font-size: 0.8em; -} - -ul#searchresults span.teaser em { - font-weight: bold; - font-style: normal; -} diff --git a/src/theme/css/sidebar.css b/src/theme/css/sidebar.css deleted file mode 100644 index 40e19366..00000000 --- a/src/theme/css/sidebar.css +++ /dev/null @@ -1,72 +0,0 @@ -@import "variables.css"; - -.sidebar { - position: fixed; - left: 0; - top: 0; - bottom: 0; - width: var(--sidebar-width); - overflow-y: auto; - padding: 10px 10px; - font-size: 0.875em; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - overscroll-behavior-y: contain; - - /* Animation: slide away */ - transition: transform 0.5s -} - -.sidebar code { - line-height: 2em; -} - -.sidebar-hidden .sidebar { - transform: translateX(- var(--sidebar-width)); -} - -.chapter { - list-style: none outside none; - padding-left: 0; - line-height: 2.2em; -} - -.chapter li a { - display: block; - padding: 0; - text-decoration: none; -} - -@media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter li a { - padding: 5px 0; - } -} - -.chapter li a:hover { - text-decoration: none; -} - -.chapter .spacer { - width: 100%; - height: 3px; - margin: 5px 0px; -} - -@media (-moz-touch-enabled: 1), (pointer: coarse) { - .chapter .spacer { - margin: 10px 0; - } -} - -.section { - list-style: none outside none; - padding-left: 20px; - line-height: 1.9em; -} - -.section li { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; -} diff --git a/src/theme/css/theme-popup.css b/src/theme/css/theme-popup.css deleted file mode 100644 index 50521546..00000000 --- a/src/theme/css/theme-popup.css +++ /dev/null @@ -1,29 +0,0 @@ -.theme-popup { - position: absolute; - left: 10px; - - z-index: 1000; - - border-radius: 4px; - font-size: 0.7em; -} - -.theme-popup .theme { - display: inline; - border: 0; - margin: 0; - padding: 2px 10px; - line-height: 25px; - white-space: nowrap; - text-align: left; - cursor: pointer; - color: inherit; - background: inherit; - font-size: inherit; -} - -.theme-popup .theme:hover:first-child, -.theme-popup .theme:hover:last-child { - border-top-left-radius: inherit; - border-top-right-radius: inherit; -} \ No newline at end of file diff --git a/src/theme/css/themes/ayu.css b/src/theme/css/themes/ayu.css deleted file mode 100644 index 235c57a5..00000000 --- a/src/theme/css/themes/ayu.css +++ /dev/null @@ -1,40 +0,0 @@ - -.ayu { - --bg: #0f1419; - --fg: #c5c5c5; - - --sidebar-bg: #14191f; - --sidebar-fg: #c8c9db; - --sidebar-non-existant: #5c6773; - --sidebar-active: #ffb454; - --sidebar-spacer: #2d334f; - - --scrollbar: var(--sidebar-fg); - - --icons: #737480; - --icons-hover: #b7b9cc; - - --links: #0096cf; - - --inline-code-color: #ffb454; - - --theme-popup-bg: #14191f; - --theme-popup-border: #5c6773; - --theme-hover: #191f26; - - --quote-bg: #262933; - --quote-border: lighten(var(--quote-bg), 5%); - - --table-border-color: lighten(var(--bg), 5%); - --table-header-bg: lighten(var(--bg), 20%); - --table-alternate-bg: lighten(var(--bg), 3%); - - --searchbar-border-color: #848484; - --searchbar-bg: #424242; - --searchbar-fg: #fff; - --searchbar-shadow-color: #d4c89f; - --searchresults-header-fg: #666; - --searchresults-border-color: #888; - --searchresults-li-bg: #252932; - --search-mark-bg: #e3b171; -} diff --git a/src/theme/css/themes/base.css b/src/theme/css/themes/base.css deleted file mode 100644 index 47ea46ca..00000000 --- a/src/theme/css/themes/base.css +++ /dev/null @@ -1,239 +0,0 @@ - -@import "ayu.css"; -@import "coal.css"; -@import "light.css"; -@import "navy.css"; -@import "rust.css"; - -* { - color: var(--fg); - background-color: var(--bg); -} - -.content .header:link, -.content .header:visited { - color: var(--fg); - pointer: cursor; -} - -.content .header:link, -.content .header:visited:hover { - text-decoration: none; -} - -.menu-bar { - margin: auto (- var(--page-padding)); -} - -.menu-bar > #menu-bar-sticky-container { - background-color: var(--bg); - border-bottom-color: var(--bg); - border-bottom-width: 1px; - border-bottom-style: solid; -} - -.menu-bar.bordered > #menu-bar-sticky-container { - border-bottom-color: var(--table-border-color); -} - -.sidebar { - background-color: var(--sidebar-bg); - color: var(--sidebar-fg); -} - -.sidebar::-webkit-scrollbar { - background: var(--sidebar-bg); -} - -.sidebar::-webkit-scrollbar-thumb { - background: var(--scrollbar); -} - -.chapter li { - color: var(--sidebar-non-existant); -} - -.chapter li a { - color: var(--sidebar-fg); -} - -.chapter li .active, -a:hover { - /* Animate color change */ - color: var(--sidebar-active); -} - -.chapter .spacer { - background-color: var(--sidebar-spacer); -} - -.menu-bar, -.menu-bar:visited, -.nav-chapters, -.nav-chapters:visited, -.mobile-nav-chapters, -.mobile-nav-chapters:visited, -.menu-bar .icon-button, -.menu-bar a i { - color: var(--icons); -} - -.menu-bar i:hover, -.menu-bar .icon-button:hover, -.nav-chapters:hover, -.mobile-nav-chapters i:hover { - color: var(--icons-hover); -} - -.mobile-nav-chapters i:hover { - color: var(--sidebar-fg); -} - -.mobile-nav-chapters { - background-color: var(--sidebar-bg); -} - -#searchresults a, -.content a:link, -a:visited, -a > .hljs { - color: var(--links); -} - -.theme-popup { - color: var(--fg); - background: var(--theme-popup-bg); - border: 1px solid var(--theme-popup-border); - margin: 0; - padding: 0; - list-style: none; - display: none; -} - -.theme-popup .theme:hover { - background-color: var(--theme-hover); -} - -.theme-popup .default { - color: var(--icons); -} - -blockquote { - margin: 20px 0; - padding: 0 20px; - color: var(--fg); - background-color: var(--quote-bg); - border-top: .1em solid var(--quote-border); - border-bottom: .1em solid var(--quote-border); -} - - -table td { - border-color: var(--table-border-color); -} - -/* Alternate background colors for rows */ -table tbody tr:nth-child(2n) { - background: var(--table-alternate-bg); -} -table thead { - background: var(--table-header-bg); -} -table thead td { - border: none; -} -table thead tr { - border: 1px var(--table-header-bg) solid; -} - - -/* Inline code */ -:not(pre) > .hljs { - display: inline-block; - vertical-align: middle; - padding: 0.1em 0.3em; - border-radius: 3px; - color: var(--inline-code-color); -} - -a:hover > .hljs { - text-decoration: underline; -} - -pre { - position: relative; -} - -pre > .buttons { - position: absolute; - z-index: 100; - right: 5px; - top: 5px; - - color: var(--sidebar-fg); - cursor: pointer; -} -pre > .buttons :hover { - color: var(--sidebar-active); -} -pre > .buttons i { - margin-left: 8px; -} -pre > .buttons button { - color: inherit; - background: transparent; - border: none; - cursor: inherit; -} - -pre > .result { - margin-top: 10px; -} - -.icon-button { - border: none; - background: none; - padding: 0; - color: inherit; -} - -.icon-button i { - margin: 0; -} - -::-webkit-scrollbar { - background: var(--bg); -} - -::-webkit-scrollbar-thumb { - background: var(--scrollbar); -} - -/* Search */ -#searchbar { - border: 1px solid var(--searchbar-border-color); - border-radius: 3px; - background-color: var(--searchbar-bg); - color: var(--searchbar-fg); -} - -#searchbar:focus, -#searchbar.active { - box-shadow: 0 0 3px var(--searchbar-shadow-color); -} - -.searchresults-header { - color: var(--searchresults-header-fg); -} - -.searchresults-outer { - border-bottom: 1px dashed var(--searchresults-border-color); -} - -ul#searchresults li.focus { - background-color: var(--searchresults-li-bg); -} - -mark { - background-color: var(--search-mark-bg); -} diff --git a/src/theme/css/themes/coal.css b/src/theme/css/themes/coal.css deleted file mode 100644 index 358bd67c..00000000 --- a/src/theme/css/themes/coal.css +++ /dev/null @@ -1,40 +0,0 @@ - -.coal { - --bg: #141617; - --fg: #98a3ad; - - --sidebar-bg: #292c2f; - --sidebar-fg: #a1adb8; - --sidebar-non-existant: #505254; - --sidebar-active: #3473ad; - --sidebar-spacer: #393939; - - --scrollbar: var(--sidebar-fg); - - --icons: #43484d; - --icons-hover: #b3c0cc; - - --links: #2b79a2; - - --inline-code-color: #c5c8c6;; - - --theme-popup-bg: #141617; - --theme-popup-border: #43484d; - --theme-hover: #1f2124; - - --quote-bg: #242637; - --quote-border: lighten(var(--quote-bg), 5%); - - --table-border-color: lighten(var(--bg), 5%); - --table-header-bg: lighten(var(--bg), 20%); - --table-alternate-bg: lighten(var(--bg), 3%); - - --searchbar-border-color: #aaa; - --searchbar-bg: #b7b7b7; - --searchbar-fg: #000; - --searchbar-shadow-color: #aaa; - --searchresults-header-fg: #666; - --searchresults-border-color: #98a3ad; - --searchresults-li-bg: #2b2b2f; - --search-mark-bg: #355c7d; -} diff --git a/src/theme/css/themes/light.css b/src/theme/css/themes/light.css deleted file mode 100644 index 70f8bce7..00000000 --- a/src/theme/css/themes/light.css +++ /dev/null @@ -1,40 +0,0 @@ - -.light { - --bg: #ffffff; - --fg: #333333; - - --sidebar-bg: #fafafa; - --sidebar-fg: #364149; - --sidebar-non-existant: #aaaaaa; - --sidebar-active: #008cff; - --sidebar-spacer: #f4f4f4; - - --scrollbar: #cccccc; - - --icons: #cccccc; - --icons-hover: #333333; - - --links: #4183c4; - - --inline-code-color: #6e6b5e; - - --theme-popup-bg: #fafafa; - --theme-popup-border: #cccccc; - --theme-hover: #e6e6e6; - - --quote-bg: #f2f7f9; - --quote-border: darken(var(--quote-bg), 5%); - - --table-border-color: darken(var(--bg), 5%); - --table-header-bg: darken(var(--bg), 20%); - --table-alternate-bg: darken(var(--bg), 3%); - - --searchbar-border-color: #aaa; - --searchbar-bg: #fafafa; - --searchbar-fg: #000; - --searchbar-shadow-color: #aaa; - --searchresults-header-fg: #666; - --searchresults-border-color: #888; - --searchresults-li-bg: #e4f2fe; - --search-mark-bg: #a2cff5; -} diff --git a/src/theme/css/themes/navy.css b/src/theme/css/themes/navy.css deleted file mode 100644 index 7e6c165f..00000000 --- a/src/theme/css/themes/navy.css +++ /dev/null @@ -1,40 +0,0 @@ - -.navy { - --bg: #161923; - --fg: #bcbdd0; - - --sidebar-bg: #282d3f; - --sidebar-fg: #c8c9db; - --sidebar-non-existant: #505274; - --sidebar-active: #2b79a2; - --sidebar-spacer: #2d334f; - - --scrollbar: var(--sidebar-fg); - - --icons: #737480; - --icons-hover: #b7b9cc; - - --links: #2b79a2; - - --inline-code-color: #c5c8c6;; - - --theme-popup-bg: #161923; - --theme-popup-border: #737480; - --theme-hover: #282e40; - - --quote-bg: #262933; - --quote-border: lighten(var(--quote-bg), 5%); - - --table-border-color: lighten(var(--bg), 5%); - --table-header-bg: lighten(var(--bg), 20%); - --table-alternate-bg: lighten(var(--bg), 3%); - - --searchbar-border-color: #aaa; - --searchbar-bg: #aeaec6; - --searchbar-fg: #000; - --searchbar-shadow-color: #aaa; - --searchresults-header-fg: #5f5f71; - --searchresults-border-color: #5c5c68; - --searchresults-li-bg: #242430; - --search-mark-bg: #a2cff5; -} diff --git a/src/theme/css/themes/rust.css b/src/theme/css/themes/rust.css deleted file mode 100644 index dfc0bc23..00000000 --- a/src/theme/css/themes/rust.css +++ /dev/null @@ -1,40 +0,0 @@ - -.rust { - --bg: #e1e1db; - --fg: #262625; - - --sidebar-bg: #3b2e2a; - --sidebar-fg: #c8c9db; - --sidebar-non-existant: #505254; - --sidebar-active: #e69f67; - --sidebar-spacer: #45373a; - - --scrollbar: var(--sidebar-fg); - - --icons: #737480; - --icons-hover: #262625; - - --links: #2b79a2; - - --inline-code-color: #6e6b5e;; - - --theme-popup-bg: #e1e1db; - --theme-popup-border: #b38f6b; - --theme-hover: #99908a; - - --quote-bg: #c1c1bb; - --quote-border: darken(var(--quote-bg), 5%); - - --table-border-color: darken(var(--bg), 5%); - --table-header-bg: #b3a497; - --table-alternate-bg: darken(var(--bg), 3%); - - --searchbar-border-color: #aaa; - --searchbar-bg: #fafafa; - --searchbar-fg: #000; - --searchbar-shadow-color: #aaa; - --searchresults-header-fg: #666; - --searchresults-border-color: #888; - --searchresults-li-bg: #dec2a2; - --search-mark-bg: #e69f67; -} diff --git a/src/theme/css/tooltip.css b/src/theme/css/tooltip.css deleted file mode 100644 index f8f89f98..00000000 --- a/src/theme/css/tooltip.css +++ /dev/null @@ -1,18 +0,0 @@ -.tooltiptext { - position: absolute; - visibility: hidden; - color: #fff; - background-color: #333; - transform: translateX(-50%); /* Center by moving tooltip 50% of its width left */ - left: -8px; /* Half of the width of the icon */ - top: -35px; - font-size: 0.8em; - text-align: center; - border-radius: 6px; - padding: 5px 8px; - margin: 5px; - z-index: 1000; -} -.tooltipped .tooltiptext { - visibility: visible; -} diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css index 44c466e9..478a29d1 100644 --- a/src/theme/css/variables.css +++ b/src/theme/css/variables.css @@ -2,5 +2,206 @@ --sidebar-width: 300px; --page-padding: 15px; --content-max-width: 750px; - --page-plus-sidebar-width: var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2; -} \ No newline at end of file + --page-plus-sidebar-width: calc(var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2); +} + +/* Themes */ +.ayu { + --bg: #0f1419; + --fg: #c5c5c5; + + --sidebar-bg: #14191f; + --sidebar-fg: #c8c9db; + --sidebar-non-existant: #5c6773; + --sidebar-active: #ffb454; + --sidebar-spacer: #2d334f; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #b7b9cc; + + --links: #0096cf; + + --inline-code-color: #ffb454; + + --theme-popup-bg: #14191f; + --theme-popup-border: #5c6773; + --theme-hover: #191f26; + + --quote-bg: #262933; + --quote-border: lighten(var(--quote-bg), 5%); + + --table-border-color: lighten(var(--bg), 5%); + --table-header-bg: lighten(var(--bg), 20%); + --table-alternate-bg: lighten(var(--bg), 3%); + + --searchbar-border-color: #848484; + --searchbar-bg: #424242; + --searchbar-fg: #fff; + --searchbar-shadow-color: #d4c89f; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #252932; + --search-mark-bg: #e3b171; +} + +.coal { + --bg: #141617; + --fg: #98a3ad; + + --sidebar-bg: #292c2f; + --sidebar-fg: #a1adb8; + --sidebar-non-existant: #505254; + --sidebar-active: #3473ad; + --sidebar-spacer: #393939; + + --scrollbar: var(--sidebar-fg); + + --icons: #43484d; + --icons-hover: #b3c0cc; + + --links: #2b79a2; + + --inline-code-color: #c5c8c6;; + + --theme-popup-bg: #141617; + --theme-popup-border: #43484d; + --theme-hover: #1f2124; + + --quote-bg: #242637; + --quote-border: lighten(var(--quote-bg), 5%); + + --table-border-color: lighten(var(--bg), 5%); + --table-header-bg: lighten(var(--bg), 20%); + --table-alternate-bg: lighten(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #b7b7b7; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #98a3ad; + --searchresults-li-bg: #2b2b2f; + --search-mark-bg: #355c7d; +} + +.light { + --bg: #ffffff; + --fg: #333333; + + --sidebar-bg: #fafafa; + --sidebar-fg: #364149; + --sidebar-non-existant: #aaaaaa; + --sidebar-active: #008cff; + --sidebar-spacer: #f4f4f4; + + --scrollbar: #cccccc; + + --icons: #cccccc; + --icons-hover: #333333; + + --links: #4183c4; + + --inline-code-color: #6e6b5e; + + --theme-popup-bg: #fafafa; + --theme-popup-border: #cccccc; + --theme-hover: #e6e6e6; + + --quote-bg: #f2f7f9; + --quote-border: darken(var(--quote-bg), 5%); + + --table-border-color: darken(var(--bg), 5%); + --table-header-bg: darken(var(--bg), 20%); + --table-alternate-bg: darken(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #e4f2fe; + --search-mark-bg: #a2cff5; +} + +.navy { + --bg: #161923; + --fg: #bcbdd0; + + --sidebar-bg: #282d3f; + --sidebar-fg: #c8c9db; + --sidebar-non-existant: #505274; + --sidebar-active: #2b79a2; + --sidebar-spacer: #2d334f; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #b7b9cc; + + --links: #2b79a2; + + --inline-code-color: #c5c8c6;; + + --theme-popup-bg: #161923; + --theme-popup-border: #737480; + --theme-hover: #282e40; + + --quote-bg: #262933; + --quote-border: lighten(var(--quote-bg), 5%); + + --table-border-color: lighten(var(--bg), 5%); + --table-header-bg: lighten(var(--bg), 20%); + --table-alternate-bg: lighten(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #aeaec6; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #5f5f71; + --searchresults-border-color: #5c5c68; + --searchresults-li-bg: #242430; + --search-mark-bg: #a2cff5; +} + +.rust { + --bg: #e1e1db; + --fg: #262625; + + --sidebar-bg: #3b2e2a; + --sidebar-fg: #c8c9db; + --sidebar-non-existant: #505254; + --sidebar-active: #e69f67; + --sidebar-spacer: #45373a; + + --scrollbar: var(--sidebar-fg); + + --icons: #737480; + --icons-hover: #262625; + + --links: #2b79a2; + + --inline-code-color: #6e6b5e;; + + --theme-popup-bg: #e1e1db; + --theme-popup-border: #b38f6b; + --theme-hover: #99908a; + + --quote-bg: #c1c1bb; + --quote-border: darken(var(--quote-bg), 5%); + + --table-border-color: darken(var(--bg), 5%); + --table-header-bg: #b3a497; + --table-alternate-bg: darken(var(--bg), 3%); + + --searchbar-border-color: #aaa; + --searchbar-bg: #fafafa; + --searchbar-fg: #000; + --searchbar-shadow-color: #aaa; + --searchresults-header-fg: #666; + --searchresults-border-color: #888; + --searchresults-li-bg: #dec2a2; + --search-mark-bg: #e69f67; +} diff --git a/src/theme/index.hbs b/src/theme/index.hbs index a1949b4f..99db049b 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -11,7 +11,10 @@ - + + + + diff --git a/src/theme/mod.rs b/src/theme/mod.rs index fc7c809f..406461d0 100644 --- a/src/theme/mod.rs +++ b/src/theme/mod.rs @@ -13,8 +13,11 @@ use errors::*; pub static INDEX: &'static [u8] = include_bytes!("index.hbs"); pub static HEADER: &'static [u8] = include_bytes!("header.hbs"); -pub static CSS: &'static [u8] = include_bytes!("book.css"); pub static FAVICON: &'static [u8] = include_bytes!("favicon.png"); +pub static CHROME_CSS: &'static [u8] = include_bytes!("css/chrome.css"); +pub static GENERAL_CSS: &'static [u8] = include_bytes!("css/general.css"); +pub static PRINT_CSS: &'static [u8] = include_bytes!("css/print.css"); +pub static VARIABLES_CSS: &'static [u8] = include_bytes!("css/variables.css"); pub static JS: &'static [u8] = include_bytes!("book.js"); pub static HIGHLIGHT_JS: &'static [u8] = include_bytes!("highlight.js"); pub static TOMORROW_NIGHT_CSS: &'static [u8] = include_bytes!("tomorrow-night.css"); @@ -45,7 +48,10 @@ pub static FONT_AWESOME_OTF: &'static [u8] = include_bytes!("_FontAwesome/fonts/ pub struct Theme { pub index: Vec, pub header: Vec, - pub css: Vec, + pub chrome_css: Vec, + pub general_css: Vec, + pub print_css: Vec, + pub variables_css: Vec, pub favicon: Vec, pub js: Vec, pub highlight_css: Vec, @@ -73,7 +79,10 @@ impl Theme { (theme_dir.join("index.hbs"), &mut theme.index), (theme_dir.join("header.hbs"), &mut theme.header), (theme_dir.join("book.js"), &mut theme.js), - (theme_dir.join("book.css"), &mut theme.css), + (theme_dir.join("css/chrome.css"), &mut theme.chrome_css), + (theme_dir.join("css/general.css"), &mut theme.general_css), + (theme_dir.join("css/print.css"), &mut theme.print_css), + (theme_dir.join("css/variables.css"), &mut theme.variables_css), (theme_dir.join("favicon.png"), &mut theme.favicon), (theme_dir.join("highlight.js"), &mut theme.highlight_js), (theme_dir.join("clipboard.min.js"), &mut theme.clipboard_js), @@ -102,7 +111,10 @@ impl Default for Theme { Theme { index: INDEX.to_owned(), header: HEADER.to_owned(), - css: CSS.to_owned(), + chrome_css: CHROME_CSS.to_owned(), + general_css: GENERAL_CSS.to_owned(), + print_css: PRINT_CSS.to_owned(), + variables_css: VARIABLES_CSS.to_owned(), favicon: FAVICON.to_owned(), js: JS.to_owned(), highlight_css: HIGHLIGHT_CSS.to_owned(),