From 716892b95dd292c62d9bc7ca2951176e94657b00 Mon Sep 17 00:00:00 2001
From: Thatcher Peskens <thatcher@dotcloud.com>
Date: Tue, 4 Jun 2013 11:33:39 -0700
Subject: [PATCH] Modified the navigation in both website and documentaion to
 include the Blog.

---
 docs/theme/docker/layout.html          | 30 +++++++++----
 docs/theme/docker/static/css/main.css  | 41 +++++++++++++++++-
 docs/theme/docker/static/css/main.less | 41 ++++++++++++++++--
 docs/website/gettingstarted/index.html | 27 +++++++-----
 docs/website/index.html                | 58 +++++++++++++-------------
 5 files changed, 145 insertions(+), 52 deletions(-)

diff --git a/docs/theme/docker/layout.html b/docs/theme/docker/layout.html
index d212c9ca86..baaaec9155 100755
--- a/docs/theme/docker/layout.html
+++ b/docs/theme/docker/layout.html
@@ -64,14 +64,15 @@
 
             <div style="float: right" class="pull-right">
                 <ul class="nav">
-                    <li><a href="http://www.docker.io/">Introduction</a></li>
-                    <li><a href="http://www.docker.io/gettingstarted/">Getting started</a></li>
-                    <li class="active"><a href="http://docs.docker.io/en/latest/">Documentation</a></li>
+                    <li id="nav-introduction"><a href="http://www.docker.io/">Introduction</a></li>
+                    <li id="nav-gettingstarted"><a href="http://www.docker.io/gettingstarted/">Getting started</a></li>
+                    <li id="nav-documentation" class="active"><a href="http://docs.docker.io/en/latest/">Documentation</a></li>
+                    <li id="nav-blog"><a href="http://blog.docker.io/">Blog</a></li>
                 </ul>
-                <div class="social links" style="float: right; margin-top: 14px; margin-left: 12px">
-                    <a class="twitter" href="http://twitter.com/getdocker">Twitter</a>
-                    <a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
-                </div>
+                <!--<div class="social links" style="float: right; margin-top: 14px; margin-left: 12px">-->
+                    <!--<a class="twitter" href="http://twitter.com/getdocker">Twitter</a>-->
+                    <!--<a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>-->
+                <!--</div>-->
             </div>
 
             <div style="margin-left: -12px; float: left;">
@@ -86,8 +87,13 @@
 
 <div class="container">
     <div class="row">
-        <div class="span12 titlebar"><h1 class="pageheader">DOCUMENTATION</h1>
+        <div class="span12 titlebar">
             <!--<span class="pull-right" style="margin-left: 20px; font-size: 20px">{{version}}</span>-->
+            <div class="pull-right" id="fork-us" style="margin-top: 16px; margin-right: 16px;">
+                <a  href="http://github.com/dotcloud/docker/"><img src="{{ pathto('_static/img/fork-us.png', 1) }}"> Fork us on Github</a>
+            </div>
+            <h1 class="pageheader">DOCUMENTATION</h1>
+
         </div>
     </div>
 
@@ -123,8 +129,14 @@
     <div class="row">
 
         <div class="span12 footer">
+            <div class="tbox textright forceleftmargin social links pull-right">
+                <a class="twitter" href="http://twitter.com/getdocker">Twitter</a>
+                <a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
+            </div>
 
             Docker is a project by <a href="http://www.dotcloud.com">dotCloud</a>
