From 627cbb82a57e668d3a17e19244e2fd4253b7e0ac Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 22 Feb 2014 19:14:44 -0800
Subject: [PATCH] mobile

---
 docs/_includes/header.html |  2 +-
 docs/assets/css/docs.css   | 72 +++++++++++++++++++++++-------------
 sass/docs.scss             | 75 ++++++++++++++++++++++++--------------
 3 files changed, 94 insertions(+), 55 deletions(-)

diff --git a/docs/_includes/header.html b/docs/_includes/header.html
index c197321..3564436 100644
--- a/docs/_includes/header.html
+++ b/docs/_includes/header.html
@@ -2,7 +2,7 @@
 <title>{{ page.title }}</title>
 <meta name="description" content="{{ site.name }}: {{ site.description }}">
 <meta name="author" content="{{ site.authors }}">
-<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
 <link rel="shortcut icon" href="{{ page.base_url }}favicon.ico">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index d5c2fa6..ad80a5a 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -26,6 +26,7 @@ body {
 .docs-header {
   position: relative;
   height: 100vh;
+  min-height: 620px;
   background-image: linear-gradient(45deg, #0a1855 0%, #da0024 100%);
 }
 .docs-header:before {
@@ -40,15 +41,14 @@ body {
   content: '';
 }
 
-.docs-logo {
-  width: 70px;
-  height: 70px;
-  margin: 0 auto 15px;
+.docs-title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
   color: #fff;
-  font-weight: 300;
-  line-height: 68px;
-  border: 1px solid #fff;
-  border-radius: 40px;
+  font-size: 22px;
+  font-weight: 100;
+  opacity: .4;
 }
 
 .docs-nav {
@@ -56,9 +56,24 @@ body {
   right: 20px;
   top: 20px;
   color: #fff;
+  cursor: pointer;
+}
+
+.docs-logo {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto 15px;
+  color: #fff;
+  font-size: 35px;
+  font-weight: 300;
+  line-height: 72px;
+  border: 1px solid #fff;
+  border-radius: 40px;
 }
 
 .docs-header-content {
+  position: relative;
+  top: 40px;
   text-align: center;
   padding: 50px 10px;
   -webkit-animation-name: fadeintext;
@@ -113,16 +128,16 @@ body {
 .carbonad {
   position: absolute !important;
   bottom: 90px !important;
-  left: 50% !important;
-  width: 330px !important;
+  width: 100% !important;
   height: auto !important;
   padding: 15px !important;
-  margin-left: -165px !important;
   font-size: 13px !important;
   line-height: 16px !important;
-  border-radius: 3px !important;
   background: transparent !important;
-  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-right: 0 !important;
+  border-bottom: 0 !important;
+  border-left: 0 !important;
   -webkit-animation-name: fadeintext;
   -moz-animation-name: fadeintext;
   animation-name: fadeintext;
@@ -522,27 +537,26 @@ hr {
 }
 
 @media screen and (min-width: 768px) {
-  .docs-header {
-    min-height: 770px;
+  .docs-logo {
+    width: 70px;
+    height: 70px;
+    font-size: 30px;
+    line-height: 68px;
   }
 
-  .docs-title {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    color: #fff;
-    font-size: 22px;
-    font-weight: 100;
-    opacity: .4;
+  .docs-header {
+    min-height: 770px;
   }
 
   .docs-header-content {
-    position: relative;
     top: 37%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
   }
+  .docs-header-content .btn {
+    display: inline-block;
+  }
 
   .docs-subtitle {
     margin-bottom: 30px;
@@ -550,8 +564,14 @@ hr {
     line-height: 60px;
   }
 
-  .docs-header-content .btn {
-    display: inline-block;
+  .carbonad {
+    left: 50% !important;
+    width: 330px !important;
+    margin-left: -165px !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;
   }
 
   .social .twitter-follow-button {
diff --git a/sass/docs.scss b/sass/docs.scss
index 10559d4..043c85c 100644
--- a/sass/docs.scss
+++ b/sass/docs.scss
@@ -26,6 +26,7 @@ body {
 .docs-header {
   position: relative;
   height: 100vh;
+  min-height: 620px;
   background-image: linear-gradient(45deg, #0a1855 0%,#da0024 100%);
 
   &:before {
@@ -40,23 +41,36 @@ body {
     content: '';
   }
 }
-.docs-logo {
-  width: 70px;
-  height: 70px;
-  margin: 0 auto 15px;
+.docs-title {
+  position: absolute;
+  top: 20px;
+  left: 20px;
   color: #fff;
-  font-weight: 300;
-  line-height: 68px;
-  border: 1px solid #fff;
-  border-radius: 40px;
+  font-size: 22px;
+  font-weight: 100;
+  opacity: .4;
 }
 .docs-nav {
   position: absolute;
   right: 20px;
   top: 20px;
   color: #fff;
+  cursor: pointer;
+}
+.docs-logo {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto 15px;
+  color: #fff;
+  font-size: 35px;
+  font-weight: 300;
+  line-height: 72px;
+  border: 1px solid #fff;
+  border-radius: 40px;
 }
 .docs-header-content {
+  position: relative;
+  top: 40px;
   text-align: center;
   padding: 50px 10px;
   @include animation-name(fadeintext);
@@ -108,16 +122,16 @@ body {
 .carbonad {
   position: absolute !important;
   bottom: 90px !important;
-  left: 50% !important;
-  width: 330px !important;
+  width: 100% !important;
   height: auto !important;
   padding: 15px !important;
-  margin-left: -165px !important;
   font-size: 13px !important;
   line-height: 16px !important;
-  border-radius: 3px !important;
   background: transparent !important;
-  border: 1px solid rgba(255,255,255,.1) !important;
+  border-top: 1px solid rgba(255,255,255,.1) !important;
+  border-right: 0 !important;
+  border-bottom: 0 !important;
+  border-left: 0 !important;
   @include animation-name(fadeintext);
   @include animation-duration(3s);
 }
@@ -548,33 +562,38 @@ hr {
 
 // Tablet to desktop 
 @media screen and (min-width: 768px) {
-  // Jumbotron
+  .docs-logo {
+    width: 70px;
+    height: 70px;
+    font-size: 30px; 
+    line-height: 68px;
+  }
   .docs-header {
     min-height: 770px;
   }
-  .docs-title {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    color: #fff;
-    font-size: 22px;
-    font-weight: 100;
-    opacity: .4;
-  }
   .docs-header-content {
-    position: relative;
     top: 37%;
     @include transform(translateY(-50%));
+    
+    .btn {
+      display: inline-block;
+    }
   }
   .docs-subtitle {
     margin-bottom: 30px;
     font-size: 41px;
     line-height: 60px;
   }
-  .docs-header-content {
-    .btn {
-      display: inline-block;
-    }
+
+  // Ads
+  .carbonad {
+    left: 50% !important;
+    width: 330px !important;
+    margin-left: -165px !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