From 68e82a1caca883f5267906c03199ff922995c663 Mon Sep 17 00:00:00 2001
From: Coby Chapple <coby@cobychapple.com>
Date: Thu, 4 Apr 2013 16:28:25 +0100
Subject: [PATCH] twerk the github pages section a bit so it mostly works

---
 site/css/style.css | 77 +++++++++++++++++++++++++++++-----------------
 site/index.html    | 22 +++++++------
 2 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/site/css/style.css b/site/css/style.css
index 64735a65..e9295ef5 100644
--- a/site/css/style.css
+++ b/site/css/style.css
@@ -17,6 +17,18 @@ body {
   text-shadow: 0 1px 3px rgba(0,0,0,.5);
 }
 
+.clear {
+  display: block;
+}
+
+.clear:after {
+  content: " ";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
 /* Sections */
 
 body > header, body > section, body > footer {
@@ -192,7 +204,7 @@ body > footer a:hover img {
 }
 
 .quickstart .code {
-  font-size: 13px;
+  font-size: 12px;
   display: block;
   margin: 0 0 -30px;
 }
@@ -221,7 +233,7 @@ body > footer a:hover img {
 .quickstart .code .title {
   display: block;
   text-align: center;
-  margin: 0 10px;
+  margin: 0 20px;
   padding: 5px 0;
   border-radius: 5px 5px 0 0;
   box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
@@ -245,7 +257,7 @@ body > footer a:hover img {
 .quickstart .code .shell {
   padding: 20px;
   text-shadow: none;
-  margin: 0 10px;
+  margin: 0 20px;
   background: #3d3d3d;
   border-radius: 0 0 5px 5px;
   box-shadow: 0 5px 30px rgba(0,0,0,.3);
@@ -279,49 +291,58 @@ body > footer a:hover img {
 
 /* Free Hosting */
 
-.free-hosting .content {
-  /*margin-bottom: 40px;*/
-  position: relative;
-}
-
 .free-hosting .pane {
   background: #444;
   border-radius: 10px;
-  padding: 40px 70px 30px;
-  /*color: #222;*/
   text-shadow: none;
+  position: relative;
+  padding: 0 20px 30px;
 }
 
 .free-hosting img {
-  float: left;
-  margin: -20px 40px -40px -20px;
+  margin: -30px 0 0;
+  width: 180px;
+  height: 150px;
 }
 
 .free-hosting h2 {
-  /*font-weight: 800;*/
+  font-size: 28px;
 }
+
 .free-hosting p,
 .free-hosting a {
-  font-weight: inherit;
+  font-size: 16px;
 }
 
 .free-hosting p {
-  margin: 0.75em;
+  margin: .75em 0;
 }
 
-.free-hosting a {
-  /*color: #c00;*/
-}
-
-.free-hosting .content:after {
-  content: " ";
-  float: right;
-  background: url(../img/footer-arrow.png) top left no-repeat;
-  width: 73px;
-  height: 186px;
-  position: absolute;
-  right: 30px;
-  bottom: -60px;
+@media (min-width: 768px){
+  .free-hosting img {
+    float: left;
+    margin: -20px -30px -30px -50px;
+    width: 300px;
+    height: 251px;
+  }
+  .free-hosting .pane-content {
+    margin-top: 35px;
+    padding-right: 30px;
+  }
+  .free-hosting p,
+  .free-hosting a {
+    font-size: 18px;
+  }
+  .free-hosting .pane:after {
+    content: " ";
+    float: right;
+    background: url(../img/footer-arrow.png) top left no-repeat;
+    width: 73px;
+    height: 186px;
+    position: absolute;
+    right: 0;
+    bottom: -30px;
+  }
 }
 
 /* HTML Elements */
diff --git a/site/index.html b/site/index.html
index e6ae66c2..683a0d9f 100644
--- a/site/index.html
+++ b/site/index.html
@@ -66,16 +66,20 @@ overview: true
     <div class="clear"></div>
   </div>
 </section>
-<section class="free-hosting pane">
+<section class="free-hosting">
   <div class="grid">
-    <div class="unit one-third">
-      <img src="img/octojekyll.png" alt="Free Jekyll hosting on GitHub Pages">
-    </div>
-    <div class="unit two-thirds">
-      <h2><strong>Free hosting</strong> with GitHub Pages</h2>
-      <p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and all.</p>
-      <a href="http://pages.github.com/" class="">Learn more about GitHub Pages &rarr;</a>
-      <div class="clear"></div>
+    <div class="unit whole">
+      <div class="grid pane">
+        <div class="unit whole center-on-mobiles">
+          <img src="img/octojekyll.png" alt="Free Jekyll hosting on GitHub Pages">
+          <div class="pane-content">
+            <h2 class="center-on-mobiles"><strong>Free hosting</strong> with GitHub Pages</h2>
+            <p>Sick of dealing with hosting companies? <a href="http://pages.github.com/">GitHub Pages</a> are <em>powered by Jekyll</em>, so you can easily deploy your site using GitHub for free&mdash;<a href="https://help.github.com/articles/setting-up-a-custom-domain-with-pages">custom domain name</a> and&nbsp;all.</p>
+            <a href="http://pages.github.com/" class="">Learn more about GitHub Pages &rarr;</a>
+          </div>
+        </div>
+        <div class="clear"></div>
+      </div>
     </div>
   </div>
 </section>