doc: Pixel-nudging

1 files changed, 148 insertions, 95 deletions

diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
index b5665d53b7..6068455e3f 100644
--- a/doc/api_assets/style.css
+++ b/doc/api_assets/style.css
@@ -8,11 +8,11 @@ body {
 	font-size: 14px;
   line-height: 180%;
   color: black;
-  margin: 0; padding: 40px 0 0 0;
+  margin: 0; padding: 49px 0 0 0;
   border-top: 6px #8CC84B solid;
 }
 a {
-  color: #669900;
+  color: #690;
   text-decoration: underline;
 }
   a:visited {
@@ -22,7 +22,7 @@ a {
   a:hover, a:focus {
     text-decoration: none;
   }
-  
+
     code a:hover {
       background: none;
       color: #b950b7;
@@ -32,9 +32,14 @@ a {
   display: none;
 }
 
+#gtoc p {
+  margin:0;
+  font-size:18px;
+  line-height: 30px;
+}
+
 #gtoc a {
   font-family: Georgia, FreeSerif, Times, serif;
-  font-size: 16px;
   text-decoration: none;
   color: #46483e;
 }
@@ -70,6 +75,13 @@ p {
   text-rendering: optimizeLegibility;
 }
 
+.apidoc p {
+  font-size: 15px;
+  line-height: 22px;
+  color: #000;
+  font-family: Georgia, FreeSerif, Times, serif;
+}
+
 ol, ul, dl {
   margin: 0 0 1em 0;
   padding: 0;
@@ -105,7 +117,7 @@ dd + dt.pre {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: Helvetica, Arial, sans-serif
+  font-family: Helvetica, Arial, sans-serif;
   color: #000;
   text-rendering: optimizeLegibility;
   position: relative;
@@ -116,17 +128,23 @@ h1 {
   font-size: 30px;
   font-weight: normal;
   line-height: 36px;
-  color: #669900;
+  color: #690;
+  margin: 15px 0 11px;
 }
 
 h2 {
-  font-size: 1.9em;
-  line-height: 1.227em;
-  margin: 0 0 0.5em;
+  font-size: 29px;
+  line-height: 33px;
+  margin: 2em 0 15px;
+}
+
+#toc + h2 {
+  margin-top:1em;
+  padding-top:0;
 }
 
 h3 {
-  font-size: 1.5em;
+  font-size: 1.4em;
   line-height: 1.0909em;
   margin: 1.5em 0 0.5em;
 }
@@ -145,13 +163,35 @@ h4 + h4 {
   margin: 0 0 0.5em;
 }
 
-  h3 a,
-  h4 a {
+  h3, h4 {
+    position:relative;
+    padding-right:40px;
+  }
+  h2 span, h3 span, h4 span {
+    position:absolute;
+    display:block;
+    top:0;
+    right:0;
+    opacity: 0.3;
+  }
+  h2 span:hover, h3 span:hover, h4 span:hover {
+    opacity: 1;
+  }
+  h2 span a, h3 span a, h4 span a {
     font-size: 0.8em;
-    float: right;
     color: #000;
     text-decoration: none;
-    opacity: 0.3;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight:bold;
+  }
+
+  h2 span a.top, h3 span a.top, h4 span a.top {
+    /* XXX Get an image and clean up these two links
+     * so that they look nice next to one another.
+     * http://www.chrisglass.com/work/nodejs/website/v05/docs.html
+     * -isaacs
+     */
+    display:none;
   }
 
 h5 {
@@ -165,7 +205,7 @@ h6 {
 }
 
   pre, tt, code {
-    font-size: 0.95em;
+    font-size: 14px;
     line-height: 1.5438em;
     font-family: Monaco, Consolas, "Lucida Console", monospace;
     margin: 0; padding: 0;
@@ -204,27 +244,31 @@ code.pre {
   /* preload platform-icons.png */
   background-image: url(platform-icons.png);
   background-repeat: no-repeat;
-  background-position: -1000px -1000px;
+  background-position: -999em -999em;
 }
 
 #intro.interior #logo {
-    margin-left: -130px;
+    margin-left: -298px;
 }
 
 hr {
   background: none;
   border: medium none;
   border-bottom: 1px solid #ccc;
-  margin: 2em 0 2em;
+  margin: 1em 0;
 }
 
 #toc {
-  
+  font-size:15px;
+  line-height:1.5em;
+  line-height: 22px;
+  padding-top:4px;
 }
 
   #toc h2 {
-    font-size: 1em;
-    line-height: 1.4em;
+    font-size: 15px;
+    line-height: 21px;
+    margin: 0 0 0.5em;
   }
   
   #toc h2 a {
@@ -235,34 +279,28 @@ hr {
     margin: 1em 0 2em;
   }
 
+  #toc ul {
+    font-family: Georgia, FreeSerif, Times, serif;
+  }
+
+  #toc ul a {
+    text-decoration:none;
+    border-bottom:1px dotted #690;
+  }
+  #toc ul a:hover, #toc ul a:focus {
+    border-bottom:1px dotted #fff;
+    color:#000;
+  }
+
+
 p tt, p code {
   background: #f8f8ff;
   border: 1px solid #dedede;
   padding: 0 0.2em;
 }
 
