Upgrading Casper to 2.0.2

Prevent floating header from covering the header when a fragment identifier enabled URL is opened.

assets/css/screen.css

@@ -135,7 +135,7 @@ body {
 
 .site-header-content {
     position: relative;
-    z-index: 100;
+    z-index: 300;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -696,13 +696,15 @@ The first (most recent) post in the list is styled to be bigger than the others
     margin-top: 0;
 }
 
-.post-full-content img {
+.post-full-content img,
+.post-full-content video {
     display: block;
     margin: 1.5em auto;
     max-width: 1040px;
 }
 @media (max-width: 1040px) {
-    .post-full-content img {
+    .post-full-content img,
+    .post-full-content video {
         width: 100%;
     }
 }
@@ -716,6 +718,10 @@ Super neat trick courtesy of @JoelDrapper
     max-width: none;
 }
 
+.post-full-content iframe {
+    margin: 0 auto 1.5em;
+}
+
 .post-full-content blockquote {
     margin: 0 0 1.5em 0;
     padding: 1.5em 0;
@@ -802,6 +808,8 @@ Super neat trick courtesy of @JoelDrapper
 .post-full-content h4,
 .post-full-content h5,
 .post-full-content h6 {
+    padding-top: 75px;
+    margin-top: -75px;
     color: color(var(--darkgrey) l(-5%));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
@@ -1317,6 +1325,7 @@ Super neat trick courtesy of @JoelDrapper
     align-items: center;
     color: var(--darkgrey);
     font-weight: 700;
+    line-height: 1.1em;
 }
 
 .floating-header-logo a:hover {

assets/js/jquery.fitvids.js

@@ -1,10 +1,12 @@
 /*jshint browser:true */
 /*!
-* FitVids 1.1
+* FitVids 1.3
 *
-* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
+*
+* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
+* This is an unofficial release, ported by John O'Nolan
 * Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
-* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
+* Released under the MIT license
 *
 */
 
@@ -21,7 +23,7 @@
     if(!document.getElementById('fit-vids-style')) {
       // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
       var head = document.head || document.getElementsByTagName('head')[0];
-      var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
+      var css = '.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
       var div = document.createElement("div");
       div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
       head.appendChild(div.childNodes[1]);
@@ -74,7 +76,7 @@
           $this.attr('name', videoName);
           $.fn.fitVids._count++;
         }
-        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
+        $this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
         $this.removeAttr('height').removeAttr('width');
       });
     });

package.json

@@ -2,7 +2,7 @@
     "name": "casper",
     "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
     "demo": "https://demo.ghost.io",
-    "version": "2.0.0",
+    "version": "2.0.2",
     "engines": {
         "ghost": ">=1.0.0"
     },

post.hbs

@@ -80,7 +80,7 @@ into the {body} of the default.hbs template --}}
                 <script>
                     var disqus_config = function () {
                         this.page.url = '{{url absolute="true"}}';
-                        this.page.identifier = 'ghost-{{id}}';
+                        this.page.identifier = 'ghost-{{comment_id}}';
                     };
                     (function() {
                         var d = document, s = d.createElement('script');
@@ -102,7 +102,8 @@ into the {body} of the default.hbs template --}}
     <div class="inner">
         <div class="read-next-feed">
 
-            {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3"}}
+            {{#get "posts" filter="tags:{{tags.[0].slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+                {{#if related_posts}}
                 <article class="read-next-card"
                     {{#if ../tags.[0].feature_image}}
                         style="background-image: url({{../tags.[0].feature_image}})"
@@ -118,7 +119,7 @@ into the {body} of the default.hbs template --}}
                     <div class="read-next-divider">{{> "icons/infinity"}}</div>
                     <div class="read-next-card-content">
                         <ul>
-                            {{#foreach posts}}
+                            {{#foreach related_posts}}
                             <li><a href="{{url}}">{{title}}</a></li>
                             {{/foreach}}
                         </ul>
@@ -127,6 +128,7 @@ into the {body} of the default.hbs template --}}
                         <a href="{{@blog.url}}/tag/{{../tags.[0].slug}}/">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
                     </footer>
                 </article>
+                {{/if}}
             {{/get}}
 
             {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}