basic components header

11 years ago · c9a7accd60
9 changed files with 130 additions and 13 deletions
--- a/_includes/header.html
+++ b/_includes/header.html
@ -8,7 +8,7 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black">

 <link rel="stylesheet" href="{{ page.base_url }}dist/ratchet.css">
-<link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css">
+<!-- <link rel="stylesheet" href="{{ page.base_url }}dist/ios-theme.css"> -->
 <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/docs.css">
 <link rel="stylesheet" href="{{ page.base_url }}docs-assets/css/pygments.css">
 <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
--- a/components.html
+++ b/components.html
@ -4,6 +4,29 @@ title: Ratchet ~ Components
 base_url: "../"
 ---

+<!-- 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">
+      <h2 class="section-title">Components</h2>
+      <p class="section-description">Design patterns that serve as basic building blocks.</p>
+    </div>
+  </div>
+</div>
+
 <!-- 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.
@ -19,10 +42,6 @@ base_url: "../"
  <!-- Components -->
  <div class="column-group">
    <div class="column units-2 lg-units-7">
-      <div class="section-header">
-        <h2 class="section-title">Components</h2>
-        <p class="section-description">Design patterns that serve as basic building blocks.</p>
-      </div>
      <!-- In iPhone examples -->
      <div class="iphone">
        <div class="iphone-content">
--- a/dist/android-theme.css
+++ b/dist/android-theme.css
@ -1,7 +1,7 @@
 /*
 * =====================================================
 * Ratchet v2.0.0
- * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
 * Licensed under http://www.opensource.org/licenses/MIT
 *
 * Designed and built by @connors, @dhg, and @fat.
--- a/dist/ios-theme.css
+++ b/dist/ios-theme.css
@ -1,7 +1,7 @@
 /*
 * =====================================================
 * Ratchet v2.0.0
- * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
 * Licensed under http://www.opensource.org/licenses/MIT
 *
 * Designed and built by @connors, @dhg, and @fat.
--- a/dist/ratchet-theme.css
+++ b/dist/ratchet-theme.css
@ -1,7 +1,7 @@
 /*
 * =====================================================
 * Ratchet v2.0.0
- * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
 * Licensed under http://www.opensource.org/licenses/MIT
 *
 * Designed and built by @connors, @dhg, and @fat.
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@ -1,7 +1,7 @@
 /*
 * =====================================================
 * Ratchet v2.0.0
- * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
 * Licensed under http://www.opensource.org/licenses/MIT
 *
 * Designed and built by @connors, @dhg, and @fat.
--- a/dist/ratchet.js
+++ b/dist/ratchet.js
@ -1,7 +1,7 @@
 /*
 * =====================================================
 * Ratchet v2.0.0
- * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
 * Licensed under http://www.opensource.org/licenses/MIT
 *
 * Designed and built by @connors, @dhg, and @fat.
--- a/docs-assets/css/docs.css
+++ b/docs-assets/css/docs.css
@ -1,7 +1,7 @@
 /*
 * =====================================================
 * Ratchet v2.0.0
- * Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton
+ * Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
 * Licensed under http://www.opensource.org/licenses/MIT
 *
 * Designed and built by @connors, @dhg, and @fat.
@ -81,6 +81,49 @@ h1, h2, h3, h4, h5, h6 {
  border: 0;
 }

+.docs-masthead {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ddd;
+}
+.docs-masthead .logotype {
+  margin-top: 0;
+  margin-bottom: 0;
+  color: #999;
+  font-size: 18px;
+  font-weight: normal;
+}
+
+.docs-navigation {
+  float: right;
+  padding-top: 5px;
+}
+.docs-navigation .nav-item {
+  margin-left: 20px;
+}
+
+.docs-section-header {
+  padding-top: 50px;
+  padding-bottom: 60px;
+  text-align: center;
+  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;
+}
+
 .component {
  padding: 50px 15px;
  margin-left: -15px;
@ -194,7 +237,6 @@ hr {

@media screen and (min-width: 768px) {
  .iphone {
-    display: block;
    position: fixed;
    top: 50px;
    left: 50%;
--- a/lib/sass/docs.scss
+++ b/lib/sass/docs.scss
@ -60,6 +60,7 @@ h1, h2, h3, h4, h5, h6 {
  }
 }

+
 // Overriding the button styles for the social
 // --------------------------------------------------

@ -83,8 +84,63 @@ h1, h2, h3, h4, h5, h6 {
  }
 }

+
+// Masthead
+// --------------------------------------------------
+
+.docs-masthead {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #ddd;
+
+  .logotype {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: #999;
+    font-size: 18px;
+    font-weight: normal;
+  }
+}
+.docs-navigation {
+  float: right;
+  padding-top: 5px;
+
+  .nav-item {
+    margin-left: 20px;
+  }    
+}
+
+
+// Section header
+// --------------------------------------------------
+
+.docs-section-header {
+  padding-top: 50px;
+  padding-bottom: 60px; // Vertically center it optically
+  text-align: center;
+  border-bottom: 1px solid #ddd;
+  background-color: #fcfcfc;
+
+  .section-title,
+  .section-description {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 300;
+  }
+  .section-title {
+    color: #333;
+    font-size: 30px;
+  }
+  .section-description {
+    color: #777;
+    font-size: 18px;
+  }
+}
+
+
 // Components
 // --------------------------------------------------
+
 .component {
  padding: 50px 15px;
  margin-left: -15px;
@ -195,7 +251,7 @@ hr {
 // --------------------------------------------------
@media screen and (min-width: 768px) {
  .iphone {
-    display: block;
+    // display: block;
    position: fixed;
    top: 50px;
    left: 50%;