From 814be44c151088dfb90d6a01281c9206151b0a88 Mon Sep 17 00:00:00 2001
From: Brandon Mathis <brandon@imathis.com>
Date: Sat, 11 Jun 2011 15:23:54 -0400
Subject: 1. Improved responsive navigation styling when email subscription is
 present 2. Refactored subscription styling to be more DRY 3. Added an image
 for email subscriptions 4. Added assets directory to the gitignore for
 stashing working files 5. Improved gem list in the Gemfile

---
 .../classic/sass/default/partials/_navigation.scss | 58 ++++++++++++++--------
 1 file changed, 37 insertions(+), 21 deletions(-)

(limited to 'themes/classic/sass/default/partials')

diff --git a/themes/classic/sass/default/partials/_navigation.scss b/themes/classic/sass/default/partials/_navigation.scss
index 4abb6a2a..3d34c3c7 100644
--- a/themes/classic/sass/default/partials/_navigation.scss
+++ b/themes/classic/sass/default/partials/_navigation.scss
@@ -70,25 +70,32 @@ body > nav {
         border-left: 1px solid $nav-border-right;
       }
     }
-    fieldset[role=mobile-nav] { display: none; }
-    fieldset[role=site-search]{ width: 100%; }
     form {
       float: right;
       text-align: left;
-      width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 5px;
       padding-left: .8em;
+      width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 5px;
       .search {
         width: 93%;
         font-size: .95em;
         line-height: 1.2em;
       }
     }
+    ul[data-subscription$=email] + form {
+      width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 48px;
+      .search { width: 91%; }
+    }
+    fieldset[role=mobile-nav] { display: none; }
+    fieldset[role=site-search]{ width: 100%; }
   }
 
   @media only screen and (min-width: 992px) {
     form {
       width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 5px;
     }
+    ul[data-subscription$=email] + form {
+      width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 48px;
+    }
   }
 }
 .no-placeholder {
@@ -97,25 +104,34 @@ body > nav {
     text-indent: 1.3em;
   }
 }
+@mixin mask-subscription-nav($feed: 'rss.png'){
+  position: relative; top: 0px;
+  text-indent: -999999em;
+  background-color: $nav-border-right;
+  border: 0;
+  padding: 0;
+  &,&:after { @include mask-image($feed); }
+  &:after {
+    content: "";
+    position: absolute; top: -1px; left: 0;
+    background-color: lighten($nav-color, 25);
+  }
+  &:hover:after { background-color: lighten($nav-color, 20); }
+}
 .maskImage {
-  ul[role=subscription] { li, a { border: 0; padding: 0; }}
-  a[rel=subscribe-rss]{
-    position: relative; top: 0px;
-    width: image-width('rss.png');
-    height: image-height('rss.png');
-    @include mask-image('rss.png');
-    text-indent: -999999em;
-    background-color: $nav-border-right;
-    border: 0;
-    padding: 0;
-    &:hover:after { background-color: darken($nav-border-left, 10); }
-    &:after {
-      content: "";
-      @include mask-image('rss.png');
-      width: image-width('rss.png');
-      height: image-height('rss.png');
-      position: absolute; top: -1px; left: 0;
-      background-color: $nav-border-left;
+  body > nav {
+    @media only screen and (min-width: 550px) {
+      ul[data-subscription$=email] + form {
+        width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px;
+      }
+    }
+    @media only screen and (min-width: 992px) {
+      ul[data-subscription$=email] + form {
+        width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px;
+      }
     }
   }
+  ul[role=subscription] { li, a { border: 0; padding: 0; }}
+  a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); }
+  a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); }
 }
-- 
cgit v1.2.1