Mobile styling amends

source/themes/opdavies/opdavies/assets/css/styles.css

@@ -50,7 +50,7 @@ html {
   line-height: 1.5em; }
 
 .content {
-  max-width: 960px;
+  max-width: 95%;
   margin-left: auto;
   margin-right: auto;
   padding: 1em 0; }
@@ -58,6 +58,15 @@ html {
     content: " ";
     display: block;
     clear: both; }
+  @media (min-width: 1025px) {
+    .content {
+      max-width: 960px;
+      margin-left: auto;
+      margin-right: auto; }
+      .content:after {
+        content: " ";
+        display: block;
+        clear: both; } }
   .content a {
     text-decoration: none; }
     .content a:link, .content a:visited {
@@ -66,7 +75,7 @@ html {
       color: black; }
 
 footer[role="contentinfo"] {
-  max-width: 960px;
+  max-width: 95%;
   margin-left: auto;
   margin-right: auto;
   border-top: 1px solid #CCC;
@@ -76,6 +85,15 @@ footer[role="contentinfo"] {
     content: " ";
     display: block;
     clear: both; }
+  @media (min-width: 1025px) {
+    footer[role="contentinfo"] {
+      max-width: 960px;
+      margin-left: auto;
+      margin-right: auto; }
+      footer[role="contentinfo"]:after {
+        content: " ";
+        display: block;
+        clear: both; } }
 
 header[role="banner"] {
   line-height: 1.5em;
@@ -83,30 +101,42 @@ header[role="banner"] {
   color: white;
   padding: 1.5em 0; }
   header[role="banner"] .inner {
-    max-width: 960px;
+    max-width: 95%;
     margin-left: auto;
     margin-right: auto; }
     header[role="banner"] .inner:after {
       content: " ";
       display: block;
       clear: both; }
-    header[role="banner"] .inner .site-name {
-      width: 23.72881%;
-      float: left;
-      margin-left: 0; }
-    header[role="banner"] .inner .main-menu {
-      width: 74.57627%;
-      float: left;
-      margin-left: 1.69492%;
-      text-align: right; }
-      header[role="banner"] .inner .main-menu a {
-        border-bottom: 1px solid #064771;
-        color: white;
-        display: block;
-        margin-left: .5em;
-        text-decoration: none; }
-        header[role="banner"] .inner .main-menu a.active {
-          border-color: white; }
+    @media (min-width: 1025px) {
+      header[role="banner"] .inner {
+        max-width: 960px;
+        margin-left: auto;
+        margin-right: auto; }
+        header[role="banner"] .inner:after {
+          content: " ";
+          display: block;
+          clear: both; } }
+    header[role="banner"] .inner .main-menu a {
+      border-bottom: 1px solid #064771;
+      color: white;
+      display: block;
+      margin: 0 .5em 0 0;
+      text-decoration: none; }
+      header[role="banner"] .inner .main-menu a.active {
+        border-color: white; }
+    @media (min-width: 322px) {
+      header[role="banner"] .inner .site-name {
+        width: 32.20339%;
+        float: left;
+        margin-left: 0; }
+      header[role="banner"] .inner .main-menu {
+        width: 66.10169%;
+        float: left;
+        margin-left: 1.69492%;
+        text-align: right; }
+        header[role="banner"] .inner .main-menu a {
+          margin: 0 0 0 .5em; } }
 
 .main-menu ul {
   margin: 0;

source/themes/opdavies/opdavies/assets/scss/modules/_content.scss

@@ -1,7 +1,11 @@
 .content {
-  @include container(960px);
+  @include container(95%);
   padding: 1em 0;
 
+  @include breakpoint($desktop) {
+    @include container(960px);
+  }
+
   a {
     text-decoration: none;
 

source/themes/opdavies/opdavies/assets/scss/modules/_footer.scss

@@ -1,6 +1,10 @@
 footer[role="contentinfo"] {
-  @include container(960px);
+  @include container(95%);
   border-top: 1px solid #CCC;
   margin-top: 1em;
   padding: 1em 0;
+
+  @include breakpoint($desktop) {
+  	@include container(960px);
+  }
 }

source/themes/opdavies/opdavies/assets/scss/modules/_header.scss

@@ -5,25 +5,35 @@ header[role="banner"] {
   padding: 1.5em 0;
 
   .inner {
-    @include container(960px);
-
-    .site-name {
-      @include span(first 3);
+    @include container(95%);
+    
+    @include breakpoint($desktop) {
+      @include container(960px);
     }
 
-    .main-menu {
-      @include span(9);
-      text-align: right;
+    .main-menu a {
+      border-bottom: 1px solid #064771;
+      color: white;
+      display: block;
+      margin: 0 .5em 0 0;
+      text-decoration: none;
 
-      a {
-        border-bottom: 1px solid #064771;
-        color: white;
-        display: block;
-        margin-left: .5em;
-        text-decoration: none;
+      &.active {
+        border-color: white;
+      }
+    }
 
-        &.active {
-          border-color: white;
+    @include breakpoint($mobile + 1) {
+      .site-name {
+        @include span(first 4);
+      }
+
+      .main-menu {
+        @include span(8);
+        text-align: right;
+
+        a {
+          margin: 0 0 0 .5em;
         }
       }
     }

source/themes/opdavies/opdavies/assets/scss/styles.scss

@@ -3,6 +3,7 @@
 @import 'compass/css3';
 @import 'compass/typography/vertical_rhythm';
 @import 'susy';
+@import 'breakpoint';
 
 @import "variables/**/*";
 @import "layout/**/*";

source/themes/opdavies/opdavies/assets/scss/variables/_responsive.scss

@@ -0,0 +1,2 @@
+$mobile: 321px;
+$desktop: 1025px;

source/themes/opdavies/opdavies/config.rb

@@ -16,6 +16,7 @@ javascripts_dir = "assets/js"
 # Require any additional compass plugins installed on your system.
 require 'susy'
 require 'sass-globbing'
+require 'breakpoint'
 
 ##
 ## You probably don't need to edit anything below this.