Make the nav cooler

grayscale and scaling

_config.yml

@@ -7,7 +7,7 @@ exclude:     ['./_scss/*.*']
 
 permalink: /:title
 
-url: http://localhost:4000
+url: http://glen.local:4000
 
 defaultTitle: 'Shuffle.js'
 defaultDescription: 'Categorize, sort, and filter a responsive grid of items'

_includes/nav.html

@@ -18,9 +18,9 @@
       </div>
 
       <h3 class="site-nav__title">Demos</h3>
-      <div class="row-fluid">
+      <div class="row-fluid js-demos site-nav__demos">
         {% for post in site.demos %}
-          <div class="span3 figure-wrap">
+          <div class="span3 figure-wrap js-demo">
             <a href="/{{ post.slug }}">
               <figure>
                 <div class="keep-ratio four-three">

_posts/demos/2013-06-19-adding-removing.html

@@ -51,7 +51,7 @@ extraJS: [ "demos/adding-removing.js" ]
 
 <section class="container">
     <div class="row">
-        <h1 class="span12">Adding and Removing Items</h1>
+        <h2 class="span12">Adding and Removing Items</h2>
     </div>
 </section>
 
@@ -74,12 +74,14 @@ extraJS: [ "demos/adding-removing.js" ]
 
 <section class="container">
   <div class="row">
-    <h2>Another Section</h2>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <div class="span12">
+      <h2>Another Section</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
   </div>
 </section>

_scss/_main.scss

@@ -58,6 +58,35 @@ ul ul {
     height: 0;
   }
 
+  .figure-wrap,
+  .figure-wrap img {
+    // Promote to its own layer. makes filters look ok on retina with images
+    -webkit-transform: translateZ(0);
+    -webkit-transition: .1s ease;
+            transition: .1s ease;
+  }
+
+  .site-nav__demos:hover .figure-wrap {
+    -webkit-transform: scale3d( 1, 1, 1 );
+            transform: scale3d( 1, 1, 1 );
+
+    img {
+
+      -webkit-filter: grayscale(1);
+              filter: grayscale(1);
+    }
+  }
+
+  .site-nav__demos:hover .figure-wrap.hovered {
+    -webkit-transform: scale3d( 1.05, 1.05, 1 );
+            transform: scale3d( 1.05, 1.05, 1 );
+
+    img {
+      -webkit-filter: none;
+              filter: none;
+    }
+  }
+
   .figure-wrap:nth-child(4n + 1) {
     margin-left: 0;
   }

css/style.css

@@ -1941,6 +1941,28 @@ ul ul {
 .site-nav.collapsed .site-nav__tray {
   height: 0;
 }
+.site-nav .figure-wrap,
+.site-nav .figure-wrap img {
+  -webkit-transform: translateZ(0);
+  -webkit-transition: .1s ease;
+  transition: .1s ease;
+}
+.site-nav .site-nav__demos:hover .figure-wrap {
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: scale3d(1, 1, 1);
+}
+.site-nav .site-nav__demos:hover .figure-wrap img {
+  -webkit-filter: grayscale(1);
+  filter: grayscale(1);
+}
+.site-nav .site-nav__demos:hover .figure-wrap.hovered {
+  -webkit-transform: scale3d(1.05, 1.05, 1);
+  transform: scale3d(1.05, 1.05, 1);
+}
+.site-nav .site-nav__demos:hover .figure-wrap.hovered img {
+  -webkit-filter: none;
+  filter: none;
+}
 .site-nav .figure-wrap:nth-child(4n + 1) {
   margin-left: 0;
 }

js/page.js

@@ -114,6 +114,15 @@ Modules.Nav = (function( $ ) {
     self.$trigger.on( 'click', $.proxy( self.toggle, self ) );
     self.$window.on( 'resize', $.debounce( 250, $.proxy( self.onResize, self ) ) );
 
+    // This is a case for selectors level 4!
+    self.$el.find('.js-demos').on('mouseenter', '.js-demo', function( evt ) {
+      $( evt.currentTarget ).addClass('hovered');
+    });
+
+    self.$el.find('.js-demos').on('mouseleave', '.js-demo', function( evt ) {
+      $( evt.currentTarget ).removeClass('hovered');
+    });
+
     return self;
   };