2.10.6

Better contrast for selected text inside `pre code` blocks

.github/ISSUE_TEMPLATE.md

@@ -1,4 +1,4 @@
-Do you need help or have a question? Please come chat in Slack: https://ghost.org/slack 👫.
+Do you need help or have a question? Please come chat in our forum: https://forum.ghost.org 👫.
 
 If you're filing a bug 🐛, please include the following information:
 

.gitignore

@@ -22,3 +22,7 @@ projectFilesBackup
 .DS_Store
 
 dist/
+
+config.json
+changelog.md
+changelog.md.bk

.travis.yml

@@ -0,0 +1,11 @@
+dist: xenial
+language: node_js
+node_js:
+      - 10
+  
+cache: yarn
+
+# Don't run builds for renovate PRs
+if: NOT head_branch =~ ^renovate
+
+

.yarnrc

@@ -0,0 +1,2 @@
+version-tag-prefix ""
+version-git-message "%s"

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2013-2017 Ghost Foundation
+Copyright (c) 2013-2019 Ghost Foundation
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

README.md

@@ -12,7 +12,7 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the la
 
 Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
 
-We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://themes.ghost.org) which explains every possible Handlebars helper and template.
+We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/api/handlebars-themes/) which explains every possible Handlebars helper and template.
 
 **The main files are:**
 
@@ -32,11 +32,11 @@ One really neat trick is that you can also create custom one-off templates just
 
 # Development
 
-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:
+Casper styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need [Node](https://nodejs.org/), [Yarn](https://yarnpkg.com/) and [Gulp](https://gulpjs.com) installed globally. After that, from the theme's root directory:
 
 ```bash
-$ npm install
+$ yarn install
-$ gulp
+$ yarn dev
 ```
 
 Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/` automatically.
@@ -44,7 +44,7 @@ Now you can edit `/assets/css/` files, which will be compiled to `/assets/built/
 The `zip` Gulp task packages the theme files into `dist/<theme-name>.zip`, which you can then upload to your site.
 
 ```bash
-$ gulp zip
+$ yarn zip
 ```
 
 # PostCSS Features Used
@@ -63,4 +63,4 @@ You can add your own SVG icons in the same manner.
 
 # Copyright & License
 
-Copyright (c) 2013-2017 Ghost Foundation - Released under the [MIT license](LICENSE).
+Copyright (c) 2013-2019 Ghost Foundation - Released under the [MIT license](LICENSE).

SECURITY.md

@@ -0,0 +1,9 @@
+# Reporting Security Vulnerabilities
+
+Potential security vulnerabilities can be reported directly us at `security@ghost.org`. The Ghost Security Team communicates privately and works in a secured, isolated repository for tracking, testing, and resolving security-related issues.
+
+The full, up-to-date details of our security policy and procedure can always be found in our documentation:
+
+https://ghost.org/docs/concepts/security/
+
+Please refer to this before emailing us. Thanks for helping make Ghost safe for everyone 🙏.

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: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}
+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{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{-webkit-box-sizing:inherit;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]{-webkit-box-sizing:border-box;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]{-webkit-box-sizing:content-box;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}ol,ul{max-width:100%}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/built/infinitescroll.js

@@ -0,0 +1,2 @@
+!function(n,t){var r=t.querySelector("link[rel=next]");if(r){var i=t.querySelector(".post-feed");if(i){var o=300,s=!1,l=!1,c=n.scrollY,u=n.innerHeight,d=t.documentElement.scrollHeight;n.addEventListener("scroll",a,{passive:!0}),n.addEventListener("resize",m),f()}}function v(){if(404===this.status)return n.removeEventListener("scroll",a),void n.removeEventListener("resize",m);this.response.querySelectorAll(".post-card").forEach(function(e){i.appendChild(e)});var e=this.response.querySelector("link[rel=next]");e?r.href=e.href:(n.removeEventListener("scroll",a),n.removeEventListener("resize",m)),d=t.documentElement.scrollHeight,l=s=!1}function e(){if(!l)if(c+u<=d-o)s=!1;else{l=!0;var e=new n.XMLHttpRequest;e.responseType="document",e.addEventListener("load",v),e.open("GET",r.href),e.send(null)}}function f(){s||n.requestAnimationFrame(e),s=!0}function a(){c=n.scrollY,f()}function m(){u=n.innerHeight,d=t.documentElement.scrollHeight,f()}}(window,document);
+//# sourceMappingURL=infinitescroll.js.map

assets/built/infinitescroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["infinitescroll.js"],"names":["window","document","nextElement","querySelector","feedElement","buffer","ticking","loading","lastScrollY","scrollY","lastWindowHeight","innerHeight","lastDocumentHeight","documentElement","scrollHeight","addEventListener","onScroll","passive","onResize","requestTick","onPageLoad","this","status","removeEventListener","response","querySelectorAll","forEach","item","appendChild","resNextElement","href","onUpdate","xhr","XMLHttpRequest","responseType","open","send","requestAnimationFrame"],"mappings":"CAIA,SAAUA,EAAQC,GAEd,IAAIC,EAAcD,EAASE,cAAc,kBACzC,GAAKD,EAAL,CAGA,IAAIE,EAAcH,EAASE,cAAc,cACzC,GAAKC,EAAL,CAEA,IAAIC,EAAS,IAETC,GAAU,EACVC,GAAU,EAEVC,EAAcR,EAAOS,QACrBC,EAAmBV,EAAOW,YAC1BC,EAAqBX,EAASY,gBAAgBC,aAmElDd,EAAOe,iBAAiB,SAAUC,EAAU,CAAEC,SAAS,IACvDjB,EAAOe,iBAAiB,SAAUG,GAElCC,KApEA,SAASC,IACL,GAAoB,MAAhBC,KAAKC,OAGL,OAFAtB,EAAOuB,oBAAoB,SAAUP,QACrChB,EAAOuB,oBAAoB,SAAUL,GAKtBG,KAAKG,SAASC,iBAAiB,cACrCC,QAAQ,SAAUC,GAC3BvB,EAAYwB,YAAYD,KAI5B,IAAIE,EAAiBR,KAAKG,SAASrB,cAAc,kBAC7C0B,EACA3B,EAAY4B,KAAOD,EAAeC,MAElC9B,EAAOuB,oBAAoB,SAAUP,GACrChB,EAAOuB,oBAAoB,SAAUL,IAIzCN,EAAqBX,EAASY,gBAAgBC,aAE9CP,EADAD,GAAU,EAId,SAASyB,IAEL,IAAIxB,EAGJ,GAAIC,EAAcE,GAAoBE,EAAqBP,EACvDC,GAAU,MADd,CAKAC,GAAU,EAEV,IAAIyB,EAAM,IAAIhC,EAAOiC,eACrBD,EAAIE,aAAe,WAEnBF,EAAIjB,iBAAiB,OAAQK,GAE7BY,EAAIG,KAAK,MAAOjC,EAAY4B,MAC5BE,EAAII,KAAK,OAGb,SAASjB,IACLb,GAAWN,EAAOqC,sBAAsBN,GACxCzB,GAAU,EAGd,SAASU,IACLR,EAAcR,EAAOS,QACrBU,IAGJ,SAASD,IACLR,EAAmBV,EAAOW,YAC1BC,EAAqBX,EAASY,gBAAgBC,aAC9CK,KAhFR,CAuFGnB,OAAQC","file":"infinitescroll.js","sourcesContent":["/**\n * Infinite Scroll\n */\n\n(function(window, document) {\n    // next link element\n    var nextElement = document.querySelector('link[rel=next]');\n    if (!nextElement) return;\n\n    // post feed element\n    var feedElement = document.querySelector('.post-feed');\n    if (!feedElement) return;\n\n    var buffer = 300;\n\n    var ticking = false;\n    var loading = false;\n\n    var lastScrollY = window.scrollY;\n    var lastWindowHeight = window.innerHeight;\n    var lastDocumentHeight = document.documentElement.scrollHeight;\n\n    function onPageLoad() {\n        if (this.status === 404) {\n            window.removeEventListener('scroll', onScroll);\n            window.removeEventListener('resize', onResize);\n            return;\n        }\n\n        // append contents\n        var postElements = this.response.querySelectorAll('.post-card');\n        postElements.forEach(function (item) {\n            feedElement.appendChild(item);\n        });\n\n        // set next link\n        var resNextElement = this.response.querySelector('link[rel=next]');\n        if (resNextElement) {\n            nextElement.href = resNextElement.href;\n        } else {\n            window.removeEventListener('scroll', onScroll);\n            window.removeEventListener('resize', onResize);\n        }\n\n        // sync status\n        lastDocumentHeight = document.documentElement.scrollHeight;\n        ticking = false;\n        loading = false;\n    }\n\n    function onUpdate() {\n        // return if already loading\n        if (loading) return;\n\n        // return if not scroll to the bottom\n        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {\n            ticking = false;\n            return;\n        }\n\n        loading = true;\n\n        var xhr = new window.XMLHttpRequest();\n        xhr.responseType = 'document';\n\n        xhr.addEventListener('load', onPageLoad);\n\n        xhr.open('GET', nextElement.href);\n        xhr.send(null);\n    }\n\n    function requestTick() {\n        ticking || window.requestAnimationFrame(onUpdate);\n        ticking = true;\n    }\n\n    function onScroll() {\n        lastScrollY = window.scrollY;\n        requestTick();\n    }\n\n    function onResize() {\n        lastWindowHeight = window.innerHeight;\n        lastDocumentHeight = document.documentElement.scrollHeight;\n        requestTick();\n    }\n\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onResize);\n\n    requestTick();\n})(window, document);\n"]}

