themes
/
casper
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #172 from mankittens/master 

Improvement to .post-content .full-img
This commit is contained in:
John O'Nolan 2015-03-02 09:32:12 +02:00
parent e59dcaa256 a5dcaf6cd5
commit 7af816a48e
2 changed files with 17 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/css/screen.css
View File

@ -1052,8 +1052,9 @@ body:not(.post-template) .post-title {
border: none; border: none;
} }
/* Stop .full-img from creating horizontal scroll - slight hack due to /* Stop elements, such as img wider than the post content, from
imperfections with browser width % calculations and rounding */ creating horizontal scroll - slight hack due to imperfections
with browser width % calculations and rounding */
.post-template .content { .post-template .content {
overflow: hidden; overflow: hidden;
} }
@ -1070,21 +1071,21 @@ body:not(.post-template) .post-title {
display: none; display: none;
} }
/* Keep images centred and within the bounds of the post-width */ /* Keep images centered, and allow images wider than the main
text column to break out. */
.post-content img { .post-content img {
display: block; display: block;
max-width: 100%; max-width: 126%;
height: auto; height: auto;
margin: 0 auto;
padding: 0.6em 0; padding: 0.6em 0;
} /* Centers an image by (1) pushing its left edge to the
center of its container and (2) shifting the entire image
/* Break out larger images to be wider than the main text column in the opposite direction by half its own width.
the class is applied with jQuery */ Works for images that are larger than their containers. */
.post-content .full-img { position: relative;
width: 126%; left: 50%;
max-width: none; -webkit-transform: translateX(-50%); /* for Safari and iOS */
margin: 0 -13%; transform: translateX(-50%);
} }
/* The author credit area after the post */ /* The author credit area after the post */
@ -1737,12 +1738,7 @@ body:not(.post-template) .post-title {
.post-content img { .post-content img {
padding: 0; padding: 0;
}
.post-content .full-img {
width: auto;
width: calc(100% + 32px); /* expand with to image + margins */ width: calc(100% + 32px); /* expand with to image + margins */
margin: 0 -16px; /* get rid of margins */
min-width: 0; min-width: 0;
max-width: 112%; /* fallback when calc doesn't work */ max-width: 112%; /* fallback when calc doesn't work */
} }

53
assets/js/index.js
View File

@ -3,60 +3,16 @@
*/ */
/* globals jQuery, document */ /* globals jQuery, document */
(function ($, sr, undefined) { (function ($, undefined) {
"use strict"; "use strict";
var $document = $(document), var $document = $(document);
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
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);
};
};
$document.ready(function () { $document.ready(function () {
var $postContent = $(".post-content"); var $postContent = $(".post-content");
$postContent.fitVids(); $postContent.fitVids();
function updateImageWidth() {
var $this = $(this),
contentWidth = $postContent.outerWidth(), // Width of the content
imageWidth = this.naturalWidth; // Original image resolution
if (imageWidth >= contentWidth) {
$this.addClass('full-img');
} else {
$this.removeClass('full-img');
}
}
var $img = $("img").on('load', updateImageWidth);
function casperFullImg() {
$img.each(updateImageWidth);
}
casperFullImg();
$(window).smartresize(casperFullImg);
$(".scroll-down").arctic_scroll(); $(".scroll-down").arctic_scroll();
$(".menu-button, .nav-cover, .nav-close").on("click", function(e){ $(".menu-button, .nav-cover, .nav-close").on("click", function(e){
@ -66,9 +22,6 @@
}); });
// smartresize
jQuery.fn[sr] = function(fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
// Arctic Scroll by Paul Adam Davis // Arctic Scroll by Paul Adam Davis
// https://github.com/PaulAdamDavis/Arctic-Scroll // https://github.com/PaulAdamDavis/Arctic-Scroll
$.fn.arctic_scroll = function (options) { $.fn.arctic_scroll = function (options) {
@ -100,4 +53,4 @@
}); });
}; };
})(jQuery, 'smartresize'); })(jQuery);