Upgrading Casper to 2.4.2

no issue
- using an `id` selector doesn't break if other `progress` elements are present on a page

assets/css/screen.css

@@ -465,6 +465,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 .author-profile-image,
 .avatar-wrapper {
     display: block;
+    width: 100%;
+    height: 100%;
     background: color(var(--lightgrey) l(+10%));
     border-radius: 100%;
 
@@ -875,6 +877,7 @@ Usage (In Ghost editor):
     display: block;
     margin-top: -3em;
     margin-bottom: 1.5em;
+    text-align: center;
 }
 
 
@@ -1816,78 +1819,91 @@ Usage (In Ghost editor):
 /* 7.6. Koenig Styles
 /* ---------------------------------------------------------- */
 
+.post-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
 /* For Ghost 1.0 */
 .kg-card-markdown {
     display: flex;
     flex-direction: column;
     align-items: center;
-    max-width: 920px;
+    max-width: 100%;
 }
 
 .post-template .kg-card-markdown > p:first-child {
     font-size: 1.25em;
     line-height: 1.5em;
 }
-/* ^ .kg-card-markdown will be deprecated */
+/* ^ .kg-card-markdown will be will disappear in Ghost 2.0 */
 
-
-.post-template .kg-post > p:first-child {
+.post-template .post-content > p:first-child {
     font-size: 1.25em;
     line-height: 1.5em;
 }
 
-.kg-post {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 920px;
-}
-
 .post-full-content .kg-image {
     max-width: 100%;
 }
 
 /* Preventing full-width image overlap with post image.  */
-.post-full-image + .post-full-content .kg-post *:first-child .kg-image {
+.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
     width: 100%;
 }
 
-.post-full-content .kg-image-wide {
+.post-full-content .kg-width-wide .kg-image {
     max-width: 1040px;
 }
 
-.post-full-content .kg-image-full {
+.post-full-content .kg-width-full .kg-image {
     max-width: 100vw;
 }
 
-.kg-image-card figcaption {
+.post-content figcaption {
     font-size: 80%;
-    margin: -1.5em auto 3em;
+    line-height: 1.6em;
+    text-align: center;
 }
 
-.post-full-content .kg-image-full + figcaption {
-    max-width: 840px;
+.kg-image-card {
+    margin: 0 0 1.5em;
 }
 
+.kg-image-card figcaption {
+    margin: -1.0em 0 1.5em;
+}
+
+.kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1.5em 0 3em;
+    min-width: 100%;
+}
+
+.kg-embed-card figcaption {
+    margin: 0.5em 0 0;
+}
+
+.kg-embed-card .fluid-width-video-wrapper {
+    margin: 0;
+}
+
+
+.kg-image-full + figcaption {
+    padding: 0 1.5em;
+}
+
+
 @media (max-width: 1040px) {
-    .post-full-content .kg-image-full {
+    .post-full-content .kg-width-full .kg-image {
         width: 100vw;
     }
 }
 
-@media (max-width: 1170px) {
-    .post-full-content .kg-image-full + figcaption {
-        padding: 0 11vw;
-        max-width: 100vw;
-    }
-}
-
-@media (max-width: 500px) {
-    .post-full-content .kg-image-full + figcaption {
-        padding: 0 4vw;
-    }
-}
-
 
 /* 8. Author Template
 /* ---------------------------------------------------------- */

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.3.1",
+    "version": "2.4.2",
     "engines": {
         "ghost": ">=1.2.0"
     },

partials/floating-header.hbs

@@ -20,7 +20,7 @@
             {{> "icons/facebook"}}
         </a>
     </div>
-    <progress class="progress" value="0">
+    <progress id="reading-progress" class="progress" value="0">
         <div class="progress-container">
             <span class="progress-bar"></span>
         </div>

post.hbs

@@ -33,7 +33,9 @@ into the {body} of the default.hbs template --}}
             {{/if}}
 
             <section class="post-full-content">
-                {{content}}
+                <div class="post-content">
+                    {{content}}
+                </div>
             </section>
 
             {{!-- Email subscribe form at the bottom of the page --}}
@@ -141,7 +143,7 @@ $(document).ready(function () {
     $postContent.fitVids();
     // End fitVids
 
-    var progressBar = document.querySelector('progress');
+    var progressBar = document.querySelector('#reading-progress');
     var header = document.querySelector('.floating-header');
     var title = document.querySelector('.post-full-title');