updating the footer and iphone screenshot

_includes/footer.html

@@ -1,8 +1,8 @@
-<div class="docs-outer-wrapper docs-footer">
-  <section class="content-section">
-    <div class="docs-inner-wrapper">
+<div class="container docs-footer">
+  <div class="column-group">
+    <div class="column units-2">
       <h3>License &amp; credit</h3>
       <p>Ratchet is under the the MIT license, meaning you're basically free to use the framework as you please. Ratchet was lovingly crafted by <a data-ignore="push" href="http://www.twitter.com/dhg">Dave Gamache</a>, <a data-ignore="push" href="http://www.twitter.com/connors">Connor Sears</a>, and <a data-ignore="push" href="http://www.twitter.com/fat">Jacob Thornton</a>.</p>
     </div>
-  </section>
+  </div>
 </div>

_includes/header.html

@@ -17,7 +17,7 @@
 
 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 <script src="{{ page.base_url }}dist/ratchet.js"></script>
-<!--<script src="{{ page.base_url }}docs-assets/js/docs.js"></script>-->
+<script src="{{ page.base_url }}docs-assets/js/docs.js"></script>
 <script src="{{ page.base_url }}docs-assets/js/fingerblast.js"></script>
 
 <script>
@@ -31,7 +31,7 @@
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
   // Remove once I add back in the docs.js
-  $(function() {
-    $(window).on('load', function () { new FingerBlast('.body'); });
-  });
+  // $(function() {
+  //   $(window).on('load', function () { new FingerBlast('.body'); });
+  // });
 </script>

components.html

@@ -23,6 +23,7 @@ base_url: "../"
         <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">
           <div id="iwindow">

docs-assets/css/docs.css

@@ -30,7 +30,7 @@ h1, h2, h3, h4, h5, h6 {
 .docs-header-wrapper .icon {
   position: absolute;
   top: 15px;
-  right: 15px;
+  righ: 15px;
   -webkit-transition: opacity 0.2s linear;
   transition: opacity 0.2s linear;
 }
@@ -287,6 +287,16 @@ h1, h2, h3, h4, h5, h6 {
   .lg-offset-11 {
     margin-left: 91.666%;
   }
+
+  .iphone {
+    display: block;
+    position: relative;
+    top: 50px;
+    float: right;
+    width: 375px;
+    height: 806px;
+    font-family: "Helvetica Neue", sans-serif;
+  }
 }
 @media screen and (min-width: 1200px) {
   .container {

docs-assets/js/docs.js

@@ -35,7 +35,7 @@ $(function() {
 
     iphone.initialLeft   = iphone.offset().left;
     iphone.initialTop    = iphone.initialTop || iphone.offset().top;
-    iphone.dockingOffset = ($(window).height() + 20 + $('.docs-masthead').height() - iphone.height())/2;
+    //iphone.dockingOffset = ($(window).height() + 20 + $('.docs-masthead').height() - iphone.height())/2;
     checkDesktopContent();
     calculateScroll();
 
@@ -88,12 +88,8 @@ $(function() {
     if(pageHeight - currentTop < footerHeight + contentPadding + 1400) {
       iphone[0].className = "iphone iphone-bottom";
       iphone[0].setAttribute('style','')
-    } else if((iphone.initialTop - currentTop) <= iphone.dockingOffset) {
-      iphone[0].className = "iphone iphone-fixed";
-      iphone.css({top: iphone.dockingOffset})
     } else {
-      iphone[0].className = "iphone"
-      iphone[0].setAttribute('style','')
+      iphone[0].className = "iphone iphone-fixed";
     }
 
     // Injection of components into phone

lib/sass/docs.scss

@@ -29,7 +29,7 @@ h1, h2, h3, h4, h5, h6 {
   .icon {
     position: absolute;
     top: 15px;
-    right: 15px;
+    righ: 15px;
     @include transition(opacity .2s linear);
 
     &:active {
@@ -213,6 +213,17 @@ h1, h2, h3, h4, h5, h6 {
   .lg-offset-9     { margin-left: 75%; }
   .lg-offset-10    { margin-left: 83.333%; }
   .lg-offset-11    { margin-left: 91.666%; }
+
+  .iphone {
+    display: block;
+    position: fixed;
+    top: 50px;
+    float: right;
+    width: 375px;
+    height: 806px;
+    font-family: "Helvetica Neue", sans-serif;
+  }
+
 }