diff --git a/assets/css/screen.css b/assets/css/screen.css index 8c901a3..1c0d38b 100644 --- a/assets/css/screen.css +++ b/assets/css/screen.css @@ -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; } diff --git a/assets/js/index.js b/assets/js/index.js index c015cb4..7ff84ba 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -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)); \ No newline at end of file +}(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'); \ No newline at end of file