Upgrading Casper to 2.6.0

no issue

- Update CSS and JS for new gallery card
- Updates CSS to support new gallery card
- Adds JS to support grid layout for gallery view
- Fix gallery breakout size
- Refining styles for gallery card

assets/css/screen.css

@@ -842,6 +842,7 @@ The first (most recent) post in the list is styled to be bigger than the others
     display: block;
     margin: 1.5em auto;
     max-width: 1040px;
+    height: auto;
 }
 @media (max-width: 1040px) {
     .post-full-content img,
@@ -1854,11 +1855,13 @@ Usage (In Ghost editor):
     text-align: center;
 }
 
-.kg-image-card {
+.kg-image-card,
+.kg-gallery-card {
     margin: 0 0 1.5em;
 }
 
-.kg-image-card figcaption {
+.kg-image-card figcaption,
+.kg-gallery-card figcaption {
     margin: -1.0em 0 1.5em;
 }
 
@@ -1890,6 +1893,34 @@ Usage (In Ghost editor):
     }
 }
 
+.kg-gallery-container {
+    display: flex;
+    flex-direction: column;
+    margin: 1.5em auto;
+    max-width: 1040px;
+    width: 100vw;
+}
+
+.kg-gallery-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.kg-gallery-image img {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+    margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+    margin: 0 0 0 0.75em;
+}
 
 /* 8. Author Template
 /* ---------------------------------------------------------- */

default.hbs

@@ -55,6 +55,18 @@
     </div>
     {{/if}}
 
+    <script>
+        var images = document.querySelectorAll('.kg-gallery-image img');
+        images.forEach(function (image) {
+            var container = image.closest('.kg-gallery-image');
+            var width = image.attributes.width.value;
+            var height = image.attributes.height.value;
+            var ratio = width / height;
+            container.style.flex = ratio + ' 1 0%';
+        })
+    </script>
+
+
     {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
     <script
         src="https://code.jquery.com/jquery-3.2.1.min.js"

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.5.1",
+    "version": "2.6.0",
     "engines": {
         "ghost": ">=2.0.0"
     },