Add first draft of single column design for phones

source/stylesheets/screen.css.scss

@@ -301,6 +301,8 @@ html, body {
       @include box-sizing(border-box);
       display: block;
       @include text-shadow($main-embossed-text-shadow);
+
+      @extend %left-col;
     }
 
     &>ul, &>ol {
@@ -496,6 +498,8 @@ html, body {
     @include box-sizing(border-box);
     @include text-shadow(0px 1px 2px rgba(0,0,0,0.4));
 
+    @extend %right-col;
+
     &>p { margin: 0; }
 
     a {
@@ -525,6 +529,7 @@ html, body {
 // RESPONSIVE DESIGN
 ////////////////////////////////////////////////////////////////////////////////
 // These are the styles for phones and tablets
+// There are also a couple styles disperesed
 
 @media (max-width: $tablet-width) {
   .tocify-wrapper {
@@ -543,3 +548,24 @@ html, body {
     display: block;
   }
 }
+
+@media (max-width: $phone-width) {
+  .dark-box {
+    display: none;
+  }
+
+  %left-col {
+    margin-right: 0;
+  }
+
+  %right-col {
+    width: auto;
+    float: none;
+
+    margin-bottom: $main-padding;
+
+    &+blockquote, &+pre {
+      margin-top: -$main-padding;
+    }
+  }
+}