4 files changed, 58 insertions, 25 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'); }
 }
diff --git a/themes/classic/source/_includes/navigation.html b/themes/classic/source/_includes/navigation.html
index 766c220f..f941f1f1 100644
--- a/themes/classic/source/_includes/navigation.html
+++ b/themes/classic/source/_includes/navigation.html
@@ -1,7 +1,7 @@
-<ul role="subscription">
-  <li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss">RSS</a></li>
-  {% if site.subscribe_emai %}
-    <li><a href="{{ site.subscribe_email }}" rel="subscribe-email">Email</a></li>
+<ul role="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
+  <li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
+  {% if site.subscribe_email %}
+    <li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
   {% endif %}
 </ul>
 <form action="{{ site.simple_search }}" method="get">
diff --git a/themes/classic/source/images/email.png b/themes/classic/source/images/email.png
new file mode 100644
index 00000000..e55473fe
--- /dev/null
+++ b/themes/classic/source/images/email.png