From bfaa083596f023fba95c257c1726fd744f2a3584 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 28 Feb 2014 07:43:26 -0800
Subject: [PATCH 1/6] reorg the media queries

---
 docs/assets/css/docs.css | 574 ++++++++++++++++++------------------
 sass/docs.scss           | 614 ++++++++++++++++++++-------------------
 2 files changed, 595 insertions(+), 593 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index ca75747..4aeb066 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -28,18 +28,6 @@ body {
   position: relative;
   background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
 }
-.docs-header:before,
-.docs-sub-header:before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  background-image: url(../img/pattern.png);
-  background-size: 30%;
-  background-position: center center;
-  opacity: .038;
-}
 
 .docs-header {
   height: 100vh;
@@ -62,6 +50,31 @@ body {
   text-align: center;
 }
 
+@media screen and (min-width: 768px) {
+  .docs-header {
+    min-height: 870px;
+  }
+  .docs-header .carbonad {
+    bottom: 259px !important;
+    left: 50% !important;
+    margin-left: -165px !important;
+  }
+
+  .docs-sub-header .carbonad {
+    position: absolute !important;
+    top: 50% !important;
+    right: 15px !important;
+    margin-top: 0 !important;
+    -webkit-transform: translateY(-50%) !important;
+    -ms-transform: translateY(-50%) !important;
+    transform: translateY(-50%) !important;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .docs-sub-header .carbonad {
+    right: 30px !important;
+  }
+}
 .docs-masthead {
   position: relative;
   padding-top: 15px;
@@ -129,6 +142,111 @@ body {
   opacity: .5;
 }
 
+@media screen and (min-width: 768px) {
+  .docs-title {
+    position: static;
+    float: left;
+    -webkit-transform: translateX(0);
+    -ms-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  .docs-nav {
+    float: right;
+  }
+  .docs-nav .docs-nav-trigger {
+    display: none;
+  }
+  .docs-nav .docs-nav-group {
+    position: static;
+    display: block;
+    height: auto;
+    background-color: transparent;
+    opacity: 1;
+  }
+  .docs-nav .docs-nav-item {
+    position: relative;
+    display: inline-block;
+    padding: 0 15px;
+    font-size: 14px;
+  }
+
+  .docs-jump-menu {
+    position: absolute;
+    left: 20px;
+    display: block;
+    color: #777;
+    cursor: pointer;
+    -webkit-transition: opacity 0.2 linear;
+    -moz-transition: opacity 0.2 linear;
+    transition: opacity 0.2 linear;
+  }
+  .docs-jump-menu:hover {
+    color: #428bca;
+  }
+  .docs-jump-menu:active {
+    opacity: .5;
+  }
+  .docs-jump-menu .icon-list {
+    font-size: 16px;
+    margin-right: 3px;
+  }
+  .docs-jump-menu .icon-caret {
+    position: relative;
+    top: 4px;
+  }
+
+  .docs-component-group {
+    position: absolute;
+    top: 35px;
+    left: 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
+  }
+  .docs-component-group.active {
+    display: block;
+  }
+  .docs-component-group:before, .docs-component-group:after {
+    position: absolute;
+    left: 30px;
+    width: 0;
+    height: 0;
+    content: '';
+  }
+  .docs-component-group:before {
+    top: -11px;
+    margin-left: -11px;
+    border-right: 11px solid transparent;
+    border-bottom: 11px solid rgba(0, 0, 0, 0.3);
+    border-left: 11px solid transparent;
+  }
+  .docs-component-group:after {
+    top: -10px;
+    margin-left: -10px;
+    border-right: 10px solid transparent;
+    border-bottom: 10px solid #fff;
+    border-left: 10px solid transparent;
+  }
+  .docs-component-group .docs-component-item {
+    display: block;
+    padding: 10px 20px;
+    color: #777;
+  }
+  .docs-component-group .docs-component-item:hover {
+    color: #fff;
+    background-color: #428bca;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .docs-jump-menu {
+    left: 30px;
+  }
+}
 .docs-header-content {
   position: relative;
   top: 30px;
@@ -171,6 +289,23 @@ body {
   line-height: 38px;
 }
 
+@media screen and (min-width: 768px) {
+  .docs-header-content {
+    top: 30%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+  .docs-header-content .btn {
+    display: inline-block;
+  }
+
+  .docs-subtitle {
+    margin-bottom: 30px;
+    font-size: 41px;
+    line-height: 60px;
+  }
+}
 .carbonad {
   width: 100% !important;
   height: auto !important;
@@ -216,6 +351,15 @@ body {
   display: none;
 }
 
+@media screen and (min-width: 768px) {
+  .carbonad {
+    width: 330px !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 3px !important;
+  }
+}
 .docs-sub-content {
   position: relative;
   overflow: hidden;
@@ -240,6 +384,12 @@ body {
   opacity: .7;
 }
 
+@media screen and (min-width: 768px) {
+  .docs-sub-content {
+    margin-right: 380px;
+    text-align: left;
+  }
+}
 .docs-section {
   padding-top: 80px;
   padding-bottom: 80px;
@@ -262,6 +412,17 @@ body {
   font-weight: 100;
 }
 
+@media screen and (min-width: 768px) {
+  .section-heading {
+    margin-top: 50px;
+    margin-bottom: 10px;
+    font-size: 40px;
+  }
+
+  .section-lead {
+    font-size: 24px;
+  }
+}
 .docs-steps {
   margin-top: 20px;
   padding: 0;
@@ -290,6 +451,23 @@ body {
   font-size: 14px;
 }
 
+@media screen and (min-width: 768px) {
+  .step-title {
+    font-size: 24px;
+  }
+
+  .step-title code {
+    font-size: 18px;
+  }
+
+  .step-description {
+    font-size: 18px;
+  }
+
+  .docs-module {
+    margin-top: 35px;
+  }
+}
 .docs-module {
   margin-top: 20px;
   padding: 20px;
@@ -333,6 +511,11 @@ body {
 .docs-footer .social .twitter-follow-button {
   margin-top: 5px;
 }
+@media screen and (min-width: 768px) {
+  .docs-footer .social .twitter-follow-button {
+    margin-top: 0;
+  }
+}
 
 .docs-footer-text {
   margin-top: 0;
@@ -444,6 +627,19 @@ body {
   height: auto;
 }
 
+@media screen and (min-width: 768px) {
+  .docs-example-group .example-wrap {
+    display: inline-block;
+  }
+  .docs-example-group .example-wrap .example {
+    width: 180px;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .docs-example-group .example-wrap .example {
+    width: 220px;
+  }
+}
 code {
   padding: 2px 4px;
   font-size: 90%;
@@ -555,6 +751,36 @@ code {
   word-wrap: normal;
 }
 
+@media screen and (min-width: 768px) {
+  .component,
+  .component-example-fullbleed,
+  .highlight {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .component {
+    padding-left: 0;
+    padding-right: 0;
+    opacity: .3;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
+  }
+  .component.active {
+    opacity: 1;
+  }
+
+  .component-example {
+    display: none;
+  }
+
+  .highlight pre {
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+    border-radius: 3px;
+  }
+}
 #ratchicons .icon,
 #ratchiconsInDevice .icon {
   width: 50px;
@@ -627,227 +853,45 @@ code {
   content: '';
 }
 
+@media screen and (min-width: 768px) {
+  .popover {
+    position: absolute;
+    display: block;
+    top: 72px;
+    opacity: 1;
+  }
+}
 #modalsInDevice #iwindow > .btn {
   margin: 10px;
 }
 
-.device {
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 17px;
-  line-height: 21px;
-  display: none;
-}
-
-hr {
-  height: 0;
-  margin: 10px 0 30px;
-  border: solid #ddd;
-  border-width: 1px 0 0;
-  clear: both;
-}
-
-.column-group {
-  *zoom: 1;
-}
-
-.column-group:before,
-.column-group:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-
-.column-group:after {
-  clear: both;
-}
-
-.clear {
-  display: block;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-  clear: both;
-}
-
 @media screen and (min-width: 768px) {
-  .docs-header {
-    min-height: 870px;
-  }
-  .docs-header .carbonad {
-    bottom: 259px !important;
-    left: 50% !important;
-    margin-left: -165px !important;
-  }
-
-  .docs-sub-header .carbonad {
-    position: absolute !important;
-    top: 50% !important;
-    right: 15px !important;
-    margin-top: 0 !important;
-    -webkit-transform: translateY(-50%) !important;
-    -ms-transform: translateY(-50%) !important;
-    transform: translateY(-50%) !important;
-  }
-
-  .docs-sub-content {
-    margin-right: 380px;
-    text-align: left;
-  }
-
-  .docs-title {
-    position: static;
-    float: left;
-    -webkit-transform: translateX(0);
-    -ms-transform: translateX(0);
-    transform: translateX(0);
-  }
-
-  .docs-header-content {
-    top: 30%;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
-  }
-  .docs-header-content .btn {
-    display: inline-block;
-  }
-
-  .docs-subtitle {
-    margin-bottom: 30px;
-    font-size: 41px;
-    line-height: 60px;
-  }
-
-  .docs-nav {
-    float: right;
-  }
-  .docs-nav .docs-nav-trigger {
-    display: none;
-  }
-  .docs-nav .docs-nav-group {
-    position: static;
+  .slider .slide img {
+    width: 100%;
+    height: 570px;
     display: block;
-    height: auto;
-    background-color: transparent;
-    opacity: 1;
-  }
-  .docs-nav .docs-nav-item {
-    position: relative;
-    display: inline-block;
-    padding: 0 15px;
-    font-size: 14px;
   }
 
-  .docs-jump-menu {
-    position: absolute;
-    left: 20px;
-    display: block;
-    color: #777;
-    cursor: pointer;
-    -webkit-transition: opacity 0.2 linear;
-    -moz-transition: opacity 0.2 linear;
-    transition: opacity 0.2 linear;
-  }
-  .docs-jump-menu:hover {
-    color: #428bca;
-  }
-  .docs-jump-menu:active {
-    opacity: .5;
-  }
-  .docs-jump-menu .icon-list {
-    font-size: 16px;
-    margin-right: 3px;
-  }
-  .docs-jump-menu .icon-caret {
-    position: relative;
-    top: 4px;
-  }
-
-  .docs-component-group {
-    position: absolute;
-    top: 35px;
-    left: 30px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
-  }
-  .docs-component-group.active {
-    display: block;
-  }
-  .docs-component-group:before, .docs-component-group:after {
+  .slider .slide-group .slide-text {
     position: absolute;
-    left: 30px;
-    width: 0;
-    height: 0;
-    content: '';
-  }
-  .docs-component-group:before {
-    top: -11px;
-    margin-left: -11px;
-    border-right: 11px solid transparent;
-    border-bottom: 11px solid rgba(0, 0, 0, 0.3);
-    border-left: 11px solid transparent;
-  }
-  .docs-component-group:after {
-    top: -10px;
-    margin-left: -10px;
-    border-right: 10px solid transparent;
-    border-bottom: 10px solid #fff;
-    border-left: 10px solid transparent;
-  }
-  .docs-component-group .docs-component-item {
-    display: block;
-    padding: 10px 20px;
-    color: #777;
-  }
-  .docs-component-group .docs-component-item:hover {
+    top: 45%;
+    left: 0;
+    width: 100%;
     color: #fff;
-    background-color: #428bca;
-  }
-
-  .carbonad {
-    width: 330px !important;
-    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
-    border-radius: 3px !important;
-  }
-
-  .docs-footer .social .twitter-follow-button {
-    margin-top: 0;
-  }
-
-  .step-title {
-    font-size: 24px;
-  }
-
-  .step-title code {
-    font-size: 18px;
-  }
-
-  .step-description {
-    font-size: 18px;
-  }
-
-  .docs-module {
-    margin-top: 35px;
-  }
-
-  .section-heading {
-    margin-top: 50px;
-    margin-bottom: 10px;
-    font-size: 40px;
-  }
-
-  .section-lead {
+    text-align: center;
     font-size: 24px;
+    font-weight: 300;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }
+}
+.device {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 17px;
+  line-height: 21px;
+  display: none;
+}
 
+@media screen and (min-width: 768px) {
   .device {
     position: relative;
     top: 50px;
@@ -892,85 +936,35 @@ hr {
     right: 0;
     bottom: 0;
   }
-
-  .component,
-  .component-example-fullbleed,
-  .highlight {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  .component {
-    padding-left: 0;
-    padding-right: 0;
-    opacity: .3;
-    -webkit-transition: opacity 0.2s ease-in-out;
-    -moz-transition: opacity 0.2s ease-in-out;
-    transition: opacity 0.2s ease-in-out;
-  }
-  .component.active {
-    opacity: 1;
-  }
-
-  .component-example {
-    display: none;
-  }
-
-  .highlight pre {
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-    border-radius: 3px;
-  }
-
-  .popover {
-    position: absolute;
-    display: block;
-    top: 72px;
-    opacity: 1;
-  }
-
-  .slider .slide img {
-    width: 100%;
-    height: 570px;
-    display: block;
-  }
-
-  .slider .slide-group .slide-text {
-    position: absolute;
-    top: 45%;
-    left: 0;
-    width: 100%;
-    color: #fff;
-    text-align: center;
-    font-size: 24px;
-    font-weight: 300;
-    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-  }
-
-  .docs-example-group .example-wrap {
-    display: inline-block;
-  }
-  .docs-example-group .example-wrap .example {
-    width: 180px;
-  }
 }
 @media screen and (min-width: 1200px) {
   .device {
     margin-left: 39px;
   }
+}
+hr {
+  height: 0;
+  margin: 10px 0 30px;
+  border: solid #ddd;
+  border-width: 1px 0 0;
+  clear: both;
+}
 
-  .docs-sub-header .carbonad {
-    right: 30px !important;
-  }
+.column-group {
+  *zoom: 1;
+}
 
-  .docs-jump-menu {
-    left: 30px;
-  }
+.column-group:before,
+.column-group:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
 
-  .docs-example-group .example-wrap .example {
-    width: 220px;
-  }
+.column-group:after {
+  clear: both;
 }
+
 .container {
   position: relative;
   margin-left: auto;
diff --git a/sass/docs.scss b/sass/docs.scss
index 6caa51c..e6f41cf 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -28,19 +28,6 @@ body {
 .docs-sub-header {
   position: relative;
   background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
-
-  &:before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    background-image: url(../img/pattern.png);
-    background-size: 30%;
-    background-position: center center;
-    opacity: .038;
-    // content: '';
-  }
 }
 .docs-header {
   height: 100vh;
@@ -60,8 +47,36 @@ body {
     text-align: center;
   }
 }
+// Desktop jumbotron
+@media screen and (min-width: 768px) {
+  .docs-header {
+    min-height: 870px;
+
+    // Ads on the homepage
+    .carbonad {
+      bottom: 259px !important;
+      left: 50% !important;
+      margin-left: -165px !important;
+    }
+  }
+
+  // Positon ads correctly on sub pages
+  .docs-sub-header .carbonad {
+    position: absolute !important;
+    top: 50% !important;
+    right: 15px !important;
+    margin-top: 0 !important;
+    @include transform(translateY(-50%) !important);
+  }
+}
+// Account for the extra margin for large sceens.
+@media screen and (min-width: 1200px) {
+  .docs-sub-header .carbonad {
+    right: 30px !important;
+  }
+}
 
-// Masthead
+// Masthead and nav
 .docs-masthead {
   position: relative;
   padding-top: 15px;
@@ -124,6 +139,119 @@ body {
     opacity: .5;
   }
 }
+
+// Desktop: Masthead and nav
+@media screen and (min-width: 768px) {
+  .docs-title {
+    position: static;
+    float: left;
+    @include transform(translateX(0));
+  }
+
+  // Docs nav
+  .docs-nav {
+    float: right;
+
+    .docs-nav-trigger {
+      display: none;
+    }
+    .docs-nav-group {
+      position: static;
+      display: block;
+      height: auto;
+      background-color: transparent;
+      opacity: 1;
+    }
+    .docs-nav-item {
+      position: relative;
+      display: inline-block;
+      padding: 0 15px;
+      font-size: 14px;
+    }
+  }
+
+  // Component jump menu
+  .docs-jump-menu {
+    position: absolute;
+    left: 20px;
+    display: block;
+    color: #777;
+    cursor: pointer;
+    @include transition(opacity .2 linear);
+
+    &:hover {
+      color: $primary-color;
+    }
+    &:active {
+      opacity: .5;
+    }
+    .icon-list {
+      font-size: 16px;
+      margin-right: 3px;
+    }
+    .icon-caret {
+      position: relative;
+      top: 4px;
+    }
+  }
+  .docs-component-group {
+    position: absolute;
+    top: 35px;
+    left: 30px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.2);
+    border-radius: 3px;
+    box-shadow: 0 0 8px rgba(0,0,0,.05);
+
+    &.active {
+      display: block;
+    }
+    &:before,
+    &:after {
+      position: absolute;
+      left: 30px;
+      width: 0;
+      height: 0;
+      content: '';
+    }
+    &:before {
+      top: -11px;
+      margin-left: -11px;
+      border-right: 11px solid transparent;
+      border-bottom: 11px solid rgba(0,0,0,.3);
+      border-left: 11px solid transparent;
+    }
+    &:after {
+      top: -10px;
+      margin-left: -10px;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid #fff;
+      border-left: 10px solid transparent
+    }
+    .docs-component-item {
+      display: block;
+      padding: 10px 20px;
+      color: #777;
+
+      &:hover {
+        color: #fff;
+        background-color: $primary-color;
+      }
+    }
+  }
+}
+// Account for extra margin on large screens
+@media screen and (min-width: 1200px) {
+  .docs-jump-menu {
+    left: 30px;
+  }
+}
+
+// Main homepage header content
+// "Build mobile apps using simple..."
 .docs-header-content {
   position: relative;
   top: 30px;
@@ -159,6 +287,21 @@ body {
   color: #fff;
   line-height: 38px;
 }
+@media screen and (min-width: 768px) {
+  .docs-header-content {
+    top: 30%;
+    @include transform(translateY(-50%));
+
+    .btn {
+      display: inline-block;
+    }
+  }
+  .docs-subtitle {
+    margin-bottom: 30px;
+    font-size: 41px;
+    line-height: 60px;
+  }
+}
 
 // Ads
 .carbonad {
@@ -200,6 +343,18 @@ body {
   display: none;
 }
 
+// Desktop styles for ads
+@media screen and (min-width: 768px) {
+  .carbonad {
+    width: 330px !important;
+    border-right: 1px solid rgba(255,255,255,.1) !important;
+    border-bottom: 1px solid rgba(255,255,255,.1) !important;
+    border-left: 1px solid rgba(255,255,255,.1) !important;
+    border-radius: 3px !important;
+  }
+}
+
+
 // Subpage Header
 // --------------------------------------------------
 
@@ -227,6 +382,12 @@ body {
     opacity: .7;
   }
 }
+@media screen and (min-width: 768px) {
+  .docs-sub-content {
+    margin-right: 380px;
+    text-align: left;
+  }
+}
 
 
 // Content sections
@@ -249,6 +410,16 @@ body {
   color: #777;
   font-weight: 100;
 }
+@media screen and (min-width: 768px) {
+  .section-heading {
+    margin-top: 50px;
+    margin-bottom: 10px;
+    font-size: 40px;
+  }
+  .section-lead {
+    font-size: 24px;
+  }
+}
 
 // Steps
 // --------------------------------------------------
@@ -276,6 +447,24 @@ body {
   font-size: 14px;
 }
 
+// Desktop steps styles
+@media screen and (min-width: 768px) {
+  .step-title {
+    font-size: 24px;
+  }
+  .step-title code {
+    font-size: 18px;
+  }
+  .step-description {
+    font-size: 18px;
+  }
+
+  // Docs modules
+  .docs-module {
+    margin-top: 35px;
+  }
+}
+
 // Docs modules
 .docs-module {
   margin-top: 20px;
@@ -324,6 +513,12 @@ body {
       margin-top: 5px;
     }
   }
+  @media screen and (min-width: 768px) {
+    // Remove the top margin on desktop
+    .social .twitter-follow-button {
+      margin-top: 0;
+    }
+  }
 }
 .docs-footer-text {
   margin-top: 0;
@@ -441,9 +636,21 @@ body {
     }
   }
 }
-// .example-device {
-//   margin: 0 auto;
-// }
+@media screen and (min-width: 768px) {
+  // Examples
+  .docs-example-group .example-wrap {
+    display: inline-block;
+
+    .example {
+      width: 180px;
+    }
+  }
+}
+@media screen and (min-width: 1200px) {
+  .docs-example-group .example-wrap .example {
+    width: 220px;
+  }
+}
 
 // Components
 // --------------------------------------------------
@@ -546,6 +753,35 @@ code {
   white-space: pre;
   word-wrap: normal;
 }
+@media screen and (min-width: 768px) {
+  .component,
+  .component-example-fullbleed,
+  .highlight {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .component {
+    padding-left: 0;
+    padding-right: 0;
+    opacity: .3;
+    @include transition(opacity .2s ease-in-out);
+
+    &.active {
+      opacity: 1;
+    }
+  }
+  .component-example {
+    display: none;
+  }
+  .highlight pre {
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+    border-radius: 3px;
+  }
+}
+
+
+// Specific example overrides
 #ratchicons .icon,
 #ratchiconsInDevice .icon {
   width: 50px;
@@ -630,6 +866,14 @@ code {
     content: '';
   }
 }
+@media screen and (min-width: 768px) {
+  .popover {
+    position: absolute;
+    display: block;
+    top: 72px;
+    opacity: 1;
+  }
+}
 
 // Modals
 #modalsInDevice {
@@ -638,7 +882,27 @@ code {
   }
 }
 
-// Misc
+// Sliders
+@media screen and (min-width: 768px) {
+  .slider .slide img {
+    width: 100%;
+    height: 570px; // Fullscreen fun times
+    display: block;
+  }
+  .slider .slide-group .slide-text {
+    position: absolute;
+    top: 45%;
+    left: 0;
+    width: 100%;
+    color: #fff;
+    text-align: center;
+    font-size: 24px;
+    font-weight: 300;
+    text-shadow: 0 0 10px rgba(0,0,0,.5);
+  }
+}
+
+// Example device
 // --------------------------------------------------
 
 .device {
@@ -647,223 +911,7 @@ code {
   line-height: $line-height-default;
   display: none;
 }
-
-hr {
-  height: 0;
-  margin: 10px 0 30px;
-  border: solid #ddd;
-  border-width: 1px 0 0;
-  clear: both;
-}
-
-.column-group {
-  *zoom: 1;
-}
-.column-group:before,
-.column-group:after {
-  display: table;
-  line-height: 0;
-  content: "";
-}
-.column-group:after {
-  clear: both;
-}
-// You can also use a <br class="clear">
-.clear {
-  display: block;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-  clear: both;
-}
-
-
-// Docs media queries
-// --------------------------------------------------
-
-// Tablet to desktop
 @media screen and (min-width: 768px) {
-  .docs-header {
-    min-height: 870px;
-
-    // Ads on the homepage
-    .carbonad {
-      bottom: 259px !important;
-      left: 50% !important;
-      margin-left: -165px !important;
-    }
-  }
-  .docs-sub-header .carbonad {
-    position: absolute !important;
-    top: 50% !important;
-    right: 15px !important;
-    margin-top: 0 !important;
-    @include transform(translateY(-50%) !important);
-  }
-  .docs-sub-content {
-    margin-right: 380px;
-    text-align: left;
-  }
-  .docs-title {
-    position: static;
-    float: left;
-    @include transform(translateX(0));
-  }
-  .docs-header-content {
-    top: 30%;
-    @include transform(translateY(-50%));
-
-    .btn {
-      display: inline-block;
-    }
-  }
-  .docs-subtitle {
-    margin-bottom: 30px;
-    font-size: 41px;
-    line-height: 60px;
-  }
-
-  // Docs nav
-  .docs-nav {
-    float: right;
-
-    .docs-nav-trigger {
-      display: none;
-    }
-    .docs-nav-group {
-      position: static;
-      display: block;
-      height: auto;
-      background-color: transparent;
-      opacity: 1;
-    }
-    .docs-nav-item {
-      position: relative;
-      display: inline-block;
-      padding: 0 15px;
-      font-size: 14px;
-    }
-  }
-
-  // Component jump menu
-  .docs-jump-menu {
-    position: absolute;
-    left: 20px;
-    display: block;
-    color: #777;
-    cursor: pointer;
-    @include transition(opacity .2 linear);
-
-    &:hover {
-      color: $primary-color;
-    }
-    &:active {
-      opacity: .5;
-    }
-    .icon-list {
-      font-size: 16px;
-      margin-right: 3px;
-    }
-    .icon-caret {
-      position: relative;
-      top: 4px;
-    }
-  }
-  .docs-component-group {
-    position: absolute;
-    top: 35px;
-    left: 30px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid rgba(0,0,0,.2);
-    border-radius: 3px;
-    box-shadow: 0 0 8px rgba(0,0,0,.05);
-
-    &.active {
-      display: block;
-    }
-    &:before,
-    &:after {
-      position: absolute;
-      left: 30px;
-      width: 0;
-      height: 0;
-      content: '';
-    }
-    &:before {
-      top: -11px;
-      margin-left: -11px;
-      border-right: 11px solid transparent;
-      border-bottom: 11px solid rgba(0,0,0,.3);
-      border-left: 11px solid transparent;
-    }
-    &:after {
-      top: -10px;
-      margin-left: -10px;
-      border-right: 10px solid transparent;
-      border-bottom: 10px solid #fff;
-      border-left: 10px solid transparent
-    }
-    .docs-component-item {
-      display: block;
-      padding: 10px 20px;
-      color: #777;
-
-      &:hover {
-        color: #fff;
-        background-color: $primary-color;
-      }
-    }
-  }
-
-  // Ads
-  .carbonad {
-    width: 330px !important;
-    border-right: 1px solid rgba(255,255,255,.1) !important;
-    border-bottom: 1px solid rgba(255,255,255,.1) !important;
-    border-left: 1px solid rgba(255,255,255,.1) !important;
-    border-radius: 3px !important;
-  }
-
-  // Social
-  .docs-footer {
-    .social .twitter-follow-button {
-      margin-top: 0;
-    }
-  }
-
-  // Steps
-  .step-title {
-    font-size: 24px;
-  }
-  .step-title code {
-    font-size: 18px;
-  }
-  .step-description {
-    font-size: 18px;
-  }
-
-  // Docs modules
-  .docs-module {
-    margin-top: 35px;
-  }
-
-
-  // Content sections
-  // --------------------------------------------------
-  .section-heading {
-    margin-top: 50px;
-    margin-bottom: 10px;
-    font-size: 40px;
-  }
-  .section-lead {
-    font-size: 24px;
-  }
-
-  // Device
   .device {
     position: relative;
     top: 50px;
@@ -904,79 +952,36 @@ hr {
     right: 0;
     bottom: 0;
   }
-  .component,
-  .component-example-fullbleed,
-  .highlight {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  .component {
-    padding-left: 0;
-    padding-right: 0;
-    opacity: .3;
-    @include transition(opacity .2s ease-in-out);
-
-    &.active {
-      opacity: 1;
-    }
-  }
-  .component-example {
-    display: none;
-  }
-  .highlight pre {
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-    border-radius: 3px;
-  }
-
-  // Component overrides
-  .popover {
-    position: absolute;
-    display: block;
-    top: 72px;
-    opacity: 1;
-  }
-  .slider .slide img {
-    width: 100%;
-    height: 570px; // Fullscreen fun times
-    display: block;
-  }
-  .slider .slide-group .slide-text {
-    position: absolute;
-    top: 45%;
-    left: 0;
-    width: 100%;
-    color: #fff;
-    text-align: center;
-    font-size: 24px;
-    font-weight: 300;
-    text-shadow: 0 0 10px rgba(0,0,0,.5);
-  }
-  // Examples
-  .docs-example-group .example-wrap {
-    display: inline-block;
-
-    .example {
-      width: 180px;
-    }
-  }
 }
 @media screen and (min-width: 1200px) {
-  // Device
   .device {
     margin-left: 39px;
   }
-  .docs-sub-header .carbonad {
-    right: 30px !important;
-  }
-  // Component jump menu
-  .docs-jump-menu {
-    left: 30px;
-  }
-  // Examples
-  .docs-example-group .example-wrap .example {
-    width: 220px;
-  }
+}
+
+
+// Misc
+// --------------------------------------------------
+
+hr {
+  height: 0;
+  margin: 10px 0 30px;
+  border: solid #ddd;
+  border-width: 1px 0 0;
+  clear: both;
+}
+
+.column-group {
+  *zoom: 1;
+}
+.column-group:before,
+.column-group:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+.column-group:after {
+  clear: both;
 }
 
 
@@ -1083,7 +1088,10 @@ hr {
   }
 }
 
-// Devices
+
+// Example platform styles
+// --------------------------------------------------
+
 .platform-ios {
   @import "theme-ios.scss";
 

From fcc3216ab13810583d1ad93e65c703ae16e45450 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 28 Feb 2014 07:48:11 -0800
Subject: [PATCH 2/6] get buttons with icons to display properly in the device.

---
 docs/assets/css/docs.css | 3 ++-
 sass/docs.scss           | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 4aeb066..a182951 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -805,7 +805,8 @@ code {
 }
 
 #buttonsInDevice .btn,
-#buttonsBadgesInDevice .btn {
+#buttonsBadgesInDevice .btn,
+#buttonsWithIconsInDevice .btn {
   margin-top: 10px;
   margin-right: 100px;
   margin-left: 10px;
diff --git a/sass/docs.scss b/sass/docs.scss
index e6f41cf..17d793a 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -807,7 +807,8 @@ code {
 
 // Buttons
 #buttonsInDevice,
-#buttonsBadgesInDevice {
+#buttonsBadgesInDevice,
+#buttonsWithIconsInDevice {
   .btn {
     margin-top: 10px;
     margin-right: 100px;

From 3c770cefa6c8d1981c5ef4143572628c2f3c647e Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 28 Feb 2014 07:57:00 -0800
Subject: [PATCH 3/6] fixing the ad posiitoning for now. This whole set up is
 bs tho. going to fix it up soon.

---
 docs/assets/css/docs.css | 5 ++---
 sass/docs.scss           | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a182951..c60eed0 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -31,11 +31,11 @@ body {
 
 .docs-header {
   height: 100vh;
-  min-height: 700px;
+  min-height: 750px;
 }
 .docs-header .carbonad {
   position: absolute !important;
-  bottom: 180px !important;
+  bottom: 255px !important;
   margin-top: 0 !important;
   -webkit-animation-name: fadeintext;
   -moz-animation-name: fadeintext;
@@ -249,7 +249,6 @@ body {
 }
 .docs-header-content {
   position: relative;
-  top: 30px;
   text-align: center;
   padding: 50px 10px;
   -webkit-animation-name: fadeintext;
diff --git a/sass/docs.scss b/sass/docs.scss
index 17d793a..cde1934 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -31,12 +31,12 @@ body {
 }
 .docs-header {
   height: 100vh;
-  min-height: 700px;
+  min-height: 750px;
 
   // Ad on the homepage
   .carbonad {
     position: absolute !important;
-    bottom: 180px !important;
+    bottom: 255px !important;
     margin-top: 0 !important;
     @include animation-name(fadeintext);
     @include animation-duration(2s);
@@ -254,7 +254,6 @@ body {
 // "Build mobile apps using simple..."
 .docs-header-content {
   position: relative;
-  top: 30px;
   text-align: center;
   padding: 50px 10px;
   @include animation-name(fadeintext);

From d5e1854d7bffb88a91905ddd08b20d915a354dae Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 28 Feb 2014 10:25:39 -0800
Subject: [PATCH 4/6] comments

---
 sass/docs.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/sass/docs.scss b/sass/docs.scss
index cde1934..985dc6f 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -286,6 +286,8 @@ body {
   color: #fff;
   line-height: 38px;
 }
+
+// Desktop header content
 @media screen and (min-width: 768px) {
   .docs-header-content {
     top: 30%;
@@ -381,6 +383,8 @@ body {
     opacity: .7;
   }
 }
+
+// Desktop: Left align the text
 @media screen and (min-width: 768px) {
   .docs-sub-content {
     margin-right: 380px;
@@ -391,6 +395,7 @@ body {
 
 // Content sections
 // --------------------------------------------------
+
 .docs-section {
   padding-top: 80px;
   padding-bottom: 80px;
@@ -409,6 +414,8 @@ body {
   color: #777;
   font-weight: 100;
 }
+
+// Desktop: Section headings 
 @media screen and (min-width: 768px) {
   .section-heading {
     margin-top: 50px;
@@ -420,6 +427,7 @@ body {
   }
 }
 
+
 // Steps
 // --------------------------------------------------
 
@@ -564,6 +572,7 @@ body {
   overflow: hidden;
 }
 
+
 // Platform toggle
 // --------------------------------------------------
 
@@ -599,6 +608,7 @@ body {
   }
 }
 
+
 // Example devices
 // --------------------------------------------------
 
@@ -651,6 +661,7 @@ body {
   }
 }
 
+
 // Components
 // --------------------------------------------------
 
@@ -902,6 +913,7 @@ code {
   }
 }
 
+
 // Example device
 // --------------------------------------------------
 

From 33fc85f8eb6d0a4b48cbdb7b8d3437c4da9e5ece Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 28 Feb 2014 10:36:40 -0800
Subject: [PATCH 5/6] wrapping the home ad and footer in a parent and
 positioning the parent.

---
 docs/assets/css/docs.css | 16 +++++++++-------
 docs/index.html          |  6 ++++--
 sass/docs.scss           | 15 ++++++++-------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index c60eed0..3324749 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -34,8 +34,7 @@ body {
   min-height: 750px;
 }
 .docs-header .carbonad {
-  position: absolute !important;
-  bottom: 255px !important;
+  position: relative !important;
   margin-top: 0 !important;
   -webkit-animation-name: fadeintext;
   -moz-animation-name: fadeintext;
@@ -50,14 +49,21 @@ body {
   text-align: center;
 }
 
+.docs-header-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 @media screen and (min-width: 768px) {
   .docs-header {
     min-height: 870px;
   }
   .docs-header .carbonad {
-    bottom: 259px !important;
     left: 50% !important;
     margin-left: -165px !important;
+    margin-bottom: 60px !important;
   }
 
   .docs-sub-header .carbonad {
@@ -537,10 +543,6 @@ body {
 }
 
 .docs-header .docs-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   margin-top: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
diff --git a/docs/index.html b/docs/index.html
index cd90959..32d8996 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -11,6 +11,8 @@ title: Ratchet
     <p class="version">Currently v2.0.0</p>
   </div>
 
-  {% include ad.html %}
-  {% include footer.html %}
+  <div class="docs-header-bottom">
+    {% include ad.html %}
+    {% include footer.html %}
+  </div>
 </div>
diff --git a/sass/docs.scss b/sass/docs.scss
index 985dc6f..1b4726c 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -35,8 +35,7 @@ body {
 
   // Ad on the homepage
   .carbonad {
-    position: absolute !important;
-    bottom: 255px !important;
+    position: relative !important;
     margin-top: 0 !important;
     @include animation-name(fadeintext);
     @include animation-duration(2s);
@@ -47,6 +46,12 @@ body {
     text-align: center;
   }
 }
+.docs-header-bottom {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 // Desktop jumbotron
 @media screen and (min-width: 768px) {
   .docs-header {
@@ -54,9 +59,9 @@ body {
 
     // Ads on the homepage
     .carbonad {
-      bottom: 259px !important;
       left: 50% !important;
       margin-left: -165px !important;
+      margin-bottom: 60px !important;
     }
   }
 
@@ -549,10 +554,6 @@ body {
 
 // Overrides for the homepage's footer
 .docs-header .docs-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   margin-top: 0;
   border-top: 1px solid rgba(255,255,255,.1);
 

From f3cb626bc76a9f402989c3787482cc8088535037 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Fri, 28 Feb 2014 10:40:38 -0800
Subject: [PATCH 6/6] adding side padding to the foot for mobile.

---
 docs/assets/css/docs.css | 5 +++--
 sass/docs.scss           | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 3324749..be6e2fa 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -497,8 +497,7 @@ body {
 .docs-footer {
   border-top: 1px solid #ddd;
   margin-top: 50px;
-  padding-top: 30px;
-  padding-bottom: 30px;
+  padding: 30px 20px;
   color: #777;
   font-size: 14px;
   text-align: center;
@@ -531,6 +530,8 @@ body {
   .docs-footer-text {
     width: 550px;
     margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 .docs-footer-links {
diff --git a/sass/docs.scss b/sass/docs.scss
index 1b4726c..cc30260 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -505,8 +505,7 @@ body {
 .docs-footer {
   border-top: 1px solid #ddd;
   margin-top: 50px;
-  padding-top: 30px;
-  padding-bottom: 30px;
+  padding: 30px 20px;
   color: #777;
   font-size: 14px;
   text-align: center;
@@ -540,6 +539,8 @@ body {
   .docs-footer-text {
     width: 550px;
     margin: 0 auto;
+    padding-left: 0;
+    padding-right: 0;
   }
 }
 .docs-footer-links {