patching holes

docs/assets/css/docs.css

@@ -23,24 +23,30 @@ body {
   -webkit-text-size-adjust: 100%;
 }
 
-.docs-header {
+.docs-header,
+.docs-sub-header {
   position: relative;
-  height: 100vh;
-  min-height: 620px;
   background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
 }
-.docs-header:before {
-  position: fixed;
+.docs-header:before,
+.docs-sub-header:before {
+  position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   background-image: url(../img/pattern.png);
   background-size: 30%;
+  background-position: center center;
   opacity: .035;
   content: '';
 }
 
+.docs-header {
+  height: 100vh;
+  min-height: 620px;
+}
+
 .docs-title {
   position: absolute;
   top: 20px;
@@ -132,6 +138,16 @@ body {
   line-height: 34px;
 }
 
+.docs-masthead {
+  position: relative;
+}
+.docs-masthead .docs-title {
+  left: 0;
+}
+.docs-masthead .docs-nav {
+  right: 0;
+}
+
 .carbonad {
   position: absolute !important;
   bottom: 90px !important;
@@ -186,9 +202,9 @@ body {
 }
 
 .docs-sub-content {
-  padding-top: 50px;
+  padding-top: 100px;
+  padding-bottom: 100px;
   color: #fff;
-  text-align: center;
 }
 .docs-sub-content .page-title,
 .docs-sub-content .page-description {
@@ -204,9 +220,6 @@ body {
   font-size: 24px;
   opacity: .7;
 }
-.docs-sub-content.with-padding {
-  padding-bottom: 80px;
-}
 
 .docs-section {
   padding-top: 80px;
@@ -353,6 +366,7 @@ body {
 }
 
 .platform-toggle {
+  display: none;
   padding-top: 15px;
   padding-bottom: 90px;
 }

docs/assets/js/docs.js

@@ -151,10 +151,8 @@ $(function() {
 
     if(currentTop >= toggleTop) {
       platformToggle.addClass('fixed');
-      $('.docs-components').css('padding-top', toggleHeight);
     } else if (currentTop <= $('.docs-header').outerHeight()) {
       platformToggle.removeClass('fixed');
-      $('.docs-components').css('padding-top', 0);
     }
   }
 

docs/components.html

@@ -3,21 +3,22 @@ layout: default
 title: Components · Ratchet
 ---
 
-<div class="docs-header">
-  <div class="container column-group">
+<div class="docs-sub-header">
+  <div class="container">
+    <div class="column-group">
       <div class="column units-2">
-      <header class="docs-nav">
+        <header class="docs-masthead">  
           <h1 class="docs-title">Ratchet</h1>
-        <a data-ignore="push" class="icon icon-bars" href="/components"></a>
-        <a data-ignore="push" class="version" href="/">Home</a>
+          <a class="docs-nav icon icon-bars" href="/components" data-ignore="push"></a>
         </header>
-    </div>
-  </div>
         
         <div class="docs-sub-content">
           <h2 class="page-title">Components</h2>
           <p class="page-description">Design patterns that serve as basic building blocks</p>
         </div>
+      </div>
+    </div>
+  </div>
 
   <div class="platform-toggle">
     <div class="segmented-control">

sass/docs.scss

@@ -22,25 +22,28 @@ body {
 
 // Jumbotron
 // --------------------------------------------------
-
-.docs-header {
+.docs-header,
+.docs-sub-header {
   position: relative;
-  height: 100vh;
-  min-height: 620px;
   background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
 
   &:before {
-    position: fixed;
+    position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     background-image: url(../img/pattern.png);
     background-size: 30%;
+    background-position: center center;
     opacity: .035;
     content: '';
   }
 }
+.docs-header {
+  height: 100vh;
+  min-height: 620px;
+}
 .docs-title {
   position: absolute;
   top: 20px;
@@ -123,6 +126,16 @@ body {
   color: #fff;
   line-height: 34px;
 }
+.docs-masthead {
+  position: relative;
+
+  .docs-title {
+    left: 0;
+  }
+  .docs-nav {
+    right: 0;
+  }
+}
 
 // Ads
 .carbonad {
@@ -172,9 +185,9 @@ body {
 // --------------------------------------------------
 
 .docs-sub-content {
-  padding-top: 50px;
+  padding-top: 100px;
+  padding-bottom: 100px;
   color: #fff;
-  text-align: center;
 
   .page-title,
   .page-description {
@@ -190,9 +203,6 @@ body {
     font-size: 24px;
     opacity: .7;
   }
-  &.with-padding {
-    padding-bottom: 80px;
-  }
 }
 
 
@@ -359,6 +369,7 @@ body {
 // --------------------------------------------------
 
 .platform-toggle {
+  display: none;
   padding-top: 15px;
   padding-bottom: 90px;