derping

author: connors <connor.sears@github.com> 2014-02-17 09:12:54 +0400
committer: connors <connor.sears@github.com> 2014-02-17 09:12:54 +0400
commit: f0d917a432f776598fd98e660a21ca5cc652c505 (patch)
tree: 6c9a9f35f6eaff2f7e0048873e976c13cc31459c
parent: dad40e2a0b2d5c0c9e61514722d2901e6ca00bbc (diff)
9 files changed, 76 insertions, 57 deletions
diff --git a/README.md b/README.md
index d11804a..bf2a753 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Ratchet v2.0 WIP [![devDependencies](https://david-dm.org/maker/ratchet/dev-status.png?theme=shields.io)](https://david-dm.org/maker/ratchet#info=devDependencies)
 
-Prototype mobile apps with simple HTML, CSS, and JS components.
+Build mobile apps with simple HTML, CSS, and JS components.
 
 ## Getting Started
 
diff --git a/dist/ratchet.css b/dist/ratchet.css
index 5b3ea55..ae2ce6d 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -314,7 +314,7 @@ strong {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 10px 15px;
+  margin: 10px 10px;
   line-height: 1;
 }
 
@@ -345,11 +345,16 @@ h6, .h6 {
 }
 
 p {
-  margin: 10px 15px;
+  margin: 10px 10px;
   font-size: 14px;
   color: #777;
 }
 
+.container > h1, .container h2, .container h3, .container h4, .container h5, .container h6, .container p {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .btn {
   position: relative;
   display: inline-block;
diff --git a/dist/template.html b/dist/template.html
index e690b94..d89b5cc 100644
--- a/dist/template.html
+++ b/dist/template.html
@@ -36,45 +36,39 @@
   </head>
   <body>
 
-  <!-- Make sure all your bars are the first things in your <body> -->
-  <header class="bar-nav">
-    <h1 class="title">Ratchet</h1>
-  </header>
+    <!-- Make sure all your bars are the first things in your <body> -->
+    <header class="bar bar-nav">
+      <h1 class="title">Ratchet</h1>
+    </header>
 
-  <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
-  <div class="content">
-    <div class="content-padded">
+    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
+    <div class="content">
       <p class="welcome">Thanks for downloading Ratchet. This is an example HTML page that's linked up to compiled Ratchet CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some Ratchet resources:</p>
+      <div class="card">
+        <ul class="table-view">
+          <li class="table-view-cell">
+            <a class="push-right" href="http://maker.github.io/ratchet/">
+              <strong>Ratchet documentation</strong>
+            </a>
+          </li>
+          <li class="table-view-cell">
+            <a class="push-right" href="https\://www.github.com/maker/ratchet/">
+              <strong>Ratchet on Github</strong>
+            </a>
+          </li>
+          <li class="table-view-cell">
+            <a class="push-right" href="https://groups.google.com/forum/#!forum/goratchet">
+              <strong>Ratchet Google group</strong>
+            </a>
+          </li>
+          <li class="table-view-cell">
+            <a class="push-right" href="http://www.twitter.com/GoRatchet">
+              <strong>Ratchet on Twitter</strong>
+            </a>
+          </li>
+        </ul>
+      </div>
     </div>
 
-    <ul class="table-view inset">
-      <li>
-        <a href="http://maker.github.com/ratchet/">
-          <strong>Ratchet documentation</strong>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li>
-        <a href="http://www.github.com/maker/ratchet/">
-          <strong>Ratchet on Github</strong>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li>
-        <a href="https://groups.google.com/forum/#!forum/goratchet">
-          <strong>Ratchet Google group</strong>
-          <span class="chevron"></span>
-        </a>
-      </li>
-      <li>
-        <a href="http://www.twitter.com/GoRatchet">
-          <strong>Ratchet on Twitter</strong>
-          <span class="chevron"></span>
-        </a>
-      </li>
-    </ul>
-
-  </div>
-
   </body>
 </html>
 \ No newline at end of file
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f00eadc..30059d3 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -138,6 +138,9 @@ body {
   font-size: 24px;
   opacity: .7;
 }
+.docs-sub-content.with-padding {
+  padding-bottom: 80px;
+}
 
 .docs-section {
   padding-top: 80px;
@@ -525,11 +528,6 @@ hr {
     -moz-transition: background-image 0.1s linear;
     transition: background-image 0.1s linear;
   }
-  .device:after {
-    content: '';
-    background-image: url("../img/iphone5s.png");
-    opacity: 0;
-  }
   .device.device-fixed {
     position: fixed;
     right: auto;
@@ -614,6 +612,10 @@ hr {
     text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
 }
+.example-device {
+  margin: 0 auto;
+}
+
 .container {
   margin-left: auto;
   margin-right: auto;
diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js
index b2f6fbe..d3f90b8 100644
--- a/docs/assets/js/docs.js
+++ b/docs/assets/js/docs.js
@@ -21,7 +21,7 @@ $(function() {
     win                  = $(window);
     doc                  = $(document);
     bod                  = $(document.body)
-    device               = device || $('.device');
+    device               = device || $('.js-device');
     navComponentLinks    = $('.docs-nav');
     componentsList       = $('.components-list');
     componentLinks       = $('.component-example a');
diff --git a/docs/components.html b/docs/components.html
index 589899f..d858f75 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -39,7 +39,7 @@ title: Components &middot; Ratchet
   <div class="docs-components column-group">  
     <div class="device-column column units-2 lg-units-5 pull-right">
       <!-- In phone examples -->
-      <div class="device">
+      <div class="device js-device">
         <div class="device-content">
           <div id="iwindow">
             <header class="bar bar-nav">
diff --git a/docs/dist/ratchet.css b/docs/dist/ratchet.css
index 5b3ea55..ae2ce6d 100644
--- a/docs/dist/ratchet.css
+++ b/docs/dist/ratchet.css
@@ -314,7 +314,7 @@ strong {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 10px 15px;
+  margin: 10px 10px;
   line-height: 1;
 }
 
@@ -345,11 +345,16 @@ h6, .h6 {
 }
 
 p {
-  margin: 10px 15px;
+  margin: 10px 10px;
   font-size: 14px;
   color: #777;
 }
 
+.container > h1, .container h2, .container h3, .container h4, .container h5, .container h6, .container p {
+  margin-left: 0;
+  margin-right: 0;
+}
+
 .btn {
   position: relative;
   display: inline-block;
diff --git a/sass/docs.scss b/sass/docs.scss
index 7987378..a935b84 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -4,6 +4,7 @@
 //
 // Documentation
 // --------------------------------------------------
+
 html,
 body {
   width: 100%;
@@ -134,6 +135,9 @@ body {
     font-size: 24px;
     opacity: .7;
   }
+  &.with-padding {
+    padding-bottom: 80px;
+  }
 }
 
 
@@ -194,6 +198,7 @@ body {
 
 // Benefits
 // --------------------------------------------------
+
 .docs-benefits {
   padding-bottom: 0;
   text-align: center;
@@ -499,11 +504,11 @@ hr {
   clear: both;
 }
 
+
 // Docs media queries
 // --------------------------------------------------
 
 // Tablet to desktop 
-// --------------------------------------------------
 @media screen and (min-width: 768px) {
   // Jumbotron
   .docs-header-content {
@@ -564,12 +569,6 @@ hr {
     background-repeat: no-repeat;
     @include transition(background-image .1s linear);
 
-    // Pre-load device backgrounds so we stop the flicker.
-    &:after {
-      content: '';
-      background-image: url("../img/iphone5s.png");
-      opacity: 0;
-    }
     &.device-fixed {
       position: fixed;
       right: auto;
@@ -647,6 +646,12 @@ hr {
   }
 }
 
+// Example devices
+
+.example-device {
+  margin: 0 auto;
+}
+
 
 // The Chassis grid
 // --------------------------------------------------
diff --git a/sass/type.scss b/sass/type.scss
index ee62ebc..58b8f95 100644
--- a/sass/type.scss
+++ b/sass/type.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------
 
 h1, h2, h3, h4, h5, h6 {
-  margin: 10px 15px;
+  margin: 10px $bar-side-spacing;
   line-height: 1;
 }
 h1, .h1 { font-size: 36px; }
@@ -15,7 +15,15 @@ h6, .h6 { font-size: 12px; margin-top: 20px }
 
 // Paragraphs
 p {
-  margin: 10px 15px;
+  margin: 10px $bar-side-spacing;
   font-size: 14px;
   color: #777;
+}
+
+// Take on the container's side spacing
+.container {
+  > h1, h2, h3, h4, h5, h6, p {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 \ No newline at end of file
author	connors <connor.sears@github.com>	2014-02-17 09:12:54 +0400
committer	connors <connor.sears@github.com>	2014-02-17 09:12:54 +0400
commit	f0d917a432f776598fd98e660a21ca5cc652c505 (patch)
tree	6c9a9f35f6eaff2f7e0048873e976c13cc31459c
parent	dad40e2a0b2d5c0c9e61514722d2901e6ca00bbc (diff)