Added basic print support in the stylesheet. Forced background color for code blocks in chrome, has to be tested in firefox and others. #41

This commit is contained in:
Mathieu David 2015-09-05 00:06:14 +02:00
parent 9e2a62f371
commit 7527975b41
1 changed files with 201 additions and 173 deletions

View File

@ -3,212 +3,213 @@ html, body {
color: #333; color: #333;
} }
@media only screen {
.sidebar {
position: absolute;
left: 0;
top: 0;
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;
.sidebar { /* Animation: slide away */
position: absolute; -webkit-transition: left 0.5s; /* Safari */
left: 0; -o-transition: left 0.5s; /* Opera */
top: 0; -moz-transition: left 0.5s; /* Mozilla Firefox */
bottom: 0; transition: left 0.5s;
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 */ .page-wrapper {
-webkit-transition: left 0.5s; /* Safari */ position: absolute;
-o-transition: left 0.5s; /* Opera */ overflow-y: auto;
-moz-transition: left 0.5s; /* Mozilla Firefox */ left: 315px;
transition: left 0.5s; right: 0;
} top: 0;
bottom: 0;
box-sizing: border-box;
background: none repeat scroll 0 0 #FFF;
-webkit-overflow-scrolling: touch;
.page-wrapper { min-height: 100%;
position: absolute;
overflow-y: auto;
left: 315px;
right: 0;
top: 0;
bottom: 0;
box-sizing: border-box;
background: none repeat scroll 0 0 #FFF;
-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;
}
/* Animation: slide away */ .page {
-webkit-transition: left 0.5s; /* Safari */ position: absolute;
-o-transition: left 0.5s; /* Opera */ top: 0;
-moz-transition: left 0.5s; /* Mozilla Firefox */ right: 0;
transition: left 0.5s; left: 0;
} bottom: 0;
.page { padding-right: 15px;
position: absolute; overflow-y: auto;
top: 0; }
right: 0;
left: 0;
bottom: 0;
padding-right: 15px; .content {
overflow-y: auto; margin-left: auto;
} margin-right:auto;
max-width: 750px;
padding-bottom: 50px;
}
.content { .chapter {
margin-left: auto; list-style: none outside none;
margin-right:auto; padding-left: 0;
max-width: 750px; line-height: 30px;
padding-bottom: 50px; }
}
.chapter { .section {
list-style: none outside none; list-style: none outside none;
padding-left: 0; padding-left: 20px;
line-height: 30px; line-height: 40px;
} }
.section { .section li {
list-style: none outside none; text-overflow: ellipsis;
padding-left: 20px; overflow: hidden;
line-height: 40px; white-space: nowrap;
} }
.section li { .chapter li {
text-overflow: ellipsis; color: #AAA;
overflow: hidden; }
white-space: nowrap;
}
.chapter li { .chapter li a {
color: #AAA; color: #333;
} padding: 5px 0;
text-decoration: none;
}
.chapter li a { .chapter li .active {
color: #333; color: #008cff;
padding: 5px 0; }
text-decoration: none;
}
.chapter li .active { .chapter li a:hover {
color: #008cff; /* Animate color change */
} color: #008cff;
text-decoration: none;
}
.chapter li a:hover { .menu-bar {
/* Animate color change */ position: relative;
color: #008cff; height: 50px;
text-decoration: none; color: #CCC;
} }
.menu-bar { .menu-bar i {
position: relative; position: relative;
height: 50px; z-index: 10;
color: #CCC; 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 i { .menu-bar :hover {
position: relative; /* Animate color change */
z-index: 10; color: #333;
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 :hover { .menu-bar i:hover {
/* Animate color change */ cursor: pointer;
color: #333; }
}
.menu-bar i:hover { .menu-title {
cursor: pointer; color: #7E7E7E;
} 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;
.menu-title { opacity: 0;
color: #7E7E7E; -webkit-transition: opacity 0.5s ease-in-out; /* Safari */
display: inline-block; -o-transition: opacity 0.5s ease-in-out; /* Opera */
font-weight: 200; -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */
font-size: 20px; transition: opacity 0.5s ease-in-out;
line-height: 50px; }
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
margin: 0;
opacity: 0; .menu-bar:hover .menu-title {
-webkit-transition: opacity 0.5s ease-in-out; /* Safari */ color: #7E7E7E;
-o-transition: opacity 0.5s ease-in-out; /* Opera */ opacity: 1;
-moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */ }
transition: opacity 0.5s ease-in-out;
}
.menu-bar:hover .menu-title { .left {
color: #7E7E7E; float: left;
opacity: 1; }
}
.left { .right {
float: left; float: right;
} }
.right { /* Content */
float: right;
}
/* Content */ .content a {
color: #4183c4;
text-decoration: none;
}
.content a { .content a:hover {
color: #4183c4; text-decoration: underline;
text-decoration: none; }
}
.content a:hover { /* Nav icons */
text-decoration: underline; .nav-chapters {
} color: #CCC;
font-size: 40px;
text-align: center;
text-decoration: none;
/* Nav icons */ position: absolute;
.nav-chapters { top: 50px; /* Height of menu-bar */
color: #CCC; bottom: 0;
font-size: 40px; margin: 0;
text-align: center; max-width: 150px;
text-decoration: none; min-width: 90px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
position: absolute; -webkit-transition: color 0.5s; /* Safari */
top: 50px; /* Height of menu-bar */ -o-transition: color 0.5s; /* Opera */
bottom: 0; -moz-transition: color 0.5s; /* Mozilla Firefox */
margin: 0; transition: color 0.5s;
max-width: 150px; }
min-width: 90px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
-webkit-transition: color 0.5s; /* Safari */ .mobile-nav-chapters { display: none; }
-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 {
color: #333;
text-decoration: none;
}
.nav-chapters:hover { .previous {
color: #333; left: 0;
text-decoration: none; }
}
.previous { .next {
left: 0; right: 0;
} }
.next {
right: 0;
} }
@ -258,3 +259,30 @@ html, body {
float: left; 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;
}
}