center the header

components.html

@@ -4,33 +4,35 @@ title: Ratchet ~ Components
 base_url: "../"
 ---
 
+<!-- Banner for Mozilla/IE -->
+<p class="notice-banner">
+  <strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.
+</p>
+
 <!-- Docs masthead -->
 <header class="docs-masthead">
   <div class="container column-group">
     <div class="column units-2">
-      <nav class="docs-navigation">
-        <a class="nav-item" href="#">Get started</a>
-        <a class="nav-item" href="#">Components</a>
-        <a class="nav-item" href="#">View on GitHub</a>
-      </nav>
-      <h1 class="logotype">Ratchet</h1>
-    </div>
-  </div>
-</header>
-
-<div class="docs-section-header">
-  <div class="container column-group">
-    <div class="column units-2">
+      <h1 class="logotype">R</h1>
       <h2 class="section-title">Components</h2>
       <p class="section-description">Design patterns that serve as basic building blocks.</p>
     </div>
   </div>
-</div>
+</header>
 
-<!-- Banner for Mozilla/IE -->
-<p class="notice-banner">
-  <strong>Heads up!</strong> Ratchet components are written only for iPhone, so many are broken in non-Webkit browsers.
-</p>
+<div class="platform-toggle">
+  <ul class="segmented-controller">
+    <li class="selected">
+      <a>Base</a>
+    </li>
+    <li>
+      <a>iOS</a>
+    </li>
+    <li>
+      <a>Android</a>
+    </li>
+  </ul>
+</div>
 
 <div class="container">
   <!--[if IE]>

docs-assets/css/docs.css

@@ -82,16 +82,41 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .docs-masthead {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: 70px;
+  padding-bottom: 100px;
+  text-align: center;
   border-bottom: 1px solid #ddd;
+  background-color: #fcfcfc;
 }
 .docs-masthead .logotype {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  padding: 10px;
   margin-top: 0;
-  margin-bottom: 0;
-  color: #999;
+  margin-bottom: 10px;
+  color: #ccc;
   font-size: 18px;
   font-weight: normal;
+  line-height: 16px;
+  border: 2px solid #ddd;
+  border-radius: 50px;
+  -webkit-transition: all 0.2s linear;
+  transition: all 0.2s linear;
+}
+.docs-masthead .section-title,
+.docs-masthead .section-description {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 300;
+}
+.docs-masthead .section-title {
+  color: #333;
+  font-size: 45px;
+}
+.docs-masthead .section-description {
+  color: #777;
+  font-size: 24px;
 }
 
 .docs-navigation {
@@ -102,26 +127,12 @@ h1, h2, h3, h4, h5, h6 {
   margin-left: 20px;
 }
 
-.docs-section-header {
-  padding-top: 50px;
-  padding-bottom: 60px;
-  text-align: center;
+.platform-toggle {
   border-bottom: 1px solid #ddd;
-  background-color: #fcfcfc;
-}
-.docs-section-header .section-title,
-.docs-section-header .section-description {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 300;
-}
-.docs-section-header .section-title {
-  color: #333;
-  font-size: 30px;
 }
-.docs-section-header .section-description {
-  color: #777;
-  font-size: 18px;
+.platform-toggle .segmented-controller {
+  margin: 10px auto;
+  max-width: 300px;
 }
 
 .component {

lib/sass/docs.scss

@@ -89,16 +89,40 @@ h1, h2, h3, h4, h5, h6 {
 // --------------------------------------------------
 
 .docs-masthead {
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding-top: 70px;
+  padding-bottom: 100px;
+  text-align: center;
   border-bottom: 1px solid #ddd;
+  background-color: #fcfcfc;
 
   .logotype {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
     margin-top: 0;
-    margin-bottom: 0;
-    color: #999;
+    margin-bottom: 10px;
+    color: #ccc;
     font-size: 18px;
     font-weight: normal;
+    line-height: 16px;
+    border: 2px solid #ddd;
+    border-radius: 50px;
+    @include transition(all .2s linear);
+  }
+  .section-title,
+  .section-description {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 300;
+  }
+  .section-title {
+    color: #333;
+    font-size: 45px;
+  }
+  .section-description {
+    color: #777;
+    font-size: 24px;
   }
 }
 .docs-navigation {
@@ -110,33 +134,17 @@ h1, h2, h3, h4, h5, h6 {
   }    
 }
 
-
-// Section header
+// Platform toggle
 // --------------------------------------------------
 
-.docs-section-header {
-  padding-top: 50px;
-  padding-bottom: 60px; // Vertically center it optically
-  text-align: center;
+.platform-toggle {
   border-bottom: 1px solid #ddd;
-  background-color: #fcfcfc;
 
-  .section-title,
-  .section-description {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-weight: 300;
+  .segmented-controller {
+    margin: 10px auto;
+    max-width: 300px;
   }
-  .section-title {
-    color: #333;
-    font-size: 30px;
-  }
-  .section-description {
-    color: #777;
-    font-size: 18px;
 }
-}
-
 
 // Components
 // --------------------------------------------------