Upgrade to Ghost 0.10

content/themes/casper/assets/css/screen.css

@@ -352,7 +352,7 @@ pre {
     border-radius: 3px;
 }
 
-pre code, tt {
+pre code, pre tt {
     font-size: inherit;
     white-space: pre-wrap;
     background: transparent;
@@ -476,9 +476,12 @@ margin on the iframe, cause it breaks stuff. */
 }
 
 body.nav-opened .site-wrapper {
+    overflow-x: hidden;
     -webkit-transform: translate3D(-240px, 0, 0);
         -ms-transform: translate3D(-240px, 0, 0);
             transform: translate3D(-240px, 0, 0);
+    -webkit-transition: -webkit-transform 0.3s ease;
+            transition: transform 0.3s ease;
 }
 
 
@@ -550,9 +553,9 @@ body.nav-closed .nav {
 
 body.nav-opened .nav {
     opacity: 1;
-    -webkit-transition: -webkit-transform 0.5s ease,
+    -webkit-transition: -webkit-transform 0.3s ease,
                         opacity 0s ease 0s;
-            transition: -webkit-transform 0.5s ease,
+            transition: transform 0.3s ease,
                         opacity 0s ease 0s;
     -webkit-transform: translate3D(0, 0, 0);
         -ms-transform: translate3D(0, 0, 0);
@@ -787,7 +790,7 @@ body.nav-opened .nav {
     white-space: nowrap;
     border-radius: 3px;
     background: rgba(0,0,0,0.1);
-    transition: all 0.6s ease;
+    transition: all 0.5s ease;
 }
 .menu-button:focus {
     outline: 0;
@@ -805,7 +808,7 @@ body.nav-opened .menu-button {
     -webkit-transform: translate3D(94px, 0, 0);
         -ms-transform: translate3D(94px, 0, 0);
             transform: translate3D(94px, 0, 0);
-    transition: all 0.4s ease;
+    transition: all 0.3s ease;
 }
 body.nav-opened .menu-button .word {
     opacity: 0;
@@ -869,7 +872,7 @@ body.nav-opened .menu-button .word {
 
 .no-cover.main-header {
     min-height: 160px;
-    max-height: 40%;
+    max-height: 40vh;
     background: #f5f8fa;
 }
 
@@ -1052,8 +1055,9 @@ body:not(.post-template) .post-title {
     border: none;
 }
 
-/* Stop .full-img from creating horizontal scroll - slight hack due to
-   imperfections with browser width % calculations and rounding */
+/* Stop elements, such as img wider than the post content, from
+   creating horizontal scroll - slight hack due to imperfections
+   with browser width % calculations and rounding */
 .post-template .content {
     overflow: hidden;
 }
@@ -1070,21 +1074,22 @@ body:not(.post-template) .post-title {
     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 {
     display: block;
-    max-width: 100%;
+    max-width: 126%;
     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%;
+    /* Centers an image by (1) pushing its left edge to the
+       center of its container and (2) shifting the entire image
+       in the opposite direction by half its own width.
+       Works for images that are larger than their containers. */
+    position: relative;
+    left: 50%;
+    -webkit-transform: translateX(-50%); /* for Safari and iOS */
+    -ms-transform: translateX(-50%); /* for IE9 */
+    transform: translateX(-50%);
 }
 
 /* The author credit area after the post */
@@ -1392,7 +1397,7 @@ body:not(.post-template) .post-title {
 
 /* On page2+ make all the headers smaller */
 .archive-template .main-header {
-    max-height: 30%;
+    max-height: 30vh;
 }
 
 /* On page2+ show extra pagination controls at the top of post list */
@@ -1456,7 +1461,7 @@ body:not(.post-template) .post-title {
         box-sizing: border-box;
         height: auto;
         min-height: 240px;
-        height: 60%;
+        height: 60vh;
         padding: 15% 0;
     }
 
@@ -1540,12 +1545,12 @@ body:not(.post-template) .post-title {
     }
 
     .post-head.main-header {
-        height:45%;
+        height:45vh;
     }
 
     .tag-head.main-header,
     .author-head.main-header {
-        height: 30%;
+        height: 30vh;
     }
 
     .no-cover.post-head.main-header {
@@ -1568,15 +1573,15 @@ body:not(.post-template) .post-title {
 
     .main-header {
         margin-bottom: 15px;
-        height: 40%;
+        height: 40vh;
     }
 
     .no-cover.main-header {
-        height: 30%;
+        height: 30vh;
     }
 
     .archive-template .main-header {
-        max-height: 20%;
+        max-height: 20vh;
         min-height: 160px;
         padding: 10% 0;
     }
@@ -1737,12 +1742,7 @@ body:not(.post-template) .post-title {
 
     .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 */
     }
@@ -1801,12 +1801,12 @@ body:not(.post-template) .post-title {
     }
 
     .post-head.main-header {
-        height: 30%;
+        height: 30vh;
     }
 
     .tag-head.main-header,
     .author-head.main-header {
-        height: 20%;
+        height: 20vh;
     }
 
     .author-profile .author-image {

content/themes/casper/assets/js/index.js

@@ -3,60 +3,16 @@
  */
 
 /* globals jQuery, document */
-(function ($, sr, undefined) {
+(function ($, undefined) {
     "use strict";
 
-    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);
-            };
-        };
+    var $document = $(document);
 
     $document.ready(function () {
 
         var $postContent = $(".post-content");
         $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();
 
         $(".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
     // https://github.com/PaulAdamDavis/Arctic-Scroll
     $.fn.arctic_scroll = function (options) {
@@ -100,4 +53,4 @@
         });
 
     };
-})(jQuery, 'smartresize');
+})(jQuery);

content/themes/casper/package.json

@@ -1,4 +1,4 @@
 {
   "name": "Casper",
-  "version": "1.1.6"
+  "version": "1.1.7"
 }