+
+
 {#            {%- if show_source and has_source and sourcename %}#}
 {#            ·#}
 {#            <a href="{{ pathto('_sources/' + sourcename, true)|e }}"#}
@@ -157,7 +169,7 @@
   <!-- script which should be loaded after everything else -->
 <script type="text/javascript">
 
-
+    // Function to make the sticky header possible
     var shiftWindow = function() {
         scrollBy(0, -70);
         console.log("window shifted")
diff --git a/docs/theme/docker/static/css/main.css b/docs/theme/docker/static/css/main.css
index 0629efeb48..5322e33590 100755
--- a/docs/theme/docker/static/css/main.css
+++ b/docs/theme/docker/static/css/main.css
@@ -285,6 +285,40 @@ section.header {
 .social .github {
   background-position: -59px 2px;
 }
+#fork-us {
+  /*font-family: 'Maven Pro';*/
+
+  /*font-weight: bold;*/
+
+  font-size: 12px;
+  /*text-transform: uppercase;*/
+
+  display: block;
+  padding: 0px 1em;
+  height: 28px;
+  line-height: 28px;
+  background-color: #43484c;
+  filter: progid:dximagetransform.microsoft.gradient(gradientType=0, startColorstr='#FFFF6E56', endColorstr='#FFED4F35');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #747474), color-stop(100%, #43484c));
+  background-image: -webkit-linear-gradient(top, #747474 0%, #43484c 100%);
+  background-image: -moz-linear-gradient(top, #747474 0%, #43484c 100%);
+  background-image: -o-linear-gradient(top, #747474 0%, #43484c 100%);
+  background-image: linear-gradient(top, #747474 0%, #43484c 100%);
+  border: 1px solid #43484c;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
+  -moz-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
+  box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
+  margin: 8px;
+}
+#fork-us a {
+  color: #faf2ee;
+  text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px;
+}
 /* =======================
    Media size overrides
 ======================= */
@@ -325,10 +359,15 @@ section.header {
   
     padding-top: 600px;
   }
+  #fork-us {
+    display: none;
+  }
 }
 /* Landscape phones and down */
 @media (max-width: 480px) {
-  
+  #nav-gettingstarted {
+    display: none;
+  }
 }
 /* Misc fixes */
 table th {
diff --git a/docs/theme/docker/static/css/main.less b/docs/theme/docker/static/css/main.less
index 50c8fe6b4b..14eab5fee2 100644
--- a/docs/theme/docker/static/css/main.less
+++ b/docs/theme/docker/static/css/main.less
@@ -391,6 +391,38 @@ section.header {
 }
 
 
+#fork-us {
+  /*font-family: 'Maven Pro';*/
+  /*font-weight: bold;*/
+  font-size: 12px;
+  /*text-transform: uppercase;*/
+  display: block;
+  padding: 0px 1em;
+  height: 28px;
+  line-height: 28px;
+  background-color: #43484c;
+  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFF6E56', endColorstr='#FFED4F35');
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #747474), color-stop(100%, #43484c));
+  background-image: -webkit-linear-gradient(top, #747474 0%, #43484c 100%);
+  background-image: -moz-linear-gradient(top, #747474 0%, #43484c 100%);
+  background-image: -o-linear-gradient(top, #747474 0%, #43484c 100%);
+  background-image: linear-gradient(top, #747474 0%, #43484c 100%);
+  border: 1px solid #43484c;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
+  -moz-box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
+  box-shadow: inset rgba(255, 255, 255, 0.17) 0 1px 1px;
+  margin: 8px;
+
+  a {
+    color: #faf2ee;
+    text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 0px;
+  }
+}
 /* =======================
    Media size overrides
 ======================= */
@@ -441,14 +473,17 @@ section.header {
   /* TODO: Fix this to be relative to the navigation size */
     padding-top: 600px;
   }
-
+  #fork-us {
+    display: none;
+  }
 }
 
 
 /* Landscape phones and down */
 @media (max-width: 480px) {
-
-
+  #nav-gettingstarted {
+    display: none;
+  }
 }
 
 /* Misc fixes */
diff --git a/docs/website/gettingstarted/index.html b/docs/website/gettingstarted/index.html
index a40289144f..de0cc3512d 100644
--- a/docs/website/gettingstarted/index.html
+++ b/docs/website/gettingstarted/index.html
@@ -34,15 +34,11 @@
 
             <div style="float: right" class="pull-right">
                 <ul class="nav">
-                    <li><a href="../">Introduction</a></li>
-                    <li class="active"><a href="">Getting started</a></li>
-                    <li class=""><a href="http://docs.docker.io/en/latest/">Documentation</a></li>
+                    <li id="nav-introduction"><a href="../">Introduction</a></li>
+                    <li id="nav-gettingstarted" class="active"><a href="">Getting started</a></li>
+                    <li id="nav-documentation" class=""><a href="http://docs.docker.io/en/latest/">Documentation</a></li>
+                    <li id="nav-blog"><a href="http://blog.docker.io/">Blog</a></li>
                 </ul>
-
-                <div class="social links" style="float: right; margin-top: 14px; margin-left: 12px">
-                    <a class="twitter" href="http://twitter.com/getdocker">Twitter</a>
-                    <a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
-                </div>
             </div>
 
             <div style="margin-left: -12px; float: left;">
@@ -55,8 +51,16 @@
 
 <div class="container">
     <div class="row">
-        <div class="span12 titlebar"><h1 class="pageheader">GETTING STARTED</h1>
+
+        <div class="span12 titlebar">
+
+            <div class="pull-right" id="fork-us" style="margin-top: 16px; margin-right: 16px;">
+                <a  href="http://github.com/dotcloud/docker/"><img src="../static/img/fork-us.png"> Fork us on Github</a>
+            </div>
+
+            <h1 class="pageheader"> GETTING STARTED</h1>
         </div>
+
     </div>
 
 </div>
@@ -172,7 +176,10 @@
     <footer id="footer" class="footer">
         <div class="row">
             <div class="span12 social">
-
+                <div class="tbox textright forceleftmargin social links pull-right">
+                    <a class="twitter" href="http://twitter.com/getdocker">Twitter</a>
+                    <a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
+                </div>
                 Docker is a project by <a href="http://www.dotcloud.com">dotCloud</a>
 
             </div>
diff --git a/docs/website/index.html b/docs/website/index.html
index bc3e2d0271..f6f4efbccb 100644
--- a/docs/website/index.html
+++ b/docs/website/index.html
@@ -44,9 +44,18 @@
         .debug {
             border: 1px red dotted;
         }
+        .twitterblock {
+            min-height: 75px;
+        }
+
+        .twitterblock img {
+            float: left;
+            margin-right: 10px;
+        }
 
     </style>
 
+
 </head>
 
 
@@ -56,17 +65,18 @@
     <div class="navbar-dotcloud">
         <div class="container" style="text-align: center;">
 
+
+            <div class="pull-left" id="fork-us" style="margin-top: 16px;">
+                <a  href="http://github.com/dotcloud/docker/"><img src="static/img/fork-us.png" alt="fork-icon"> Fork us on Github</a>
+            </div>
+
             <div class="pull-right" >
                 <ul class="nav">
-                    <li class="active"><a href="/">Introduction</a></li>
-                    <li ><a href="gettingstarted">Getting started</a></li>
-                    <li class=""><a href="http://docs.docker.io/en/latest/">Documentation</a></li>
+                    <li id="nav-introduction" class="active"><a href="/">Introduction</a></li>
+                    <li id="nav-gettingstarted"><a href="gettingstarted">Getting started</a></li>
+                    <li id="nav-documentation" class=""><a href="http://docs.docker.io/en/latest/">Documentation</a></li>
+                    <li id="nav-blog"><a href="http://blog.docker.io/">Blog</a></li>
                 </ul>
-
-                <div class="social links" style="float: right; margin-top: 14px; margin-left: 12px">
-                    <a class="twitter" href="http://twitter.com/getdocker">Twitter</a>
-                    <a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
-                </div>
             </div>
         </div>
     </div>
@@ -81,7 +91,7 @@
 
                 <div class="span5" style="margin-bottom: 15px;">
                     <div style="text-align: center;" >
-                        <img src="static/img/docker_letters_500px.png">
+                        <img src="static/img/docker_letters_500px.png" alt="docker letters">
 
                         <h2>The Linux container engine</h2>
                     </div>
@@ -130,7 +140,7 @@
             <section class="contentblock">
                 <div class="container">
                 <div class="span2" style="margin-left: 0" >
-                    <a href="http://dotcloud.theresumator.com/apply/mWjkD4/Software-Engineer.html" title="Job description"><img src="static/img/hiring_graphic.png" width="140px" style="margin-top: 25px"></a>
+                    <a href="http://dotcloud.theresumator.com/apply/mWjkD4/Software-Engineer.html" title="Job description"><img src="static/img/hiring_graphic.png" alt="we're hiring" width="140" style="margin-top: 25px"></a>
                 </div>
                 <div class="span4" style="margin-left: 0">
                     <h4>Do you think it is cool to hack on docker? Join us!</h4>
@@ -156,7 +166,7 @@
                     </div>
                 </a>
                 &nbsp;
-                <input type="button" class="searchbutton" type="submit" value="Search images"
+                <input type="button" class="searchbutton" value="Search images"
                        onClick="window.open('https://index.docker.io')" />
 
             </section>
@@ -184,32 +194,19 @@
 
 </div>
 
-<style>
-    .twitterblock {
-        min-height: 75px;
-    }
-
-    .twitterblock img {
-        float: left;
-        margin-right: 10px;
-    }
-
-</style>
-
-
 <div class="container">
 
     <div class="row">
         <div class="span6">
             <section class="contentblock twitterblock">
                 <img src="https://si0.twimg.com/profile_images/2707460527/252a64411a339184ff375a96fb68dcb0_bigger.png">
-                <em>Mitchell Hashimoto‏@mitchellh:</em> Docker launched today. It is incredible. They’re also working RIGHT NOW on a Vagrant provider. LXC is COMING!!
+                <em>Mitchell Hashimoto ‏@mitchellh:</em> Docker launched today. It is incredible. They’re also working RIGHT NOW on a Vagrant provider. LXC is COMING!!
             </section>
         </div>
         <div class="span6">
             <section class="contentblock twitterblock">
                 <img src="https://si0.twimg.com/profile_images/1108290260/Adam_Jacob-114x150_original_bigger.jpg">
-                <em>Adam Jacob‏@adamhjk:</em> Docker is clearly the right idea. @solomonstre absolutely killed it. Containerized app deployment is the future, I think.
+                <em>Adam Jacob ‏@adamhjk:</em> Docker is clearly the right idea. @solomonstre absolutely killed it. Containerized app deployment is the future, I think.
             </section>
         </div>
     </div>
@@ -217,13 +214,13 @@
         <div class="span6">
             <section class="contentblock twitterblock">
                 <img src="https://si0.twimg.com/profile_images/14872832/twitter_pic_bigger.jpg">
-                <em>Matt Townsend‏@mtownsend:</em> I have a serious code crush on docker.io - it's Lego for PaaS. Motherfucking awesome Lego.
+                <em>Matt Townsend ‏@mtownsend:</em> I have a serious code crush on docker.io - it's Lego for PaaS. Motherfucking awesome Lego.
             </section>
         </div>
         <div class="span6">
             <section class="contentblock twitterblock">
                 <img src="https://si0.twimg.com/profile_images/1312352395/rupert-259x300_bigger.jpg">
-                <em>Rob Harrop‏@robertharrop:</em> Impressed by @getdocker - it's all kinds of magic. Serious rethink of AWS architecture happening @skillsmatter.
+                <em>Rob Harrop ‏@robertharrop:</em> Impressed by @getdocker - it's all kinds of magic. Serious rethink of AWS architecture happening @skillsmatter.
             </section>
         </div>
     </div>
@@ -317,7 +314,10 @@
     <footer id="footer" class="footer">
         <div class="row">
             <div class="span12">
-
+                <div class="tbox textright forceleftmargin social links pull-right">
+                    <a class="twitter" href="http://twitter.com/getdocker">Twitter</a>
+                    <a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
+                </div>
                 Docker is a project by <a href="http://www.dotcloud.com">dotCloud</a>
 
             </div>