some polish for the quick-start instructions section

site/css/style.css

@@ -1,5 +1,11 @@
 /* Base */
 
+* {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+
 body {
   font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 21px;
@@ -170,7 +176,7 @@ body > footer a:hover img {
 .quickstart {
   background: #3F1F1F;
   color: #fff;
-  margin: 60px 0 80px;
+  margin: 60px 0;
   box-shadow: inset 0 3px 10px rgba(0,0,0,.4);
 }
 
@@ -178,15 +184,29 @@ body > footer a:hover img {
   padding: 0px 0;
 }
 
-.quickstart .code {
-  margin: -30px 0;
-  float: right;
+.quickstart h4 {
+  font-size: 24px;
+  line-height: 24px;
+  margin-top: 20px;
+  text-shadow: 0 1px 3px rgba(0,0,0,.8);
 }
 
-.quickstart h4 {
-  margin: 48px 0 0;
-  font-size: 28px;
-  text-shadow: 0 1px 3px rgba(0,0,0,.8);
+.quickstart .code {
+  font-size: 13px;
+  display: block;
+  margin: 0 0 -30px;
+}
+
+@media (min-width: 768px){
+  .quickstart .code {
+    font-size: 18px;
+    margin: -30px 0;
+    float: right;
+  }
+  .quickstart h4 {
+    margin: 40px 0 0;
+    text-align: center;
+  }
 }
 
 /* Code */
@@ -194,20 +214,16 @@ body > footer a:hover img {
 .quickstart .code {
   display: block;
   padding: 0;
-  background: #3d3d3d;
-  border-radius: 5px;
   font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
   line-height: 1.3em;
-  box-shadow: 0 5px 30px rgba(0,0,0,.3);
 }
 
 .quickstart .code .title {
   display: block;
   text-align: center;
-  margin: 0;
+  margin: 0 10px;
   padding: 5px 0;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  border-radius: 5px 5px 0 0;
   box-shadow: box-shadow: 0 3px 10px rgba(0,0,0,.5);
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 16px;
@@ -229,6 +245,10 @@ body > footer a:hover img {
 .quickstart .code .shell {
   padding: 20px;
   text-shadow: none;
+  margin: 0 10px;
+  background: #3d3d3d;
+  border-radius: 0 0 5px 5px;
+  box-shadow: 0 5px 30px rgba(0,0,0,.3);
 }
 
 .quickstart .code .line {

site/index.html

@@ -37,8 +37,8 @@ overview: true
 </section>
 <section class="quickstart">
   <div class="grid">
-    <div class="unit golden-small">
-      <h4>Get up and running <em>in seconds</em>.</h4>
+    <div class="unit golden-small center-on-mobiles">
+      <h4>Get up and running <em>in&nbsp;seconds</em>.</h4>
     </div>
     <div class="unit golden-large code">
       <p class="title">Quick-start Instructions</p>