From e4029426debfb8b8b493b06eca8b662d3f85eb97 Mon Sep 17 00:00:00 2001
From: kleinfreund <phrudloff@gmail.com>
Date: Sun, 3 Aug 2014 23:07:47 +0200
Subject: [PATCH] Adding and using media-query mixin

---
 lib/site_template/_sass/_base.scss        |  2 +-
 lib/site_template/_sass/_posts.scss       |  8 ++++----
 lib/site_template/_sass/_site-footer.scss |  4 ++--
 lib/site_template/_sass/_site-header.scss |  2 +-
 lib/site_template/css/main.scss           | 20 +++++++++++++++++++-
 5 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/lib/site_template/_sass/_base.scss b/lib/site_template/_sass/_base.scss
index 2e0a327d..773822b0 100644
--- a/lib/site_template/_sass/_base.scss
+++ b/lib/site_template/_sass/_base.scss
@@ -84,7 +84,7 @@ li {
     padding-left: $spacing-unit;
     @extend %clearfix;
 
-    @media screen and (max-width: 800px) {
+    @include media-query($on-laptop) {
         padding-right: $spacing-unit / 2;
         padding-left: $spacing-unit / 2;
     }
diff --git a/lib/site_template/_sass/_posts.scss b/lib/site_template/_sass/_posts.scss
index 8cafa63e..48b8abf8 100644
--- a/lib/site_template/_sass/_posts.scss
+++ b/lib/site_template/_sass/_posts.scss
@@ -10,7 +10,7 @@
     letter-spacing: -1px;
     line-height: 1;
 
-    @media screen and (max-width: 800px) {
+    @include media-query($on-laptop) {
         font-size: 36px;
     }
 }
@@ -21,7 +21,7 @@
     h2 {
         font-size: 32px;
 
-        @media screen and (max-width: 800px) {
+        @include media-query($on-laptop) {
             font-size: 28px;
         }
     }
@@ -29,7 +29,7 @@
     h3 {
         font-size: 26px;
 
-        @media screen and (max-width: 800px) {
+        @include media-query($on-laptop) {
             font-size: 22px;
         }
     }
@@ -37,7 +37,7 @@
     h4 {
         font-size: 20px;
 
-        @media screen and (max-width: 800px) {
+        @include media-query($on-laptop) {
             font-size: 18px;
         }
     }
diff --git a/lib/site_template/_sass/_site-footer.scss b/lib/site_template/_sass/_site-footer.scss
index cdae1794..f9febbf8 100644
--- a/lib/site_template/_sass/_site-footer.scss
+++ b/lib/site_template/_sass/_site-footer.scss
@@ -42,7 +42,7 @@
     width: 45%;
 }
 
-@media screen and (max-width: 800px) {
+@include media-query($on-laptop) {
     .footer-col-1,
     .footer-col-2 {
         width: 50%;
@@ -53,7 +53,7 @@
     }
 }
 
-@media screen and (max-width: 600px) {
+@include media-query($on-palm) {
     .footer-col {
         float: none;
         width: 100%;
diff --git a/lib/site_template/_sass/_site-header.scss b/lib/site_template/_sass/_site-header.scss
index 30c147e1..b027b228 100644
--- a/lib/site_template/_sass/_site-header.scss
+++ b/lib/site_template/_sass/_site-header.scss
@@ -41,7 +41,7 @@
         }
     }
 
-    @media screen and (max-width: 600px) {
+    @include media-query($on-palm) {
         position: absolute;
         top: 9px;
         right: 30px;
diff --git a/lib/site_template/css/main.scss b/lib/site_template/css/main.scss
index 8c061366..63f9bee3 100755
--- a/lib/site_template/css/main.scss
+++ b/lib/site_template/css/main.scss
@@ -1,5 +1,5 @@
 ---
-# The main Sass file needs front matter (the dashes are enough)
+# Only the main Sass file needs front matter (the dashes are enough)
 ---
 @charset "utf-8";
 
@@ -21,6 +21,24 @@ $grey-color:       #828282;
 $grey-color-light: lighten($grey-color, 40%);
 $grey-color-dark:  darken($grey-color, 25%);
 
+$on-palm:          600px;
+$on-laptop:        800px;
+
+
+
+// Using media queries with like this:
+// @include media-query($palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
 
 
 // Import partials from `sass_dir` (defaults to `_sass`)