Upgrading Casper to 2.3.0

refs https://github.com/TryGhost/Ghost/issues/9311
- move `.kg-card-markdown` styles and add deprecation notice
- add support for new `.kg-post` wrapper
- add support for `.kg-image` and `.kg-image-wide/full` image variants
- add support for image captions

assets/css/screen.css

@@ -18,6 +18,7 @@ production stylesheet in assets/built/screen.css
   7.3. Comments
   7.4. Related Posts
   7.5. Floating Header
+  7.6. Koenig Styles
 8.  Author Template
 9.  Error Template
 10. Subscribe Overlay
@@ -483,41 +484,61 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .author-list-item {
-    flex-shrink: 0;
     position: relative;
+    flex-shrink: 0;
     margin: 0;
     padding: 0;
 }
 
-.author-list-item:nth-child(1) { z-index: 10; }
-.author-list-item:nth-child(2) { z-index: 9; }
-.author-list-item:nth-child(3) { z-index: 8; }
-.author-list-item:nth-child(4) { z-index: 7; }
-.author-list-item:nth-child(5) { z-index: 6; }
-.author-list-item:nth-child(6) { z-index: 5; }
-.author-list-item:nth-child(7) { z-index: 4; }
-.author-list-item:nth-child(8) { z-index: 3; }
-.author-list-item:nth-child(9) { z-index: 2; }
-.author-list-item:nth-child(10) { z-index: 1; }
+.author-list-item:nth-child(1) {
+    z-index: 10;
+}
+.author-list-item:nth-child(2) {
+    z-index: 9;
+}
+.author-list-item:nth-child(3) {
+    z-index: 8;
+}
+.author-list-item:nth-child(4) {
+    z-index: 7;
+}
+.author-list-item:nth-child(5) {
+    z-index: 6;
+}
+.author-list-item:nth-child(6) {
+    z-index: 5;
+}
+.author-list-item:nth-child(7) {
+    z-index: 4;
+}
+.author-list-item:nth-child(8) {
+    z-index: 3;
+}
+.author-list-item:nth-child(9) {
+    z-index: 2;
+}
+.author-list-item:nth-child(10) {
+    z-index: 1;
+}
 
 .static-avatar {
     display: block;
-    height: 34px;
-    width: 34px;
-    border: #fff 2px solid;
-    margin: 0 -5px;
-    border-radius: 100%;
     overflow: hidden;
+    margin: 0 -5px;
+    width: 34px;
+    height: 34px;
+    border: #fff 2px solid;
+    border-radius: 100%;
 }
 
 .moving-avatar {
     display: block;
-    height: 56px;
-    width: 56px;
-    border: #fff 2px solid;
-    margin: 0 -6px;
-    border-radius: 100%;
     overflow: hidden;
+    margin: 0 -6px;
+    width: 56px;
+    height: 56px;
+    border: #fff 2px solid;
+    border-radius: 100%;
     transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 0.7s;
 }
 
@@ -764,13 +785,6 @@ The first (most recent) post in the list is styled to be bigger than the others
     display: none;
 }
 
-.kg-card-markdown {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 920px;
-}
-
 .post-full-content h1,
 .post-full-content h2,
 .post-full-content h3,
@@ -796,11 +810,6 @@ The first (most recent) post in the list is styled to be bigger than the others
     margin: 0;
 }
 
-.post-template .kg-card-markdown > p:first-child {
-    font-size: 1.25em;
-    line-height: 1.5em;
-}
-
 .post-full-content a {
     color: #000;
     box-shadow: var(--blue) 0 -1px 0 inset;
@@ -1353,8 +1362,8 @@ Usage (In Ghost editor):
 
 .author-card .author-profile-image,
 .author-card .avatar-wrapper {
-    margin-right: 15px;
     position: relative;
+    margin-right: 15px;
 }
 
 .author-list-item .author-card {
@@ -1363,8 +1372,8 @@ Usage (In Ghost editor):
     left: 50%;
     z-index: 300;
     display: block;
-    width: 320px;
     margin-left: -160px;
+    width: 320px;
     font-size: 1.4rem;
     letter-spacing: 0.2px;
     background: white;
@@ -1382,9 +1391,9 @@ Usage (In Ghost editor):
     top: 100%;
     left: 50%;
     display: block;
+    margin-left: -12px;
     width: 0;
     height: 0;
-    margin-left: -12px;
     border-top: 12px solid #fff;
     border-right: 12px solid transparent;
     border-left: 12px solid transparent;
@@ -1802,6 +1811,82 @@ Usage (In Ghost editor):
 }
 
 
+/* 7.6. Koenig Styles
+/* ---------------------------------------------------------- */
+
+/* For Ghost 1.0 */
+.kg-card-markdown {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
+.post-template .kg-card-markdown > p:first-child {
+    font-size: 1.25em;
+    line-height: 1.5em;
+}
+/* ^ .kg-card-markdown will be deprecated */
+
+
+.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 {
+    width: 100%;
+}
+
+.post-full-content .kg-image-wide {
+    max-width: 1040px;
+}
+
+.post-full-content .kg-image-full {
+    max-width: 100vw;
+}
+
+.kg-image-card figcaption {
+    font-size: 80%;
+    margin: -1.5em auto 3em;
+}
+
+.post-full-content .kg-image-full + figcaption {
+    max-width: 840px;
+}
+
+@media (max-width: 1040px) {
+    .post-full-content .kg-image-full {
+        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.2.1",
+    "version": "2.3.0",
     "engines": {
         "ghost": ">=1.2.0"
     },