-a.octothorpe {
-  text-decoration: none;
-  color: #777;
-  position: absolute;
-  top: 0; left: -1.4em;
-  padding: 1px 2px;
-  opacity: 0;
-  -webkit-transition: opacity 0.2s linear;
-}
-    p:hover  > a.octothorpe, 
-    dt:hover > a.octothorpe,
-    dd:hover > a.octothorpe,
-    h1:hover > a.octothorpe,
-    h2:hover > a.octothorpe,
-    h3:hover > a.octothorpe,
-    h4:hover > a.octothorpe,
-    h5:hover > a.octothorpe,
-    h6:hover > a.octothorpe {
-      opacity: 1;
-    }
 #content {
-    width: 800px;
+    width: 953px;
     margin: 0 auto;
     overflow: visible;
     clear: both;
@@ -270,15 +308,17 @@ a.octothorpe {
 }
 
 #column1.interior {
-    width: 590px;
+    width: 749px;
     float: right;
-    padding-top: 20px;
+    padding-top: 7px;
+    padding-top: 11px;
+    font-size:18px;
 }
 
 #column2.interior {
-    width: 160px;
+    width: 140px;
     float: left;
-    margin-top: -50px;
+    margin-top: -55px;
     overflow: visible;
 }
 
@@ -292,44 +332,44 @@ a.octothorpe {
 
 #column2.interior li a {
     display: block;
-    padding: 0 0 0 40px;
+    padding: 0 0 0 35px;
     color: #878b78;
     text-transform: uppercase;
     text-decoration: none;
-    font-size: 12px;
+    font-size: 11px;
     line-height: 23px;
 }
 
-#column2.interior li a.home { background: url(icons-interior.png) no-repeat -158px 3px; }
-#column2.interior li a.download { background: url(icons-interior.png) no-repeat -158px -21px; }
-#column2.interior li a.about { background: url(icons-interior.png) no-repeat -158px -44px; }
-#column2.interior li a.npm { background: url(icons-interior.png) no-repeat -158px -70px; }
-#column2.interior li a.docs { background: url(icons-interior.png) no-repeat -158px -93px; }
-#column2.interior li a.blog { background: url(icons-interior.png) no-repeat -158px -117px; }
-#column2.interior li a.community { background: url(icons-interior.png) no-repeat -158px -140px; }
-#column2.interior li a.logos { background: url(icons-interior.png) no-repeat -158px -164px; }
-#column2.interior li a.jobs { background: url(icons-interior.png) no-repeat -158px -189px; } 
-
-#column2.interior li a.home.current { background-position: left 3px; }
-#column2.interior li a.download.current { background-position: left -21px; }
-#column2.interior li a.about.current { background-position: left -44px; }
-#column2.interior li a.npm.current { background-position: left -70px; }
-#column2.interior li a.docs.current { background-position: left -93px; }
-#column2.interior li a.blog.current { background-position: left -117px; }
-#column2.interior li a.community.current { background-position: left -140px; }
-#column2.interior li a.logos.current { background-position: left -164px; }
-#column2.interior li a.jobs.current { background-position: left -189px; }
+#column2.interior li a.home { background: url(icons-interior.png) no-repeat -156px 3px; }
+#column2.interior li a.download { background: url(icons-interior.png) no-repeat -156px -21px; }
+#column2.interior li a.about { background: url(icons-interior.png) no-repeat -156px -45px; }
+#column2.interior li a.npm { background: url(icons-interior.png) no-repeat -156px -69px; }
+#column2.interior li a.docs { background: url(icons-interior.png) no-repeat -156px -93px; }
+#column2.interior li a.blog { background: url(icons-interior.png) no-repeat -156px -117px; }
+#column2.interior li a.community { background: url(icons-interior.png) no-repeat -156px -141px; }
+#column2.interior li a.logos { background: url(icons-interior.png) no-repeat -156px -165px; }
+#column2.interior li a.jobs { background: url(icons-interior.png) no-repeat -156px -189px; } 
+
+#column2.interior li a.home.current { background-position: 2px 3px; }
+#column2.interior li a.download.current { background-position: 2px -21px; }
+#column2.interior li a.about.current { background-position: 2px -45px; }
+#column2.interior li a.npm.current { background-position: 2px -69px; }
+#column2.interior li a.docs.current { background-position: 2px -93px; }
+#column2.interior li a.blog.current { background-position: 2px -117px; }
+#column2.interior li a.community.current { background-position: 2px -141px; }
+#column2.interior li a.logos.current { background-position: 2px -165px; }
+#column2.interior li a.jobs.current { background-position: 2px -189px; }
 #column2.interior li a.current { color: #8cc84b; font-weight: bold; }
 
