doc: update stylesheet to match frontpage

- Changed colors to match frontpage as close as possible.
- Links are slightly more horizontally padded as compared before to
accomodate for the hover effect.
- Slightly reduced the scroll indication height on the TOC.
- The main content is now offset using margin instead of the previous
border hack.
- remove empty footer that was rendering a dark bar on the bottom of
each page without any content.
PR-URL: #4621
Reviewed-By: Jeremiah Senkpiel <fishrock123@rocketmail.com>
Reviewed-By: James M Snell <jasnell@gmail.com>
Reviewed-By: Brian White <mscdex@mscdex.net>

Author: silverwind

doc/api_assets/style.css

@@ -11,26 +11,28 @@ body {
 font-size:62.5%;
 margin:0;
 padding:0;
-color:#3a3a3a;
-background:#fcfefa;
+color:#333;
+background:#fff;
 }
 
 #content {
 font-size:1.8em;
 }
 
-a {
-color:#FE5210;
+a,
+a:link,
+a:active {
+color:#80bd01;
 text-decoration: none;
-}
-
-a:visited {
-color:#FE7110;
+border-radius:2px;
+padding:.1em.2em;
+margin:-.1em0;
 }
 
 a:hover,
 a:focus {
-color:#FFA158;
+color:#fff;
+background-color:#80bd01;
 }
 
 strong {
@@ -170,7 +172,6 @@ dd + dt.pre {
 }
 
 h1,h2,h3,h4,h5,h6 {
-color:#301004;
 text-rendering: optimizeLegibility;
 font-weight:700;
 position: relative;
@@ -280,7 +281,7 @@ code.pre {
 }
 
 #introa {
-color:#333;
+color:#ddd;
 font-size:1.25em;
 font-weight: bold;
 }
@@ -296,7 +297,6 @@ hr {
 }
 
 #toch2 {
-color:#C73E09;
 margin-top:0;
 font-size:1.0em;
 line-height:0;
@@ -339,12 +339,14 @@ p code,
 licode {
 font-size:0.9em;
 color:#040404;
-background-color:#f2f5f0;
-padding:0.2em0.4em;
+background-color:#f0f0f0;
+padding:.1em.2em;
+border-radius:2px;
 }
 
 acode {
 color: inherit;
+background: inherit;
 }
 
 span.type {
@@ -360,12 +362,13 @@ span.type {
 
 #column1.interior {
 width:702px;
-border-left:234px solid #f2f5f0;
+margin-left:234px;
 padding-left:2.0em;
 }
 
 #column2.interior {
 width:234px;
+background:#333;
 position: fixed;
 height:100%;
 overflow-y: scroll;
@@ -377,18 +380,18 @@ span.type {
 bottom:0;
 left:0;
 width:234px;
-height:5em;
-background:linear-gradient(rgba(242,245,240,0),rgba(242,245,240,1));
+height:4em;
+background:linear-gradient(rgba(242,245,240,0),rgba(51,51,51,1));
 pointer-events: none;
 }
 
 #column2ul {
 list-style: none;
 margin-left:0em;
 margin-top:1.25em;
-background:#f2f5f0;
+background:#333;
 margin-bottom:0;
-padding-bottom:4em;
+padding-bottom:3em;
 }
 
 #column2ulli {
@@ -403,19 +406,24 @@ span.type {
 }
 
 #column2ullia {
-color:#7a7a7a;
+color:#ccc;
+border-radius:0;
 }
 
-#column2ullia.active {
-color:#533;
-border-bottom:1px solid #533;
+#column2ullia.active,
+#column2ullia.active:hover,
+#column2ullia.active:focus {
+color:#80bd01;
+border-radius:0;
+border-bottom:1px solid #80bd01;
+background: none;
 }
 
-#footer {
-padding:0;
-min-height:24px;
-background:#333;
-color: white;
+#introa:hover,
+#column2ullia:hover,
+#column2ullia:focus {
+color:#fff;
+background: none;
 }
 
 span> .mark,
@@ -455,7 +463,7 @@ td > *:last-child {
 font-size:2.1em;
  }
 #column1.interior {
-border-left:0;
+margin-left:0;
 padding-left:0.5em;
 padding-right:0.5em;
 width: auto;
@@ -473,7 +481,7 @@ td > *:last-child {
 font-size:2.4em;
  }
 #column1.interior {
-border-left:0;
+margin-left:0;
 padding-left:0.5em;
 padding-right:0.5em;
 width: auto;

doc/template.html

@@ -42,9 +42,6 @@ <h2>Table of Contents</h2>
 </div>
 </div>
 </div>
-<divid="footer">
-</div>
-
 <scriptsrc="assets/sh_main.js"></script>
 <scriptsrc="assets/sh_javascript.min.js"></script>
 <script>highlight(undefined,undefined,'pre');</script>