Upgrading Casper to 2.4.0

refs https://github.com/TryGhost/Ghost/pull/9741
- Ghost 1.25 has updated the HTML output of Koenig beta posts
  - the `<div class="kg-post">` wrapper around post content has been removed
  - for image cards the `.kg-image-wide` and `.kg-image-full` classes have been changed to `.kg-width-wide` and `.kg-width-full` and applied to the `<figure>` element rather than the `<img>` element
- this will be the default for *all* posts after upgrading to Ghost 2.0

Example output of the `{{content}}` helper for Koenig beta...

Before 1.25.0 (Ghost 1.23.0-1.24.9):
```html
<div class="kg-post">
    <figure class="kg-image-card">
        <img class="kg-image kg-image-wide" src="...">
        <figcaption>example wide image</figcaption>
    </figure>
</div>
```

After 1.25.0:
```html
<figure class="kg-image-card kg-width-wide">
    <img class="kg-image" src="...">
    <figcaption>example wide image</figcaption>
</figure>
```

For reference, in Ghost 1.x a non Koenig post with nothing but an image in the markdown (`![](...)`) would generate output like this:

```html
<div class="kg-card-markdown">
    <img src="...">
</div>
```

assets/css/screen.css

@@ -462,8 +462,11 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     padding: 0 25px 25px;
 }
 
-.author-profile-image {
+.author-profile-image,
+.avatar-wrapper {
     display: block;
+    width: 100%;
+    height: 100%;
     background: color(var(--lightgrey) l(+10%));
     border-radius: 100%;
 
@@ -874,6 +877,7 @@ Usage (In Ghost editor):
     display: block;
     margin-top: -3em;
     margin-bottom: 1.5em;
+    text-align: center;
 }
 
 
@@ -1271,7 +1275,8 @@ Usage (In Ghost editor):
     display: flex;
 }
 
-.author-card .author-profile-image {
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
     margin-right: 15px;
     width: 60px;
     height: 60px;
@@ -1814,6 +1819,13 @@ 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;
@@ -1826,66 +1838,72 @@ Usage (In Ghost editor):
     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 .post-content > p:first-child {
-.post-template .kg-post > 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 {
+.kg-image-card {
-    max-width: 840px;
+    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.0",
+    "version": "2.4.0",
     "engines": {
         "ghost": ">=1.2.0"
     },

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 --}}