-#column2.interior li a.home:hover { background-position: -333px 3px; }
-#column2.interior li a.download:hover { background-position: -333px -21px; }
-#column2.interior li a.about:hover { background-position: -333px -44px; }
-#column2.interior li a.npm:hover { background-position: -333px -70px; }
-#column2.interior li a.docs:hover { background-position: -333px -93px; }
-#column2.interior li a.blog:hover { background-position: -333px -117px; }
-#column2.interior li a.community:hover { background-position: -333px -140px; }
-#column2.interior li a.logos:hover { background-position: -333px -164px; }
-#column2.interior li a.jobs:hover { background-position: -333px -189px; }
+#column2.interior li a.home:hover { background-position: -331px 3px; }
+#column2.interior li a.download:hover { background-position: -331px -21px; }
+#column2.interior li a.about:hover { background-position: -331px -45px; }
+#column2.interior li a.npm:hover { background-position: -331px -69px; }
+#column2.interior li a.docs:hover { background-position: -331px -93px; }
+#column2.interior li a.blog:hover { background-position: -331px -117px; }
+#column2.interior li a.community:hover { background-position: -331px -141px; }
+#column2.interior li a.logos:hover { background-position: -331px -165px; }
+#column2.interior li a.jobs:hover { background-position: -331px -189px; }
 #column2.interior li a:hover { color: #000000; text-decoration: none; }
 
 #column2.interior li + li {
@@ -370,57 +410,70 @@ a.anchor {
   border-bottom: 1px solid #cccccc;
 }
 #footer {
-    width: 775px;
-    border-top: 1px solid #626557;
-    margin: 50px auto 30px auto;
-    padding-top: 15px;
+    width: 942px;
+    margin: 150px auto 55px auto;
+    padding:0;
 }
 
 #footer p {
-	color: #8BC84B;
-    font-size: 10px;
-    padding-left: 195px;
-    color: #878b78;
+    font-size: 11px;
+    line-height:1em;
+    padding: 0 0 0 195px;
+    color: #666;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
+}
+
+#footer a {
+  text-decoration:none;
+  border:none;
+  color: #690;
+}
+#footer a:hover {
+  color:#000;
 }
 
 #footer p a {
-    text-decoration: underline;
+    border-bottom:1px dotted #690;
     color: #878b78;
 }
 
 #footer ul {
-    background: url(footer-logo-alt.png) left top no-repeat;
-    padding-left: 195px;
+    background: url(footer-logo-alt.png) left 17px no-repeat;
+    padding: 23px 0 0 195px;
     height: 26px;
-    padding-top: 6px;
-    margin-left: 0;
+    margin-left: -1px;
+    border-top: 1px solid #626557;
 }
 
 #footer ul li {
     list-style-type: none;
-    display: block;
     float: left;
     font-size: 12px;
+    margin:0!important;
+    padding:0;
+    height: 12px;
 }
 
 #footer ul li a {
     margin: 0;
-    padding: 0;
+    padding: 0 6px 0 0;
+    display: block;
+    height:12px;
+    line-height:12px;
 }
 
 #footer ul li + li {
-    height: 12px;
     margin-left: 3px;
 }
 
 #footer ul li + li a {
-    padding: 0 0 0 4px;
+    padding: 0 6px 0 6px;
     border-left: 1px solid #878b78;
 }
 
 #footer ul li a.twitter  {
-    background: url(twitter-bird.png) no-repeat 0 2px;
-    padding-left: 19px;
+    background: url(twitter-bird.png) no-repeat 5px 0px;
+    padding-left: 25px;
 }
 
 /* simpler clearfix */