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

2 files changed, 54 insertions, 21 deletions

diff --git a/themes/classic/sass/default/core/_utilities.scss b/themes/classic/sass/default/core/_utilities.scss
index 84312b52..992c7750 100644
--- a/themes/classic/sass/default/core/_utilities.scss
+++ b/themes/classic/sass/default/core/_utilities.scss
@@ -1,4 +1,21 @@
 @mixin mask-image($img, $repeat: no-repeat){
   @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms);
   @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms);
+  width: image-width($img);
+  height: image-height($img);
 }
+
+@mixin selection($bg: #b4d5fe, $color: inherit){
+  * {
+    &::-moz-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; }
+    &::-webkit-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px;}
+    &::selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; }
+  }
+}
+
+@function text-color($color, $dark: dark, $light: light){
+  $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000;
+  $text-color: if($text-color >= 150, $dark, $light);
+  @return $text-color;
+}
+
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'); }
 }