Moves in-site nav links to header, adds docs link

nodejs · Jan 13, 2015 · 1732823 · 1732823
1 parent fdabf59
commit 1732823
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 33 deletions.
diff --git a/es6.html b/es6.html
@@ -15,10 +15,15 @@
   <body>
 
   <header>
-    <a href="index.html" class="logo">io.js</a>
+    <div class="content">
+      <a href="index.html" class="logo">io.js</a>
+      <a href="faq.html">FAQ</a>
+      <a href="es6.html">ES6</a>
+      <a href="https://iojs.org/download/nightly/v1.0.0-nightly201501135ea716d895/doc/api/">Docs</a>
+    </div>
   </header>
 
-  <div id="content">
+  <div class="content">
 
     <h1>ES6 on io.js</h1>
 
@@ -109,17 +114,16 @@ <h2 class="faq-title">
 
       </div>
     </div>
+  </div>
 
+  <footer class="content">
     <nav>
-      <a href="faq.html">FAQ</a><!--
-   --><a href="https://github.com/iojs/io.js/issues">Github Issues</a><!--
+      <a href="https://github.com/iojs/io.js/issues">Github Issues</a><!--
    --><a href="https://github.com/iojs">Github Org</a><!--
    --><a href="http://webchat.freenode.net/?channels=io.js">IRC Chat</a><!--
-   --><a href="http://logs.libuv.org/io.js/latest">Logs</a><!--
-   --><a href="es6.html">ES6</a>
+   --><a href="http://logs.libuv.org/io.js/latest">Logs</a>
     </nav>
-
-  </div>
+  </footer>
 
 </body>
 

diff --git a/faq.html b/faq.html
@@ -15,10 +15,15 @@
 <body>
 
   <header>
-    <a href="index.html" class="logo">io.js</a>
+    <div class="content">
+      <a href="index.html" class="logo">io.js</a>
+      <a href="faq.html">FAQ</a>
+      <a href="es6.html">ES6</a>
+      <a href="https://iojs.org/download/nightly/v1.0.0-nightly201501135ea716d895/doc/api/">Docs</a>
+    </div>
   </header>
 
-  <div id="content">
+  <div class="content">
 
     <h1 class="heading">FAQ</h1>
 
@@ -61,16 +66,16 @@ <h2>
       Open source governance advocates the application of the philosophies of the open source and open content movements in order to enable any interested party to add to the creation of the end product, as with a wiki document. Legislation is democratically opened to the general citizenry, employing their collective wisdom to benefit the decision-making process and improve democracy. <a href="http://en.wikipedia.org/wiki/Open-source_governance" target="_blank">[source]</a>
     </p>
 
+  </div>
+
+  <footer class="content">
     <nav>
-      <a href="faq.html">FAQ</a><!--
-   --><a href="https://github.com/iojs/io.js/issues">Github Issues</a><!--
+      <a href="https://github.com/iojs/io.js/issues">Github Issues</a><!--
    --><a href="https://github.com/iojs">Github Org</a><!--
    --><a href="http://webchat.freenode.net/?channels=io.js">IRC Chat</a><!--
-   --><a href="http://logs.libuv.org/io.js/latest">Logs</a><!--
-   --><a href="es6.html">ES6</a>
+   --><a href="http://logs.libuv.org/io.js/latest">Logs</a>
     </nav>
-
-  </div>
+  </footer>
 
 </body>
 

diff --git a/index.html b/index.html
@@ -15,10 +15,15 @@
 <body>
 
   <header>
-    <a href="index.html" class="logo">io.js</a>
+    <div class="content">
+      <a href="index.html" class="logo">io.js</a>
+      <a href="faq.html">FAQ</a>
+      <a href="es6.html">ES6</a>
+      <a href="https://iojs.org/download/nightly/v1.0.0-nightly201501135ea716d895/doc/api/">Docs</a>
+    </div>
   </header>
 
-  <div id="content">
+  <div class="content">
     <h1>JavaScript I/O</h1>
 
     <p class="lead">
@@ -47,18 +52,17 @@ <h1>JavaScript I/O</h1>
         </span>
       </div>
     </div>
+  </div>
 
+  <footer class="content">
     <nav>
-      <a href="faq.html">FAQ</a><!--
-   --><a href="https://github.com/iojs/io.js/issues">Github Issues</a><!--
+      <a href="https://github.com/iojs/io.js/issues">Github Issues</a><!--
    --><a href="https://github.com/iojs">Github Org</a><!--
    --><a href="http://webchat.freenode.net/?channels=io.js">IRC Chat</a><!--
    --><a href="http://logs.libuv.org/io.js/latest">Logs</a><!--
-   --><a href="es6.html">ES6</a>
-   <a href="https://github.com/iojs/io.js/blob/v0.12/CONTRIBUTING.md#governance">Governance</a>
+   --><a href="https://github.com/iojs/io.js/blob/v0.12/CONTRIBUTING.md#governance">Governance</a>
     </nav>
-
-  </div>
+  </footer>
 
 </body>
 

diff --git a/style.css b/style.css
@@ -18,29 +18,42 @@ body {
   text-align: center;
 }
 
+.content {
+  position: relative;
+  max-width: 640px;
+  padding-left: 25px;
+  padding-right: 25px;
+  margin: 0 auto;
+}
+
 header {
   background: #292829;
   padding: 20px;
 }
 
+header .content {
+  display: -webkit-flex;
+  display: flex;
+}
+
 header a {
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, 0.7);
   font-weight: 700;
   font-size: 1rem;
+  padding-left: 1.5rem;
+}
+header a.logo {
+  color: rgba(255, 255, 255, 0.5);
+  -webkit-flex: 1;
+  flex: 1;
+  text-align: left;
+  padding: 0;
 }
 
 header a:hover {
   color: #F7DF31;
 }
 
-#content {
-  position: relative;
-  max-width: 640px;
-  padding-left: 25px;
-  padding-right: 25px;
-  margin: 0 auto;
-}
-
 h1 {
   color: black;
   font-size: 3rem;
@@ -173,4 +186,12 @@ p.lead {
     display: block;
     border: none;
   }
+
+  header .content {
+    padding: 0;
+  }
+
+  header a {
+    padding-left: 1rem;
+  }
 }