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

8 files changed, 64 insertions, 26 deletions

diff --git a/.gitignore b/.gitignore
index 14292256..990b0a05 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
 .sass-cache
 .gist_cache
 _cache
+_assets
 public
 source/_stash
 vendor
diff --git a/Gemfile b/Gemfile
index 4c3b7a40..15c570ba 100644
--- a/Gemfile
+++ b/Gemfile
@@ -7,3 +7,4 @@ gem 'RedCloth'
 gem 'haml', '>= 3.1'
 gem 'compass', '>= 0.11'
 gem 'rubypants'
+gem 'rb-fsevent'
diff --git a/Gemfile.lock b/Gemfile.lock
index 6ec67893..faf2dd66 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/_config.yml b/_config.yml
index 8fb8984d..650ab277 100644
--- a/_config.yml
+++ b/_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
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