derping

11 years ago · f0d917a432
9 changed files with 76 additions and 57 deletions
--- 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

--- 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;
--- 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>
--- 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;
--- 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');
--- 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">
--- 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;
--- 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
 // --------------------------------------------------
--- 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;
+  }
 }