Mathieu David
commit
195bfd2f7f
|
|
@ -186,6 +186,8 @@ impl Renderer for HtmlHandlebars {
|
|||
// syntax highlighting
|
||||
let mut highlight_css = try!(File::create(book.get_dest().join("highlight.css")));
|
||||
try!(highlight_css.write_all(&theme.highlight_css));
|
||||
let mut tomorrow_night_css = try!(File::create(book.get_dest().join("tomorrow-night.css")));
|
||||
try!(tomorrow_night_css.write_all(&theme.tomorrow_night_css));
|
||||
let mut highlight_js = try!(File::create(book.get_dest().join("highlight.js")));
|
||||
try!(highlight_js.write_all(&theme.highlight_js));
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,146 @@ html, body {
|
|||
}
|
||||
|
||||
@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 .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 .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 .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 .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;
|
||||
|
|
@ -11,13 +151,10 @@ html, body {
|
|||
bottom: 0;
|
||||
width: 300px;
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.07);
|
||||
padding: 10px 10px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background-color: #fafafa;
|
||||
color: #364149;
|
||||
|
||||
/* Animation: slide away */
|
||||
-webkit-transition: left 0.5s; /* Safari */
|
||||
|
|
@ -34,7 +171,6 @@ html, body {
|
|||
top: 0;
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
background: none repeat scroll 0 0 #FFF;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
min-height: 100%;
|
||||
|
|
@ -82,23 +218,12 @@ html, body {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.chapter li {
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.chapter li a {
|
||||
color: #333;
|
||||
padding: 5px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chapter li .active {
|
||||
color: #008cff;
|
||||
}
|
||||
|
||||
.chapter li a:hover {
|
||||
/* Animate color change */
|
||||
color: #008cff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +241,6 @@ html, body {
|
|||
.menu-bar {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.menu-bar i {
|
||||
|
|
@ -130,13 +254,12 @@ html, body {
|
|||
transition: color 0.5s;
|
||||
}
|
||||
|
||||
.menu-bar .right-buttons {
|
||||
float: right;
|
||||
.menu-bar .left-buttons {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.menu-bar :hover {
|
||||
/* Animate color change */
|
||||
color: #333;
|
||||
.menu-bar .right-buttons {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.menu-bar i:hover {
|
||||
|
|
@ -144,7 +267,6 @@ html, body {
|
|||
}
|
||||
|
||||
.menu-title {
|
||||
color: #7E7E7E;
|
||||
display: inline-block;
|
||||
font-weight: 200;
|
||||
font-size: 20px;
|
||||
|
|
@ -165,7 +287,6 @@ html, body {
|
|||
}
|
||||
|
||||
.menu-bar:hover .menu-title {
|
||||
color: #7E7E7E;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -180,7 +301,6 @@ html, body {
|
|||
/* Content */
|
||||
|
||||
.content a {
|
||||
color: #4183c4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -190,7 +310,6 @@ html, body {
|
|||
|
||||
/* Nav icons */
|
||||
.nav-chapters {
|
||||
color: #CCC;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -215,7 +334,6 @@ html, body {
|
|||
.mobile-nav-chapters { display: none; }
|
||||
|
||||
.nav-chapters:hover {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -226,6 +344,24 @@ html, body {
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -242,12 +378,43 @@ html, body {
|
|||
/* 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 {
|
||||
color: #CCC;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
|
@ -263,8 +430,6 @@ html, body {
|
|||
margin-bottom: 50px;
|
||||
|
||||
border-radius: 5px;
|
||||
background-color: #E0E0E0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.next {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,12 @@ $( document ).ready(function() {
|
|||
// url
|
||||
var url = window.location.pathname;
|
||||
|
||||
// Set theme
|
||||
var theme = localStorage.getItem('theme');
|
||||
if (theme == null) { theme = 'light'; }
|
||||
|
||||
set_theme(theme);
|
||||
|
||||
// Syntax highlighting Configuration
|
||||
hljs.configure({
|
||||
tabReplace: ' ', // 4 spaces
|
||||
|
|
@ -37,4 +43,40 @@ $( document ).ready(function() {
|
|||
window.print();
|
||||
}
|
||||
|
||||
// Theme button
|
||||
$("#theme-toggle").click(function(){
|
||||
if($('.theme-popup').length) {
|
||||
$('.theme-popup').remove();
|
||||
} else {
|
||||
var popup = $('<div class="theme-popup"></div>')
|
||||
.append($('<div class="theme" id="light">Light (default)<div>'))
|
||||
.append($('<div class="theme" id="rust">Rust</div>'))
|
||||
.append($('<div class="theme" id="coal">Coal</div>'))
|
||||
.append($('<div class="theme" id="navy">Navy</div>'));
|
||||
|
||||
|
||||
$(this).append(popup);
|
||||
|
||||
$('.theme').click(function(){
|
||||
var theme = $(this).attr('id');
|
||||
|
||||
set_theme(theme)
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function set_theme(theme) {
|
||||
if (theme == 'coal' || theme == 'navy') {
|
||||
$("[href='tomorrow-night.css']").prop('disabled', false);
|
||||
$("[href='highlight.css']").prop('disabled', true);
|
||||
} else {
|
||||
$("[href='tomorrow-night.css']").prop('disabled', true);
|
||||
$("[href='highlight.css']").prop('disabled', false);
|
||||
}
|
||||
|
||||
localStorage.setItem('theme', theme);
|
||||
|
||||
$('body').removeClass().addClass(theme);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
|
||||
<link rel="stylesheet" href="highlight.css">
|
||||
<link rel="stylesheet" href="tomorrow-night.css">
|
||||
|
||||
<!-- MathJax -->
|
||||
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
|
|
@ -31,7 +32,8 @@
|
|||
<div class="page">
|
||||
<div id="menu-bar" class="menu-bar">
|
||||
<div class="left-buttons">
|
||||
<i id="sidebar-toggle" class="fa fa-bars left"></i>
|
||||
<i id="sidebar-toggle" class="fa fa-bars"></i>
|
||||
<i id="theme-toggle" class="fa fa-paint-brush"></i>
|
||||
</div>
|
||||
|
||||
<h1 class="menu-title">{{ title }}</h1>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ pub static INDEX: &'static [u8] = include_bytes!("index.hbs");
|
|||
pub static CSS: &'static [u8] = include_bytes!("book.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");
|
||||
pub static HIGHLIGHT_CSS: &'static [u8] = include_bytes!("highlight.css");
|
||||
pub static JQUERY: &'static [u8] = include_bytes!("jquery-2.1.4.min.js");
|
||||
pub static FONT_AWESOME: &'static [u8] = include_bytes!("_FontAwesome/css/font-awesome.min.css");
|
||||
|
|
@ -29,6 +30,7 @@ pub struct Theme {
|
|||
pub css: Vec<u8>,
|
||||
pub js: Vec<u8>,
|
||||
pub highlight_css: Vec<u8>,
|
||||
pub tomorrow_night_css: Vec<u8>,
|
||||
pub highlight_js: Vec<u8>,
|
||||
pub jquery: Vec<u8>,
|
||||
}
|
||||
|
|
@ -42,6 +44,7 @@ impl Theme {
|
|||
css: CSS.to_owned(),
|
||||
js: JS.to_owned(),
|
||||
highlight_css: HIGHLIGHT_CSS.to_owned(),
|
||||
tomorrow_night_css: TOMORROW_NIGHT_CSS.to_owned(),
|
||||
highlight_js: HIGHLIGHT_JS.to_owned(),
|
||||
jquery: JQUERY.to_owned(),
|
||||
};
|
||||
|
|
@ -60,58 +63,39 @@ impl Theme {
|
|||
// Check for individual files if they exist
|
||||
|
||||
// index.hbs
|
||||
match File::open(&src.join("index.hbs")) {
|
||||
Ok(mut f) => {
|
||||
if let Ok(mut f) = File::open(&src.join("index.hbs")) {
|
||||
theme.index.clear(); // Reset the value, because read_to_string appends...
|
||||
match f.read_to_end(&mut theme.index) {
|
||||
_ => {}
|
||||
};
|
||||
},
|
||||
_ => {},
|
||||
let _ = f.read_to_end(&mut theme.index);
|
||||
}
|
||||
|
||||
// book.js
|
||||
match File::open(&src.join("book.js")) {
|
||||
Ok(mut f) => {
|
||||
if let Ok(mut f) = File::open(&src.join("book.js")) {
|
||||
theme.js.clear();
|
||||
match f.read_to_end(&mut theme.js){
|
||||
_ => {}
|
||||
}
|
||||
},
|
||||
_ => {},
|
||||
let _ = f.read_to_end(&mut theme.js);
|
||||
}
|
||||
|
||||
// book.css
|
||||
match File::open(&src.join("book.css")) {
|
||||
Ok(mut f) => {
|
||||
if let Ok(mut f) = File::open(&src.join("book.css")) {
|
||||
theme.css.clear();
|
||||
match f.read_to_end(&mut theme.css) {
|
||||
_ => {}
|
||||
}
|
||||
},
|
||||
_ => {},
|
||||
let _ = f.read_to_end(&mut theme.css);
|
||||
}
|
||||
|
||||
// highlight.js
|
||||
match File::open(&src.join("highlight.js")) {
|
||||
Ok(mut f) => {
|
||||
if let Ok(mut f) = File::open(&src.join("highlight.js")) {
|
||||
theme.highlight_js.clear();
|
||||
match f.read_to_end(&mut theme.highlight_js) {
|
||||
_ => {}
|
||||
}
|
||||
},
|
||||
_ => {},
|
||||
let _ = f.read_to_end(&mut theme.highlight_js);
|
||||
}
|
||||
|
||||
// highlight.css
|
||||
match File::open(&src.join("highlight.css")) {
|
||||
Ok(mut f) => {
|
||||
if let Ok(mut f) = File::open(&src.join("highlight.css")) {
|
||||
theme.highlight_css.clear();
|
||||
match f.read_to_end(&mut theme.highlight_css) {
|
||||
_ => {}
|
||||
let _ = f.read_to_end(&mut theme.highlight_css);
|
||||
}
|
||||
},
|
||||
_ => {},
|
||||
|
||||
// tomorrow-night.css
|
||||
if let Ok(mut f) = File::open(&src.join("tomorrow-night.css")) {
|
||||
theme.tomorrow_night_css.clear();
|
||||
let _ = f.read_to_end(&mut theme.tomorrow_night_css);
|
||||
}
|
||||
|
||||
theme
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
/* Tomorrow Night Theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
|
||||
/* Tomorrow Comment */
|
||||
.hljs-comment {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
/* Tomorrow Red */
|
||||
.hljs-variable,
|
||||
.hljs-attribute,
|
||||
.hljs-tag,
|
||||
.hljs-regexp,
|
||||
.ruby .hljs-constant,
|
||||
.xml .hljs-tag .hljs-title,
|
||||
.xml .hljs-pi,
|
||||
.xml .hljs-doctype,
|
||||
.html .hljs-doctype,
|
||||
.css .hljs-id,
|
||||
.css .hljs-class,
|
||||
.css .hljs-pseudo {
|
||||
color: #cc6666;
|
||||
}
|
||||
|
||||
/* Tomorrow Orange */
|
||||
.hljs-number,
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma,
|
||||
.hljs-built_in,
|
||||
.hljs-literal,
|
||||
.hljs-params,
|
||||
.hljs-constant {
|
||||
color: #de935f;
|
||||
}
|
||||
|
||||
/* Tomorrow Yellow */
|
||||
.ruby .hljs-class .hljs-title,
|
||||
.css .hljs-rule .hljs-attribute {
|
||||
color: #f0c674;
|
||||
}
|
||||
|
||||
/* Tomorrow Green */
|
||||
.hljs-string,
|
||||
.hljs-value,
|
||||
.hljs-inheritance,
|
||||
.hljs-header,
|
||||
.hljs-name,
|
||||
.ruby .hljs-symbol,
|
||||
.xml .hljs-cdata {
|
||||
color: #b5bd68;
|
||||
}
|
||||
|
||||
/* Tomorrow Aqua */
|
||||
.hljs-title,
|
||||
.css .hljs-hexcolor {
|
||||
color: #8abeb7;
|
||||
}
|
||||
|
||||
/* Tomorrow Blue */
|
||||
.hljs-function,
|
||||
.python .hljs-decorator,
|
||||
.python .hljs-title,
|
||||
.ruby .hljs-function .hljs-title,
|
||||
.ruby .hljs-title .hljs-keyword,
|
||||
.perl .hljs-sub,
|
||||
.javascript .hljs-title,
|
||||
.coffeescript .hljs-title {
|
||||
color: #81a2be;
|
||||
}
|
||||
|
||||
/* Tomorrow Purple */
|
||||
.hljs-keyword,
|
||||
.javascript .hljs-function {
|
||||
color: #b294bb;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
background: #1d1f21;
|
||||
color: #c5c8c6;
|
||||
padding: 0.5em;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.coffeescript .javascript,
|
||||
.javascript .xml,
|
||||
.tex .hljs-formula,
|
||||
.xml .javascript,
|
||||
.xml .vbscript,
|
||||
.xml .css,
|
||||
.xml .hljs-cdata {
|
||||
opacity: 0.5;
|
||||
}
|
||||
Loading…
Reference in New Issue