website: Sharpen and clean up download page more

Retinaify the images!
nodejs · Aug 15, 2012 · 24ff8f4 · 24ff8f4
1 parent 8677860
commit 24ff8f4
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 34 deletions.
diff --git a/doc/download/index.html b/doc/download/index.html
@@ -46,19 +46,36 @@
           </p>
           <p>Current version: <b>__VERSION__</b></p>
         </div>
-        <div class="interior row">
-          <ul id="installers" class="clearfix">
-            <li><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-x86.msi">Windows Installer</a><br>node-__VERSION__-x86.msi</li>
-            <li><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.pkg">Macintosh Installer</a><br>node-__VERSION__.pkg</li>
-            <li id="source"><a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.tar.gz">Source Code</a><br>node-__VERSION__.tar.gz</li>
-          </ul>
-        </div>
 
         <div class="interior row">
-          <h2 id="binaries" class="installers">Downloads</h2>
-          <p>
-            To install Node.js and npm use the appropriate installer for your platform, or discover <a href="https://raw.github.com/joyent/node/__VERSION__/ChangeLog">what's new</a> in <strong>Node.js __VERSION__</strong>.
-          </p>
+          <div id="installers">
+            <ul>
+              <li>
+                <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-x86.msi">
+                  <img src="http://nodejs.org/images/platform-icon-win.png"
+                    height=50 width=45 alt="">
+                  Windows Installer
+                  <small>node-__VERSION__-x86.msi</small>
+                </a>
+              </li>
+              <li>
+                <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.pkg">
+                  <img src="http://nodejs.org/images/platform-icon-osx.png"
+                    height=50 width=45 alt="">
+                  Macintosh Installer
+                  <small>node-__VERSION__.pkg</small>
+                </a>
+              </li>
+              <li id="source">
+                <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.tar.gz">
+                  <img src="http://nodejs.org/images/platform-icon-generic.png"
+                    height=50 width=45 alt="">
+                  Source Code
+                  <small>node-__VERSION__.tar.gz</small>
+                </a>
+              </li>
+            </ul>
+          </div>
 
           <table style="font-size:14px">
             <tr>

diff --git a/doc/images/platform-icon-generic.png b/doc/images/platform-icon-generic.png
diff --git a/doc/images/platform-icon-osx.png b/doc/images/platform-icon-osx.png
diff --git a/doc/images/platform-icon-win.png b/doc/images/platform-icon-win.png
diff --git a/doc/pipe.css b/doc/pipe.css
@@ -195,41 +195,53 @@ h1 a, h2 a, h3 a, h4 a
   width:100%;
 }
 
+#download-page #installers {
+  width:600px;
+  display:table;
+  margin-bottom:1em;
+}
 
-
-#download-page ul#installers {
+#download-page #installers ul {
   width: auto;
   text-align: center;
   margin: 0 auto;
-  background: url(http://nodejs.org/images/platform-icons.png) no-repeat center 20px white;
-  padding-top: 92px;
-  padding-bottom: 45px;
-  padding-left: 29px;
-}
-
-#download-page ul#installers li {
-  list-style-type: none;
-  width: 165px;
-  padding-left: 18px;
-  float: left;
-  display: block;
-  color: #33342D;
-  font-size: 10px;
+  display:table-row;
+  width:600px;
 }
 
-#download-page ul#installers li#source {
-    padding-left: 0;
+#download-page #installers ul img {
+  display:block;
+  margin:0 auto;
+}
+
+#download-page #installers ul a {
+  display:block;
+  width:100%;
+  text-decoration:none;
+  font-size: 16px;
+  padding-top:1em;
 }
 
-#download-page ul#installers li a {
-    font-size: 16px;
-    padding-top: 80px;
-    margin-top: -80px;
+#download-page #installers ul a:hover,
+#download-page #installers ul a:active {
+  background:#666;
+  color: #8cc84b;
+}
+
+
+#download-page #installers ul li {
+  width:33%;
+  display:table-cell;
+}
+#download-page #installers a small {
+  font-size: 10px;
+  display:block;
+  color:#eee;
 }
 
 #download-page #content th {
   text-align:left;
-  width:35%;
+  width:33%;
 }
 
 #download-page #content table {