Nodejs.org design refresh.

1 files changed, 223 insertions, 23 deletions

diff --git a/doc/pipe.css b/doc/pipe.css
index 3da6d120a92..09f0a8bb30d 100644
--- a/doc/pipe.css
+++ b/doc/pipe.css
@@ -13,6 +13,11 @@ body {
     border-top: 6px #8cc84b solid;
 }
 
+body.alt {
+    background: white;
+    color: #46483e;
+}
+
 img {
 	border: 0;
 }
@@ -29,6 +34,15 @@ h1, h2, h3, h4 {
 	margin-left: 0;
     text-transform: uppercase;
 }
+h1 {
+    font-family: Georgia, FreeSerif, Times, serif;
+    font-size: 30px;
+    line-height: 36px;
+    text-transform: none;
+    color: #669900;
+    font-weight: normal;
+    margin-top: 1em;
+}
 
 h2 {
     font-size: 12px;
@@ -62,15 +76,24 @@ h1 a, h2 a, h3 a, h4 a
     font-size: 14px;
 }
 
+#intro.interior #logo {
+    margin-left: -130px;
+}
+
+#intro p.version {
+    padding-top: 10px;
+    font-size: 12px;
+}
+
 #intro .button {
   font-weight: bold;
   font-size: 14px;
   text-transform: uppercase;
-  padding: 7px 10px;
+  padding: 6px 12px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
-  margin: 0 5px;
+  margin: 0 1px;
   color: #46483e;
 }
 
@@ -87,7 +110,7 @@ h1 a, h2 a, h3 a, h4 a
 }
 
 #intro #docsbutton {
-  background-color: #d2d8ba;
+  background-color: #9a9f8b;
 }
 
 #intro #docsbutton:hover {
@@ -141,30 +164,146 @@ h1 a, h2 a, h3 a, h4 a
 }
 
 #content {
-    width: 775px;
+    width: 800px;
     margin: 0 auto;
+    overflow: visible;
+    clear: both;
+    display: block;
 }
 
-#content #column1 {
-    width: 420px;
+#column1 {
+    width: 460px;
     float: left;
 }
 
-#content #column2 {
+#content p {
+    font-size: 14px;
+}
+
+#content h1 + p {
+    font-size: 18px;
+    line-height: 30px;
+    color: #46483e;
+    font-family: Georgia, FreeSerif, Times, serif;
+}
+
+#column2 {
     width: 260px;
     float: right;
 }
 
-#content #column1.interior {
-    width: 510px;
+#column1.interior {
+    width: 590px;
     float: right;
+    padding-top: 20px;
+}
+
+#column2.interior {
+    width: 160px;
+    float: left;
+    margin-top: -50px;
+    overflow: visible;
 }
 
-#content #column2.interior {
+#column2.interior li {
+    list-style-type: none;
+}
+
+#column2.interior li a {
+    display: block;
+    padding: 1px 0px 1px 40px;
+    color: #878b78;
+    text-transform: uppercase;
+}
+
+#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.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:hover { color: #000000; text-decoration: none; }
+
+#column2.interior li + li {
+    border-top: 1px solid #c1c7ac;
+}
+
+#column2.interior p.twitter {
+    padding-top: 20px;
+}
+
+#column2.interior p.twitter a {
+    background: url(twitter-bird.png) no-repeat 0 4px;
+    padding-left: 37px;
+}
+
+.row {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.row + .row {
+    border-top: 1px solid #626557;
+}
+
+.row h2 {
+    font-size: 24px;
+    color: white;
+    text-transform: none;
+    font-family: Georgia, FreeSerif, Times, serif;
+    background: url(community-icons.png) no-repeat;
+    padding-left: 45px;
+    padding-top: 6px;
+    padding-bottom: 10px;
+    margin-top: 10px;
+}
+
+.row h2.github { background-position: left -92px; }
+.row h2.mailing { background-position: left -308px; }
+.row h2.periodicals { background-position: left -198px; padding-top: 9px; margin-top: 7px; }
+.row h2.conferences { background-position: left -522px; }
+.row h2.localized { background-position: left -414px; }
+.row h2.irc { background-position: left -626px; }
+
+.block {
+    width: 280px;
+    float: left;
+}
+
+.block + .block {
+    margin-left: 30px;
+}
+
+#content .block p {
+    font-size: 12px;
 }
 
 #explore {
-    background: url(icons.png) no-repeat left 15px;
+    background: url(home-icons.png) no-repeat left 11px;
 }
 
 #explore li {
@@ -209,16 +348,54 @@ h1 a, h2 a, h3 a, h4 a
 
 #footer p {
 	color: #8BC84B;
-    height: 32px;
-    padding-top: 3px;
-    background: url(footer-logo.png) left top no-repeat;
-    padding-left: 130px;
+    font-size: 10px;
+    padding-left: 195px;
+    color: #878b78;
 }
 
 #footer p a {
     text-decoration: underline;
+    color: #878b78;
+}
+
+#footer ul {
+    background: url(footer-logo.png) left top no-repeat;
+    padding-left: 195px;
+    height: 26px;
+    padding-top: 6px;
+}
+.alt #footer ul {
+    background-image: url(footer-logo-alt.png);
+}
+
+#footer ul li {
+    list-style-type: none;
+    display: block;
+    float: left;
+}
+
+#footer ul li a {
+    margin: 0;
+    padding: 0;
 }
 
+#footer ul li + li {
+    height: 12px;
+    margin-left: 3px;
+}
+
+#footer ul li + li a {
+    padding: 0 0 0 4px;
+    border-left: 1px solid #878b78;
+}
+
+#footer ul li a.twitter  {
+    background: url(twitter-bird.png) no-repeat 0 2px;
+    padding-left: 19px;
+}
+
+
+
 div#download {
     position: absolute;
     width: 580px;
@@ -326,17 +503,41 @@ pre {
 	border-left-color: #626557;
 }
 
+.alt pre {
+    font-size: 14px;
+    margin-left: 0;
+    border-left: 2px solid #dadad7;
+    background-color: #f4f4f2;
+    color: #46483e;
+    padding: 1em 1.5em;
+    line-height: 2em;
+}
+
+.alt code {
+    color: #996633;
+}
+
 dd {
   margin: 1em 0;
   margin-left: 1em;
 }
 
+
 a {
 	color: #8BC84B;
 	text-decoration: none;
 }
 a:hover { text-decoration: underline; }
 
+.alt a {
+    background-color: #eff2db;
+    padding: 0 2px;
+}
+
+.alt #intro a, .alt #footer a {
+    background-color: transparent;
+}
+
 .highlight {
   background: #733;
   padding: 0.2em 0;
@@ -350,12 +551,11 @@ a:hover { text-decoration: underline; }
 }
 
 /* simpler clearfix */
-.clearfix {
-  /* be an independent layout island */
-  overflow:hidden;
-  /* but don't actually cut anything off */
-  height:auto;
-  /* trigger hasLayout in IE */
-  zoom:1;
-  /* fin. */
+.clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
 }
+