Add CSS for the html version.

1 files changed, 185 insertions, 2 deletions

diff --git a/build/stylesheets/install.css b/build/stylesheets/install.css
index ca74c9f45..12bd6b082 100644
--- a/build/stylesheets/install.css
+++ b/build/stylesheets/install.css
@@ -1,6 +1,189 @@
 /* Cascading stylesheet for the Debian Installer Installation Guide */
 
-/* Use grey background for examples */
+/* global style of the page */
+body {
+    background-color: #EEEEEE;
+    border: 40px solid #EEEEEE;
+    margin: 0;
+    padding: 0 10px;
+    font-family: "liberation sans", "Myriad ", "Bitstream Vera Sans", "Lucida Grande", "Luxi Sans", "Trebuchet MS", helvetica, verdana, arial, sans-serif;
+    line-height: 1.2em;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+    body {
+        border: 0px;
+        padding: 0px;
+    }
+}
+
+body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, div.sect1 {
+    margin-top: 0;
+    padding: 2em 6em 6em;
+}
+body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, div.sect1 {
+    padding: 2em;
+}
+
+body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index, div.sect1 {
+    background-color: #FFFFFF;
+    margin: 40px auto 4em;
+    padding: 1px 40px 20px 30px;
+}
+
+@media (max-width: 1024px) {
+    body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index, div.sect1 {
+        max-width: 45em;
+    }
+}
+@media (min-width: 1025px) {
+    body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index, div.sect1 {
+        max-width: 70em;
+    }
+}
+@media (max-width: 5in), (max-device-width: 5in){
+    body > div.book, body > div.article, body > div.set, body > div.preface, body > div.chapter, body > div.section, body > div.appendix, body > div.part, body > div.index, div.sect1 {
+        max-width: 100%;
+    }
+}
+
+hr {
+    border-top: 1px dotted #808080;
+    margin: 0;
+}
+
+a:link {
+    color: #0035C7;
+    text-decoration: none;
+}
+a:visited {
+    color: #00207A;
+    text-decoration: none;
+}
+a:link:hover {
+    color: #00207A;
+    text-decoration: underline;
+}
+
+code {
+    font-family: "liberation mono","bitstream vera mono","dejavu mono",monospace;
+    font-weight: bold;
+    word-wrap: break-word;
+}
+
+h1 {
+    color: #C70036;
+    line-height: 1.1em;
+}
+
+h2, h3, h4, h5, h6 {
+    color: #C70036;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+    dl, dt, dd {
+        margin-left: 0.25em;
+    }
+
+    ul {
+        padding-left: 1.5em;
+    }
+}
+
+
+/* for first page */
+.book > .titlepage h1.title {
+    text-align: center;
+}
+.titlepage h1.title {
+    text-align: left;
+}
+
+.authorgroup div {
+    text-align: center;
+}
+
+
+/* for table of contents */
+@media (max-width: 5in), (max-device-width: 5in){
+    .toc dl, .toc dt, .toc dd {
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+    }
+}
+
+
+/* table in content */
+
+.informaltable table, .table-contents table {
+    border: 1px solid #AAAAAA;
+}
+
+.informaltable table th, .table-contents table th {
+    border-width: 0;
+    background-color: #C70036;
+}
+/*
+.informaltable table td, .table-contents table {
+    border-width: 0;
+}
+
+.informaltable tbody tr:nth-child(even), .table-contents table tr:nth-child(even){
+background-color:#DDDDDD;
+}
+
+.informaltable tbody tr:hover, .table-contents table tr:hover {
+    background-color:#666666;
+    color: #FFFFFF;
+}
+*/
+
+
+/* Terminal examples */
 pre.screen {
-  background-color : #E0E0E0;
+    -moz-tab-size: 4;
+    background-color: #F5F5F5;
+    border-radius: 11px 11px 11px 11px;
+    border-style: none;
+    box-shadow: 0 2px 5px #AAAAAA inset;
+    color: #000000;
+    display: block;
+    font-family: "liberation mono","bitstream vera mono","dejavu mono",monospace;
+    font-size: 0.9em;
+    margin-bottom: 1em;
+    padding: 0.5em 1em;
+    page-break-inside: avoid;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+
+/* Navigation elements */
+.navheader a, .navfooter a {
+    opacity: 0.50;
+    transition: opacity 0.15s ease-in-out;
 }
+.navheader a:hover, .navfooter a:hover {
+    opacity: 1;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+    .navfooter > table {
+        font-size: 0;
+    }
+}
+
+
+/* Infos blocks */
+.important, .caution, .note {
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+@media (max-width: 5in), (max-device-width: 5in){
+    .important, .caution, .note {
+        margin-left: 0.5em;
+        margin-right: 0.5em;
+    }
+}
+