mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-22 01:46:51 +01:00
new photo style with adaptive background in single view
This commit is contained in:
parent
eda579fbe1
commit
470a844286
17
Gruntfile.js
17
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'],
|
||||
css: ['<%= config.site %>/**/*.css'],
|
||||
html: ['<%= config.build %>/**/*.html'],
|
||||
css: ['<%= config.build %>/**/*.css'],
|
||||
options: {
|
||||
dirs: ['<%= config.site %>'],
|
||||
basedir: ['<%= config.site %>']
|
||||
dirs: ['<%= config.build %>'],
|
||||
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
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
|
||||
@ -3,14 +3,14 @@ $(ASAP = function(){
|
||||
|
||||
photoGrid.init();
|
||||
siteNavigation.init();
|
||||
|
||||
|
||||
});
|
||||
|
||||
$(window).load( AfterLoad = function() {
|
||||
|
||||
infiniteScroll.init();
|
||||
|
||||
infiniteScroll.init();
|
||||
siteEffects.init();
|
||||
|
||||
|
||||
});
|
||||
|
||||
var siteNavigation = {
|
||||
@ -141,7 +141,7 @@ var photoGrid = {
|
||||
|
||||
init: function(){
|
||||
// only fire when photo page present and screen bigger than 480px
|
||||
if ( $('.page-photos').length > 0 ) {
|
||||
if ( $('.page-photos').length > 0 ) {
|
||||
this.masonryLayout();
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
}
|
||||
|
||||
|
||||
@ -115,64 +115,68 @@
|
||||
// PHOTO POST
|
||||
/////////////////////////////////////
|
||||
|
||||
.hentry.format-image {
|
||||
.hentry.format-photo {
|
||||
text-align: center;
|
||||
|
||||
figure {
|
||||
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; }
|
||||
|
||||
@media @breakpoint2 {
|
||||
.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;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
img,
|
||||
figcaption {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
text-align: center;
|
||||
margin-bottom: .5em;
|
||||
color: rgba(46, 79, 92, .7);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
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-style: normal;
|
||||
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 {
|
||||
|
||||
@ -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": [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user