make mobile tweaks

Author: JonRowe

_styles/_header.sass

@@ -14,6 +14,16 @@ header
   h1 img
     height: 4em
     float: left
+
   h1 span
     color: rgb(255,233,94)
     +dimensionalise-text( rgb(209,191,77) )
+
+@include breakpoint($mobile)
+  header
+    padding: 0 1em
+    height: 6em
+    h1 img
+      height: 2em
+    h1
+      line-height: 2em

_styles/default.sass

@@ -14,6 +14,9 @@ html, body
     color: black
     text-decoration: underline
 
+$mobile: max-width 476px
+$other:  min-width 476px
+
 @import 'header'
 @import 'page'
 @import 'footer'
@@ -26,12 +29,12 @@ html, body
   #work, #contact
     @include span-columns(12)
   #about
-    @include breakpoint(min-width 476px 12)
-      @include shift(3)
-      @include span-columns(6)
-    @include breakpoint(max-width 476px)
+    @include breakpoint($mobile)
       @include shift(1)
       @include span-columns(10)
+    @include breakpoint($other)
+      @include shift(3)
+      @include span-columns(6)
   #about, #work, #contact
     @include omega()
 
@@ -45,14 +48,21 @@ html, body
     font-size: 2.4em
   #contact
     font-size: 1.5em
+    @include breakpoint($mobile)
+      padding: 1em
 
   #work
     ul
       list-style: none
       margin:  0
       padding: 0
     li
-      height: 560px
+      @include background-size(100%,auto)
+      background-size: 100% auto
+      @include breakpoint($mobile)
+        height: 400px
+      @include breakpoint($other)
+        height: 560px
       h2
         background: white
         float: left

styles/default.css

@@ -358,6 +358,14 @@ header {
     color: #ffe95e;
     text-shadow: -1px -1px 0px #d1bf4d, -2px -2px 0px #d1bf4d, -3px -3px 0px #d1bf4d, -4px -4px 0px #aaaaaa; }
 
+@media screen and (max-width: 476px) {
+  header {
+    padding: 0 1em;
+    height: 6em; }
+    header h1 img {
+      height: 2em; }
+    header h1 {
+      line-height: 2em; } }
 #page1 {
   margin-top: -15em;
   padding-top: 15em; }
@@ -422,22 +430,22 @@ footer {
   width: 100%; }
   #page1 #work:last-child, #page1 #contact:last-child, #page2 #work:last-child, #page2 #contact:last-child {
     margin-right: 0; }
-@media screen and (min-width: 476px) {
+@media screen and (max-width: 476px) {
   #page1 #about, #page2 #about {
-    margin-left: 25.58941%;
+    margin-left: 8.5298%;
     display: block;
     float: left;
     margin-right: 2.35765%;
-    width: 48.82117%; }
+    width: 82.94039%; }
     #page1 #about:last-child, #page2 #about:last-child {
       margin-right: 0; } }
-@media screen and (max-width: 476px) {
+@media screen and (min-width: 476px) {
   #page1 #about, #page2 #about {
-    margin-left: 8.5298%;
+    margin-left: 25.58941%;
     display: block;
     float: left;
     margin-right: 2.35765%;
-    width: 82.94039%; }
+    width: 48.82117%; }
     #page1 #about:last-child, #page2 #about:last-child {
       margin-right: 0; } }
 #page1 #about, #page1 #work, #page1 #contact, #page2 #about, #page2 #work, #page2 #contact {
@@ -451,12 +459,26 @@ footer {
   font-size: 2.4em; }
 #page1 #contact, #page2 #contact {
   font-size: 1.5em; }
+  @media screen and (max-width: 476px) {
+    #page1 #contact, #page2 #contact {
+      padding: 1em; } }
 #page1 #work ul, #page2 #work ul {
   list-style: none;
   margin: 0;
   padding: 0; }
 #page1 #work li, #page2 #work li {
-  height: 560px; }
+  -webkit-background-size: 100%, auto;
+  -moz-background-size: 100%, auto;
+  -ms-background-size: 100%, auto;
+  -o-background-size: 100%, auto;
+  background-size: 100%, auto;
+  background-size: 100% auto; }
+  @media screen and (max-width: 476px) {
+    #page1 #work li, #page2 #work li {
+      height: 400px; } }
+  @media screen and (min-width: 476px) {
+    #page1 #work li, #page2 #work li {
+      height: 560px; } }
   #page1 #work li h2, #page2 #work li h2 {
     background: white;
     float: left;