fixing up the toggle and device placment

components.html

@@ -15,13 +15,11 @@ base_url: "../"
     </div>
   </div>
 
-  <div class="docs-header-content">
+  <div class="docs-sub-content">
-    <div class="column units-2">
+    <h2 class="page-title">Components</h2>
-      <h2 class="section-title">Components</h2>
+    <p class="page-description">Design patterns that serve as basic building blocks</p>
-      <p class="section-description">Design patterns that serve as basic building blocks</p>
-    </div>
-  </div>
   </div>
+
   <div class="platform-toggle">
     <ul class="segmented-controller">
       <li  class="platform-switch selected" data-platform="">
@@ -35,6 +33,7 @@ base_url: "../"
       </li>
     </ul>
   </div>
+</div>
 
 <div class="container">
   <!-- Components -->

docs-assets/css/docs.css

@@ -729,6 +729,25 @@ body {
   line-height: 34px;
 }
 
+.docs-sub-content {
+  padding-top: 50px;
+  color: #fff;
+  text-align: center;
+}
+.docs-sub-content .page-title,
+.docs-sub-content .page-description {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 300;
+}
+.docs-sub-content .page-title {
+  font-size: 40px;
+}
+.docs-sub-content .page-description {
+  font-size: 24px;
+  opacity: .7;
+}
+
 .docs-section {
   padding-top: 80px;
   padding-bottom: 80px;
@@ -792,7 +811,7 @@ body {
   display: block;
   width: 80px;
   height: 80px;
-  margin: 0 auto 40px;
+  margin: 0 auto 30px;
   border: 1px solid #eee;
   border-radius: 40px;
 }
@@ -861,11 +880,8 @@ body {
 }
 
 .platform-toggle {
-  padding-top: 20px;
+  padding-top: 15px;
-  padding-bottom: 70px;
+  padding-bottom: 80px;
-  background-color: #1eb0e9;
-  -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
-  transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
 }
 .platform-toggle.fixed {
   position: fixed;
@@ -876,12 +892,15 @@ body {
   z-index: 3;
   padding-top: 8px;
   padding-bottom: 8px;
+  background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
+  -webkit-transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
+  transition: padding-top 0.2s linear, padding-bottom 0.2s linear;
 }
 .platform-toggle .segmented-controller {
   max-width: 300px;
   margin: 0 auto;
   border-color: #fff;
-  background-color: #1eb0e9;
+  background-color: transparent;
 }
 .platform-toggle .segmented-controller li {
   cursor: pointer;
@@ -897,7 +916,7 @@ body {
   background-color: #fff;
 }
 .platform-toggle .segmented-controller li.selected a {
-  color: #1eb0e9;
+  color: #254456;
 }
 
 .component {

docs-assets/js/docs.js

@@ -35,9 +35,17 @@ $(function() {
     contentPadding            = parseInt($('.docs-content').css('padding-bottom'));
     footerHeight              = $('.docs-footer').outerHeight(false);
      
+    // Device placment     
     device.initialLeft        = device.offset().left;
     device.initialTop         = device.initialTop || device.offset().top;
     device.dockingOffset      = ($(window).height() - device.height())/2;
+
+    console.log(device.dockingOffset);
+
+    // Toggle placment
+    toggleTop    = platformToggle.offset().top;
+    toggleHeight = platformToggle.outerHeight();
+
     checkDesktopContent();
     calculateScroll();
 
@@ -107,7 +115,7 @@ $(function() {
     var contentSectionItem;
     var currentTop = win.scrollTop();
 
-    if((device.initialTop - currentTop) <= device.dockingOffset + 113) {
+    if((device.initialTop - currentTop) <= device.dockingOffset) {
       device[0].className = "device device-fixed";
       device.css({top: device.dockingOffset})
     } else {
@@ -115,10 +123,10 @@ $(function() {
       device[0].setAttribute('style','')
     }
 
-    if(currentTop >= $('.docs-masthead').outerHeight()) {
+    if(currentTop >= toggleTop) {
       platformToggle.addClass('fixed');
-      $('.docs-components').css('padding-top', platformToggle.outerHeight());
+      $('.docs-components').css('padding-top', toggleHeight);
-    } else {
+    } else if (currentTop <= $('.docs-header').outerHeight()) {
       platformToggle.removeClass('fixed');
       $('.docs-components').css('padding-top', 0);
     }

lib/sass/docs.scss

@@ -120,6 +120,29 @@ body {
 }
 
 
+// Subpage Header
+// --------------------------------------------------
+.docs-sub-content {
+  padding-top: 50px;
+  color: #fff;
+  text-align: center;
+
+  .page-title,
+  .page-description {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 300;
+  }
+  .page-title {
+    font-size: 40px;
+  }
+  .page-description {
+    font-size: 24px;
+    opacity: .7;
+  }
+}
+
+
 // Content sections
 // --------------------------------------------------
 .docs-section {
@@ -190,7 +213,7 @@ body {
   display: block;
   width: 80px;
   height: 80px;
-  margin: 0 auto 40px;
+  margin: 0 auto 30px;
   border: 1px solid #eee;
   border-radius: 40px;
 
@@ -270,10 +293,8 @@ body {
 // --------------------------------------------------
 
 .platform-toggle {
-  padding-top: 20px;
+  padding-top: 15px;
-  padding-bottom: 70px;
+  padding-bottom: 80px;
-  background-color: #1eb0e9;
-  @include transition(padding-top .2s linear, padding-bottom .2s linear);
 
   &.fixed {
     position: fixed;
@@ -284,13 +305,15 @@ body {
     z-index: 3;
     padding-top: 8px;
     padding-bottom: 8px;
+    background-image: linear-gradient(45deg, #336f90 0%, #254456 100%);
+    @include transition(padding-top .2s linear, padding-bottom .2s linear);
   }
 
   .segmented-controller {
     max-width: 300px;
     margin: 0 auto;
     border-color: #fff;
-    background-color: #1eb0e9;
+    background-color: transparent;
 
     li {
       cursor: pointer;
@@ -306,7 +329,7 @@ body {
         background-color: #fff;
 
         a {
-          color: #1eb0e9;
+          color: #254456;
         }
       }
     }
@@ -316,6 +339,9 @@ body {
 // Components
 // --------------------------------------------------
 
+.docs-components {
+ // @include transition(padding-top .2s linear);
+}
 .component {
   padding: 50px 15px;
   margin-left: -15px;