From 15c6c0eeccd55395ecac5f02c7e09aea711ea96e Mon Sep 17 00:00:00 2001
From: Golo Roden <webmaster@goloroden.de>
Date: Mon, 13 Aug 2012 17:43:26 +0200
Subject: [PATCH] website: download page

- Improved styling of download links.
- index.html#download now redirects to /download/
- Added missing hyphens, and added the missing "and 64-bit" for the Mac
  Installer.
---
 Makefile                 |   3 +-
 doc/about/index.html     |   2 +-
 doc/blog.html            |   2 +-
 doc/changelog-foot.html  |   2 +-
 doc/changelog-head.html  |   2 +-
 doc/community/index.html |   4 +-
 doc/download/index.html  |  86 +++++++++++++++++++++++++++++++
 doc/index.html           |  85 +++----------------------------
 doc/pipe.css             | 106 +++------------------------------------
 doc/template.html        |   4 +-
 10 files changed, 111 insertions(+), 185 deletions(-)
 create mode 100644 doc/download/index.html

diff --git a/Makefile b/Makefile
index 0213848ab1..087adee1bf 100644
--- a/Makefile
+++ b/Makefile
@@ -114,7 +114,7 @@ apidoc_sources = $(wildcard doc/api/*.markdown)
 apidocs = $(addprefix out/,$(apidoc_sources:.markdown=.html)) \
           $(addprefix out/,$(apidoc_sources:.markdown=.json))
 
-apidoc_dirs = out/doc out/doc/api/ out/doc/api/assets out/doc/about out/doc/community out/doc/logos out/doc/images
+apidoc_dirs = out/doc out/doc/api/ out/doc/api/assets out/doc/about out/doc/community out/doc/download out/doc/logos out/doc/images
 
 apiassets = $(subst api_assets,api/assets,$(addprefix out/,$(wildcard doc/api_assets/*)))
 
@@ -132,6 +132,7 @@ website_files = \
 	out/doc/pipe.css \
 	out/doc/about/index.html \
 	out/doc/community/index.html \
+	out/doc/download/index.html \
 	out/doc/logos/index.html \
 	out/doc/changelog.html \
 	$(doc_images)
diff --git a/doc/about/index.html b/doc/about/index.html
index a94aa99b69..07e95bb054 100644
--- a/doc/about/index.html
+++ b/doc/about/index.html
@@ -28,7 +28,7 @@
             <div id="column2" class="interior">
                 <ul>
                     <li><a href="/" class="home">Home</a></li>
-                    <li><a href="/#download" class="download">Download</a></li>
+                    <li><a href="/download/" class="download">Download</a></li>
                     <li><a href="/about/" class="about current">About</a></li>
                     <li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
                     <li><a href="http://nodejs.org/api/" class="docs">Docs</a></li>
diff --git a/doc/blog.html b/doc/blog.html
index 6d55b8fe9c..153e3ba9ae 100644
--- a/doc/blog.html
+++ b/doc/blog.html
@@ -81,7 +81,7 @@
       <ul>
         <li><a href="http://nodejs.org/" class="home">Home</a></li>
 
-        <li><a href="http://nodejs.org/#download" class=
+        <li><a href="http://nodejs.org/download/" class=
         "download">Download</a></li>
 
         <li><a href="http://nodejs.org/about/" class="about">About</a></li>
diff --git a/doc/changelog-foot.html b/doc/changelog-foot.html
index 1bb70dfd20..aca89c27a0 100644
--- a/doc/changelog-foot.html
+++ b/doc/changelog-foot.html
@@ -4,7 +4,7 @@
     <div id="footer">
         <ul class="clearfix">
             <li><a href="/">Node.js</a></li>
-            <li><a href="/#download">Download</a></li>
+            <li><a href="/download/">Download</a></li>
             <li><a href="/about/">About</a></li>
             <li><a href="http://search.npmjs.org/">npm Registry</a></li>
             <li><a href="http://nodejs.org/api/">Docs</a></li>
diff --git a/doc/changelog-head.html b/doc/changelog-head.html
index 7e78c61c60..fdab340267 100644
--- a/doc/changelog-head.html
+++ b/doc/changelog-head.html
@@ -17,7 +17,7 @@
         <div id="column2" class="interior">
             <ul>
                 <li><a href="/" class="home">Home</a></li>
-                <li><a href="/#download" class="download">Download</a></li>
+                <li><a href="/download/" class="download">Download</a></li>
                 <li><a href="/about/" class="about">About</a></li>
                 <li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
                 <li><a href="http://nodejs.org/api/" class="docs current">Docs</a></li>
diff --git a/doc/community/index.html b/doc/community/index.html
index bb4e17baa4..1ce9679778 100644
--- a/doc/community/index.html
+++ b/doc/community/index.html
@@ -30,7 +30,7 @@
             <div id="column2" class="interior">
                 <ul>
                     <li><a href="/" class="home">Home</a></li>
-                    <li><a href="/#download" class="download">Download</a></li>
+                    <li><a href="/download/" class="download">Download</a></li>
                     <li><a href="/about/" class="about">About</a></li>
                     <li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
                     <li><a href="http://nodejs.org/api/" class="docs">Docs</a></li>
@@ -179,7 +179,7 @@
     <div id="footer">
         <ul class="clearfix">
             <li><a href="/">Node.js</a></li>
-            <li><a href="/#download">Download</a></li>
+            <li><a href="/download/">Download</a></li>
             <li><a href="/about/">About</a></li>
             <li><a href="http://search.npmjs.org/">npm Registry</a></li>
             <li><a href="http://nodejs.org/api/">Docs</a></li>
diff --git a/doc/download/index.html b/doc/download/index.html
new file mode 100644
index 0000000000..f408a28d19
--- /dev/null
+++ b/doc/download/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <style>
+    ul {
+      padding: 0;
+      margin: 0;
+    }
+    </style>
+    <link type="image/x-icon" rel="icon" href="../favicon.ico">
+    <link type="image/x-icon" rel="shortcut icon" href="../favicon.ico">
+    <link rel="stylesheet" href="../pipe.css">
+    <link rel="stylesheet" href="../sh_vim-dark.css">
+    <link rel="alternate"
+          type="application/rss+xml"
+          title="node blog"
+          href="http://feeds.feedburner.com/nodejs/123123123">
+    <title>node.js</title>
+  </head>
+  <body class="int">
+    <div id="intro" class="interior">
+      <a href="/" title="Go back to the home page">
+        <img id="logo" src="http://nodejs.org/images/logo.png" alt="node.js">
+      </a>
+    </div>
+    <div id="content" class="clearfix">
+      <div id="column2" class="interior">
+        <ul>
+          <li><a href="/" class="home">Home</a></li>
+          <li><a href="/download/" class="download current">Download</a></li>
+          <li><a href="/about/" class="about">About</a></li>
+          <li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
+          <li><a href="http://nodejs.org/api/" class="docs">Docs</a></li>
+          <li><a href="http://blog.nodejs.org" class="blog">Blog</a></li>
+          <li><a href="/community/" class="community">Community</a></li>
+          <li><a href="/logos/" class="logos">Logos</a></li>
+          <li><a href="http://jobs.nodejs.org/" class="jobs">Jobs</a></li>
+        </ul>
+        <p class="twitter"><a href="http://twitter.com/nodejs">@nodejs</a></p>
+      </div>
+      <div id="column1" class="interior row">
+        <p>
+          Download the Node.js source code or a pre-built installer for your platform, and start developing today.
+        </p>
+      </div>
+      <div id="column1" class="interior row">
+        <h2 id="installers" class="installers">Installers</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>
+        <p>
+          <strong>Mac OS X Installer</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.pkg">32- and 64-bit (.pkg)</a><br />
+          <strong>Windows Installer</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-x86.msi">32-bit (.msi)</a> or 
+          <a href="http://nodejs.org/dist/__VERSION__/x64/node-__VERSION__-x64.msi">64-bit (.msi)</a><br />
+          <strong>Linux Binaries</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x86.tar.gz">32-bit (.tar.gz)</a> or
+          <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-linux-x64.tar.gz">64-bit (.tar.gz)</a><br />
+          <strong>Solaris Binaries</strong>: <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-sunos-x86.tar.gz">32-bit (.tar.gz)</a> or
+          <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__-sunos-x64.tar.gz">64-bit (.tar.gz)</a>
+        </p>
+        <p>
+          Alternatively, you can install Node.js using various <a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">package managers</a>.
+        </p>
+      </div>
+      <div id="column1" class="interior row">
+        <h2 id="apiDocumentationAndSourceCode">API Documentation and Source Code</h2>
+        <p>
+          If you are unsure about how to use Node.js, the <a href="http://nodejs.org/docs/__VERSION__/api/">API documentation</a> is there to help.
+        </p>
+        <p>
+          You can also have a look at the <a href="http://nodejs.org/dist/__VERSION__/node-__VERSION__.tar.gz">source code</a>, or contribute to Node.js by
+          forking the <a href="https://github.com/joyent/node">GitHub repository</a> and creating pull requests.
+        </p>
+        <p>
+          There exist some <a href="http://nodejs.org/dist/__VERSION__">other release files</a> as well.
+        </p>
+      </div>
+      <div id="column1" class="interior row">
+        <h2 id="license">License</h2>
+        <p>
+          You may also be interested in the <a href="https://raw.github.com/joyent/node/__VERSION__/LICENSE">license</a> of Node.js.
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/doc/index.html b/doc/index.html
index 6c1c82dcd8..d6be5e178d 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -29,7 +29,7 @@
         lightweight and efficient, perfect for data-intensive real-time
         applications that run across distributed devices.</p>
 
-        <a href="#download" class="button" id="downloadbutton">Download</a>
+        <a href="download/" class="button" id="downloadbutton">Download</a>
         <a href="api/" class="button" id="docsbutton">Docs</a>
         <p class="version">__VERSION__</p>
 
@@ -77,81 +77,6 @@
         </ul>
     </div>
 
-    <div id="download">
-        <a href="#" id="download-close">X</a>
-        <img id="download-logo" src="http://nodejs.org/images/download-logo.png" alt="node.js">
-        <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>
-        <ul id="documentation">
-            <li><a href="https://raw.github.com/joyent/node/__VERSION__/ChangeLog">Change Log</a></li>
-            <li><a href="http://nodejs.org/docs/__VERSION__/api/">Documentation</a></li>
-            <li><a href="http://nodejs.org/dist/__VERSION__">Other release files</a></li>
-            <li><a href="http://nodejs.org/dist/__VERSION__/x64/node-__VERSION__-x64.msi">Windows x64 Installer</a></li>
-            <li><a href="https://raw.github.com/joyent/node/__VERSION__/LICENSE">License</a></li>
-            <li><a href="https://github.com/joyent/node">Git Repository</a></li>
-            <li><a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">Installing
-            with a Package Manager</a>
-        </ul>
-    </div>
-
-    <script>;(function() {
-      // attach as soon as the required elements are in the DOM.
-      // don't need to wait for entire document to be ready, since we're
-      // not adding any *new* nodes to the <body>, so there's no threat
-      // of 'Invalid operation' errors in old MSIE 6.
-      document.getElementById('downloadbutton').onclick = function(e) {
-        e = e || window.event;
-        e.stopPropagation && e.stopPropagation();
-        e.cancelBubble = true;
-        // need to give the hash a tick to update
-        setTimeout(downloadDialogUpdate, 0);
-      };
-
-      document.getElementById('download-close').onclick =
-      document.documentElement.onclick = function(e) {
-        e = e || window.event;
-        if (location.hash === '#download') location.hash = '';
-        downloadDialogUpdate();
-      };
-
-      document.getElementById('download').onclick = function(e) {
-        e = e || window.event;
-        e.stopPropagation && e.stopPropagation();
-        e.cancelBubble = true;
-      };
-
-      // I keep expecting <Esc> to close the dialog...
-      document.documentElement.onkeydown = function(e) {
-        e = e || window.event;
-        var k = e.which || e.keyCode || e.keyIdentifier;
-        if (typeof k === 'string') k = k.charCodeAt(0);
-        if (k === 27) document.documentElement.onclick(e);
-      };
-
-      // hacky workaround for old ie browsers that don't support :target css.
-      function downloadDialogUpdate () {
-        var div = document.getElementById('download');
-        if (!div) return;
-        var expect = location.hash === '#download' ? 'block' : 'none';
-        var actual = div.currentStyle ? div.currentStyle.display
-                   : window.getComputedStyle
-                     ? document.defaultView.getComputedStyle(div, null).getPropertyValue('display')
-                   : null;
-
-        // it looks like a string, but it might not actually be a string.
-        // explicitly cast for MSIE 6 and 7.
-        actual = '' + actual;
-        expect = '' + expect;
-        if (actual !== expect) {
-          div.style.display = expect;
-        }
-      }
-      downloadDialogUpdate();
-    })();</script>
-
     <div id="content" class="clearfix">
             <div id="column1">
                 <h2>An example: Webserver</h2>
@@ -204,7 +129,7 @@ server.listen(1337, '127.0.0.1');</pre>
     <div id="footer">
         <ul class="clearfix">
             <li><a href="/">Node.js</a></li>
-            <li><a href="/#download">Download</a></li>
+            <li><a href="/download/">Download</a></li>
             <li><a href="/about/">About</a></li>
             <li><a href="http://search.npmjs.org/">npm Registry</a></li>
             <li><a href="http://nodejs.org/api/">Docs</a></li>
@@ -223,6 +148,12 @@ server.listen(1337, '127.0.0.1');</pre>
     <script src="sh_javascript.min.js"></script>
     <script>highlight(undefined, undefined, 'pre');</script>
 
+    <script type="text/javascript">
+      if (location.hash === '#download') {
+        location.href = 'download/';
+      }
+    </script>
+
     <script>
       window._gaq = [['_setAccount', 'UA-10874194-2'], ['_trackPageview']];
       (function(d, t) {
diff --git a/doc/pipe.css b/doc/pipe.css
index 286c1a6fca..f1db832384 100644
--- a/doc/pipe.css
+++ b/doc/pipe.css
@@ -308,6 +308,7 @@ h1 a, h2 a, h3 a, h4 a
 .row h2.conferences { background-position: left -522px; }
 .row h2.localized { background-position: left -414px; }
 .row h2.irc { background-position: left -626px; }
+.row h2.installers { background-position: left -522px; }
 
 .block {
     width: 280px;
@@ -447,111 +448,18 @@ h1 a, h2 a, h3 a, h4 a
 }
 
 
-
-div#download {
-    position: absolute;
-    width: 580px;
-    text-align: center;
-    top: 0;
-    left: 50%;
-    margin-left: -290px;
-    -webkit-border-bottom-right-radius: 4px;
-    -webkit-border-bottom-left-radius: 4px;
-    -moz-border-radius-bottomright: 4px;
-    -moz-border-radius-bottomleft: 4px;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-    padding-top: 40px;
-  -webkit-box-shadow: 0 0 32px #000;
-     -moz-box-shadow: 0 0 32px #000;
-          box-shadow: 0 0 32px #000;
-    background:white;
-    display: none;
-}
-
-div#download:target {
-    display: block;
-}
-
-#download-close {
-    background: url(http://nodejs.org/images/close-downloads.png) no-repeat top right;
-    width: 64px;
-    height: 64px;
-    position: absolute;
-    display: block;
-    top:0;
-    right:0;
-    text-indent:-999em;
-}
-
-div#download ul#installers {
-    width: 550px;
-    text-align: center;
-    margin: 0 auto;
-    background: url(http://nodejs.org/images/platform-icons.png) no-repeat top center;
-    padding-top: 65px;
-    padding-bottom: 50px;
-}
-
-div#download ul#installers li {
-    list-style-type: none;
-    width: 165px;
-    padding-left: 18px;
-    float: left;
-    display: block;
-    color: #33342d;
-    font-size: 10px;
-}
-
-div#download ul#installers li#source {
-    padding-left: 0;
-}
-
-div#download ul#installers li a {
-    font-size: 16px;
-    padding-top: 50px;
-    margin-top: -50px;
-}
-
-div#download ul#documentation {
-    background-color: #d4d7c3;
-    padding: 20px 0 20px 40px;
-    -webkit-border-bottom-right-radius: 4px;
-    -webkit-border-bottom-left-radius: 4px;
-    -moz-border-radius-bottomright: 4px;
-    -moz-border-radius-bottomleft: 4px;
-    border-bottom-right-radius: 4px;
-    border-bottom-left-radius: 4px;
-}
-
-div#download ul#documentation li {
-    margin-left: 40px;
-    text-align: left;
-    color: #33342d;
-    font-size: 14px;
-    font-weight: bold;
-    padding-bottom: 5px;
-}
-
-div#download ul#documentation li a {
-    color: #76a83f;
-}
-
-#download-logo {
-    margin-bottom: 37px;
-}
-
-  pre, tt, code {
-	  color: #d2d8ba;
+pre, tt, code {
+    color: #d2d8ba;
     font-size: 14px;
     line-height: 22px;
     font-family: Monaco, Consolas, "Lucida Console", monospace;
     margin: 0; padding: 0;
-  }
-  #front pre, #front tt, #front code {
+}
+
+#front pre, #front tt, #front code {
     font-size:12px;
     line-height:22px;
-  }
+}
 
 pre {
 	padding-left: 1em;
diff --git a/doc/template.html b/doc/template.html
index d6aa074a9a..65abc9ceb1 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -17,7 +17,7 @@
         <div id="column2" class="interior">
             <ul>
                 <li><a href="/" class="home">Home</a></li>
-                <li><a href="/#download" class="download">Download</a></li>
+                <li><a href="/download/" class="download">Download</a></li>
                 <li><a href="/about/" class="about">About</a></li>
                 <li><a href="http://search.npmjs.org/" class="npm">npm Registry</a></li>
                 <li><a href="http://nodejs.org/api/" class="docs current">Docs</a></li>
@@ -55,7 +55,7 @@
     <div id="footer">
         <ul class="clearfix">
             <li><a href="/">Node.js</a></li>
-            <li><a href="/#download">Download</a></li>
+            <li><a href="/download/">Download</a></li>
             <li><a href="/about/">About</a></li>
             <li><a href="http://search.npmjs.org/">npm Registry</a></li>
             <li><a href="http://nodejs.org/api/">Docs</a></li>