Upgrading Casper to 2.1.3

no issue

With https://github.com/TryGhost/Casper/pull/384 the directory `/dist` was created and includes a `casper.zip` file. The PR, that got merged after that (https://github.com/TryGhost/Casper/pull/374) actually implemented the creation of this, but also added the directory to `.gitignore` so it wouldn't be pushed to the repo.

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.hbs]
+insert_final_newline = false
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -13,9 +13,12 @@ results
 
 npm-debug.log
 node_modules
+package-lock.json
 
 .idea/*
 *.iml
 projectFilesBackup
 
-.DS_Store
+.DS_Store
+
+dist/

README.md

@@ -34,12 +34,18 @@ One really neat trick is that you can also create custom one-off templates just
 
 Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node and Gulp installed globally. After that, from the theme's root directory:
 
-`$ npm install`
-
-`$ gulp`
+```bash
+$ npm install
+$ gulp
+```
 
 Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
 
+The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
+
+```bash
+$ gulp zip
+```
 
 # PostCSS Features Used
 

assets/built/global.css

@@ -1,2 +1,2 @@
-a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}li{margin:.5em 0;padding-left:.5em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
+a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#3c484e;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.5rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:700;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5rem;font-weight:700}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
 /*# sourceMappingURL=global.css.map */

assets/css/global.css

