making the header work well

4 files changed, 98 insertions, 55 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 1c6c2f1..8d7e7cf 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -45,6 +45,17 @@ body {
   height: 100vh;
   min-height: 620px;
 }
+.docs-header .carbonad {
+  position: absolute !important;
+  bottom: 90px !important;
+  margin-top: 0 !important;
+  -webkit-animation-name: fadeintext;
+  -moz-animation-name: fadeintext;
+  animation-name: fadeintext;
+  -webkit-animation-duration: 3s;
+  -moz-animation-duration: 3s;
+  animation-duration: 3s;
+}
 
 .docs-masthead {
   position: relative;
@@ -56,10 +67,8 @@ body {
 
 .docs-title {
   position: absolute;
-  top: 14px;
   left: 50%;
   margin-bottom: 0;
-  color: #fff;
   font-size: 22px;
   font-weight: 100;
   -webkit-transform: translateX(-50%);
@@ -67,18 +76,23 @@ body {
   transform: translateX(-50%);
 }
 
+.docs-title a,
 .docs-nav {
   color: #fff;
-  cursor: pointer;
   -webkit-transition: opacity 0.2s linear;
   -moz-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
+.docs-title a:active,
 .docs-nav:active {
   color: #fff;
   opacity: .5;
 }
 
+.docs-nav {
+  cursor: pointer;
+}
+
 .docs-header-content {
   position: relative;
   top: 30px;
@@ -133,8 +147,6 @@ body {
 }
 
 .carbonad {
-  position: absolute !important;
-  bottom: 90px !important;
   width: 100% !important;
   height: auto !important;
   padding: 15px !important;
@@ -145,12 +157,6 @@ body {
   border-right: 0 !important;
   border-bottom: 0 !important;
   border-left: 0 !important;
-  -webkit-animation-name: fadeintext;
-  -moz-animation-name: fadeintext;
-  animation-name: fadeintext;
-  -webkit-animation-duration: 3s;
-  -moz-animation-duration: 3s;
-  animation-duration: 3s;
 }
 
 .carbonad-img {
@@ -186,6 +192,8 @@ body {
 }
 
 .docs-sub-content {
+  position: relative;
+  overflow: hidden;
   padding-top: 55px;
   padding-bottom: 65px;
   color: #fff;
@@ -532,19 +540,32 @@ hr {
 }
 
 @media screen and (min-width: 768px) {
-  .docs-logo {
-    width: 70px;
-    height: 70px;
-    font-size: 30px;
-    line-height: 68px;
-  }
-
   .docs-header {
     min-height: 770px;
   }
+  .docs-header .carbonad {
+    bottom: 130px !important;
+    left: 50% !important;
+    margin-left: -165px !important;
+  }
+
+  .docs-sub-header .carbonad {
+    position: absolute !important;
+    top: 50% !important;
+    right: 15px !important;
+    margin-top: 0 !important;
+    -webkit-transform: translateY(-50%) !important;
+    -ms-transform: translateY(-50%) !important;
+    transform: translateY(-50%) !important;
+  }
+
+  .docs-sub-content {
+    margin-right: 380px;
+  }
 
   .docs-title {
     position: static;
+    float: left;
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
     transform: translateX(0);
@@ -567,10 +588,7 @@ hr {
   }
 
   .carbonad {
-    bottom: 130px !important;
-    left: 50% !important;
     width: 330px !important;
-    margin-left: -165px !important;
     border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
     border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
@@ -599,7 +617,7 @@ hr {
     display: block;
     width: 395px;
     height: 813px;
-    margin-left: -13px;
+    margin-left: -20px;
     font-family: "Helvetica Neue", sans-serif;
     background-image: url("../img/iphone5c.png");
     background-size: 100%;
@@ -692,11 +710,21 @@ hr {
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
 }
+@media screen and (min-width: 1200px) {
+  .device {
+    margin-left: 39px;
+  }
+
+  .docs-sub-header .carbonad {
+    right: 30px !important;
+  }
+}
 .example-device {
   margin: 0 auto;
 }
 
 .container {
+  position: relative;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0;
diff --git a/docs/components.html b/docs/components.html
index a09e736..645c329 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -4,14 +4,7 @@ title: Components · Ratchet
 ---
 
 <div class="docs-sub-header">
-  <header class="docs-masthead">
-    <div class="container">
-      <div class="column units-2">
-        <a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
-        <h1 class="docs-title">Ratchet</h1>
-      </div>
-    </div>
-  </header>
+  {% include masthead.html %}
   <div class="container">
     <div class="column-group">
       <div class="column units-2">
@@ -21,6 +14,8 @@ title: Components &middot; Ratchet
         </div>
       </div>
     </div>
+    
+    <div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/58147/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
   </div>
 
   <div class="platform-toggle">
diff --git a/docs/index.html b/docs/index.html
index f9d218c..cd03afa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,14 +4,7 @@ title: Ratchet
 ---
 
 <div class="docs-header">
-  <header class="docs-masthead">
-    <div class="container">
-      <div class="column units-2">
-        <a class="docs-nav icon icon-bars pull-right" href="/components" data-ignore="push"></a>
-        <h1 class="docs-title">Ratchet</h1>
-      </div>
-    </div>
-  </header>
+  {% include masthead.html %}
   <div class="docs-header-content">
     <p class="docs-subtitle">Build mobile apps with simple HTML&#8218; CSS&#8218; and JS components.</p>
     <a data-ignore="push" href="http://maker.github.com/ratchet/ratchet.zip" class="btn btn-primary" onClick="_gaq.push(['_trackEvent', 'Downloads', 'V2.0']);">Download Ratchet</a>
diff --git a/sass/docs.scss b/sass/docs.scss
index 7b74d1e..d296342 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -43,6 +43,15 @@ body {
 .docs-header {
   height: 100vh;
   min-height: 620px;
+
+  // Ad on the homepage
+  .carbonad {
+    position: absolute !important;
+    bottom: 90px !important;
+    margin-top: 0 !important;
+    @include animation-name(fadeintext);
+    @include animation-duration(3s);
+  }
 }
 
 // Masthead
@@ -55,17 +64,15 @@ body {
 }
 .docs-title {
   position: absolute;
-  top: 14px;
   left: 50%;
   margin-bottom: 0;
-  color: #fff;
   font-size: 22px;
   font-weight: 100;
   @include transform(translateX(-50%));
 }
+.docs-title a,
 .docs-nav {
   color: #fff;
-  cursor: pointer;
   @include transition(opacity .2s linear);
 
   &:active {
@@ -73,6 +80,9 @@ body {
     opacity: .5;
   }
 }
+.docs-nav {
+  cursor: pointer;
+}
 .docs-header-content {
   position: relative;
   top: 30px;
@@ -124,8 +134,6 @@ body {
 
 // Ads
 .carbonad {
-  position: absolute !important;
-  bottom: 90px !important;
   width: 100% !important;
   height: auto !important;
   padding: 15px !important;
@@ -136,8 +144,6 @@ body {
   border-right: 0 !important;
   border-bottom: 0 !important;
   border-left: 0 !important;
-  @include animation-name(fadeintext);
-  @include animation-duration(3s);
 }
 .carbonad-img {
   margin: 0 !important;
@@ -170,6 +176,8 @@ body {
 // --------------------------------------------------
 
 .docs-sub-content {
+  position: relative;
+  overflow: hidden;
   padding-top: 55px; // Visually centers the content.
   padding-bottom: 65px; // Visually centers the content.
   color: #fff;
@@ -554,17 +562,29 @@ hr {
 
 // Tablet to desktop 
 @media screen and (min-width: 768px) {
-  .docs-logo {
-    width: 70px;
-    height: 70px;
-    font-size: 30px; 
-    line-height: 68px;
-  }
   .docs-header {
     min-height: 770px;
+
+    // Ads on the homepage
+    .carbonad {
+      bottom: 130px !important;
+      left: 50% !important;
+      margin-left: -165px !important;
+    }
+  }
+  .docs-sub-header .carbonad {
+    position: absolute !important;
+    top: 50% !important;
+    right: 15px !important;
+    margin-top: 0 !important;
+    @include transform(translateY(-50%) !important);
+  }
+  .docs-sub-content {
+    margin-right: 380px
   }
   .docs-title {
     position: static;
+    float: left;
     @include transform(translateX(0));
   }
   .docs-header-content {
@@ -583,10 +603,7 @@ hr {
 
   // Ads
   .carbonad {
-    bottom: 130px !important;
-    left: 50% !important;
     width: 330px !important;
-    margin-left: -165px !important;
     border-right: 1px solid rgba(255,255,255,.1) !important;
     border-bottom: 1px solid rgba(255,255,255,.1) !important;
     border-left: 1px solid rgba(255,255,255,.1) !important;
@@ -623,7 +640,7 @@ hr {
     display: block;
     width: 395px;
     height: 813px;
-    margin-left: -13px;
+    margin-left: -20px;
     font-family: "Helvetica Neue", sans-serif;
     background-image: url("../img/iphone5c.png");
     background-size: 100%;
@@ -706,6 +723,15 @@ hr {
     text-shadow: 0 0 10px rgba(0,0,0,.5);
   }
 }
+@media screen and (min-width: 1200px) {
+  // Device
+  .device {
+    margin-left: 39px;
+  }
+  .docs-sub-header .carbonad {
+    right: 30px !important;
+  }
+}
 
 // Example devices
 
@@ -718,6 +744,7 @@ hr {
 // --------------------------------------------------
 
 .container {
+  position: relative;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0;