parent
7546018136
commit
0efa582d77
2 changed files with 74 additions and 3 deletions
|
@ -528,6 +528,12 @@ margin on the iframe, cause it breaks stuff. */
|
|||
5. Single Post - When you click on an individual post
|
||||
========================================================================== */
|
||||
|
||||
/* Stop .full-img from creating horizontal scroll - slight hack due to
|
||||
imperfections with browser width % calculations and rounding */
|
||||
.post-template .content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Tweak the .post wrapper style */
|
||||
.post-template .post {
|
||||
margin-top: 0;
|
||||
|
@ -551,12 +557,21 @@ margin on the iframe, cause it breaks stuff. */
|
|||
padding: 2.5rem 0;
|
||||
}
|
||||
|
||||
/* Keep large images within the bounds of the post-width */
|
||||
/* Keep images centred and within the bounds of the post-width */
|
||||
.post-content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
padding: 0.6em 0;
|
||||
}
|
||||
|
||||
/* Break out larger images to be wider than the main text column
|
||||
the class is applied with jQuery */
|
||||
.post-content .full-img {
|
||||
width: 126%;
|
||||
max-width: none;
|
||||
margin: 0 -13%;
|
||||
}
|
||||
|
||||
/* The author credit area after the post */
|
||||
|
@ -946,6 +961,18 @@ margin on the iframe, cause it breaks stuff. */
|
|||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.post-content img {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post-content .full-img {
|
||||
width: auto;
|
||||
width: calc(100% + 32px); /* expand with to image + margins */
|
||||
margin: 0 -16px; /* get rid of margins */
|
||||
min-width: 0;
|
||||
max-width: 112%; /* fallback when calc doesn't work */
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
|
|
@ -10,6 +10,50 @@
|
|||
|
||||
$(".post-content").fitVids();
|
||||
|
||||
function casperFullImg() {
|
||||
$("img").each( function() {
|
||||
var contentWidth = $(".post-content").outerWidth(); // Width of the content
|
||||
var imageWidth = $(this)[0].naturalWidth; // Original image resolution
|
||||
|
||||
if (imageWidth >= contentWidth) {
|
||||
$(this).addClass('full-img');
|
||||
} else {
|
||||
$(this).removeClass('full-img');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
casperFullImg();
|
||||
$(window).smartresize(casperFullImg);
|
||||
|
||||
});
|
||||
|
||||
}(jQuery));
|
||||
}(jQuery));
|
||||
|
||||
(function($,sr){
|
||||
|
||||
// debouncing function from John Hann
|
||||
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
|
||||
var debounce = function (func, threshold, execAsap) {
|
||||
var timeout;
|
||||
|
||||
return function debounced () {
|
||||
var obj = this, args = arguments;
|
||||
function delayed () {
|
||||
if (!execAsap)
|
||||
func.apply(obj, args);
|
||||
timeout = null;
|
||||
};
|
||||
|
||||
if (timeout)
|
||||
clearTimeout(timeout);
|
||||
else if (execAsap)
|
||||
func.apply(obj, args);
|
||||
|
||||
timeout = setTimeout(delayed, threshold || 100);
|
||||
};
|
||||
}
|
||||
// smartresize
|
||||
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
|
||||
|
||||
})(jQuery,'smartresize');
|
Loading…
Reference in a new issue