new photo style with adaptive background in single view

Gruntfile.js

@@ -112,6 +112,7 @@ module.exports = function(grunt){
                         'bower_components/imagesloaded/imagesloaded.js',
                         'bower_components/simpleJekyllSearch/index.js',
                         'bower_components/socialite/index.js',
+                        'bower_components/jquery.adaptive-background/index.js',
                         '<%= config.src %>/<%= config.assets.js %>/app.js'
                     ]
                 }
@@ -189,18 +190,18 @@ module.exports = function(grunt){
         rev: {
             files: {
                 src: [
-                    '<%= config.site %>/assets/{css,js,img,fonts}/*.*'
+                    '<%= config.build %>/assets/{css,js,img,fonts}/*.*'
                 ]
             }
         },
         
         // updating assets paths in html/css
         usemin: {
-            html: ['<%= config.site %>/**/*.html'],
+            html: ['<%= config.build %>/**/*.html'],
-            css: ['<%= config.site %>/**/*.css'],
+            css: ['<%= config.build %>/**/*.css'],
             options: {
-                dirs: ['<%= config.site %>'],
+                dirs: ['<%= config.build %>'],
-                basedir: ['<%= config.site %>']
+                basedir: ['<%= config.build %>']
             }
         },
         
@@ -280,11 +281,11 @@ module.exports = function(grunt){
         'cmq',
         'cssmin',
         'uglify',
-        'rev',
-        'usemin',
         'imagemin:assets',
         'imagemin:touchicons',
-        'rsync:copy_build'
+        'rsync:copy_build',
+        'rev',
+        'usemin'
     ]);
     
     // Optimze media

_src/_includes/articles.html

@@ -22,7 +22,7 @@
 
 {% elsif post.layout == "photo" %}
 
-    <article class="hentry format-image">
+    <article class="hentry format-photo">
 
         <a class="photo-link" href="{{ post.url }}">
         	<figure class="hmedia">

_src/_layouts/photo.html

@@ -4,7 +4,7 @@ layout: base
 
 <section role="main" id="main" class="page-single row">
     
-    <article class="hentry format-image">
+    <article class="hentry format-photo">
     
     	<figure class="hmedia">
         

_src/assets/js/app.js

@@ -150,6 +150,17 @@ var photoGrid = {
 
 var siteEffects = {
     
+    adaptiveBackground: function() {
+        var opts = {
+            selector: '.hmedia img',
+            parent:   '.document'
+        }
+        
+        $('.hmedia img').imagesLoaded( function(){
+            $.adaptiveBackground.run(opts)
+        });
+    },
+    
 	socialiteButtons: function() {
         
 		$('.comments').one('mouseenter', function() {
@@ -158,6 +169,9 @@ var siteEffects = {
 	},
     
 	init: function(){
+        if ( $('.page-single').length > 0 ) {
+            this.adaptiveBackground();
+        }
 		this.socialiteButtons();
 	}
 

_src/assets/less/content.less

@@ -115,64 +115,68 @@
 // PHOTO POST
 /////////////////////////////////////
 
-.hentry.format-image {
+.hentry.format-photo {
 	text-align: center;
     
     figure {
+        position: relative;
         display: inline-block;
         margin-left: auto;
         margin-right: auto;
-    	position: relative;
-    	padding: .4em;
-    	background: #fcfeff;
-    	border: 1px solid rgba(158, 170, 178, .6);
-    	border-radius: 2px;
-    	.box-shadow(0 1px 4px rgba(0, 0, 0, 0.1));
-    	.transition;
             
-        .page-single & { margin-bottom: @line-height-computed*2; }
+        img,
-    
+        figcaption {
-        @media @breakpoint2 {
+            margin-bottom: 0;
-    		.box-shadow(~"0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 30px rgba(0, 0, 0, 0.1), inset 0 1px 0 #fff");
-        }
-    
-        img {
-        	.box-shadow(none);
-        	border-radius: 2px;
-        	margin-left: auto;
-        	margin-right: auto;
-        	margin-bottom: 1em;
         }
     
         figcaption {
-        	text-align: center;
+            position: absolute;
-        	margin-bottom: .5em;
+            left: 0;
-        	color: rgba(46, 79, 92, .7);
+            top: 25%;
+            max-width: 55%;
+            min-width: 45%;
+            text-align: right;
         	font-family: @headings-font-family;
         	font-weight: @headings-font-weight;
             font-style: normal;
-        	font-size: .9em
+        	font-size: .9em;
+            padding: @line-height-computed/3;
+            background: @link-color;
+            background: fade(@link-color, 70%);
+            color: #fff;
+            text-shadow: 0 1px 0 #000;
+            
+            opacity: 0;
+            .translate(0,-20px);
+            .transition;
+        }
+        
+        &:hover figcaption {
+            opacity: 1;
+            .translate(0,0);
         }
     }
+    
+    .page-single & {
+        
+        figcaption {
+            opacity: 1;
+            .translate(0,0);
+            top: auto;
+            bottom: 0;
+            background: #000;
+            background: fade(#000, 40%);
         }
         
+        .entry-content,
+        .entry-meta,
+        .comments { .visuallyhidden; }
+    }
+}
+
+
 .photo-link {
     display: block;
-    
-    &:hover { 
-        figure { background: #c4e4df; }
-    }
-    &:active {
-        background: transparent;
-        
-        figure { 
-            .transition(none);
-            background: @link-color;
-            
-            &,
-            figcaption { color: #fff }
-        }
-    }
 }
 
 #exif {

bower.json

@@ -15,7 +15,8 @@
       "imagesloaded": ">=3.0.4",
       "infinitescroll": "https://raw.github.com/paulirish/infinite-scroll/master/jquery.infinitescroll.js",
       "simpleJekyllSearch": "https://raw.github.com/christian-fei/Simple-Jekyll-Search/master/simpleJekyllSearch.js",
-      "socialite": "https://raw.github.com/tmort/Socialite/master/socialite.js"
+      "socialite": "https://raw.github.com/tmort/Socialite/master/socialite.js",
+      "jquery.adaptive-background": "https://raw.github.com/briangonzalez/jquery.adaptive-backgrounds.js/master/src/jquery.adaptive-background.js"
   },
     
   "ignore": [