Add responsive breakpoint and yui grid for desktop

h/css/common.scss

@@ -55,6 +55,10 @@ html {
   @include respond-to(tablets) {
     @include yui_grid('t-');
   }
+
+  @include respond-to(desktops) {
+    @include yui_grid('d-');
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {

h/css/responsive.scss

-$break-small: 479px !default;
-$break-large: 911px !default;;
+$break-small: 480px !default;
+$break-medium: 768px !default;
+$break-large: 1024px !default;
 
 @mixin respond-to($media) {
   @if type-of($media) == string {
@@ -7,10 +8,13 @@ $break-large: 911px !default;;
       @media only screen and (max-width: $break-small) { @content; }
     }
     @else if $media == wide-handhelds {
-      @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+      @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
     }
     @else if $media == tablets {
-      @media only screen and (min-width: $break-large) { @content; }
+      @media only screen and (min-width: $break-medium + 1) and (max-width: $break-large) { @content; }
+    }
+    @else if $media == desktops {
+      @media only screen and (min-width: $break-large + 1) { @content; }
     }
   }
   @else if type-of($media) == list {
@@ -18,10 +22,13 @@ $break-large: 911px !default;;
       @media only screen and (max-width: $break-small) { @content; }
     }
     @if index($media, wide-handhelds) != false {
-      @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+      @media only screen and (min-width: $break-small + 1) and (max-width: $break-medium) { @content; }
     }
     @if index($media, tablets) != false {
-      @media only screen and (min-width: $break-large) { @content; }
+      @media only screen and (min-width: $break-medium + -1) and (max-width: $break-large){ @content; }
+    }
+    @if index($media, desktops) != false {
+      @media only screen and (min-width: $break-large + 1) { @content; }
     }
   }
 }

h/css/site.scss

@@ -18,7 +18,7 @@ header {
     text-align: center;
   }
 
-  @include respond-to(wide-handhelds tablets) {
+  @include respond-to(wide-handhelds tablets desktops) {
     @include pie-clearfix;
     text-align: left;
     img { float: left; }
@@ -65,10 +65,10 @@ ol {
 .content {
   padding: 2.5em 1em;
 
-  @include respond-to(tablets) {
+  @include respond-to(tablets desktops) {
     padding: 2.5em 4em 4em 4em;
     margin: auto;
-    max-width: $break-large;
+    max-width: $break-medium;
   }
 }
 
@@ -76,20 +76,20 @@ ol {
   position: fixed;
   .inner {
     margin: 0 auto;
-    max-width: $break-large;
+    max-width: $break-medium;
     padding-left: 3.6em;
     padding-right: 3.6em;
-    @include respond-to(tablets) {
+    @include respond-to(tablets desktops) {
       padding-left: 3.6em;
       padding-right: 3.6em;
       margin: 0 auto;
-      max-width: $break-large;
+      max-width: $break-medium;
     }
     @include respond-to(wide-handhelds handhelds) {
       padding-left: 0.9em;
       padding-right: 0.9em;
       margin: 0 auto;
-      max-width: $break-large;
+      max-width: $break-medium;
     }
   }
 }