diff --git a/lib/site_template/_sass/_base.scss b/lib/site_template/_sass/_base.scss
index 518bf2b0..e5fd0fd8 100644
--- a/lib/site_template/_sass/_base.scss
+++ b/lib/site_template/_sass/_base.scss
@@ -154,8 +154,8 @@ pre {
  * Wrapper
  */
 .wrapper {
-    max-width: -webkit-calc(800px - (#{$spacing-unit} * 2));
-    max-width:         calc(800px - (#{$spacing-unit} * 2));
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+    max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
     margin-right: auto;
     margin-left: auto;
     padding-right: $spacing-unit;
@@ -163,8 +163,8 @@ pre {
     @extend %clearfix;
 
     @include media-query($on-laptop) {
-        max-width: -webkit-calc(800px - (#{$spacing-unit}));
-        max-width:         calc(800px - (#{$spacing-unit}));
+        max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+        max-width:         calc(#{$content-width} - (#{$spacing-unit}));
         padding-right: $spacing-unit / 2;
         padding-left: $spacing-unit / 2;
     }
diff --git a/lib/site_template/css/main.scss b/lib/site_template/css/main.scss
index 5415d8bc..beee4e3d 100755
--- a/lib/site_template/css/main.scss
+++ b/lib/site_template/css/main.scss
@@ -21,6 +21,9 @@ $grey-color:       #828282;
 $grey-color-light: lighten($grey-color, 40%);
 $grey-color-dark:  darken($grey-color, 25%);
 
+// Width of the content area
+$content-width:    800px;
+
 $on-palm:          600px;
 $on-laptop:        800px;