Upgrading Casper to 2.6.1

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

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+sudo: false
+node_js:
+  - "8"
+
+

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
@@ -461,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%;
 
@@ -483,41 +487,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(1) {
-.author-list-item:nth-child(2) { z-index: 9; }
+    z-index: 10;
-.author-list-item:nth-child(3) { z-index: 8; }
+}
-.author-list-item:nth-child(4) { z-index: 7; }
+.author-list-item:nth-child(2) {
-.author-list-item:nth-child(5) { z-index: 6; }
+    z-index: 9;
-.author-list-item:nth-child(6) { z-index: 5; }
+}
-.author-list-item:nth-child(7) { z-index: 4; }
+.author-list-item:nth-child(3) {
-.author-list-item:nth-child(8) { z-index: 3; }
+    z-index: 8;
-.author-list-item:nth-child(9) { z-index: 2; }
+}
-.author-list-item:nth-child(10) { z-index: 1; }
+.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 +788,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 +813,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;
@@ -830,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,
@@ -865,11 +878,13 @@ Usage (In Ghost editor):
     display: block;
     margin-top: -3em;
     margin-bottom: 1.5em;
+    text-align: center;
 }
 
 
+/* Override third party iframe styles */
 .post-full-content iframe {
-    margin: 0 auto;
+    margin: 0 auto !important;
 }
 
 .post-full-content blockquote {
@@ -1262,7 +1277,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;
@@ -1353,8 +1369,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 +1379,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 +1398,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 +1818,103 @@ Usage (In Ghost editor):
 }
 
 
+/* 7.6. Koenig Styles
+/* ---------------------------------------------------------- */
+
+.post-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 920px;
+}
+
+.post-template .post-content > p:first-child {
+    font-size: 1.25em;
+    line-height: 1.5em;
+}
+
+.post-full-content .kg-image {
+    max-width: 100%;
+}
+
+/* Preventing full-width image overlap with post image.  */
+.post-full-image + .post-full-content .kg-content *:first-child .kg-image {
+    width: 100%;
+}
+
+.post-full-content .kg-width-wide .kg-image {
+    max-width: 1040px;
+}
+
+.post-full-content .kg-width-full .kg-image {
+    max-width: 100vw;
+}
+
+.post-full-content figure {
+    margin: 1.5em 0 3em;
+}
+
+.post-full-content figure img {
+    margin: 0;
+}
+
+.post-full-content figcaption {
+    margin: 1.0em 0 0;
+    font-size: 80%;
+    line-height: 1.6em;
+    text-align: center;
+}
+
+.kg-width-full figcaption {
+    padding: 0 1.5em;
+}
+
+.kg-embed-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 100%;
+}
+
+.kg-embed-card .fluid-width-video-wrapper {
+    margin: 0;
+}
+
+
+@media (max-width: 1040px) {
+    .post-full-content .kg-width-full .kg-image {
+        width: 100vw;
+    }
+}
+
+.kg-gallery-container {
+    display: flex;
+    flex-direction: column;
+    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,9 +2,9 @@
     "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.6.1",
     "engines": {
-        "ghost": ">=1.2.0"
+        "ghost": ">=2.0.0"
     },
     "license": "MIT",
     "screenshots": {
@@ -12,8 +12,9 @@
         "mobile": "assets/screenshot-mobile.jpg"
     },
     "scripts": {
-      "dev": "gulp",
+        "dev": "gulp",
-      "zip": "gulp zip"
+        "zip": "gulp zip",
+        "test": "gscan ."
     },
     "author": {
         "name": "Ghost Foundation",
@@ -29,7 +30,8 @@
     },
     "keywords": [
         "ghost",
-        "theme"
+        "theme",
+        "ghost-theme"
     ],
     "repository": {
         "type": "git",
@@ -40,6 +42,7 @@
     "devDependencies": {
         "autoprefixer": "6.3.6",
         "cssnano": "3.7.1",
+        "gscan": "^2.0.0",
         "gulp": "3.9.1",
         "gulp-livereload": "3.8.1",
         "gulp-postcss": "6.1.1",

page.hbs

@@ -27,7 +27,9 @@ into the {body} of the default.hbs template --}}
             {{/if}}
 
             <section class="post-full-content">
-                {{content}}
+                <div class="post-content">
+                    {{content}}
+                </div>
             </section>
 
         </article>

partials/byline-single.hbs

@@ -1,5 +1,5 @@
 {{!-- Everything inside the #author tags pulls data from the author --}}
-{{#author}}
+{{#primary_author}}
 
 <section class="author-card">
     {{#if profile_image}}
@@ -20,4 +20,4 @@
     <a class="author-card-button" href="{{url}}">Read More</a>
 </div>
 
-{{/author}}
+{{/primary_author}}

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');