make text more readable on smaller screens

Author: JonRowe

_styles/default.sass

@@ -26,8 +26,12 @@ html, body
   #work, #contact
     @include span-columns(12)
   #about
-    @include shift(3)
-    @include span-columns(6)
+    @include breakpoint(min-width 476px 12)
+      @include shift(3)
+      @include span-columns(6)
+    @include breakpoint(max-width 476px)
+      @include shift(1)
+      @include span-columns(10)
   #about, #work, #contact
     @include omega()
 

styles/default.css

@@ -422,14 +422,24 @@ footer {
   width: 100%; }
   #page1 #work:last-child, #page1 #contact:last-child, #page2 #work:last-child, #page2 #contact:last-child {
     margin-right: 0; }
-#page1 #about, #page2 #about {
-  margin-left: 25.58941%;
-  display: block;
-  float: left;
-  margin-right: 2.35765%;
-  width: 48.82117%; }
-  #page1 #about:last-child, #page2 #about:last-child {
-    margin-right: 0; }
+@media screen and (min-width: 476px) {
+  #page1 #about, #page2 #about {
+    margin-left: 25.58941%;
+    display: block;
+    float: left;
+    margin-right: 2.35765%;
+    width: 48.82117%; }
+    #page1 #about:last-child, #page2 #about:last-child {
+      margin-right: 0; } }
+@media screen and (max-width: 476px) {
+  #page1 #about, #page2 #about {
+    margin-left: 8.5298%;
+    display: block;
+    float: left;
+    margin-right: 2.35765%;
+    width: 82.94039%; }
+    #page1 #about:last-child, #page2 #about:last-child {
+      margin-right: 0; } }
 #page1 #about, #page1 #work, #page1 #contact, #page2 #about, #page2 #work, #page2 #contact {
   margin-right: 0; }
 #page1 #about, #page1 #contact, #page2 #about, #page2 #contact {