fixes for a responsive layout

views/master.sass

@@ -4,7 +4,7 @@
 
 // Variables
 
-$content-width: 37em
+$content-width: 100%
 
 $border-style: 1px dashed $border-color
 
@@ -23,6 +23,9 @@ body
   font: ($base-font * 1.05) Georgia, serif
   line-height: $vertical-rhythm
   color: $base-color
+  @include breakpoint(mobileonly)
+    font: (($base-font-mobile) * 1.05) Georgia, serif
+    line-height: $vertical-rhythm
 
 header[role=banner]
   font-family: 'Droid Serif', Georgia, serif
@@ -60,7 +63,7 @@ ol,
 p,
 pre,
 ul
-  margin: 10px 0px
+  margin: 1em
   //margin-bottom: $base-vertical-margin
 
 li
@@ -93,8 +96,8 @@ article, aside, footer, header, nav, section
   display: block
 
 div#container
-  //width: 54em
-  width: 37em
+  width: 90%
+  max-width: 800px
   margin: 0 auto
   padding: 1em 1em 0 1em
 
@@ -181,11 +184,14 @@ article
     border: 1px solid 
     border-color: $disabled-border-color
     padding: 3px
+    display: block
     //margin-bottom: $base-vertical-margin
   blockquote
     img
       margin: 5px
       float: right
+      @include breakpoint(mobileonly)
+        max-width: 50%
 
   code,
   pre

views/mixins.sass

@@ -9,11 +9,14 @@ $h4-scale: 1.18
 // Variables used in calculations used to maintain vertical rhythm.
 // http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/
 
-$base-scale: 0.88
+$base-scale: 1
 $base-font: $base-scale * 1em
 $vertical-rhythm: 1.75em
 $base-vertical-margin: 1.75em
 
+$base-scale-mobile: 0.9
+$base-font-mobile: $base-scale-mobile * 1em
+
 @mixin adjust-font-size($scale, $top-weight: 1, $bottom-weight: 1)
   $average-margin: $base-vertical-margin / $scale
   margin-top: $average-margin * $top-weight
@@ -26,6 +29,9 @@ $base-vertical-margin: 1.75em
     line-height: $line-height
 
   font-size: 100% * $scale
+  @media (max-width: 37.5em)
+    font-size: 90% * $scale
+    line-height: $line-height * 1.5
 
 @mixin border-radius($radius)
   -webkit-border-radius: $radius
@@ -37,3 +43,22 @@ $base-vertical-margin: 1.75em
   -o-transition: $definition
   -webkit-transition: $definition
   transition: $definition
+
+// BREAKPOINTS
+
+@mixin breakpoint($point)
+  @if $point == desktop
+    @media (min-width: 70em)
+      @content
+  @else if $point == laptop
+    @media (min-width: 64em)
+      @content
+  @else if $point == tablet
+    @media (min-width: 50em)
+      @content
+  @else if $point == phablet
+    @media (min-width: 37.5em)
+      @content
+  @else if $point == mobileonly
+    @media (max-width: 37.5em)
+      @content

views/ribbon.sass

@@ -24,4 +24,6 @@
   -moz-user-select: none
   -ms-user-select: none
   -o-user-select: none
-  user-select: none
+  user-select: none
+  @include breakpoint(mobileonly)
+    display: none