actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Converted all css to stylus

This commit is contained in:
Mathieu David 2015-09-18 22:13:55 +02:00
parent e377f4702f
commit bd99a4382f
20 changed files with 426 additions and 527 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -3,3 +3,5 @@ Cargo.lock
book-test
book-example/book
src/theme/book.css

2
.travis.yml
View File

@ -15,6 +15,6 @@ addons:
- nodejs
- npm
install:
- npm install stylus
- npm install stylus nib
after_success:
- test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && bash deploy.sh

4
README.md
View File

@ -12,12 +12,12 @@ To have an idea of what a rendered book looks like,take a look at the [**Documen
## Installation
Before building mdBook, make sure that you installed `stylus` from `npm` because it is used to compile the stylesheets
Before building mdBook, make sure that you installed `stylus` and `nib` from `npm` because it is used to compile the stylesheets
Install [node.js](https://nodejs.org/en/)
```
npm install -g stylus
npm install -g stylus nib
```
```

17
build.rs
View File

@ -10,12 +10,17 @@ fn main() {
let manifest_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
let theme_dir = Path::new(&manifest_dir).join("src/theme/");
let stylus_dir = theme_dir.join("stylus");
let stylus_dir = theme_dir.join("stylus/book.styl");
Command::new("stylus")
.arg(format!("{}", stylus_dir.to_str().unwrap()))
.arg("--out")
.arg(format!("{}", theme_dir.to_str().unwrap()))
.status().unwrap();
if !Command::new("stylus")
.arg(format!("{}", stylus_dir.to_str().unwrap()))
.arg("--out")
.arg(format!("{}", theme_dir.to_str().unwrap()))
.arg("--use")
.arg("nib")
.status().unwrap()
.success() {
panic!("Stylus encoutered an error");
}
}

512
src/theme/_book.css
View File

@ -1,512 +0,0 @@
html, body {
font-family: "Open Sans", sans-serif;
color: #333;
}
@media only screen {
/* Light theme */
.light .sidebar {
border-right: 1px solid rgba(0, 0, 0, 0.07);
background-color: #fafafa;
color: #364149;
}
.light .page-wrapper {
background: none repeat scroll 0 0 #FFF;
}
.light .chapter li {
color: #aaa;
}
.light .chapter li .active,
.light .chapter li a:hover {
/* Animate color change */
color: #008cff;
}
.light .menu-bar,
.light .nav-chapters {
color: #CCC;
}
.light .chapter li a,
.light .menu-bar i:hover,
.light .nav-chapters:hover {
/* Animate color change */
color: #333;
}
.light .content a {
color: #4183c4;
}
/* Theme changer */
.light .theme-popup {
background: #fafafa;
border: 1px solid #ccc;
}
.light .theme-popup .theme:hover {
background-color: #e6e6e6;
}
/* Coal theme */
.coal {
color: #98a3ad;
background-color: #141617;
}
.coal .sidebar {
background-color: #292c2f;
color: #a1adb8;
}
.coal .chapter li {
color: #505254;
}
.coal .chapter li .active,
.coal .chapter li a:hover {
/* Animate color change */
color: #3473ad;
}
.coal .menu-bar,
.coal .nav-chapters {
color: #43484d;
}
.coal .chapter li a,
.coal .menu-bar i:hover,
.coal .nav-chapters:hover {
color: #b3c0cc;
}
.coal .content a {
color: #2b79a2;
}
/* Theme changer */
.coal .theme-popup {
background: #141617;
border: 1px solid #43484d;
}
.coal .theme-popup .theme:hover {
background-color: #1f2124;
}
/* Dark blue colored theme */
.navy {
background-color: #161923;
color: #bcbdd0;
}
.navy .sidebar {
background-color: #282d3f;
color: #c8c9db;
}
.navy .chapter li {
color: #505274;
}
.navy .chapter li .active,
.navy .chapter li a:hover {
/* Animate color change */
color: #2b79a2;
}
.navy .menu-bar,
.navy .nav-chapters {
color: #737480;
}
.navy .chapter li a,
.navy .menu-bar i:hover,
.navy .nav-chapters:hover {
color: #b7b9cc;
}
.navy .content a {
color: #2b79a2;
}
/* Theme changer */
.navy .theme-popup {
background: #161923;
border: 1px solid #737480;
}
.navy .theme-popup .theme:hover {
background-color: #282e40;
}
/* Rust theme */
.rust {
background-color: #e1e1db;
color: #262625;
}
.rust .sidebar {
background-color: #3b2e2a;
color: #c8c9db;
}
.rust .chapter li {
color: #505254;
}
.rust .chapter li .active,
.rust .chapter li a:hover {
/* Animate color change */
color: #e69f67;
}
.rust .menu-bar,
.rust .nav-chapters {
color: #737480;
}
.rust .chapter li a {
color: #bfbfba;
}
.rust .menu-bar i:hover,
.rust .nav-chapters:hover {
color: #262625;
}
.rust .content a {
color: #2b79a2;
}
/* Theme changer */
.rust .theme-popup {
background: #e1e1db;
border: 1px solid #b38f6b;
}
.rust .theme-popup .theme:hover {
background-color: #99908a;
}
.sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 300px;
overflow-y: auto;
padding: 10px 10px;
font-size: 14px;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
/* Animation: slide away */
-webkit-transition: left 0.5s; /* Safari */
-o-transition: left 0.5s; /* Opera */
-moz-transition: left 0.5s; /* Mozilla Firefox */
transition: left 0.5s;
}
.page-wrapper {
position: absolute;
overflow-y: auto;
left: 315px;
right: 0;
top: 0;
bottom: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
min-height: 100%;
/* Animation: slide away */
-webkit-transition: left 0.5s; /* Safari */
-o-transition: left 0.5s; /* Opera */
-moz-transition: left 0.5s; /* Mozilla Firefox */
transition: left 0.5s;
}
.page {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
padding-right: 15px;
overflow-y: auto;
}
.content {
margin-left: auto;
margin-right:auto;
max-width: 750px;
padding-bottom: 50px;
}
.chapter {
list-style: none outside none;
padding-left: 0;
line-height: 30px;
}
.section {
list-style: none outside none;
padding-left: 20px;
line-height: 40px;
}
.section li {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chapter li a {
padding: 5px 0;
text-decoration: none;
}
.chapter li a:hover {
text-decoration: none;
}
.chapter .affix {
}
.chapter .spacer {
width: 100%;
height: 3px;
background-color: #f4f4f4;
margin: 10px 0px;
}
.navy .chapter .spacer {
background-color: #2d334f;
}
.coal .chapter .spacer {
background-color: #393939;
}
.rust .chapter .spacer {
background-color: #45373a;
}
.menu-bar {
position: relative;
height: 50px;
}
.menu-bar i {
position: relative;
margin: 0 10px;
z-index: 10;
line-height: 50px;
-webkit-transition: color 0.5s; /* Safari */
-o-transition: color 0.5s; /* Opera */
-moz-transition: color 0.5s; /* Mozilla Firefox */
transition: color 0.5s;
}
.menu-bar .left-buttons {
float: left;
}
.menu-bar .right-buttons {
float: right;
}
.menu-bar i:hover {
cursor: pointer;
}
.menu-title {
display: inline-block;
font-weight: 200;
font-size: 20px;
line-height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
margin: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-in-out; /* Safari */
-o-transition: opacity 0.5s ease-in-out; /* Opera */
-moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */
transition: opacity 0.5s ease-in-out;
}
.menu-bar:hover .menu-title {
opacity: 1;
}
.left {
float: left;
}
.right {
float: right;
}
/* Content */
.content a {
text-decoration: none;
}
.content a:hover {
text-decoration: underline;
}
.content img {
max-width: 100%;
}
/* Nav icons */
.nav-chapters {
font-size: 40px;
text-align: center;
text-decoration: none;
position: absolute;
top: 50px; /* Height of menu-bar */
bottom: 0;
margin: 0;
max-width: 150px;
min-width: 90px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
-webkit-transition: color 0.5s; /* Safari */
-o-transition: color 0.5s; /* Opera */
-moz-transition: color 0.5s; /* Mozilla Firefox */
transition: color 0.5s;
}
.mobile-nav-chapters { display: none; }
.nav-chapters:hover {
text-decoration: none;
}
.previous {
left: 0;
}
.next {
right: 0;
}
/* Theme Popup */
.theme-popup {
position: fixed;
left: -40px;
border-radius: 4px;
font-size: 0.7em;
}
.theme-popup .theme {
margin: 0;
padding: 2px 10px;
line-height: 25px;
white-space: nowrap;
}
}
@media only screen and (max-width: 1060px) {
.sidebar {
left: -300px;
}
.page-wrapper {
left: 15px;
padding-right: 15px;
}
}
/* Fix the navigation arrows that collapsed with the text on smaller screens */
@media only screen and (max-width: 1250px) {
/* Light theme */
.light .mobile-nav-chapters {
background-color: #E0E0E0;
color: #999;
}
.light .mobile-nav-chapters i:hover {
color: #333;
}
/* Coal theme */
.coal .mobile-nav-chapters {
background-color: #212426;
color: #43484d;
}
.coal .mobile-nav-chapters i:hover {
color: #b3c0cc;
}
/* Navy theme */
.navy .mobile-nav-chapters {
background-color: #242838;
color: #737480;
}
.navy .mobile-nav-chapters i:hover {
color: #b7b9cc;
}
/* Rust theme */
.rust .mobile-nav-chapters {
background-color: #4d413d;
color: #737480;
}
.rust .mobile-nav-chapters i:hover {
color: #b7b9cc;
}
.nav-chapters {
display: none;
}
.mobile-nav-chapters {
font-size: 40px;
text-align: center;
text-decoration: none;
max-width: 150px;
min-width: 90px;
justify-content: center;
align-content: center;
position: relative;
display: inline-block;
margin-bottom: 50px;
border-radius: 5px;
}
.next {
float: right;
}
.previous {
float: left;
}
}
@media only print {
.sidebar, .menu-bar, .nav-chapters, .mobile-nav-chapters {
display: none;
}
.page-wrapper {
left: 0;
}
.content {
max-width: 100%;
}
code {
background-color: #666666;
border-radius: 5px;
/* Force background to be printed in Chrome */
-webkit-print-color-adjust: exact;
}
a, a:visited, a:active, a:hover {
color: #4183c4;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
page-break-inside: avoid;
page-break-after: avoid;
/*break-after: avoid;*/
}
pre, code {
page-break-inside: avoid;
white-space: pre-wrap; /* CSS 3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
}

3
src/theme/book.css
View File

@ -1,3 +0,0 @@
body {
font-size: 2px;
}

12
src/theme/stylus/book.styl
View File

@ -1,3 +1,9 @@
body {
font-size: 2px;
}
@import "nib"
@import 'general'
@import 'sidebar'
@import 'page'
@import 'menu'
@import 'nav-icons'
@import 'theme-popup'
@import 'themes'

12
src/theme/stylus/general.styl Normal file
View File

@ -0,0 +1,12 @@
html, body {
font-family: "Open Sans", sans-serif;
color: #333;
}
.left {
float: left;
}
.right {
float: right;
}

39
src/theme/stylus/menu.styl Normal file
View File

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

23
src/theme/stylus/nav-icons.styl Normal file
View File

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

45
src/theme/stylus/page.styl Normal file
View File

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

45
src/theme/stylus/print.styl Normal file
View File

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

50
src/theme/stylus/sidebar.styl Normal file
View File

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

47
src/theme/stylus/theme-popup.styl Normal file
View File

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

52
src/theme/stylus/themes/base.styl Normal file
View File

@ -0,0 +1,52 @@
.{unquote($theme-name)} {
color: $fg
background-color: $bg
.sidebar {
background-color: $sidebar-bg
color: $sidebar-fg
}
.chapter li {
color: $sidebar-non-existant
a { color: $sidebar-fg }
.active,
a:hover {
/* Animate color change */
color: $sidebar-active
}
}
.chapter .spacer {
background-color: $sidebar-spacer
}
.menu-bar,
.nav-chapters,
.mobile-nav-chapters {
color: $icons
}
.menu-bar i:hover,
.nav-chapters:hover,
.mobile-nav-chapters i:hover {
color: $icons-hover
}
.mobile-nav-chapters {
background-color: $sidebar-bg
}
.content a {
color: $links
}
.theme-popup {
background: $theme-popup-bg
border: 1px solid $theme-popup-border
.theme:hover { background-color: $theme-hover }
}
}

21
src/theme/stylus/themes/coal.styl Normal file
View File

@ -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'

4
src/theme/stylus/themes/index.styl Normal file
View File

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

21
src/theme/stylus/themes/light.styl Normal file
View File

@ -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'

21
src/theme/stylus/themes/navy.styl Normal file
View File

@ -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'

21
src/theme/stylus/themes/rust.styl Normal file
View File

@ -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'