From 7527975b41781595423f7942915d0478a7a97962 Mon Sep 17 00:00:00 2001
From: Mathieu David <mathieudavid@mathieudavid.org>
Date: Sat, 5 Sep 2015 00:06:14 +0200
Subject: [PATCH] Added basic print support in the stylesheet. Forced
 background color for code blocks in chrome, has to be tested in firefox and
 others. #41

---
 src/theme/book.css | 374 ++++++++++++++++++++++++---------------------
 1 file changed, 201 insertions(+), 173 deletions(-)

diff --git a/src/theme/book.css b/src/theme/book.css
index 1fa18cc9..b234d401 100644
--- a/src/theme/book.css
+++ b/src/theme/book.css
@@ -3,212 +3,213 @@ html, body {
     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 {
-    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;
+        /* 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 */
-    -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;
+        background: none repeat scroll 0 0 #FFF;
+        -webkit-overflow-scrolling: touch;
 
-.page-wrapper {
-    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%;
 
-    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 */
-    -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;
 
-.page {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
+        padding-right: 15px;
+        overflow-y: auto;
+    }
 
-    padding-right: 15px;
-    overflow-y: auto;
-}
+    .content {
+        margin-left: auto;
+        margin-right:auto;
+        max-width: 750px;
+        padding-bottom: 50px;
+    }
 
-.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;
+    }
 
-.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 {
-    list-style: none outside none;
-    padding-left: 20px;
-    line-height: 40px;
-}
+    .section li {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
 
-.section li {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-}
+    .chapter li {
+        color: #AAA;
+    }
 
-.chapter li {
-    color: #AAA;
-}
+    .chapter li a {
+        color: #333;
+        padding: 5px 0;
+        text-decoration: none;
+    }
 
-.chapter li a {
-    color: #333;
-    padding: 5px 0;
-    text-decoration: none;
-}
+    .chapter li .active {
+        color: #008cff;
+    }
 
-.chapter li .active {
-    color: #008cff;
-}
+    .chapter li a:hover {
+        /* Animate color change */
+        color: #008cff;
+        text-decoration: none;
+    }
 
-.chapter li a:hover {
-    /* Animate color change */
-    color: #008cff;
-    text-decoration: none;
-}
+    .menu-bar {
+        position: relative;
+        height: 50px;
+        color: #CCC;
+    }
 
-.menu-bar {
-    position: relative;
-    height: 50px;
-    color: #CCC;
-}
+    .menu-bar i {
+        position: relative;
+        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 i {
-    position: relative;
-    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 :hover {
+        /* Animate color change */
+        color: #333;
+    }
 
-.menu-bar :hover {
-    /* Animate color change */
-    color: #333;
-}
+    .menu-bar i:hover {
+        cursor: pointer;
+    }
 
-.menu-bar i:hover {
-    cursor: pointer;
-}
+    .menu-title {
+        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 {
-    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;
+        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;
+    }
 
-    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 {
+        color: #7E7E7E;
+        opacity: 1;
+    }
 
-.menu-bar:hover .menu-title {
-    color: #7E7E7E;
-    opacity: 1;
-}
+    .left {
+        float: left;
+    }
 
-.left {
-    float: left;
-}
+    .right {
+        float: right;
+    }
 
-.right {
-    float: right;
-}
+    /* Content */
 
-/* Content */
+    .content a {
+        color: #4183c4;
+        text-decoration: none;
+    }
 
-.content a {
-    color: #4183c4;
-    text-decoration: none;
-}
+    .content a:hover {
+        text-decoration: underline;
+    }
 
-.content a:hover {
-    text-decoration: underline;
-}
+    /* Nav icons */
+    .nav-chapters {
+        color: #CCC;
+        font-size: 40px;
+        text-align: center;
+        text-decoration: none;
 
-/* Nav icons */
-.nav-chapters {
-    color: #CCC;
-    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;
 
-    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;
+    }
 
-    -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; }
 
-.mobile-nav-chapters { display: none; }
+    .nav-chapters:hover {
+        color: #333;
+        text-decoration: none;
+    }
 
-.nav-chapters:hover {
-    color: #333;
-    text-decoration: none;
-}
+    .previous {
+        left: 0;
+    }
 
-.previous {
-    left: 0;
-}
-
-.next {
-    right: 0;
+    .next {
+        right: 0;
+    }
 }
 
 
@@ -258,3 +259,30 @@ html, body {
         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;
+    }
+}