1 files changed, 37 insertions, 21 deletions

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'); }
 }