@@ -3,6 +3,7 @@

 .sass-cache

 .gist_cache

 _cache

+_assets

 public

 source/_stash

 vendor

@@ -7,3 +7,4 @@ gem 'RedCloth'

 gem 'haml', '>= 3.1'

 gem 'compass', '>= 0.11'

 gem 'rubypants'

+gem 'rb-fsevent'

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

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

@@ -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;

+}

+

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

 }

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

new file mode 100644

Binary files /dev/null and b/themes/classic/source/images/email.png differ