assets/built/jquery.fitvids.js

@@ -0,0 +1,2 @@
+!function(d){"use strict";d.fn.fitVids=function(t){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("div");r.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',e.appendChild(r.childNodes[1])}return t&&d.extend(i,t),this.each(function(){var t=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];i.customSelector&&t.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var e=d(this).find(t.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var t=d(this);if(!(0<t.parents(r).length||"embed"===this.tagName.toLowerCase()&&t.parent("object").length||t.parent(".fluid-width-video-wrapper").length)){t.css("height")||t.css("width")||!isNaN(t.attr("height"))&&!isNaN(t.attr("width"))||(t.attr("height",9),t.attr("width",16));var e=("object"===this.tagName.toLowerCase()||t.attr("height")&&!isNaN(parseInt(t.attr("height"),10))?parseInt(t.attr("height"),10):t.height())/(isNaN(parseInt(t.attr("width"),10))?t.width():parseInt(t.attr("width"),10));if(!t.attr("name")){var i="fitvid"+d.fn.fitVids._count;t.attr("name",i),d.fn.fitVids._count++}t.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),t.removeAttr("height").removeAttr("width")}})})},d.fn.fitVids._count=0}(window.jQuery||window.Zepto);
+//# sourceMappingURL=jquery.fitvids.js.map

assets/css/global.css

@@ -267,7 +267,6 @@ th {
     padding: 0;
 }
 
-
 /* ==========================================================================
    Base styles: opinionated defaults
    ========================================================================== */
@@ -360,6 +359,11 @@ ol {
     list-style: decimal;
 }
 
+ul,
+ol {
+    max-width: 100%;
+}
+
 li {
     margin: 0.5em 0;
     padding-left: 0.3em;
@@ -383,7 +387,7 @@ dd {
 blockquote {
     margin: 1.5em 0;
     padding: 0 1.6em 0 1.6em;
-    border-left: var(--whitegrey) 0.5em solid;;
+    border-left: var(--whitegrey) 0.5em solid;
 }
 
 blockquote p {

assets/css/screen.css

@@ -13,9 +13,12 @@ production stylesheet in assets/built/screen.css
 7.  Single Post
   7.1. Subscribe Form
   7.2. Post Footer
+     7.2.1 Single Author Byline
+     7.2.2 Multiple Author Byline
   7.3. Comments
   7.4. Related Posts
   7.5. Floating Header
+  7.6. Koenig Styles
 8.  Author Template
 9.  Error Template
 10. Subscribe Overlay
@@ -36,8 +39,8 @@ body {
     display: block;
     width: 100%;
     height: 100%;
-    background-size: cover;
     background-position: center center;
+    background-size: cover;
     border-radius: 100%;
 }
 
@@ -70,9 +73,9 @@ body {
 
 /* Centered content container blocks */
 .inner {
-    width: 100%;
-    max-width: 1040px;
     margin: 0 auto;
+    max-width: 1040px;
+    width: 100%;
 }
 
 /* Usage:
@@ -139,8 +142,8 @@ body {
     background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0));
 }
 
-.site-header.no-cover:before,
+.site-header.no-image:before,
-.site-header.no-cover:after {
+.site-header.no-image:after {
     display: none;
 }
 
@@ -149,9 +152,9 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    padding: 10vw 4vw;
     min-height: 200px;
     max-height: 450px;
-    padding: 10vw 4vw;
     text-align: center;
 }
 
@@ -196,8 +199,8 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    height: 40px;
     overflow-y: hidden;
+    height: 40px;
     font-size: 1.2rem;
 }
 
@@ -206,11 +209,12 @@ body {
     align-items: center;
     overflow-x: auto;
     overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
     margin-right: 10px;
     padding-bottom: 80px;
     letter-spacing: 0.4px;
     white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
+
     -ms-overflow-scrolling: touch;
 }
 
@@ -348,8 +352,8 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .rss-button svg {
-    height: 2.1rem;
     margin-bottom: 1px;
+    height: 2.1rem;
     fill: #fff;
 }
 
@@ -383,9 +387,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     flex: 1 1 300px;
     display: flex;
     flex-direction: column;
-    min-height: 300px;
     overflow: hidden;
     margin: 0 20px 40px;
+    min-height: 300px;
     background: #fff center center;
     background-size: cover;
     border-radius: 5px;
@@ -394,9 +398,9 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .post-card:hover {
-    box-shadow: 0 0 1px rgba(39,44,49,0.10), 0 3px 16px rgba(39, 44, 49,0.07);
+    box-shadow: rgba(39,44,49,0.07) 8px 28px 50px, rgba(39, 44, 49, 0.04) 1px 6px 12px;
-    transition: all 0.3s ease;
+    transition: all 0.4s ease;
-    transform: translate3D(0, -1px, 0);
+    transform: translate3D(0, -1px, 0) scale(1.02);
 }
 
 .post-card-image-link {
@@ -407,14 +411,15 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .post-card-image {
-    width: auto;
+    width: 100%;
     height: 200px;
     background: var(--lightgrey) no-repeat center center;
-    background-size: cover;
+    object-fit: cover;
 }
 
 .post-card-content-link {
     position: relative;
+    flex-grow: 1;
     display: block;
     padding: 25px 25px 0;
     color: var(--darkgrey);
@@ -451,20 +456,138 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .post-card-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
     padding: 0 25px 25px;
 }
 
-.author-profile-image {
+.author-profile-image,
-    width: 25px;
+.avatar-wrapper {
-    height: 25px;
+    display: block;
-    margin-right: 5px;
+    width: 100%;
+    height: 100%;
+    background: color(var(--lightgrey) l(+10%));
     border-radius: 100%;
 
     object-fit: cover;
 }
 
-.post-card-author {
+.post-card-meta .profile-image-wrapper,
-    font-size: 1.3rem;
+.post-card-meta .avatar-wrapper {
+    position: relative;
+}
+
+.author-list {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.author-list-item {
+    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;
+}
+
+.static-avatar {
+    display: block;
+    overflow: hidden;
+    margin: 0 -5px;
+    width: 34px;
+    height: 34px;
+    border: #fff 2px solid;
+    border-radius: 100%;
+}
+
+.moving-avatar {
+    display: block;
+    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;
+}
+
+@media (min-width: 800px) {
+    .author-list:hover .moving-avatar {
+        margin: 0;
+        transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+    }
+}
+
+.author-name-tooltip {
+    position: absolute;
+    bottom: 105%;
+    z-index: 999;
+    display: block;
+    padding: 2px 8px;
+    color: white;
+    font-size: 1.2rem;
+    letter-spacing: 0.2px;
+    white-space: nowrap;
+    background: var(--darkgrey);
+    border-radius: 3px;
+    box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+    transform: translateY(6px);
+    pointer-events: none;
+}
+
+.author-list-item:hover .author-name-tooltip {
+    opacity: 1.0;
+    transform: translateY(0px);
+}
+
+@media (max-width: 650px) {
+    .author-name-tooltip {
+        display: none;
+    }
+}
+
+.reading-time {
+    flex-shrink: 0;
+    margin-left: 20px;
+    color: var(--midgrey);
+    font-size: 1.2rem;
+    line-height: 33px;
     font-weight: 500;
     letter-spacing: 0.5px;
     text-transform: uppercase;
@@ -472,46 +595,48 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 
 /* Special Styling for home page grid (below):
 
-The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices.
+The first post in the list is styled to be bigger than the others and take over
+the full width of the grid to give it more emphasis. Wrapped in a media query to
+make sure this only happens on large viewports / desktop-ish devices.
 
  */
 
 @media (min-width: 795px) {
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) {
+    .post-card-large {
         flex: 1 1 100%;
         flex-direction: row;
     }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link {
+    .post-card-large .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 {
+    .post-card-large .post-card-image {
         position: absolute;
         width: 100%;
         height: 100%;
     }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content {
+    .post-card-large .post-card-content {
         flex: 0 1 357px;
     }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2 {
+    .post-card-large h2 {
         font-size: 2.6rem;
     }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p {
+    .post-card-large p {
         font-size: 1.8rem;
         line-height: 1.55em;
     }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link {
+    .post-card-large .post-card-content-link {
         padding: 30px 40px 0;
     }
 
-    .home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta {
+    .post-card-large .post-card-meta {
         padding: 0 40px 30px;
     }
 }
@@ -549,9 +674,9 @@ The first (most recent) post in the list is styled to be bigger than the others
 /* ^ Required to make .post-full-content:before/after z-index stacking work */
 
 .post-full-header {
-    max-width: 1040px;
     margin: 0 auto;
     padding: 6vw 3vw 3vw;
+    max-width: 1040px;
     text-align: center;
 }
 @media (max-width: 500px) {
@@ -585,32 +710,39 @@ The first (most recent) post in the list is styled to be bigger than the others
 }
 
 .post-full-image {
-    height: 800px;
     margin: 0 -10vw -165px;
     background: var(--lightgrey) center center;
-    background-size: cover;
     border-radius: 5px;
+    overflow: hidden;
+}
+
+.post-full-image img {
+    width: 100%;
+    height: 800px;
+    object-fit: cover;
 }
 
 @media (max-width: 1170px) {
     .post-full-image {
-        height: 600px;
         margin: 0 -4vw -100px;
         border-radius: 0;
     }
+    .post-full-image img {
+        height: 600px;
+    }
 }
 
 @media (max-width: 800px) {
-    .post-full-image {
+    .post-full-image img {
         height: 400px;
     }
 }
 
 .post-full-content {
     position: relative;
-    min-height: 230px;
     margin: 0 auto;
     padding: 70px 100px 0;
+    min-height: 230px;
     font-family: Georgia, serif;
     font-size: 2.2rem;
     line-height: 1.6em;
@@ -665,13 +797,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,
@@ -697,13 +822,9 @@ 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;
+    word-break: break-word;
     box-shadow: var(--blue) 0 -1px 0 inset;
 }
 
@@ -729,8 +850,9 @@ The first (most recent) post in the list is styled to be bigger than the others
 .post-full-content img,
 .post-full-content video {
     display: block;
-    max-width: 1040px;
     margin: 1.5em auto;
+    max-width: 1040px;
+    height: auto;
 }
 @media (max-width: 1040px) {
     .post-full-content img,
@@ -749,8 +871,8 @@ Usage (In Ghost edtior):
 
 */
 .post-full-content img[src$="#full"] {
-    width: 100vw;
     max-width: none;
+    width: 100vw;
 }
 
 
@@ -766,11 +888,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 {
@@ -800,11 +924,15 @@ Usage (In Ghost editor):
     border-radius: 3px;
 }
 
+.post-full-content p code {
+    word-break: break-all;
+}
+
 .post-full-content pre {
-    max-width: 100%;
     overflow-x: auto;
     margin: 1.5em 0 3em;
     padding: 20px;
+    max-width: 100%;
     border: color(var(--darkgrey) l(-10%)) 1px solid;
     color: var(--whitegrey);
     font-size: 1.4rem;
@@ -813,6 +941,10 @@ Usage (In Ghost editor):
     border-radius: 5px;
 }
 
+.post-full-content pre ::selection {
+    color: color(var(--midgrey) l(-25%));
+}
+
 .post-full-content pre code {
     padding: 0;
     font-size: inherit;
@@ -820,6 +952,10 @@ Usage (In Ghost editor):
     background: transparent;
 }
 
+.post-full-content pre code :not(span) {
+    color: inherit;
+}
+
 .post-full-content .fluid-width-video-wrapper {
     margin: 1.5em 0 3em;
 }
@@ -834,9 +970,9 @@ Usage (In Ghost editor):
     top: -15px;
     left: 50%;
     display: block;
+    margin-left: -10px;
     width: 1px;
     height: 30px;
-    margin-left: -10px;
     background: color(var(--lightgrey) l(+10%));
     box-shadow: #fff 0 0 0 5px;
     transform: rotate(45deg);
@@ -909,8 +1045,8 @@ Usage (In Ghost editor):
 }
 @media (min-width: 1180px) {
     .post-full-content h5 {
-        width: 100vw;
         max-width: 1060px;
+        width: 100vw;
     }
 }
 @media (max-width: 500px) {
@@ -961,8 +1097,8 @@ Usage (In Ghost editor):
         font-size: 2.9rem;
     }
     .post-full-image {
-        height: 350px;
         margin-bottom: 4vw;
+        height: 350px;
     }
     .post-full-content {
         padding: 0;
@@ -976,24 +1112,24 @@ Usage (In Ghost editor):
 /* Tables */
 .post-full-content table {
     display: inline-block;
-    width: auto;
-    max-width: 100%;
     overflow-x: auto;
     margin: 0.5em 0 2.5em;
+    max-width: 100%;
+    width: auto;
     border-spacing: 0;
     border-collapse: collapse;
-    vertical-align: top;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     font-size: 1.6rem;
     white-space: nowrap;
+    vertical-align: top;
 }
 
 .post-full-content table {
-    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
-    background-size: 10px 100%, 10px 100%;
-    background-attachment: scroll, scroll;
-    background-repeat: no-repeat;
     -webkit-overflow-scrolling: touch;
+    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
+    background-attachment: scroll, scroll;
+    background-size: 10px 100%, 10px 100%;
+    background-repeat: no-repeat;
 }
 
 .post-full-content table td:first-child {
@@ -1004,8 +1140,8 @@ Usage (In Ghost editor):
 
 .post-full-content table td:last-child {
     background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
-    background-size: 20px 100%;
     background-position: 100% 0;
+    background-size: 20px 100%;
     background-repeat: no-repeat;
 }
 
@@ -1059,8 +1195,8 @@ Usage (In Ghost editor):
     display: flex;
     justify-content: center;
     align-items: center;
-    max-width: 420px;
     margin: 0 auto;
+    max-width: 420px;
 }
 
 .subscribe-form .form-group {
@@ -1069,8 +1205,8 @@ Usage (In Ghost editor):
 
 .subscribe-email {
     display: block;
-    width: 100%;
     padding: 10px;
+    width: 100%;
     border: color(var(--lightgrey) l(+7%)) 1px solid;
     color: var(--midgrey);
     font-size: 1.8rem;
@@ -1090,9 +1226,9 @@ Usage (In Ghost editor):
 
 .subscribe-form button {
     display: inline-block;
-    height: 41px;
     margin: 0 0 0 10px;
     padding: 0 20px;
+    height: 41px;
     outline: none;
     color: #fff;
     font-size: 1.5rem;
@@ -1134,8 +1270,8 @@ Usage (In Ghost editor):
         width: 100%;
     }
     .subscribe-form button {
-        width: 100%;
         margin: 10px 0 0 0;
+        width: 100%;
     }
 }
 
@@ -1147,24 +1283,27 @@ Usage (In Ghost editor):
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 840px;
     margin: 0 auto;
     padding: 3vw 0 6vw 0;
+    max-width: 840px;
 }
 
+/* 7.2.1 Single Author Byline
+/* ---------------------------------------------------------- */
+
 .author-card {
     display: flex;
-    align-items: center;
 }
 
-.author-card .author-profile-image {
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+    margin-right: 15px;
     width: 60px;
     height: 60px;
-    margin-right: 15px;
 }
 
 .author-card-name {
-    margin: 0 0 2px 0;
+    margin: 8px 0 2px 0;
     padding: 0;
     font-size: 2rem;
 }
@@ -1207,13 +1346,144 @@ Usage (In Ghost editor):
     text-decoration: none;
 }
 
+/* 7.2.2 Multiple Author Byline
+/* ---------------------------------------------------------- */
+
+.post-full-authors {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+    padding-top: 40px;
+    border-top: color(var(--lightgrey) l(+10%)) 1px solid;
+}
+
+.post-full-authors-content {
+    margin-bottom: 20px;
+}
+
+.post-full-authors-content p {
+    margin-bottom: 0;
+    color: var(--midgrey);
+    font-size: 1.4rem;
+    letter-spacing: 0.2px;
+    text-align: center;
+    text-transform: uppercase;
+}
+
+.post-full-authors-content a {
+    display: inline-block;
+    color: color(var(--darkgrey) l(+20%));
+    font-size: 1.4rem;
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
+.post-full-footer .author-list {
+    justify-content: center;
+    padding: 10px 20px;
+}
+
+.author-card .author-profile-image,
+.author-card .avatar-wrapper {
+    position: relative;
+    margin-right: 15px;
+}
+
+.author-list-item .author-card {
+    position: absolute;
+    bottom: 130%;
+    left: 50%;
+    z-index: 300;
+    display: block;
+    margin-left: -160px;
+    width: 320px;
+    font-size: 1.4rem;
+    letter-spacing: 0.2px;
+    background: white;
+    border-radius: 6px;
+    box-shadow: rgba(39,44,49,0.08) 0 12px 26px, rgba(39, 44, 49, 0.03) 1px 3px 8px;
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
+    transform: scale(0.98) translateY(15px);
+    pointer-events: none;
+}
+
+.author-list-item .author-card:before {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    display: block;
+    margin-left: -12px;
+    width: 0;
+    height: 0;
+    border-top: 12px solid #fff;
+    border-right: 12px solid transparent;
+    border-left: 12px solid transparent;
+}
+
+.author-list-item .author-card.hovered {
+    opacity: 1.0;
+    transform: scale(1) translateY(0px);
+    pointer-events: auto;
+}
+
+.author-card .basic-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 20px 20px 20px;
+    color: #fff;
+    background: var(--darkgrey);
+    border-radius: 6px 6px 0 0;
+}
+
+.author-card .basic-info h2 {
+    margin: 1em 0 0.5em;
+}
+
+.author-card .bio {
+    padding: 20px 20px 0;
+}
+
+@media (max-width: 650px) {
+    .author-list-item .author-card {
+        display: none;
+    }
+}
+
+.basic-info .author-profile-image {
+    margin: 0;
+    width: 88px;
+    height: 88px;
+    border: none;
+}
+
+.basic-info .avatar-wrapper {
+    position: relative;
+    margin: 0;
+    width: 88px;
+    height: 88px;
+    border: none;
+    background: rgba(229, 239, 245, 0.1);
+}
+
+.basic-info .avatar-wrapper svg {
+    margin: 0;
+    width: 88px;
+    height: 88px;
+    opacity: 0.15;
+}
+
 
 /* 7.3. Comments
 /* ---------------------------------------------------------- */
 
 .post-full-comments {
-    max-width: 840px;
     margin: 0 auto;
+    max-width: 840px;
 }
 
 
@@ -1298,8 +1568,9 @@ Usage (In Ghost editor):
 
 .read-next-divider svg {
     width: 40px;
-    stroke: #fff;
     fill: transparent;
+    stroke: #fff;
+
     stroke-width: 0.5px;
     stroke-opacity: 0.65;
 }
@@ -1317,8 +1588,8 @@ Usage (In Ghost editor):
     flex-direction: column;
     margin: 0 auto;
     padding: 0;
-    list-style: none;
     text-align: center;
+    list-style: none;
 }
 
 .read-next-card-content li {
@@ -1334,9 +1605,9 @@ Usage (In Ghost editor):
     display: block;
     padding: 20px 0;
     border-bottom: rgba(255,255,255,0.3) 1px solid;
-    vertical-align: top;
     color: #fff;
     font-weight: 500;
+    vertical-align: top;
     transition: opacity 0.3s ease;
 }
 
@@ -1407,8 +1678,8 @@ Usage (In Ghost editor):
 }
 
 .floating-header-logo img {
-    max-height: 20px;
     margin: 0 10px 0 0;
+    max-height: 20px;
 }
 
 .floating-header-divider {
@@ -1459,9 +1730,9 @@ Usage (In Ghost editor):
 }
 
 .floating-header-share-label svg {
+    margin: 0 5px 0 10px;
     width: 18px;
     height: 18px;
-    margin: 0 5px 0 10px;
     stroke: rgba(0,0,0,0.7);
     transform: rotate(90deg);
 }
@@ -1565,23 +1836,136 @@ 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;
+    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;
+}
+
+.kg-gallery-card + .kg-image-card.kg-width-wide,
+.kg-gallery-card + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-gallery-card,
+.kg-image-card.kg-width-wide + .kg-image-card.kg-width-wide {
+    margin: -2.25em 0 3em;
+}
+
+/* keep existing <pre> styles for code cards with captions */
+.kg-code-card {
+    min-width: 100%;
+}
+
+.kg-code-card pre {
+    margin: 0;
+}
+
 /* 8. Author Template
 /* ---------------------------------------------------------- */
 
 .site-header-content .author-profile-image {
     z-index: 10;
     flex-shrink: 0;
+    margin: 0 0 20px 0;
     width: 100px;
     height: 100px;
-    margin: 0 0 20px 0;
     box-shadow: rgba(255,255,255,0.1) 0 0 0 6px;
 }
 
 .site-header-content .author-bio {
     z-index: 10;
     flex-shrink: 0;
-    max-width: 600px;
     margin: 5px 0 10px 0;
+    max-width: 600px;
     font-size: 2rem;
     line-height: 1.3em;
     font-weight: 300;
@@ -1733,8 +2117,8 @@ Usage (In Ghost editor):
 }
 
 .subscribe-overlay-description {
-    max-width: 650px;
     margin: 0 auto 50px;
+    max-width: 650px;
     font-family: Georgia, serif;
     font-size: 3rem;
     line-height: 1.3em;
@@ -1746,8 +2130,8 @@ Usage (In Ghost editor):
     display: flex;
     justify-content: center;
     align-items: center;
-    max-width: 500px;
     margin: 0 auto;
+    max-width: 500px;
 }
 
 .subscribe-overlay .form-group {
@@ -1756,8 +2140,8 @@ Usage (In Ghost editor):
 
 .subscribe-overlay .subscribe-email {
     display: block;
-    width: 100%;
     padding: 14px 20px;
+    width: 100%;
     border: none;
     color: var(--midgrey);
     font-size: 2rem;
@@ -1778,9 +2162,9 @@ Usage (In Ghost editor):
 
 .subscribe-overlay button {
     display: inline-block;
-    height: 52px;
     margin: 0 0 0 15px;
     padding: 0 25px;
+    height: 52px;
     outline: none;
     color: #fff;
     font-size: 1.7rem;
@@ -1858,15 +2242,15 @@ Usage (In Ghost editor):
 
 .site-footer-content {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
     color: rgba(255,255,255,0.7);
     font-size: 1.3rem;
 }
 
 .site-footer-content a {
-    color: rgba(255,255,255,0.7);;
+    color: rgba(255,255,255,0.7);
 }
 
 .site-footer-content a:hover {

assets/js/infinitescroll.js

@@ -1,20 +1,78 @@
-// Code snippet inspired by https://github.com/douglasrodrigues5/ghost-blog-infinite-scroll
+/**
-$(function ($) {
+ * Infinite Scroll
-    var currentPage = 1;
+ */
-    var pathname = window.location.pathname;
+
-    var $document = $(document);
+(function(window, document) {
-    var $result = $('.post-feed');
+    // next link element
-    var buffer = 100;
+    var nextElement = document.querySelector('link[rel=next]');
+    if (!nextElement) return;
+
+    // post feed element
+    var feedElement = document.querySelector('.post-feed');
+    if (!feedElement) return;
+
+    var buffer = 300;
 
     var ticking = false;
-    var isLoading = false;
+    var loading = false;
 
     var lastScrollY = window.scrollY;
     var lastWindowHeight = window.innerHeight;
-    var lastDocumentHeight = $document.height();
+    var lastDocumentHeight = document.documentElement.scrollHeight;
 
-    // remove hash params from pathname
+    function onPageLoad() {
-    pathname = pathname.replace(/#(.*)$/g, '').replace('/\//g', '/');
+        if (this.status === 404) {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+            return;
+        }
+
+        // append contents
+        var postElements = this.response.querySelectorAll('.post-card');
+        postElements.forEach(function (item) {
+            feedElement.appendChild(item);
+        });
+
+        // set next link
+        var resNextElement = this.response.querySelector('link[rel=next]');
+        if (resNextElement) {
+            nextElement.href = resNextElement.href;
+        } else {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+        }
+
+        // sync status
+        lastDocumentHeight = document.documentElement.scrollHeight;
+        ticking = false;
+        loading = false;
+    }
+
+    function onUpdate() {
+        // return if already loading
+        if (loading) return;
+
+        // return if not scroll to the bottom
+        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
+            ticking = false;
+            return;
+        }
+
+        loading = true;
+
+        var xhr = new window.XMLHttpRequest();
+        xhr.responseType = 'document';
+
+        xhr.addEventListener('load', onPageLoad);
+
+        xhr.open('GET', nextElement.href);
+        xhr.send(null);
+    }
+
+    function requestTick() {
+        ticking || window.requestAnimationFrame(onUpdate);
+        ticking = true;
+    }
 
     function onScroll() {
         lastScrollY = window.scrollY;
@@ -23,61 +81,12 @@ $(function ($) {
 
     function onResize() {
         lastWindowHeight = window.innerHeight;
-        lastDocumentHeight = $document.height();
+        lastDocumentHeight = document.documentElement.scrollHeight;
         requestTick();
     }
 
-    function requestTick() {
+    window.addEventListener('scroll', onScroll, { passive: true });
-        if (!ticking) {
-            requestAnimationFrame(infiniteScroll)
-        }
-        ticking = true;
-    }
-
-    function infiniteScroll () {
-        // return if already loading
-        if (isLoading) {
-            return;
-        }
-
-        // return if not scroll to the bottom
-        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
-            ticking = false;
-            return;
-        }
-
-        // return if currentPage is the last page already
-        if (currentPage === maxPages) {
-            return;
-        }
-
-        isLoading = true;
-
-        // next page
-        currentPage++;
-
-        // Load more
-        var nextPage = pathname + 'page/' + currentPage + '/';
-
-        $.get(nextPage, function (content) {
-            $result.append($(content).find('.post').hide().fadeIn(100));
-
-        }).fail(function (xhr) {
-            // 404 indicates we've run out of pages
-            if (xhr.status === 404) {
-                window.removeEventListener('scroll', onScroll, {passive: true});
-                window.removeEventListener('resize', onResize);
-            }
-
-        }).always(function () {
-            lastDocumentHeight = $document.height();
-            isLoading = false;
-            ticking = false;
-        });
-    }
-
-    window.addEventListener('scroll', onScroll, {passive: true});
     window.addEventListener('resize', onResize);
 
-    infiniteScroll();
+    requestTick();
-});
+})(window, document);

author.hbs

@@ -3,7 +3,9 @@
 
 {{#author}}
 {{!-- Everything inside the #author tags pulls data from the author --}}
-<header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
+
+
+{{> header background=cover_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
     <div class="inner">
         {{> "site-nav"}}
         <div class="site-header-content">
@@ -30,7 +32,7 @@
                 {{#if facebook}}
                     <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
                 {{/if}}
-                <a class="social-link social-link-rss" href="http://cloud.feedly.com/#subscription/feed/{{url absolute="true"}}/rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
+                <a class="social-link social-link-rss" href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
             </div>
         </div>
     </div>
@@ -38,7 +40,7 @@
 {{/author}}
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <div class="post-feed">

config.example.json

@@ -0,0 +1,6 @@
+{
+    "github": {
+        "username": "<username>",
+        "token": "<gh-personal-access-token>"
+    }
+}

default.hbs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{@site.lang}}">
 <head>
 
     {{!-- Document Settings --}}
@@ -28,11 +28,11 @@
         {{!-- The footer at the very bottom of the screen --}}
         <footer class="site-footer outer">
             <div class="site-footer-content inner">
-                <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
+                <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
                 <nav class="site-footer-nav">
-                    <a href="{{@blog.url}}">Latest Posts</a>
+                    <a href="{{@site.url}}">Latest Posts</a>
-                    {{#if @blog.facebook}}<a href="{{facebook_url @blog.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
+                    {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
-                    {{#if @blog.twitter}}<a href="{{twitter_url @blog.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
+                    {{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
                     <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
                 </nav>
             </div>
@@ -45,29 +45,38 @@
     <div id="subscribe" class="subscribe-overlay">
         <a class="subscribe-overlay-close" href="#"></a>
         <div class="subscribe-overlay-content">
-            {{#if @blog.logo}}
+            {{#if @site.logo}}
-                <img class="subscribe-overlay-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" />
+                <img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />
             {{/if}}
-            <h1 class="subscribe-overlay-title">Subscribe to {{@blog.title}}</h1>
+            <h1 class="subscribe-overlay-title">Subscribe to {{@site.title}}</h1>
             <p class="subscribe-overlay-description">Stay up to date! Get all the latest &amp; greatest posts delivered straight to your inbox</p>
             {{subscribe_form placeholder="youremail@example.com"}}
         </div>
     </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"
         integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
         crossorigin="anonymous">
     </script>
-    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
+    <script type="text/javascript" src="{{asset "built/jquery.fitvids.js"}}"></script>
 
     {{#if pagination.pages}}
-    <script>
+    <script src="{{asset "built/infinitescroll.js"}}"></script>
-        var maxPages = parseInt('{{pagination.pages}}');
-    </script>
-    <script src="{{asset "js/infinitescroll.js"}}"></script>
     {{/if}}
 
     {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}

error-404.hbs

@@ -16,25 +16,25 @@ It's a good idea to keep this template as minimal as possible in terms of both f
 <body class="error-template">
     <div class="site-wrapper">
 
-        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
+        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
             <div class="inner">
                 <nav class="site-nav-center">
-                    {{#if @blog.logo}}
+                    {{#if @site.logo}}
-                        <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                        <a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}" alt="{{@site.title}}" /></a>
                     {{else}}
-                        <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+                        <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
                     {{/if}}
                 </nav>
             </div>
         </header>
 
-        <main id="site-main" class="site-main outer" role="main">
+        <main id="site-main" class="site-main outer">
             <div class="inner">
 
                 <section class="error-message">
                     <h1 class="error-code">{{code}}</h1>
                     <p class="error-description">{{message}}</p>
-                    <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
+                    <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
                 </section>
             </div>
         </main>

error.hbs

@@ -17,41 +17,41 @@ You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in
 <body class="error-template">
     <div class="site-wrapper">
 
-        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
+        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
             <div class="inner">
                 <nav class="site-nav-center">
-                    {{#if @blog.logo}}
+                    {{#if @site.logo}}
-                        <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                        <a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}" alt="{{@site.title}}" /></a>
                     {{else}}
-                        <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+                        <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
                     {{/if}}
                 </nav>
             </div>
         </header>
 
-        <main id="site-main" class="site-main outer" role="main">
+        <main id="site-main" class="site-main outer">
             <div class="inner">
 
                 <section class="error-message">
                     <h1 class="error-code">{{code}}</h1>
                     <p class="error-description">{{message}}</p>
-                    <a class="error-link" href="{{@blog.url}}">Go to the front page →</a>
+                    <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
                 </section>
 
                 {{#if errorDetails}}
                 <section class="error-stack">
                     <h3>Theme errors</h3>
                     <ul class="error-stack-list">
-                        {{#each errorDetails}}
+                        {{#foreach errorDetails}}
                             <li>
                                 <em class="error-stack-function">{{{rule}}}</em>
 
-                                {{#each failures}}
+                                {{#foreach failures}}
                                     <p><span class="error-stack-file">Ref: {{ref}}</span></p>
                                     <p><span class="error-stack-file">Message: {{message}}</span></p>
-                                {{/each}}
+                                {{/foreach}}
                             </li>
-                        {{/each}}
+                        {{/foreach}}
                     </ul>
                 </section>
                 {{/if}}

gulpfile.js

@@ -1,70 +1,207 @@
-var gulp = require('gulp');
+const {series, watch, src, dest, parallel} = require('gulp');
+const pump = require('pump');
 
 // gulp plugins and utils
-var gutil = require('gulp-util');
+const livereload = require('gulp-livereload');
-var livereload = require('gulp-livereload');
+const postcss = require('gulp-postcss');
-var nodemon = require('gulp-nodemon');
+const zip = require('gulp-zip');
-var postcss = require('gulp-postcss');
+const uglify = require('gulp-uglify');
-var sourcemaps = require('gulp-sourcemaps');
+const beeper = require('beeper');
-var zip = require('gulp-zip');
 
 // postcss plugins
-var autoprefixer = require('autoprefixer');
+const autoprefixer = require('autoprefixer');
-var colorFunction = require('postcss-color-function');
+const colorFunction = require('postcss-color-function');
-var cssnano = require('cssnano');
+const cssnano = require('cssnano');
-var customProperties = require('postcss-custom-properties');
+const customProperties = require('postcss-custom-properties');
-var easyimport = require('postcss-easy-import');
+const easyimport = require('postcss-easy-import');
 
-var swallowError = function swallowError(error) {
+function serve(done) {
-    gutil.log(error.toString());
+    livereload.listen();
-    gutil.beep();
+    done();
-    this.emit('end');
+}
+
+const handleError = (done) => {
+    return function (err) {
+        if (err) {
+            beeper();
+        }
+        return done(err);
+    };
 };
 
-var nodemonServerInit = function () {
+function hbs(done) {
-    livereload.listen(1234);
+    pump([
-};
+        src(['*.hbs', 'partials/**/*.hbs', '!node_modules/**/*.hbs']),
+        livereload()
+    ], handleError(done));
+}
 
-gulp.task('build', ['css'], function (/* cb */) {
+function css(done) {
-    return nodemonServerInit();
+    const processors = [
-});
-
-gulp.task('css', function () {
-    var processors = [
         easyimport,
-        customProperties,
+        customProperties({preserve: false}),
         colorFunction(),
         autoprefixer({browsers: ['last 2 versions']}),
         cssnano()
     ];
 
-    return gulp.src('assets/css/*.css')
+    pump([
-        .on('error', swallowError)
+        src('assets/css/*.css', {sourcemaps: true}),
-        .pipe(sourcemaps.init())
+        postcss(processors),
-        .pipe(postcss(processors))
+        dest('assets/built/', {sourcemaps: '.'}),
-        .pipe(sourcemaps.write('.'))
+        livereload()
-        .pipe(gulp.dest('assets/built/'))
+    ], handleError(done));
-        .pipe(livereload());
+}
-});
 
-gulp.task('watch', function () {
+function js(done) {
-    gulp.watch('assets/css/**', ['css']);
+    pump([
-});
+        src('assets/js/*.js', {sourcemaps: true}),
+        uglify(),
+        dest('assets/built/', {sourcemaps: '.'}),
+        livereload()
+    ], handleError(done));
+}
 
-gulp.task('zip', ['css'], function() {
+function zipper(done) {
-    var targetDir = 'dist/';
+    const targetDir = 'dist/';
-    var themeName = require('./package.json').name;
+    const themeName = require('./package.json').name;
-    var filename = themeName + '.zip';
+    const filename = themeName + '.zip';
 
-    return gulp.src([
+    pump([
+        src([
             '**',
             '!node_modules', '!node_modules/**',
             '!dist', '!dist/**'
-    ])
+        ]),
-        .pipe(zip(filename))
+        zip(filename),
-        .pipe(gulp.dest(targetDir));
+        dest(targetDir)
-});
+    ], handleError(done));
+}
 
-gulp.task('default', ['build'], function () {
+const cssWatcher = () => watch('assets/css/**', css);
-    gulp.start('watch');
+const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs', '!node_modules/**/*.hbs'], hbs);
-});
+const watcher = parallel(cssWatcher, hbsWatcher);
+const build = series(css, js);
+const dev = series(build, serve, watcher);
+
+exports.build = build;
+exports.zip = series(build, zipper);
+exports.default = dev;
+
+// release imports
+const path = require('path');
+const releaseUtils = require('@tryghost/release-utils');
+
+let config;
+try {
+    config = require('./config');
+} catch (err) {
+    config = null;
+}
+
+const REPO = 'TryGhost/Casper';
+const USER_AGENT = 'Casper';
+const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
+
+const changelog = ({previousVersion}) => {
+    const changelog = new releaseUtils.Changelog({
+        changelogPath: CHANGELOG_PATH,
+        folder: path.join(process.cwd(), '.')
+    });
+
+    changelog
+        .write({
+            githubRepoPath: `https://github.com/${REPO}`,
+            lastVersion: previousVersion
+        })
+        .sort()
+        .clean();
+};
+
+const previousRelease = () => {
+    return releaseUtils
+        .releases
+        .get({
+            userAgent: USER_AGENT,
+            uri: `https://api.github.com/repos/${REPO}/releases`
+        })
+        .then((response) => {
+            if (!response || !response.length) {
+                console.log('No releases found. Skipping');
+                return;
+            }
+
+            console.log(`Previous version ${response[0].name}`);
+            return response[0].name;
+        });
+};
+
+/**
+ *
+ * `yarn ship` will trigger `postship` task.
+ *
+ * [optional] For full automation
+ *
+ * `GHOST=2.10.1,2.10.0 yarn ship`
+ * First value: Ships with Ghost
+ * Second value: Compatible with Ghost/GScan
+ *
+ * You can manually run in case the task has thrown an error.
+ *
+ * `npm_package_version=0.5.0 gulp release`
+ */
+const release = () => {
+    // @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
+    const newVersion = process.env.npm_package_version;
+    let shipsWithGhost = '{version}';
+    let compatibleWithGhost = '2.10.0';
+    const ghostEnvValues = process.env.GHOST || null;
+
+    if (ghostEnvValues) {
+        shipsWithGhost = ghostEnvValues.split(',')[0];
+        compatibleWithGhost = ghostEnvValues.split(',')[1];
+
+        if (!compatibleWithGhost) {
+            compatibleWithGhost = '2.10.0';
+        }
+    }
+
+    if (!newVersion || newVersion === '') {
+        console.log('Invalid version.');
+        return;
+    }
+
+    console.log(`\nDraft release for ${newVersion}.`);
+
+    if (!config || !config.github || !config.github.username || !config.github.token) {
+        console.log('Please copy config.example.json and configure Github token.');
+        return;
+    }
+
+    return previousRelease()
+        .then((previousVersion) => {
+            changelog({previousVersion});
+
+            return releaseUtils
+                .releases
+                .create({
+                    draft: true,
+                    preRelease: false,
+                    tagName: newVersion,
+                    releaseName: newVersion,
+                    userAgent: USER_AGENT,
+                    uri: `https://api.github.com/repos/${REPO}/releases`,
+                    github: {
+                        username: config.github.username,
+                        token: config.github.token
+                    },
+                    content: [`**Ships with Ghost ${shipsWithGhost} Compatible with Ghost >= ${compatibleWithGhost}**\n\n`],
+                    changelogPath: CHANGELOG_PATH
+                })
+                .then((response) => {
+                    console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
+                });
+        });
+};
+
+exports.release = release;

index.hbs

@@ -2,25 +2,24 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-{{!-- The big featured header, it uses blog cover image as a BG if available --}}
+{{> header background=@site.cover_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
-<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
     <div class="inner">
         <div class="site-header-content">
             <h1 class="site-title">
-                {{#if @blog.logo}}
+                {{#if @site.logo}}
-                    <img class="site-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" />
+                    <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
                 {{else}}
-                    {{@blog.title}}
+                    {{@site.title}}
                 {{/if}}
             </h1>
-            <h2 class="site-description">{{@blog.description}}</h2>
+            <h2 class="site-description">{{@site.description}}</h2>
         </div>
         {{> "site-nav"}}
     </div>
 </header>
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <div class="post-feed">

package.json

@@ -2,15 +2,25 @@
     "name": "casper",
     "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
     "demo": "https://demo.ghost.io",
-    "version": "2.1.6",
+    "version": "2.10.6",
     "engines": {
-        "ghost": ">=1.2.0"
+        "ghost": ">=2.0.0",
+        "ghost-api": "v2"
     },
     "license": "MIT",
     "screenshots": {
         "desktop": "assets/screenshot-desktop.jpg",
         "mobile": "assets/screenshot-mobile.jpg"
     },
+    "scripts": {
+        "dev": "gulp",
+        "zip": "gulp zip",
+        "test": "gscan .",
+        "pretest": "gulp build",
+        "preship": "yarn test",
+        "ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version && git push --follow-tags; else echo \"Uncomitted changes found.\" && exit 1; fi",
+        "postship": "git fetch && gulp release"
+    },
     "author": {
         "name": "Ghost Foundation",
         "email": "hello@ghost.org",
@@ -25,7 +35,8 @@
     },
     "keywords": [
         "ghost",
-        "theme"
+        "theme",
+        "ghost-theme"
     ],
     "repository": {
         "type": "git",
@@ -34,21 +45,42 @@
     "bugs": "https://github.com/TryGhost/Casper/issues",
     "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
     "devDependencies": {
-        "autoprefixer": "6.3.6",
+        "@tryghost/release-utils": "0.3.2",
-        "cssnano": "3.7.1",
+        "autoprefixer": "9.6.1",
-        "gulp": "3.9.1",
+        "beeper": "1.1.1",
-        "gulp-livereload": "3.8.1",
+        "cssnano": "4.1.10",
-        "gulp-nodemon": "2.1.0",
+        "gscan": "2.7.0",
-        "gulp-postcss": "6.1.1",
+        "gulp": "4.0.2",
-        "gulp-sourcemaps": "1.6.0",
+        "gulp-livereload": "4.0.1",
-        "gulp-util": "3.0.7",
+        "gulp-postcss": "8.0.0",
-        "gulp-watch": "4.3.8",
+        "gulp-uglify": "3.0.2",
-        "gulp-zip": "4.0.0",
+        "gulp-zip": "4.2.0",
-        "postcss-color-function": "2.0.1",
+        "postcss-color-function": "4.1.0",
-        "postcss-custom-properties": "5.0.1",
+        "postcss-custom-properties": "8.0.11",
-        "postcss-easy-import": "1.0.1"
+        "postcss-easy-import": "3.0.0",
+        "pump": "3.0.0"
     },
     "config": {
-        "posts_per_page": 25
+        "posts_per_page": 25,
+        "image_sizes": {
+            "xxs": {
+                "width": 30
+            },
+            "xs": {
+                "width": 100
+            },
+            "s": {
+                "width": 300
+            },
+            "m": {
+                "width": 600
+            },
+            "l": {
+                "width": 1000
+            },
+            "xl": {
+                "width": 2000
+            }
+        }
     }
 }

page.hbs

@@ -12,7 +12,7 @@ into the {body} of the default.hbs template --}}
 {{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
@@ -22,12 +22,27 @@ into the {body} of the default.hbs template --}}
             </header>
 
             {{#if feature_image}}
-            <figure class="post-full-image" style="background-image: url({{feature_image}})">
+            <figure class="post-full-image">
+                {{!-- This is a responsive image, it loads different sizes depending on device
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                <img
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(max-width: 800px) 400px,
+                            (max-width: 1170px) 700px,
+                            1400px"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{title}}"
+                />
             </figure>
             {{/if}}
 
             <section class="post-full-content">
+                <div class="post-content">
                     {{content}}
+                </div>
             </section>
 
         </article>

partials/byline-multiple.hbs

@@ -0,0 +1,74 @@
+<section class="post-full-authors">
+
+    <div class="post-full-authors-content">
+        <p>This post was a collaboration between</p>
+        <p>{{authors}}</p>
+    </div>
+
+    <ul class="author-list">
+    {{#foreach authors}}
+        <li class="author-list-item">
+
+            <div class="author-card">
+                <div class="basic-info">
+                    {{#if profile_image}}
+                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                    {{else}}
+                        <div class="author-profile-image">{{> "icons/avatar"}}</div>
+                    {{/if}}
+                    <h2>{{name}}</h2>
+                </div>
+                <div class="bio">
+                    {{#if bio}}
+                        <p>{{bio}}</p>
+                        <p><a href="{{url}}">More posts</a> by {{name}}.</p>
+                    {{else}}
+                        <p>Read <a href="{{url}}">more posts</a> by this author.</p>
+                    {{/if}}
+                </div>
+            </div>
+
+            {{#if profile_image}}
+                <a href="{{url}}" class="moving-avatar">
+                    <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                </a>
+            {{else}}
+                <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
+            {{/if}}
+
+        </li>
+    {{/foreach}}
+
+    </ul>
+
+</section>
+
+{{#contentFor "scripts"}}
+<script>
+// Adds delay to author card dropups to disappear. This gives enough
+// time for the user to interact with the author card while they move
+// the mouse from the avatar to the card. Also makes space for the
+// interacted avatar.
+$(document).ready(function () {
+
+    var hoverTimeout;
+
+    $('.author-list-item').hover(function(){
+        var $this = $(this);
+
+        clearTimeout(hoverTimeout);
+
+        $('.author-card').removeClass('hovered');
+        $(this).children('.author-card').addClass('hovered');
+
+    }, function() {
+        var $this = $(this);
+
+        hoverTimeout = setTimeout(function() {
+            $this.children('.author-card').removeClass('hovered');
+        }, 800);
+    });
+
+});
+</script>
+{{/contentFor}}

partials/byline-single.hbs

@@ -0,0 +1,23 @@
+{{!-- Everything inside the #author tags pulls data from the author --}}
+{{#primary_author}}
+
+<section class="author-card">
+    {{#if profile_image}}
+        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+    {{else}}
+        <span class="avatar-wrapper">{{> "icons/avatar"}}</span>
+    {{/if}}
+    <section class="author-card-content">
+        <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
+        {{#if bio}}
+            <p>{{bio}}</p>
+        {{else}}
+            <p>Read <a href="{{url}}">more posts</a> by this author.</p>
+        {{/if}}
+    </section>
+</section>
+<div class="post-full-footer-right">
+    <a class="author-card-button" href="{{url}}">Read More</a>
+</div>
+
+{{/primary_author}}

partials/floating-header.hbs

@@ -1,10 +1,10 @@
 <div class="floating-header">
     <div class="floating-header-logo">
-        <a href="{{@blog.url}}">
+        <a href="{{@site.url}}">
-            {{#if @blog.icon}}
+            {{#if @site.icon}}
-                <img src="{{@blog.icon}}" alt="{{@blog.title}} icon" />
+                <img src="{{img_url @site.icon size="xxs"}}" alt="{{@site.title}} icon" />
             {{/if}}
-            <span>{{@blog.title}}</span>
+            <span>{{@site.title}}</span>
         </a>
     </div>
     <span class="floating-header-divider">&mdash;</span>
@@ -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>

partials/header.hbs

@@ -0,0 +1,53 @@
+{{!--
+Wow what the hell is going on in here even?
+
+Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
+have a heavy impact on performance, so it's a good idea to make them responsive. Because we
+can only get the image dynamically using Handlebars, and we can only set the image to properly
+be a background image using CSS, we end up with a handful of inline styles.
+
+If the template in question has a background image, then we render responsive image styles
+for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
+with a `no-image` class so we can style it accordingly.
+--}}
+
+{{#if background}}
+
+<style type="text/css">
+.responsive-header-img {
+    background-image: url({{img_url background size='xl'}});
+}
+@media(max-width: 1000px) {
+    .responsive-header-img {
+        background-image: url({{img_url background size='l'}});
+        background-image: -webkit-image-set(
+                url({{img_url background size='l'}}) 1x,
+                url({{img_url background size='xl'}}) 2x
+        );
+        background-image: image-set(
+                url({{img_url background size='l'}}) 1x,
+                url({{img_url background size='xl'}}) 2x
+        );
+    }
+}
+@media(max-width: 600px) {
+    .responsive-header-img {
+        background-image: url({{img_url background size='m'}});
+        background-image: -webkit-image-set(
+                url({{img_url background size='m'}}) 1x,
+                url({{img_url background size='l'}}) 2x
+        );
+        background-image: image-set(
+                url({{img_url background size='m'}}) 1x,
+                url({{img_url background size='l'}}) 2x
+        );
+    }
+}
+</style>
+<header class="site-header outer responsive-header-img">
+
+{{else}}
+
+<header class="site-header outer no-image">
+
+{{/if}}

partials/icons/avatar.hbs

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z" fill="#FFF"/></g></svg>

partials/post-card.hbs

@@ -1,26 +1,63 @@
-<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}">
+<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
+
     {{#if feature_image}}
     <a class="post-card-image-link" href="{{url}}">
-            <div class="post-card-image" style="background-image: url({{feature_image}})"></div>
+        {{!-- This is a responsive image, it loads different sizes depending on device
+        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+        <img class="post-card-image"
+            srcset="{{img_url feature_image size="s"}} 300w,
+                    {{img_url feature_image size="m"}} 600w,
+                    {{img_url feature_image size="l"}} 1000w,
+                    {{img_url feature_image size="xl"}} 2000w"
+            sizes="(max-width: 1000px) 400px, 700px"
+            src="{{img_url feature_image size="m"}}"
+            alt="{{title}}"
+        />
     </a>
     {{/if}}
+
     <div class="post-card-content">
+
         <a class="post-card-content-link" href="{{url}}">
+
             <header class="post-card-header">
                 {{#if primary_tag}}
                     <span class="post-card-tags">{{primary_tag.name}}</span>
                 {{/if}}
                 <h2 class="post-card-title">{{title}}</h2>
             </header>
+
             <section class="post-card-excerpt">
                 <p>{{excerpt words="33"}}</p>
             </section>
+
         </a>
+
         <footer class="post-card-meta">
-            {{#if author.profile_image}}
+
-                <img class="author-profile-image" src="{{author.profile_image}}" alt="{{author.name}}" />
+            <ul class="author-list">
-            {{/if}}
+            {{#foreach authors}}
-            <span class="post-card-author">{{author}}</span>
+                <li class="author-list-item">
-        </footer>
+
+                    <div class="author-name-tooltip">
+                        {{name}}
                     </div>
+
+                    {{#if profile_image}}
+                        <a href="{{url}}" class="static-avatar">
+                            <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                        </a>
+                    {{else}}
+                        <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
+                    {{/if}}
+                </li>
+            {{/foreach}}
+            </ul>
+
+            <span class="reading-time">{{reading_time}}</span>
+
+        </footer>
+
+    </div>{{!--/.post-card-content--}}
+
 </article>

partials/site-nav.hbs

@@ -1,29 +1,29 @@
 <nav class="site-nav">
     <div class="site-nav-left">
         {{^is "home"}}
-            {{#if @blog.logo}}
+            {{#if @site.logo}}
-                <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>
+                <a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
             {{else}}
-                <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
+                <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
             {{/if}}
         {{/is}}
-        {{#if @blog.navigation}}
+        {{#if @site.navigation}}
             {{navigation}}
         {{/if}}
     </div>
     <div class="site-nav-right">
         <div class="social-links">
-            {{#if @blog.facebook}}
+            {{#if @site.facebook}}
-                <a class="social-link social-link-fb" href="{{facebook_url @blog.facebook}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                <a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
             {{/if}}
-            {{#if @blog.twitter}}
+            {{#if @site.twitter}}
-                <a class="social-link social-link-tw" href="{{twitter_url @blog.twitter}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
             {{/if}}
         </div>
         {{#if @labs.subscribers}}
             <a class="subscribe-button" href="#subscribe">Subscribe</a>
         {{else}}
-            <a class="rss-button" href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
+            <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
         {{/if}}
     </div>
 </nav>

post.hbs

@@ -12,7 +12,7 @@ into the {body} of the default.hbs template --}}
 {{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
 
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
 
         <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
@@ -28,67 +28,56 @@ into the {body} of the default.hbs template --}}
             </header>
 
             {{#if feature_image}}
-            <figure class="post-full-image" style="background-image: url({{feature_image}})">
+            <figure class="post-full-image">
+                {{!-- This is a responsive image, it loads different sizes depending on device
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                <img
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(max-width: 800px) 400px,
+                            (max-width: 1170px) 700px,
+                            1400px"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{title}}"
+                />
             </figure>
             {{/if}}
 
             <section class="post-full-content">
+                <div class="post-content">
                     {{content}}
+                </div>
             </section>
 
             {{!-- Email subscribe form at the bottom of the page --}}
             {{#if @labs.subscribers}}
             <section class="subscribe-form">
-                <h3 class="subscribe-form-title">Subscribe to {{@blog.title}}</h3>
+                <h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
                 <p>Get the latest posts delivered right to your inbox</p>
                 {{subscribe_form placeholder="youremail@example.com"}}
             </section>
             {{/if}}
 
             <footer class="post-full-footer">
-                {{!-- Everything inside the #author tags pulls data from the author --}}
-                {{#author}}
 
-                <section class="author-card">
+                {{!-- There are two options for how we display the byline/author-info.
-                    {{#if profile_image}}
+                If the post has more than one author, we load a specific template
-                        <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+                from includes/byline-multiple.hbs, otherwise, we just use the
-                    {{/if}}
+                default byline. --}}
-                    <section class="author-card-content">
+
-                        <h4 class="author-card-name"><a href="{{url}}">{{name}}</a></h4>
+                {{#has author="count:>1"}}
-                        {{#if bio}}
+                    {{> "byline-multiple"}}
-                            <p>{{bio}}</p>
                 {{else}}
-                            <p>Read <a href="{{url}}">more posts</a> by this author.</p>
+                    {{> "byline-single"}}
-                        {{/if}}
+                {{/has}}
-                    </section>
-                </section>
-                <div class="post-full-footer-right">
-                    <a class="author-card-button" href="{{url}}">Read More</a>
-                </div>
 
-                {{/author}}
             </footer>
 
             {{!--
-
-            If you use Disqus comments, just uncomment this block.
-            The only thing you need to change is "test-apkdzgmqhj" - which
-            should be replaced with your own Disqus site-id.
-
             <section class="post-full-comments">
-                <div id="disqus_thread"></div>
+                If you want to embed comments, this is a good place to do it!
-                <script>
-                    var disqus_config = function () {
-                        this.page.url = '{{url absolute="true"}}';
-                        this.page.identifier = 'ghost-{{comment_id}}';
-                    };
-                    (function() {
-                        var d = document, s = d.createElement('script');
-                        s.src = 'https://test-apkdzgmqhj.disqus.com/embed.js';
-                        s.setAttribute('data-timestamp', +new Date());
-                        (d.head || d.body).appendChild(s);
-                    })();
-                </script>
             </section>
             --}}
 
@@ -106,14 +95,14 @@ into the {body} of the default.hbs template --}}
                 {{#if related_posts}}
                 <article class="read-next-card"
                     {{#if ../primary_tag.feature_image}}
-                        style="background-image: url({{../primary_tag.feature_image}})"
+                        style="background-image: url({{img_url ../primary_tag.feature_image size="m"}})"
                     {{else}}
-                        {{#if @blog.cover_image}}
+                        {{#if @site.cover_image}}
-                            style="background-image: url({{@blog.cover_image}})"{{/if}}
+                            style="background-image: url({{img_url @site.cover_image size="m"}})"{{/if}}
                     {{/if}}
                 >
                     <header class="read-next-card-header">
-                        <small class="read-next-card-header-sitetitle">&mdash; {{@blog.title}} &mdash;</small>
+                        <small class="read-next-card-header-sitetitle">&mdash; {{@site.title}} &mdash;</small>
                         {{#../primary_tag}}
                         <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
                         {{/../primary_tag}}
@@ -167,7 +156,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');
 
@@ -216,6 +205,7 @@ $(document).ready(function () {
     window.addEventListener('resize', onResize, false);
 
     update();
+
 });
 </script>
 {{/contentFor}}

renovate.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "@tryghost:theme"
+  ],
+  "travis": { "enabled": true },
+  "node": {
+    "supportPolicy": ["lts_latest"]
+  }
+}

tag.hbs

@@ -1,9 +1,8 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{!-- The big featured header, it uses blog cover image as a BG if available --}}
 {{#tag}}
-<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}">
+{{> header background=feature_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
     <div class="inner">
         {{> "site-nav"}}
         <div class="site-header-content">
@@ -21,7 +20,7 @@
 {{/tag}}
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer" role="main">
+<main id="site-main" class="site-main outer">
     <div class="inner">
         <div class="post-feed">
             {{#foreach posts}}