From 18f67ce32ad04157b3736c33c1178009bae7abff Mon Sep 17 00:00:00 2001 From: Siri Reiter Date: Sat, 23 Aug 2014 21:30:24 +0200 Subject: Use Breakpoint instead of explicit @media hint. --- config.rb | 27 +++++++++++++++++++++++++++ local.scss | 3 ++- partials/_base.scss | 5 +++++ 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 config.rb 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. -- cgit v1.2.3