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,8 +3,8 @@ html, body {
color: #333; color: #333;
} }
@media only screen {
.sidebar { .sidebar {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -24,9 +24,9 @@ html, body {
-o-transition: left 0.5s; /* Opera */ -o-transition: left 0.5s; /* Opera */
-moz-transition: left 0.5s; /* Mozilla Firefox */ -moz-transition: left 0.5s; /* Mozilla Firefox */
transition: left 0.5s; transition: left 0.5s;
} }
.page-wrapper { .page-wrapper {
position: absolute; position: absolute;
overflow-y: auto; overflow-y: auto;
left: 315px; left: 315px;
@ -44,9 +44,9 @@ html, body {
-o-transition: left 0.5s; /* Opera */ -o-transition: left 0.5s; /* Opera */
-moz-transition: left 0.5s; /* Mozilla Firefox */ -moz-transition: left 0.5s; /* Mozilla Firefox */
transition: left 0.5s; transition: left 0.5s;
} }
.page { .page {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -55,60 +55,60 @@ html, body {
padding-right: 15px; padding-right: 15px;
overflow-y: auto; overflow-y: auto;
} }
.content { .content {
margin-left: auto; margin-left: auto;
margin-right:auto; margin-right:auto;
max-width: 750px; max-width: 750px;
padding-bottom: 50px; padding-bottom: 50px;
} }
.chapter { .chapter {
list-style: none outside none; list-style: none outside none;
padding-left: 0; padding-left: 0;
line-height: 30px; line-height: 30px;
} }
.section { .section {
list-style: none outside none; list-style: none outside none;
padding-left: 20px; padding-left: 20px;
line-height: 40px; line-height: 40px;
} }
.section li { .section li {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
.chapter li { .chapter li {
color: #AAA; color: #AAA;
} }
.chapter li a { .chapter li a {
color: #333; color: #333;
padding: 5px 0; padding: 5px 0;
text-decoration: none; text-decoration: none;
} }
.chapter li .active { .chapter li .active {
color: #008cff; color: #008cff;
} }
.chapter li a:hover { .chapter li a:hover {
/* Animate color change */ /* Animate color change */
color: #008cff; color: #008cff;
text-decoration: none; text-decoration: none;
} }
.menu-bar { .menu-bar {
position: relative; position: relative;
height: 50px; height: 50px;
color: #CCC; color: #CCC;
} }
.menu-bar i { .menu-bar i {
position: relative; position: relative;
z-index: 10; z-index: 10;
line-height: 50px; line-height: 50px;
@ -116,18 +116,18 @@ html, body {
-o-transition: color 0.5s; /* Opera */ -o-transition: color 0.5s; /* Opera */
-moz-transition: color 0.5s; /* Mozilla Firefox */ -moz-transition: color 0.5s; /* Mozilla Firefox */
transition: color 0.5s; transition: color 0.5s;
} }
.menu-bar :hover { .menu-bar :hover {
/* Animate color change */ /* Animate color change */
color: #333; color: #333;
} }
.menu-bar i:hover { .menu-bar i:hover {
cursor: pointer; cursor: pointer;
} }
.menu-title { .menu-title {
color: #7E7E7E; color: #7E7E7E;
display: inline-block; display: inline-block;
font-weight: 200; font-weight: 200;
@ -146,34 +146,34 @@ html, body {
-o-transition: opacity 0.5s ease-in-out; /* Opera */ -o-transition: opacity 0.5s ease-in-out; /* Opera */
-moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */ -moz-transition: opacity 0.5s ease-in-out; /* Mozilla Firefox */
transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;
} }
.menu-bar:hover .menu-title { .menu-bar:hover .menu-title {
color: #7E7E7E; color: #7E7E7E;
opacity: 1; opacity: 1;
} }
.left { .left {
float: left; float: left;
} }
.right { .right {
float: right; float: right;
} }
/* Content */ /* Content */
.content a { .content a {
color: #4183c4; color: #4183c4;
text-decoration: none; text-decoration: none;
} }
.content a:hover { .content a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Nav icons */ /* Nav icons */
.nav-chapters { .nav-chapters {
color: #CCC; color: #CCC;
font-size: 40px; font-size: 40px;
text-align: center; text-align: center;
@ -194,21 +194,22 @@ html, body {
-o-transition: color 0.5s; /* Opera */ -o-transition: color 0.5s; /* Opera */
-moz-transition: color 0.5s; /* Mozilla Firefox */ -moz-transition: color 0.5s; /* Mozilla Firefox */
transition: color 0.5s; transition: color 0.5s;
} }
.mobile-nav-chapters { display: none; } .mobile-nav-chapters { display: none; }
.nav-chapters:hover { .nav-chapters:hover {
color: #333; color: #333;
text-decoration: none; text-decoration: none;
} }
.previous { .previous {
left: 0; left: 0;
} }
.next { .next {
right: 0; 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;
}
}