@@ -341,7 +341,7 @@ blockquote {
 
 ol,
 ul {
-    padding-left: 1em;
+    padding-left: 1.3em;
     padding-right: 1.5em;
 }
 
@@ -362,7 +362,7 @@ ol {
 
 li {
     margin: 0.5em 0;
-    padding-left: 0.5em;
+    padding-left: 0.3em;
     line-height: 1.6em;
 }
 

assets/css/screen.css

@@ -51,6 +51,17 @@ body {
 /* 2. Layout - Page building blocks
 /* ---------------------------------------------------------- */
 
+.site-wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.site-main {
+    z-index: 100;
+    flex-grow: 1;
+}
+
 /* Full width page blocks */
 .outer {
     position: relative;
@@ -145,6 +156,7 @@ body {
 }
 
 .site-title {
+    z-index: 10;
     margin: 0;
     padding: 0;
     font-size: 3.8rem;
@@ -156,6 +168,7 @@ body {
 }
 
 .site-description {
+    z-index: 10;
     margin: 0;
     padding: 5px 0;
     font-size: 2.2rem;
@@ -213,7 +226,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     flex-shrink: 0;
     display: block;
     margin-right: 24px;
-    padding: 9px 0;
+    padding: 11px 0;
     color: #fff;
     font-size: 1.7rem;
     line-height: 1em;
@@ -358,10 +371,6 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 /* 6. Post Feed
 /* ---------------------------------------------------------- */
 
-.site-main {
-    z-index: 100;
-}
-
 .post-feed {
     position: relative;
     display: flex;
@@ -450,6 +459,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     height: 25px;
     margin-right: 5px;
     border-radius: 100%;
+
+    object-fit: cover;
 }
 
 .post-card-author {
@@ -474,6 +485,7 @@ The first (most recent) post in the list is styled to be bigger than the others
     .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link {
         position: relative;
         flex: 1 1 auto;
+        border-radius: 5px 0 0 5px;
     }
 
     .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image {
@@ -542,6 +554,11 @@ The first (most recent) post in the list is styled to be bigger than the others
     padding: 6vw 3vw 3vw;
     text-align: center;
 }
+@media (max-width: 500px) {
+    .post-full-header {
+        padding: 14vw 3vw 10vw;
+    }
+}
 
 .post-full-meta {
     display: flex;
@@ -655,22 +672,31 @@ The first (most recent) post in the list is styled to be bigger than the others
     max-width: 920px;
 }
 
-.post-full-content p,
-.post-full-content ul,
-.post-full-content ol,
-.post-full-content dl,
-.post-full-content pre,
 .post-full-content h1,
 .post-full-content h2,
 .post-full-content h3,
 .post-full-content h4,
 .post-full-content h5,
 .post-full-content h6,
+.post-full-content p,
+.post-full-content ul,
+.post-full-content ol,
+.post-full-content dl,
+.post-full-content pre,
+.post-full-content blockquote,
 .post-full-comments,
 .footnotes {
     min-width: 100%;
 }
 
+.post-full-content li {
+    word-break: break-word;
+}
+
+.post-full-content li p {
+    margin: 0;
+}
+
 .post-template .kg-card-markdown > p:first-child {
     font-size: 1.25em;
     line-height: 1.5em;
@@ -736,7 +762,7 @@ Usage (In Ghost editor):
 <small>Your image caption</small>
 
 */
-.post-full-content br + small {
+.post-full-content img + br + small {
     display: block;
     margin-top: -3em;
     margin-bottom: 1.5em;
@@ -744,36 +770,25 @@ Usage (In Ghost editor):
 
 
 .post-full-content iframe {
-    margin: 0 auto 1.5em;
+    margin: 0 auto;
 }
 
 .post-full-content blockquote {
-    margin: 0 0 1.5em 0;
-    padding: 1.5em 0;
-    border: 0;
-    color: var(--blue);
-    font-size: 3rem;
-    line-height: 1.6em;
-    text-align: center;
-}
-
-.post-full-content blockquote:before {
-    content: open-quote;
+    margin: 0 0 1.5em;
+    padding: 0 1.5em;
+    border-left: #3eb0ef 3px solid;
 }
 
 .post-full-content blockquote p {
-    margin: 0;
+    margin: 0 0 1em 0;
+    color: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    font-style: italic;
 }
 
-@media (min-width: 1000px) {
-    .post-full-content blockquote:not(:first-of-type) {
-        width: 100vw;
-        max-width: 1060px;
-    }
-}
-
-.post-full-content blockquote + blockquote {
-    padding-top: 0;
+.post-full-content blockquote p:last-child {
+    margin-bottom: 0;
 }
 
 .post-full-content code {
@@ -833,34 +848,87 @@ Usage (In Ghost editor):
 .post-full-content h4,
 .post-full-content h5,
 .post-full-content h6 {
-    margin-top: -75px;
-    padding-top: 75px;
     color: color(var(--darkgrey) l(-5%));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 .post-full-content h1 {
-    font-size: 5rem;
+    margin: 0.5em 0 0.2em 0;
+    font-size: 4.6rem;
+    font-weight: 700;
+}
+@media (max-width: 500px) {
+    .post-full-content h1 {
+        font-size: 2.8rem;
+    }
 }
 
 .post-full-content h2 {
-    font-size: 3.5rem;
+    margin: 0.5em 0 0.2em 0;
+    font-size: 3.6rem;
+    font-weight: 700;
+}
+@media (max-width: 500px) {
+    .post-full-content h2 {
+        font-size: 2.6rem;
+    }
 }
 
 .post-full-content h3 {
-    font-size: 2.5rem;
+    margin: 0.5em 0 0.2em 0;
+    font-size: 2.8rem;
+    font-weight: 700;
+}
+@media (max-width: 500px) {
+    .post-full-content h3 {
+        font-size: 2.2rem;
+    }
 }
 
 .post-full-content h4 {
-    font-size: 1.6rem;
+    margin: 0.5em 0 0.2em 0;
+    font-size: 2.8rem;
+    font-weight: 700;
+}
+@media (max-width: 500px) {
+    .post-full-content h4 {
+        font-size: 2.2rem;
+    }
 }
 
 .post-full-content h5 {
-    font-size: 1.4rem;
+    display: block;
+    margin: 0.5em 0;
+    padding: 1em 0 1.5em;
+    border: 0;
+    color: var(--blue);
+    font-family: Georgia,serif;
+    font-size: 3.2rem;
+    line-height: 1.35em;
+    text-align: center;
+}
+@media (min-width: 1180px) {
+    .post-full-content h5 {
+        width: 100vw;
+        max-width: 1060px;
+    }
+}
+@media (max-width: 500px) {
+    .post-full-content h5 {
+        padding: 0 0 0.5em;
+        font-size: 2.2rem;
+    }
 }
 
 .post-full-content h6 {
-    font-size: 1.4rem;
+    margin: 0.5em 0 0.2em 0;
+    font-size: 2.3rem;
+    font-weight: 700;
+}
+@media (max-width: 500px) {
+    .post-full-content h6 {
+        font-size: 2rem;
+    }
 }
 
 .footnotes-sep {
@@ -903,15 +971,6 @@ Usage (In Ghost editor):
     .post-full-content:after {
         display: none;
     }
-    .post-full-content h1 {
-        font-size: 2.9rem;
-    }
-    .post-full-content h2 {
-        font-size: 2.9rem;
-    }
-    .post-full-content h3 {
-        font-size: 2rem;
-    }
 }
 
 /* Tables */
@@ -1449,6 +1508,10 @@ Usage (In Ghost editor):
     background-color: var(--blue);
 }
 
+.progress::-moz-progress-bar {
+    background-color: var(--blue);
+}
+
 .progress-container {
     position: absolute;
     top: 0;
@@ -1506,6 +1569,7 @@ Usage (In Ghost editor):
 /* ---------------------------------------------------------- */
 
 .site-header-content .author-profile-image {
+    z-index: 10;
     flex-shrink: 0;
     width: 100px;
     height: 100px;
@@ -1514,6 +1578,7 @@ Usage (In Ghost editor):
 }
 
 .site-header-content .author-bio {
+    z-index: 10;
     flex-shrink: 0;
     max-width: 600px;
     margin: 5px 0 10px 0;
@@ -1525,6 +1590,7 @@ Usage (In Ghost editor):
 }
 
 .site-header-content .author-meta {
+    z-index: 10;
     flex-shrink: 0;
     display: flex;
     justify-content: center;

gulpfile.js

@@ -6,6 +6,7 @@ var livereload = require('gulp-livereload');
 var nodemon = require('gulp-nodemon');
 var postcss = require('gulp-postcss');
 var sourcemaps = require('gulp-sourcemaps');
+var zip = require('gulp-zip');
 
 // postcss plugins
 var autoprefixer = require('autoprefixer');
@@ -36,7 +37,8 @@ gulp.task('css', function () {
         autoprefixer({browsers: ['last 2 versions']}),
         cssnano()
     ];
-    gulp.src('assets/css/*.css')
+
+    return gulp.src('assets/css/*.css')
         .on('error', swallowError)
         .pipe(sourcemaps.init())
         .pipe(postcss(processors))
@@ -49,6 +51,16 @@ gulp.task('watch', function () {
     gulp.watch('assets/css/**', ['css']);
 });
 
+gulp.task('zip', ['css'], function() {
+    var targetDir = 'dist/';
+    var themeName = require('./package.json').name;
+    var filename = themeName + '.zip';
+
+    return gulp.src(['**', '!node_modules', '!node_modules/**'])
+        .pipe(zip(filename))
+        .pipe(gulp.dest(targetDir));
+});
+
 gulp.task('default', ['build'], function () {
     gulp.start('watch');
 });

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.0.4",
+    "version": "2.1.3",
     "engines": {
         "ghost": ">=1.2.0"
     },
@@ -43,6 +43,7 @@
         "gulp-sourcemaps": "1.6.0",
         "gulp-util": "3.0.7",
         "gulp-watch": "4.3.8",
+        "gulp-zip": "4.0.0",
         "postcss-color-function": "2.0.1",
         "postcss-custom-properties": "5.0.1",
         "postcss-easy-import": "1.0.1"

post.hbs

@@ -101,7 +101,7 @@ into the {body} of the default.hbs template --}}
 <aside class="read-next outer">
     <div class="inner">
         <div class="read-next-feed">
-
+            {{#if primary_tag}}
             {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
                 {{#if related_posts}}
                 <article class="read-next-card"
@@ -132,6 +132,7 @@ into the {body} of the default.hbs template --}}
                 </article>
                 {{/if}}
             {{/get}}
+            {{/if}}
 
             {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
             {{#next_post}}