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

.gitignore

@@ -3,6 +3,7 @@
 .sass-cache
 .gist_cache
 _cache
+_assets
 public
 source/_stash
 vendor

Gemfile

@@ -7,3 +7,4 @@ gem 'RedCloth'
 gem 'haml', '>= 3.1'
 gem 'compass', '>= 0.11'
 gem 'rubypants'
+gem 'rb-fsevent'

Gemfile.lock

@@ -22,6 +22,7 @@ GEM
     maruku (0.6.0)
       syntax (>= 1.0.0)
     rake (0.9.0)
+    rb-fsevent (0.4.0)
     rdiscount (1.6.8)
     rubypants (0.2.0)
     sass (3.1.1)
@@ -36,5 +37,6 @@ DEPENDENCIES
   haml (>= 3.1)
   jekyll
   rake
+  rb-fsevent
   rdiscount
   rubypants

_config.yml

@@ -1,6 +1,7 @@
 # Required configuration
 source: source
 destination: public
+port: 4000
 
 url: http://yoursite.com
 title: My Octopress Blog
@@ -16,7 +17,7 @@ simple_search: http://google.com/search
 
 # Optional configurations
 
-# For RSS
+# For RSS Feed
 email:
 
 # Twitter

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;
+}
+

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

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">