Use Breakpoint instead of explicit @media hint.

3 files changed, 34 insertions, 1 deletions

diff --git a/config.rb b/config.rb
new file mode 100644
index 0000000..d6024db
--- /dev/null
+++ b/config.rb
@@ -0,0 +1,27 @@
+require 'breakpoint'
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = ""
+sass_dir = ""
+images_dir = ""
+javascripts_dir = ""
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
diff --git a/local.scss b/local.scss
index f3cf85e..a7617f6 100644
--- a/local.scss
+++ b/local.scss
@@ -2,6 +2,7 @@
 @import "compass/reset/utilities";
 @import "compass/typography";
 @import "blueprint";
+@import "breakpoint";
 
 @include blueprint-typography;
 h1 {
@@ -92,7 +93,7 @@ a {
 #pagebody {
 	float: left;
 	margin: 1em 5% 4.2em;
-	@media only screen and (min-width: 40em) {
+	@include breakpoint($large-desktop) {
 		margin-left: 25%;
 	}
 }
diff --git a/partials/_base.scss b/partials/_base.scss
index b8cc418..1cc52ea 100644
--- a/partials/_base.scss
+++ b/partials/_base.scss
@@ -26,6 +26,11 @@ $linkHoverColor: $colorPrimary;
 
 $headerColor: $colorPrimary;
 
+// Media
+//
+// No styleguide reference.
+$large-desktop: screen min-width 40em;
+
 // Framework integrations
 //
 // No styleguide reference.