v4.3.0

no issue

- this needed updating after we bumped gscan

.gitignore

@@ -13,9 +13,16 @@ results
 
 npm-debug.log
 node_modules
+package-lock.json
 
 .idea/*
 *.iml
 projectFilesBackup
 
-.DS_Store
+.DS_Store
+
+dist/
+
+config.json
+changelog.md
+changelog.md.bk

LICENSE

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

README.md

@@ -1,10 +1,69 @@
 # Casper
 
-The default theme for [Ghost](http://github.com/tryghost/ghost/).
+The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the latest development version of Casper! If you're just looking to download the latest release, head over to the [releases](https://github.com/TryGhost/Casper/releases) page.
 
-To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page.
+ 
 
-## Copyright & License
+![screenshot-desktop](https://user-images.githubusercontent.com/353959/66987533-40eae100-f0c1-11e9-822e-cbaf38fb8e3f.png)
 
-Copyright (c) 2013-2017 Ghost Foundation - Released under the [MIT license](LICENSE).
+ 
 
+# First time using a Ghost theme?
+
+Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
+
+This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/themes/) which explains every possible Handlebars helper and template.
+
+**The main files are:**
+
+- `default.hbs` - The parent template file, which includes your global header/footer
+- `index.hbs` - The main template to generate a list of posts, usually the home page
+- `post.hbs` - The template used to render individual posts
+- `page.hbs` - Used for individual pages
+- `tag.hbs` - Used for tag archives, eg. "all posts tagged with `news`"
+- `author.hbs` - Used for author archives, eg. "all posts written by Jamie"
+
+One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:
+
+- `page-about.hbs` - Custom template for an `/about/` page
+- `tag-news.hbs` - Custom template for `/tag/news/` archive
+- `author-ali.hbs` - Custom template for `/author/ali/` archive
+
+
+# Development
+
+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
+# install dependencies
+yarn install
+
+# run development server
+yarn dev
+```
+
+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
+# create .zip file
+yarn zip
+```
+
+# PostCSS Features Used
+
+- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
+- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
+
+
+# SVG Icons
+
+Casper uses inline SVG icons, included via Handlebars partials. You can find all icons inside `/partials/icons`. To use an icon just include the name of the relevant file, eg. To include the SVG icon in `/partials/icons/rss.hbs` - use `{{> "icons/rss"}}`.
+
+You can add your own SVG icons in the same manner.
+
+
+# Copyright & License
+
+Copyright (c) 2013-2021 Ghost Foundation - Released under the [MIT license](LICENSE).

assets/built/casper.js

@@ -0,0 +1,2 @@
+!function(o){"use strict";o.fn.fitVids=function(e){var t,i,n={customSelector:null,ignore:null};return document.getElementById("fit-vids-style")||(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("div")).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>',t.appendChild(i.childNodes[1])),e&&o.extend(n,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];n.customSelector&&e.push(n.customSelector);var r=".fitvidsignore";n.ignore&&(r=r+", "+n.ignore);e=o(this).find(e.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var e,t,i=o(this);0<i.parents(r).length||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length||(i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16)),e=("object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height())/(isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10)),i.attr("name")||(t="fitvid"+o.fn.fitVids._count,i.attr("name",t),o.fn.fitVids._count++),i.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+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(t,i){var r,n,o,d,s,a,c,l=i.querySelector("link[rel=next]");function h(){if(404===this.status)return t.removeEventListener("scroll",p),void t.removeEventListener("resize",f);this.response.querySelectorAll("article.post-card").forEach(function(e){r.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?l.href=e.href:(t.removeEventListener("scroll",p),t.removeEventListener("resize",f)),c=i.documentElement.scrollHeight,d=o=!1}function e(){var e;d||(s+a<=c-n?o=!1:(d=!0,(e=new t.XMLHttpRequest).responseType="document",e.addEventListener("load",h),e.open("GET",l.href),e.send(null)))}function u(){o||t.requestAnimationFrame(e),o=!0}function p(){s=t.scrollY,u()}function f(){a=t.innerHeight,c=i.documentElement.scrollHeight,u()}!l||(r=i.querySelector(".post-feed"))&&(d=o=!(n=300),s=t.scrollY,a=t.innerHeight,c=i.documentElement.scrollHeight,t.addEventListener("scroll",p,{passive:!0}),t.addEventListener("resize",f),u())}(window,document);
+//# sourceMappingURL=casper.js.map

assets/built/global.css

@@ -0,0 +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{display:block;max-width:100%;height:auto}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{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;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:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) 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{padding-left:.3em;line-height:1.6em}li+li{margin-top:.5em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;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:#daf2fd}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:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:2.4rem;font-weight:600}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:600px){h4{font-size:1.7rem}}h5{font-size:2rem}h5,h6{margin:1.5em 0 .5em}h6{font-size:1.8rem}
+/*# sourceMappingURL=global.css.map */

assets/css/.csscomb.json

@@ -0,0 +1,237 @@
+{
+    "remove-empty-rulesets": true,
+    "always-semicolon": true,
+    "color-case": "lower",
+    "block-indent": "    ",
+    "color-shorthand": true,
+    "element-case": "lower",
+    "eof-newline": true,
+    "leading-zero": true,
+    "quotes": "double",
+    "space-before-colon": "",
+    "space-after-colon": " ",
+    "space-before-combinator": " ",
+    "space-after-combinator": " ",
+    "space-between-declarations": "\n",
+    "space-before-opening-brace": " ",
+    "space-after-opening-brace": "\n",
+    "space-after-selector-delimiter": "\n",
+    "space-before-selector-delimiter": "",
+    "space-before-closing-brace": "\n",
+    "strip-spaces": true,
+    "tab-size": 4,
+    "unitless-zero": true,
+    "sort-order": [ [
+        "content",
+        "visibility",
+        "position",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "z-index",
+        "order",
+        "flex",
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis",
+        "align-self",
+        "display",
+        "flex-flow",
+        "flex-direction",
+        "flex-wrap",
+        "justify-content",
+        "align-items",
+        "align-content",
+        "flex-order",
+        "flex-pack",
+        "flex-align",
+        "float",
+        "clear",
+        "overflow",
+        "overflow-x",
+        "overflow-y",
+        "-webkit-overflow-scrolling",
+        "clip",
+        "box-sizing",
+        "margin",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "padding",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+        "min-width",
+        "min-height",
+        "max-width",
+        "max-height",
+        "width",
+        "height",
+        "outline",
+        "outline-width",
+        "outline-style",
+        "outline-color",
+        "outline-offset",
+        "border",
+        "border-spacing",
+        "border-collapse",
+        "border-width",
+        "border-style",
+        "border-color",
+        "border-top",
+        "border-top-width",
+        "border-top-style",
+        "border-top-color",
+        "border-right",
+        "border-right-width",
+        "border-right-style",
+        "border-right-color",
+        "border-bottom",
+        "border-bottom-width",
+        "border-bottom-style",
+        "border-bottom-color",
+        "border-left",
+        "border-left-width",
+        "border-left-style",
+        "border-left-color",
+        "border-image",
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat",
+        "border-top-image",
+        "border-right-image",
+        "border-bottom-image",
+        "border-left-image",
+        "border-corner-image",
+        "border-top-left-image",
+        "border-top-right-image",
+        "border-bottom-right-image",
+        "border-bottom-left-image",
+        "color",
+        "font",
+        "font-family",
+        "font-size",
+        "line-height",
+        "font-weight",
+        "font-style",
+        "font-variant",
+        "font-size-adjust",
+        "font-stretch",
+        "font-feature-settings",
+        "letter-spacing",
+        "text-rendering",
+        "text-align",
+        "text-align-last",
+        "text-decoration",
+        "text-emphasis",
+        "text-emphasis-position",
+        "text-emphasis-style",
+        "text-emphasis-color",
+        "text-indent",
+        "text-justify",
+        "text-outline",
+        "text-transform",
+        "text-wrap",
+        "text-overflow",
+        "text-overflow-ellipsis",
+        "text-overflow-mode",
+        "text-shadow",
+        "white-space",
+        "word-spacing",
+        "word-wrap",
+        "word-break",
+        "tab-size",
+        "hyphens",
+        "user-select",
+        "fill",
+        "stroke",
+        "background",
+        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+        "background-color",
+        "background-image",
+        "background-attachment",
+        "background-position",
+        "background-position-x",
+        "background-position-y",
+        "background-clip",
+        "background-origin",
+        "background-size",
+        "background-repeat",
+        "border-radius",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius",
+        "box-decoration-break",
+        "box-shadow",
+        "table-layout",
+        "caption-side",
+        "empty-cells",
+        "list-style",
+        "list-style-position",
+        "list-style-type",
+        "list-style-image",
+        "quotes",
+        "counter-increment",
+        "counter-reset",
+        "vertical-align",
+        "src",
+        "opacity",
+        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+        "filter",
+        "resize",
+        "cursor",
+        "nav-index",
+        "nav-up",
+        "nav-right",
+        "nav-down",
+        "nav-left",
+        "transition",
+        "transition-delay",
+        "transition-timing-function",
+        "transition-duration",
+        "transition-property",
+        "transform",
+        "transform-origin",
+        "animation",
+        "animation-name",
+        "animation-duration",
+        "animation-play-state",
+        "animation-timing-function",
+        "animation-delay",
+        "animation-iteration-count",
+        "animation-direction",
+        "animation-fill-mode",
+        "pointer-events",
+        "unicode-bidi",
+        "direction",
+        "columns",
+        "column-span",
+        "column-width",
+        "column-count",
+        "column-fill",
+        "column-gap",
+        "column-rule",
+        "column-rule-width",
+        "column-rule-style",
+        "column-rule-color",
+        "break-before",
+        "break-inside",
+        "break-after",
+        "page-break-before",
+        "page-break-inside",
+        "page-break-after",
+        "orphans",
+        "widows",
+        "zoom",
+        "max-zoom",
+        "min-zoom",
+        "user-zoom",
+        "orientation"
+    ] ]
+}

assets/css/csscomb.json

@@ -0,0 +1,240 @@
+{
+    "remove-empty-rulesets": true,
+    "always-semicolon": true,
+    "color-case": "lower",
+    "block-indent": "    ",
+    "color-shorthand": true,
+    "element-case": "lower",
+    "eof-newline": true,
+    "leading-zero": true,
+    "quotes": "double",
+    "space-before-colon": "",
+    "space-after-colon": " ",
+    "space-before-combinator": " ",
+    "space-after-combinator": " ",
+    "space-between-declarations": "\n",
+    "space-before-opening-brace": " ",
+    "space-after-opening-brace": "\n",
+    "space-after-selector-delimiter": "\n",
+    "space-before-selector-delimiter": "",
+    "space-before-closing-brace": "\n",
+    "strip-spaces": true,
+    "tab-size": 4,
+    "unitless-zero": true,
+    "sort-order": [ [
+        "content",
+        "visibility",
+        "position",
+        "top",
+        "right",
+        "bottom",
+        "left",
+        "z-index",
+        "order",
+        "flex",
+        "flex-grow",
+        "flex-shrink",
+        "flex-basis",
+        "align-self",
+        "display",
+        "flex-flow",
+        "flex-direction",
+        "justify-content",
+        "align-items",
+        "align-content",
+        "flex-wrap",
+        "flex-order",
+        "flex-pack",
+        "flex-align",
+        "float",
+        "clear",
+        "box-sizing",
+        "width",
+        "height",
+        "min-width",
+        "min-height",
+        "max-width",
+        "max-height",
+        "overflow",
+        "overflow-x",
+        "overflow-y",
+        "clip",
+        "margin",
+        "margin-top",
+        "margin-right",
+        "margin-bottom",
+        "margin-left",
+        "padding",
+        "padding-top",
+        "padding-right",
+        "padding-bottom",
+        "padding-left",
+        "outline",
+        "outline-width",
+        "outline-style",
+        "outline-color",
+        "outline-offset",
+        "border",
+        "border-spacing",
+        "border-collapse",
+        "border-width",
+        "border-style",
+        "border-color",
+        "border-top",
+        "border-top-width",
+        "border-top-style",
+        "border-top-color",
+        "border-right",
+        "border-right-width",
+        "border-right-style",
+        "border-right-color",
+        "border-bottom",
+        "border-bottom-width",
+        "border-bottom-style",
+        "border-bottom-color",
+        "border-left",
+        "border-left-width",
+        "border-left-style",
+        "border-left-color",
+        "border-image",
+        "border-image-source",
+        "border-image-slice",
+        "border-image-width",
+        "border-image-outset",
+        "border-image-repeat",
+        "border-top-image",
+        "border-right-image",
+        "border-bottom-image",
+        "border-left-image",
+        "border-corner-image",
+        "border-top-left-image",
+        "border-top-right-image",
+        "border-bottom-right-image",
+        "border-bottom-left-image",
+        "table-layout",
+        "caption-side",
+        "empty-cells",
+        "list-style",
+        "list-style-position",
+        "list-style-type",
+        "list-style-image",
+        "quotes",
+        "counter-increment",
+        "counter-reset",
+        "vertical-align",
+        "stroke",
+        "fill",
+        "stroke-width",
+        "stroke-opacity",
+        "color",
+        "font",
+        "font-family",
+        "font-size",
+        "line-height",
+        "font-weight",
+        "font-style",
+        "font-variant",
+        "font-size-adjust",
+        "font-stretch",
+        "text-rendering",
+        "font-feature-settings",
+        "letter-spacing",
+        "hyphens",
+        "text-align",
+        "text-align-last",
+        "text-decoration",
+        "text-emphasis",
+        "text-emphasis-position",
+        "text-emphasis-style",
+        "text-emphasis-color",
+        "text-indent",
+        "text-justify",
+        "text-outline",
+        "text-transform",
+        "text-wrap",
+        "text-overflow",
+        "text-overflow-ellipsis",
+        "text-overflow-mode",
+        "text-shadow",
+        "white-space",
+        "word-spacing",
+        "word-wrap",
+        "word-break",
+        "tab-size",
+        "user-select",
+        "src",
+        "resize",
+        "cursor",
+        "nav-index",
+        "nav-up",
+        "nav-right",
+        "nav-down",
+        "nav-left",
+        "background",
+        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+        "background-color",
+        "background-image",
+        "background-size",
+        "background-attachment",
+        "background-position",
+        "background-position-x",
+        "background-position-y",
+        "background-clip",
+        "background-origin",
+        "background-repeat",
+        "border-radius",
+        "border-top-left-radius",
+        "border-top-right-radius",
+        "border-bottom-right-radius",
+        "border-bottom-left-radius",
+        "box-decoration-break",
+        "box-shadow",
+        "opacity",
+        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+        "filter",
+        "transition",
+        "transition-delay",
+        "transition-timing-function",
+        "transition-duration",
+        "transition-property",
+        "transform",
+        "transform-origin",
+        "animation",
+        "animation-name",
+        "animation-duration",
+        "animation-play-state",
+        "animation-timing-function",
+        "animation-delay",
+        "animation-iteration-count",
+        "animation-direction",
+        "animation-fill-mode",
+        "pointer-events",
+        "unicode-bidi",
+        "direction",
+        "columns",
+        "column-span",
+        "column-width",
+        "column-count",
+        "column-fill",
+        "column-gap",
+        "column-rule",
+        "column-rule-width",
+        "column-rule-style",
+        "column-rule-color",
+        "break-before",
+        "break-inside",
+        "break-after",
+        "page-break-before",
+        "page-break-inside",
+        "page-break-after",
+        "orphans",
+        "widows",
+        "zoom",
+        "max-zoom",
+        "min-zoom",
+        "user-zoom",
+        "orientation",
+        "-webkit-overflow-scrolling",
+        "-ms-overflow-scrolling"
+    ] ]
+}

assets/css/global.css

@@ -0,0 +1,471 @@
+/* Reset
+/* ---------------------------------------------------------- */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+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:before,
+blockquote:after,
+q:before,
+q:after {
+    content: "";
+    content: none;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+html {
+    box-sizing: border-box;
+    font-family: sans-serif;
+
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+a {
+    background-color: transparent;
+}
+a:active,
+a:hover {
+    outline: 0;
+}
+b,
+strong {
+    font-weight: bold;
+}
+i,
+em,
+dfn {
+    font-style: italic;
+}
+h1 {
+    margin: 0.67em 0;
+    font-size: 2em;
+}
+small {
+    font-size: 80%;
+}
+sub,
+sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+sup {
+    top: -0.5em;
+}
+sub {
+    bottom: -0.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; /* 3 */
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
+}
+button {
+    overflow: visible;
+    border: none;
+}
+button,
+select {
+    text-transform: none;
+}
+button,
+html input[type="button"],
+/* 1 */
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer; /* 3 */
+
+    -webkit-appearance: button; /* 2 */
+}
+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; /* 1 */
+    padding: 0; /* 2 */
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+input[type="search"] {
+    box-sizing: content-box; /* 2 */
+
+    -webkit-appearance: textfield; /* 1 */
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+legend {
+    padding: 0; /* 2 */
+    border: 0; /* 1 */
+}
+textarea {
+    overflow: auto;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+td,
+th {
+    padding: 0;
+}
+
+/* ==========================================================================
+   Base styles: opinionated defaults
+   ========================================================================== */
+
+html {
+    font-size: 62.5%;
+
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+    color: #35373A;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-size: 1.6rem;
+    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;
+}
+
+::selection {
+    text-shadow: none;
+    background: #daf2fd;
+}
+
+hr {
+    position: relative;
+    display: block;
+    width: 100%;
+    margin: 2.5em 0 3.5em;
+    padding: 0;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid #f0f0f0;
+}
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+    vertical-align: middle;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+textarea {
+    resize: vertical;
+}
+
+::not(.gh-content) p,
+::not(.gh-content) ul,
+::not(.gh-content) ol,
+::not(.gh-content) dl,
+::not(.gh-content) blockquote {
+    margin: 0 0 1.5em 0;
+}
+
+ol,
+ul {
+    padding-left: 1.3em;
+    padding-right: 1.5em;
+}
+
+ol ol,
+ul ul,
+ul ol,
+ol ul {
+    margin: 0.5em 0 1em;
+}
+
+ul {
+    list-style: disc;
+}
+
+ol {
+    list-style: decimal;
+}
+
+ul,
+ol {
+    max-width: 100%;
+}
+
+li {
+    padding-left: 0.3em;
+    line-height: 1.6em;
+}
+
+li + li {
+    margin-top: 0.5em;
+}
+
+dt {
+    float: left;
+    margin: 0 20px 0 0;
+    width: 120px;
+    color: #daf2fd;
+    font-weight: 500;
+    text-align: right;
+}
+
+dd {
+    margin: 0 0 5px 0;
+    text-align: left;
+}
+
+blockquote {
+    margin: 1.5em 0;
+    padding: 0 1.6em 0 1.6em;
+    border-left: #daf2fd;
+}
+
+blockquote p {
+    margin: 0.8em 0;
+    font-size: 1.2em;
+    font-weight: 300;
+}
+
+blockquote small {
+    display: inline-block;
+    margin: 0.8em 0 0.8em 1.5em;
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+/* Quotation marks */
+blockquote small:before {
+    content: "\2014 \00A0";
+}
+
+blockquote cite {
+    font-weight: bold;
+}
+blockquote cite a {
+    font-weight: normal;
+}
+
+a {
+    color: #15171A;
+    text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin-top: 0;
+    line-height: 1.15;
+    font-weight: 600;
+    text-rendering: optimizeLegibility;
+    letter-spacing: -0.01em;
+}
+
+h1 {
+    margin: 0 0 0.5em 0;
+    font-size: 4.8rem;
+    font-weight: 700;
+    letter-spacing: -0.015em;
+}
+@media (max-width: 600px) {
+    h1 {
+        font-size: 2.8rem;
+    }
+}
+
+h2 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 2.8rem;
+    font-weight: 700;
+}
+@media (max-width: 600px) {
+    h2 {
+        font-size: 2.3rem;
+    }
+}
+
+h3 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 2.4rem;
+    font-weight: 600;
+}
+@media (max-width: 600px) {
+    h3 {
+        font-size: 1.7rem;
+    }
+}
+
+h4 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 2rem;
+}
+@media (max-width: 600px) {
+    h4 {
+        font-size: 1.7rem;
+    }
+}
+
+h5 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 2rem;
+}
+
+h6 {
+    margin: 1.5em 0 0.5em 0;
+    font-size: 1.8rem;
+}

assets/fonts/casper-icons.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Generated by IcoMoon</metadata>
-<defs>
-<font id="icomoon" horiz-adv-x="512">
-<font-face units-per-em="512" ascent="480" descent="-32" />
-<missing-glyph horiz-adv-x="512" />
-<glyph unicode="&#x20;" d="" horiz-adv-x="256" />
-<glyph unicode="&#xf600;" d="M0 480v-102.4h307.2v102.4h-307.2zM0 275.2v-102.4h512v102.4h-512zM0 70.4v-102.4h204.8v102.4h-204.8zM307.2 70.4v-102.4h204.8v102.4h-204.8zM409.6 480v-102.4h102.4v102.4h-102.4z" />
-<glyph unicode="&#xf601;" d="M421.344-32c-0.4 229.616-200.752 417.264-421.344 417.696v94.304c270.656 0 512-230.304 512-512h-90.656zM343.6-31.968h-90.608c0.304 56.384-28.336 119.488-73.664 166.736-45.072 47.632-124.96 77.648-179.104 77.36v94.272c169.040-3.648 339.936-163.312 343.376-338.368zM64.256 96.048c35.312 0 63.936-28.656 63.936-64 0-35.328-28.624-63.984-63.936-63.984s-63.936 28.656-63.936 63.984c0 35.344 28.624 64 63.936 64z" />
-<glyph unicode="&#xf602;" d="M512 382.791c-18.838-8.354-39.082-14.001-60.33-16.54 21.686 13 38.343 33.585 46.186 58.115-20.298-12.039-42.778-20.78-66.705-25.49-19.16 20.415-46.461 33.17-76.673 33.17-58.011 0-105.044-47.029-105.044-105.039 0-8.233 0.929-16.25 2.72-23.939-87.3 4.382-164.701 46.2-216.509 109.753-9.042-15.514-14.223-33.558-14.223-52.809 0-36.444 18.544-68.596 46.73-87.433-17.219 0.546-33.416 5.271-47.577 13.139-0.010-0.438-0.010-0.878-0.010-1.321 0-50.894 36.209-93.348 84.261-103-8.813-2.4-18.094-3.686-27.674-3.686-6.769 0-13.349 0.66-19.764 1.886 13.368-41.73 52.16-72.103 98.126-72.948-35.95-28.175-81.243-44.967-130.458-44.967-8.479 0-16.84 0.497-25.058 1.47 46.486-29.805 101.701-47.197 161.021-47.197 193.211 0 298.868 160.062 298.868 298.872 0 4.554-0.103 9.084-0.305 13.59 20.528 14.81 38.336 33.31 52.418 54.374z" />
-<glyph unicode="&#xf603;" d="M0.403 45.168c-0.122 1.266-0.226 2.535-0.292 3.815 0.065-1.28 0.17-2.549 0.292-3.815zM117.954 197.426c46.005-1.369 76.867 46.349 68.931 106.599-7.947 60.24-51.698 108.584-97.704 109.961-46.013 1.365-76.87-44.741-68.926-105 7.941-60.234 51.676-110.187 97.699-111.56zM512 352v42.655c0 46.94-38.391 85.345-85.329 85.345h-341.328c-46.138 0-84.006-37.116-85.282-82.963 29.181 25.693 69.662 47.158 111.437 47.158 44.652 0 178.622 0 178.622 0l-39.974-33.809h-56.634c37.565-14.402 57.578-58.062 57.578-102.861 0-37.624-20.905-69.977-50.444-92.984-28.822-22.451-34.286-31.854-34.286-50.939 0-16.289 30.873-44 47.016-55.394 47.191-33.269 62.458-64.156 62.458-115.728 0-8.214-1.021-16.415-3.033-24.48h153.871c46.937 0 85.328 38.375 85.328 85.345v266.654h-96v-95.999h-32v96h-95.999v32h95.999v96h32v-96h96zM92.943 97.032c10.807 0 20.711 0.295 30.968 0.295-13.573 13.167-24.313 29.3-24.313 49.19 0 11.804 3.782 23.168 9.067 33.26-5.391-0.385-10.895-0.497-16.563-0.497-37.178 0-68.753 12.038-92.102 31.927v-33.621l0.003-100.865c26.72 12.687 58.444 20.311 92.94 20.311zM1.71 36.371c-0.556 2.729-0.983 5.503-1.271 8.317 0.287-2.814 0.715-5.588 1.271-8.317zM227.725 3.577c-7.529 29.403-34.227 43.982-71.444 69.784-13.536 4.366-28.447 6.937-44.447 7.104-44.809 0.482-86.554-17.471-110.108-44.186 7.96-38.853 42.517-68.279 83.617-68.279h143.222c0.908 5.564 1.348 11.316 1.348 17.216 0 6.267-0.767 12.396-2.188 18.361z" />
-<glyph unicode="&#xf604;" d="M426.672 480h-341.33c-46.936 0-85.342-38.407-85.342-85.344v-341.313c0-46.969 38.406-85.343 85.342-85.343l341.33 0.001c46.938 0 85.328 38.373 85.328 85.344v341.311c0 46.937-38.391 85.344-85.328 85.344zM435.296 224h-83.296v-224h-96v224h-46.263v73.282h46.263v47.593c0 64.671 27.896 103.125 103.935 103.125h87.622v-79.285h-71.565c-21.241 0.035-23.876-11.076-23.876-31.756l-0.116-39.677h96l-12.704-73.282z" />
-<glyph unicode="&#xf605;" d="M368.615 34.099c6.861-6.938 6.861-18.125 0-25.063s-17.945-6.938-24.807 0l-200.448 202.419c-6.861 6.938-6.861 18.15 0 25.063l200.448 202.445c6.861 6.938 17.945 6.938 24.807 0s6.861-18.125 0-25.063l-182.784-189.901 182.784-189.901z" />
-<glyph unicode="&#xf606;" d="M435.2 454.4h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-435.2h102.4v435.2c0 14.131-11.443 25.6-25.6 25.6zM281.6 300.8h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-281.6h102.4v281.6c0 14.131-11.443 25.6-25.6 25.6zM128 147.2h-56.32c-14.131 0-20.48-11.443-20.48-25.6v-128h102.4v128c0 14.157-11.469 25.6-25.6 25.6z" />
-<glyph unicode="&#xf607;" d="M256 428.8c-70.707 0-128-57.319-128-128 0-122.214 128-281.6 128-281.6s128 159.386 128 281.6c0 70.681-57.293 128-128 128zM256 230.144c-38.169 0-69.12 30.951-69.12 69.12s30.951 69.12 69.12 69.12 69.12-30.951 69.12-69.12-30.95-69.12-69.12-69.12z" />
-<glyph unicode="&#xf608;" d="M201.19 103.834l-20.736-20.582c-17.971-17.792-47.181-17.817-65.126 0-8.627 8.576-13.363 19.917-13.363 32.026s4.761 23.475 13.363 32.051l76.288 75.699c15.795 15.693 45.542 38.759 67.226 17.255 9.959-9.881 26.035-9.805 35.891 0.128 9.882 9.933 9.83 26.010-0.128 35.891-36.839 36.557-91.315 29.798-138.752-17.255l-76.288-75.699c-18.279-18.176-28.365-42.343-28.365-68.070 0-25.702 10.087-49.869 28.391-68.045 18.841-18.714 43.571-28.032 68.301-28.032s49.511 9.318 68.352 28.032l20.736 20.608c9.958 9.882 10.010 25.959 0.128 35.865-9.881 9.933-25.958 9.984-35.917 0.128zM432.409 397.85c-39.577 39.27-94.899 41.395-131.558 5.043l-25.831-25.626c-9.959-9.882-10.035-25.933-0.154-35.891 9.907-9.958 25.959-10.010 35.891-0.128l25.83 25.625c18.969 18.841 43.827 11.034 60.058-5.043 8.627-8.55 13.363-19.942 13.363-32.026 0-12.109-4.762-23.475-13.363-32.026l-81.408-80.742c-37.197-36.915-54.682-19.61-62.131-12.211-9.958 9.882-26.010 9.805-35.865-0.128-9.881-9.959-9.831-26.035 0.128-35.891 17.075-16.947 36.608-25.344 57.037-25.344 25.037 0 51.481 12.595 76.621 37.555l81.382 80.743c18.304 18.151 28.39 42.317 28.39 68.019s-10.087 49.894-28.39 68.070z" />
-<glyph unicode="&#xf609;" d="M64 362.667h384q8.834 0 15.084-6.25t6.25-15.083-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.083 15.084 6.25zM64 106.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25zM64 234.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25z" />
-</font></defs></svg>

assets/js/index.js

@@ -1,56 +0,0 @@
-/**
- * Main JS file for Casper behaviours
- */
-
-/* globals jQuery, document */
-(function ($, undefined) {
-    "use strict";
-
-    var $document = $(document);
-
-    $document.ready(function () {
-
-        var $postContent = $(".post-content");
-        $postContent.fitVids();
-
-        $(".scroll-down").arctic_scroll();
-
-        $(".menu-button, .nav-cover, .nav-close").on("click", function(e){
-            e.preventDefault();
-            $("body").toggleClass("nav-opened nav-closed");
-        });
-
-    });
-
-    // Arctic Scroll by Paul Adam Davis
-    // https://github.com/PaulAdamDavis/Arctic-Scroll
-    $.fn.arctic_scroll = function (options) {
-
-        var defaults = {
-            elem: $(this),
-            speed: 500
-        },
-
-        allOptions = $.extend(defaults, options);
-
-        allOptions.elem.click(function (event) {
-            event.preventDefault();
-            var $this = $(this),
-                $htmlBody = $('html, body'),
-                offset = ($this.attr('data-offset')) ? $this.attr('data-offset') : false,
-                position = ($this.attr('data-position')) ? $this.attr('data-position') : false,
-                toMove;
-
-            if (offset) {
-                toMove = parseInt(offset);
-                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top + toMove) }, allOptions.speed);
-            } else if (position) {
-                toMove = parseInt(position);
-                $htmlBody.stop(true, false).animate({scrollTop: toMove }, allOptions.speed);
-            } else {
-                $htmlBody.stop(true, false).animate({scrollTop: ($(this.hash).offset().top) }, allOptions.speed);
-            }
-        });
-
-    };
-})(jQuery);

assets/js/infinite-scroll.js

@@ -0,0 +1,112 @@
+/* eslint-env browser */
+
+/**
+ * Infinite Scroll
+ * Used on all pages where there is a list of posts (homepage, tag index, etc).
+ *
+ * When the page is scrolled to 300px from the bottom, the next page of posts
+ * is fetched by following the the <link rel="next" href="..."> that is output
+ * by {{ghost_head}}.
+ *
+ * The individual post items are extracted from the fetched pages by looking for
+ * a wrapper element with the class "post-card". Any found elements are appended
+ * to the element with the class "post-feed" in the currently viewed page.
+ */
+
+(function (window, document) {
+    // next link element
+    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 loading = false;
+
+    var lastScrollY = window.scrollY;
+    var lastWindowHeight = window.innerHeight;
+    var lastDocumentHeight = document.documentElement.scrollHeight;
+
+    function onPageLoad() {
+        if (this.status === 404) {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+            return;
+        }
+
+        // append contents
+        var postElements = this.response.querySelectorAll('article.post-card');
+        postElements.forEach(function (item) {
+            // document.importNode is important, without it the item's owner
+            // document will be different which can break resizing of
+            // `object-fit: cover` images in Safari
+            feedElement.appendChild(document.importNode(item, true));
+        });
+
+        // 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;
+        requestTick();
+    }
+
+    function onResize() {
+        lastWindowHeight = window.innerHeight;
+        lastDocumentHeight = document.documentElement.scrollHeight;
+        requestTick();
+    }
+
+    window.addEventListener('scroll', onScroll, {passive: true});
+    window.addEventListener('resize', onResize);
+
+    requestTick();
+})(window, document);

assets/js/jquery.fitvids.js

@@ -1,67 +0,0 @@
-/*global jQuery */
-/*jshint browser:true */
-/*!
-* FitVids 1.1
-*
-* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
-* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
-* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
-*
-*/
-
-(function( $ ){
-
-  "use strict";
-
-  $.fn.fitVids = function( options ) {
-    var settings = {
-      customSelector: null
-    };
-
-    if(!document.getElementById('fit-vids-style')) {
-      // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var css = '.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%;}';
-      var div = document.createElement('div');
-      div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
-      head.appendChild(div.childNodes[1]);
-    }
-
-    if ( options ) {
-      $.extend( settings, options );
-    }
-
-    return this.each(function(){
-      var selectors = [
-        "iframe[src*='player.vimeo.com']",
-        "iframe[src*='youtube.com']",
-        "iframe[src*='youtube-nocookie.com']",
-        "iframe[src*='kickstarter.com'][src*='video.html']",
-        "object",
-        "embed"
-      ];
-
-      if (settings.customSelector) {
-        selectors.push(settings.customSelector);
-      }
-
-      var $allVideos = $(this).find(selectors.join(','));
-      $allVideos = $allVideos.not("object object"); // SwfObj conflict patch
-
-      $allVideos.each(function(){
-        var $this = $(this);
-        if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
-        var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
-            width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
-            aspectRatio = height / width;
-        if(!$this.attr('id')){
-          var videoID = 'fitvid' + Math.floor(Math.random()*999999);
-          $this.attr('id', videoID);
-        }
-        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
-        $this.removeAttr('height').removeAttr('width');
-      });
-    });
-  };
-// Works with either jQuery or Zepto
-})( window.jQuery || window.Zepto );

assets/js/lib/jquery.fitvids.js

@@ -0,0 +1,89 @@
+/*jshint browser:true */
+/*!
+* FitVids 1.3
+*
+*
+* Copyright 2017, Chris Coyier + Dave Rupert + Ghost Foundation
+* This is an unofficial release, ported by John O'Nolan
+* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
+* Released under the MIT license
+*
+*/
+
+;(function( $ ){
+
+  'use strict';
+
+  $.fn.fitVids = function( options ) {
+    var settings = {
+      customSelector: null,
+      ignore: null
+    };
+
+    if(!document.getElementById('fit-vids-style')) {
+      // appendStyles: https://github.com/toddmotto/fluidvids/blob/master/dist/fluidvids.js
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var css = '.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%;}';
+      var div = document.createElement("div");
+      div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
+      head.appendChild(div.childNodes[1]);
+    }
+
+    if ( options ) {
+      $.extend( settings, options );
+    }
+
+    return this.each(function(){
+      var selectors = [
+        'iframe[src*="player.vimeo.com"]',
+        'iframe[src*="youtube.com"]',
+        'iframe[src*="youtube-nocookie.com"]',
+        'iframe[src*="kickstarter.com"][src*="video.html"]',
+        'object',
+        'embed'
+      ];
+
+      if (settings.customSelector) {
+        selectors.push(settings.customSelector);
+      }
+
+      var ignoreList = '.fitvidsignore';
+
+      if(settings.ignore) {
+        ignoreList = ignoreList + ', ' + settings.ignore;
+      }
+
+      var $allVideos = $(this).find(selectors.join(','));
+      $allVideos = $allVideos.not('object object'); // SwfObj conflict patch
+      $allVideos = $allVideos.not(ignoreList); // Disable FitVids on this video.
+
+      $allVideos.each(function(){
+        var $this = $(this);
+        if($this.parents(ignoreList).length > 0) {
+          return; // Disable FitVids on this video.
+        }
+        if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
+        if ((!$this.css('height') && !$this.css('width')) && (isNaN($this.attr('height')) || isNaN($this.attr('width'))))
+        {
+          $this.attr('height', 9);
+          $this.attr('width', 16);
+        }
+        var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(),
+            width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(),
+            aspectRatio = height / width;
+        if(!$this.attr('name')){
+          var videoName = 'fitvid' + $.fn.fitVids._count;
+          $this.attr('name', videoName);
+          $.fn.fitVids._count++;
+        }
+        $this.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+'%');
+        $this.removeAttr('height').removeAttr('width');
+      });
+    });
+  };
+
+  // Internal counter for unique video names.
+  $.fn.fitVids._count = 0;
+
+// Works with either jQuery or Zepto
+})( window.jQuery || window.Zepto );

author.hbs

@@ -1,41 +1,57 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{!-- The big featured header --}}
 
-{{!-- Everything inside the #author tags pulls data from the author --}}
-{{#author}}
-    <header class="main-header author-head {{#if cover}}" style="background-image: url({{cover}}){{else}}no-cover{{/if}}">
-        <nav class="main-nav overlay clearfix">
-            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
-            {{#if @blog.navigation}}
-                <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-            {{/if}}
-        </nav>
-    </header>
+<section class="outer">
+    <div class="inner posts">
 
-    <section class="author-profile inner">
-        {{#if image}}
-        <figure class="author-image">
-            <div class="img" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div>
-        </figure>
-        {{/if}}
-        <h1 class="author-title">{{name}}</h1>
-        {{#if bio}}
-            <h2 class="author-bio">{{bio}}</h2>
-        {{/if}}
-        <div class="author-meta">
-            {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
-            {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
-            <span class="author-stats"><i class="icon-stats"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span>
+        <header class="author-profile">
+            {{#author}}
+            {{!-- Everything inside the #author tags pulls data from the author --}}
+
+            <div class="author-profile-content">
+
+                {{#if profile_image}}
+                <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
+                {{else}}
+                <span class="author-profile-pic">{{> "icons/avatar"}}</span>
+                {{/if}}
+
+                <h1>{{name}}</h1>
+                <p>
+                    {{#if bio}}
+                        {{bio}}
+                    {{else}}
+                        {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} published
+                    {{/if}}
+                </p>
+
+                <div class="author-profile-meta">
+                    {{#if location}}
+                    <div class="author-profile-location">📍 {{location}}</div>
+                    {{/if}}
+                    {{#if website}}
+                    <span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
+                    {{/if}}
+                    {{#if twitter}}
+                    <span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
+                    {{/if}}
+                    {{#if facebook}}
+                    <span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
+                    {{/if}}
+                </div>
+
+            </div>
+
+            {{/author}}
+        </header>
+
+        <div class="post-feed">
+            {{#foreach posts}}
+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+            {{/foreach}}
         </div>
-    </section>
-{{/author}}
 
-{{!-- The main content area on the homepage --}}
-<main class="content" role="main">
-
-    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
-    {{> "loop"}}
-
-</main>
+    </div>
+</section>

default.hbs

@@ -1,54 +1,114 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}{{#match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
 <head>
-    {{!-- Document Settings --}}
+
+    {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
+    <title>{{meta_title}}</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-    {{!-- Page Meta --}}
-    <title>{{meta_title}}</title>
-    <meta name="description" content="{{meta_description}}" />
-
-    {{!-- Mobile Meta --}}
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    {{!-- Brand icon --}}
-    <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
+    <style>
+        :root {
+            {{#if @custom.header_button_background}}
+            --button-bg-color: {{@custom.header_button_background}};
+            {{/if}}
+            --button-text-color: {{#match @custom.header_button_text_color "Light"}}#fff{{else}}var(--color-darkgrey){{/match}};
+        }
+    </style>
 
-    {{!-- Styles'n'Scripts --}}
-    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
-    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
+    {{!-- Theme assets - use the {asset} helper to reference styles & scripts,
+    this will take care of caching and cache-busting automatically --}}
+    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
 
-    {{!-- Ghost outputs important style and meta data with this tag --}}
+    {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
+    it should always be the last tag before the closing head tag --}}
     {{ghost_head}}
+
 </head>
-<body class="{{body_class}} nav-closed">
+<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}">
+<div class="viewport">
 
-    {{!-- The blog navigation links --}}
-    {{navigation}}
+    <header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
+        <nav class="gh-head-inner inner gh-container">
 
-    <div class="site-wrapper">
+            <div class="gh-head-brand">
+                <a class="gh-head-logo" href="{{@site.url}}">
+                    {{#if @site.logo}}
+                        <img src="{{@site.logo}}" alt="{{@site.title}}" />
+                    {{else}}
+                        {{@site.title}}
+                    {{/if}}
+                </a>
+                <a class="gh-burger" role="button">
+                    <div class="gh-burger-box">
+                        <div class="gh-burger-inner"></div>
+                    </div>
+                </a>
+            </div>
+            <div class="gh-head-menu">
+                {{navigation}}
+            </div>
+            <div class="gh-head-actions">
+                <div class="gh-social">
+                    {{#if @site.facebook}}
+                        <a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                    {{/if}}
+                    {{#if @site.twitter}}
+                        <a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                    {{/if}}
+                </div>
 
-        {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
+                {{#unless @member}}
+                    <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
+                {{else}}
+                    <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
+                {{/unless}}
+            </div>
+        </nav>
+    </header>
+
+    <div class="site-content">
+        {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
         {{{body}}}
-
-        {{!-- The tiny footer at the very bottom --}}
-        <footer class="site-footer clearfix">
-            <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
-            <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>
-        </footer>
-
     </div>
 
-    {{!-- jQuery needs to come before `{{ghost_foot}}` so that jQuery can be used in code injection --}}
-    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
-    {{!-- Ghost outputs important scripts and data with this tag --}}
-    {{ghost_foot}}
-    {{!-- Fitvids makes video embeds responsive and awesome --}}
-    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
-    {{!-- The main JavaScript file for Casper --}}
-    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
+    {{!-- The global footer at the very bottom of the screen --}}
+    <footer class="site-footer outer">
+        <div class="inner">
+            <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
+            <nav class="site-footer-nav">
+                {{navigation type="secondary"}}
+            </nav>
+            <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
+        </div>
+    </footer>
+
+</div>
+{{!-- /.viewport --}}
+
+
+{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
+<script
+    src="https://code.jquery.com/jquery-3.5.1.min.js"
+    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+    crossorigin="anonymous">
+</script>
+<script src="{{asset "built/casper.js"}}"></script>
+<script>
+$(document).ready(function () {
+    // Mobile Menu Trigger
+    $('.gh-burger').click(function () {
+        $('body').toggleClass('gh-head-open');
+    });
+    // FitVids - Makes video embeds responsive
+    $(".gh-content").fitVids();
+});
+</script>
+
+{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
+{{ghost_foot}}
 
 </body>
 </html>

error-404.hbs

@@ -0,0 +1,37 @@
+{{!< default}}
+
+{{!--
+
+There are two error files in this theme, one for 404s and one for all other errors.
+This file is the former, and handles all 404 Page Not Found errors.
+
+The 404 error is the most common error that a visitor might see, for example when
+following a broken link
+
+Keep this template as lightweight as you can!
+
+--}}
+
+<section class="outer error-content">
+    <div class="inner">
+        <section class="error-message">
+            <h1 class="error-code">{{statusCode}}</h1>
+            <p class="error-description">{{message}}</p>
+            <a class="error-link" href="{{@site.url}}">Go to the front page →</a>
+        </section>
+    </div>
+</section>
+
+{{!-- Given that people landing on this page didn't find what they
+were looking for, let's give them some alternative stuff to read. --}}
+<aside class="read-more-wrap">
+    <div class="read-more inner">
+        {{#get "posts" include="authors" limit="3" as |more_posts|}}
+            {{#if more_posts}}
+                {{#foreach more_posts}}
+                    {{> "post-card"}}
+                {{/foreach}}
+            {{/if}}
+        {{/get}}
+    </div>
+</aside>

error.hbs

@@ -0,0 +1,74 @@
+{{!--
+
+There are two error files in this theme, one for 404s and one for all other errors.
+This file is the latter, and handle all 400/500 errors that might occur.
+
+Because 500 errors in particular usuall happen when a server is struggling, this
+template is as simple as possible. No template dependencies, no JS, no API calls.
+This is to prevent rendering the error-page itself compounding the issue causing
+the error in the first place.
+
+Keep this template as lightweight as you can!
+
+--}}
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>{{meta_title}}</title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
+</head>
+<body>
+    <div class="site-wrapper">
+
+        <header class="site-header no-image">
+            <div class="site-nav-main outer">
+                <div class="inner">
+                    <nav class="site-nav-center">
+                        {{#if @site.logo}}
+                        <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="{{@site.url}}">{{@site.title}}</a>
+                        {{/if}}
+                    </nav>
+                </div>
+            </div>
+        </header>
+
+        <main class="outer error-content">
+            <div class="inner">
+
+                <section class="error-message">
+                    <h1 class="error-code">{{statusCode}}</h1>
+                    <p class="error-description">{{message}}</p>
+                    <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">
+                        {{#foreach errorDetails}}
+                            <li>
+                                <em class="error-stack-function">{{{rule}}}</em>
+
+                                {{#foreach failures}}
+                                    <p><span class="error-stack-file">Ref: {{ref}}</span></p>
+                                    <p><span class="error-stack-file">Message: {{message}}</span></p>
+                                {{/foreach}}
+                            </li>
+                        {{/foreach}}
+                    </ul>
+                </section>
+                {{/if}}
+
+            </div>
+        </main>
+    </div>
+</body>
+</html>

gulpfile.js

@@ -0,0 +1,175 @@
+const {series, watch, src, dest, parallel} = require('gulp');
+const pump = require('pump');
+const path = require('path');
+const releaseUtils = require('@tryghost/release-utils');
+const inquirer = require('inquirer');
+
+// gulp plugins and utils
+const livereload = require('gulp-livereload');
+const postcss = require('gulp-postcss');
+const zip = require('gulp-zip');
+const concat = require('gulp-concat');
+const uglify = require('gulp-uglify');
+const beeper = require('beeper');
+const fs = require('fs');
+
+// postcss plugins
+const autoprefixer = require('autoprefixer');
+const colorFunction = require('postcss-color-mod-function');
+const cssnano = require('cssnano');
+const easyimport = require('postcss-easy-import');
+
+const REPO = 'TryGhost/Casper';
+const REPO_READONLY = 'TryGhost/Casper';
+const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
+
+function serve(done) {
+    livereload.listen();
+    done();
+}
+
+const handleError = (done) => {
+    return function (err) {
+        if (err) {
+            beeper();
+        }
+        return done(err);
+    };
+};
+
+function hbs(done) {
+    pump([
+        src(['*.hbs', 'partials/**/*.hbs']),
+        livereload()
+    ], handleError(done));
+}
+
+function css(done) {
+    pump([
+        src('assets/css/*.css', {sourcemaps: true}),
+        postcss([
+            easyimport,
+            colorFunction(),
+            autoprefixer(),
+            cssnano()
+        ]),
+        dest('assets/built/', {sourcemaps: '.'}),
+        livereload()
+    ], handleError(done));
+}
+
+function js(done) {
+    pump([
+        src([
+            // pull in lib files first so our own code can depend on it
+            'assets/js/lib/*.js',
+            'assets/js/*.js'
+        ], {sourcemaps: true}),
+        concat('casper.js'),
+        uglify(),
+        dest('assets/built/', {sourcemaps: '.'}),
+        livereload()
+    ], handleError(done));
+}
+
+function zipper(done) {
+    const filename = require('./package.json').name + '.zip';
+
+    pump([
+        src([
+            '**',
+            '!node_modules', '!node_modules/**',
+            '!dist', '!dist/**',
+            '!yarn-error.log',
+            '!yarn.lock',
+            '!gulpfile.js'
+        ]),
+        zip(filename),
+        dest('dist/')
+    ], handleError(done));
+}
+
+const cssWatcher = () => watch('assets/css/**', css);
+const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
+const watcher = parallel(cssWatcher, hbsWatcher);
+const build = series(css, js);
+
+exports.build = build;
+exports.zip = series(build, zipper);
+exports.default = series(build, serve, watcher);
+
+exports.release = async () => {
+    // @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
+    // require(./package.json) can run into caching issues, this re-reads from file everytime on release
+    let packageJSON = JSON.parse(fs.readFileSync('./package.json'));
+    const newVersion = packageJSON.version;
+
+    if (!newVersion || newVersion === '') {
+        console.log(`Invalid version: ${newVersion}`);
+        return;
+    }
+
+    console.log(`\nCreating release for ${newVersion}...`);
+
+    const githubToken = process.env.GST_TOKEN;
+
+    if (!githubToken) {
+        console.log('Please configure your environment with a GitHub token located in GST_TOKEN');
+        return;
+    }
+
+    try {
+        const result = await inquirer.prompt([{
+            type: 'input',
+            name: 'compatibleWithGhost',
+            message: 'Which version of Ghost is it compatible with?',
+            default: '4.0.0'
+        }]);
+
+        const compatibleWithGhost = result.compatibleWithGhost;
+
+        const releasesResponse = await releaseUtils.releases.get({
+            userAgent: 'Casper',
+            uri: `https://api.github.com/repos/${REPO_READONLY}/releases`
+        });
+
+        if (!releasesResponse || !releasesResponse) {
+            console.log('No releases found. Skipping...');
+            return;
+        }
+
+        let previousVersion = releasesResponse[0].tag_name || releasesResponse[0].name;
+        console.log(`Previous version: ${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 newReleaseResponse = await releaseUtils.releases.create({
+            draft: true,
+            preRelease: false,
+            tagName: 'v' + newVersion,
+            releaseName: newVersion,
+            userAgent: 'Casper',
+            uri: `https://api.github.com/repos/${REPO}/releases`,
+            github: {
+                token: githubToken
+            },
+            content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
+            changelogPath: CHANGELOG_PATH
+        });
+        console.log(`\nRelease draft generated: ${newReleaseResponse.releaseUrl}\n`);
+    } catch (err) {
+        console.error(err);
+        process.exit(1);
+    }
+};

index.hbs

@@ -1,27 +1,45 @@
 {{!< default}}
-{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
+{{!-- The tag above means: insert everything in this file
+into the {body} of the default.hbs template --}}
 
-{{!-- The big featured header --}}
-<header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
-    <nav class="main-nav overlay clearfix">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
+{{#match @custom.publication_cover_style "!=" "None"}}
+    <div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
+        {{#if @site.cover_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 class="site-header-cover"
+                srcset="{{img_url @site.cover_image size="s"}} 300w,
+                        {{img_url @site.cover_image size="m"}} 600w,
+                        {{img_url @site.cover_image size="l"}} 1000w,
+                        {{img_url @site.cover_image size="xl"}} 2000w"
+                sizes="100vw"
+                src="{{img_url @site.cover_image size="xl"}}"
+                alt=""
+            />
         {{/if}}
-    </nav>
-    <div class="vertical">
-        <div class="main-header-content inner">
-            <h1 class="page-title">{{@blog.title}}</h1>
-            <h2 class="page-description">{{@blog.description}}</h2>
-        </div>
+        <h1 class="site-title">
+            {{#if @site.logo}}
+                <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
+            {{else}}
+                {{@site.title}}
+            {{/if}}
+        </h1>
+        <p>{{@site.description}}</p>
     </div>
-    <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
-</header>
+{{/match}}
 
-{{!-- The main content area on the homepage --}}
-<main id="content" class="content" role="main">
+{{!-- The main content area --}}
+<main id="site-main" class="site-main outer">
+    <div class="inner posts">
 
-    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
-    {{> "loop"}}
+        <div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
+            {{#foreach posts}}
 
+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+
+            {{/foreach}}
+        </div>
+
+    </div>
 </main>

package.json

@@ -1,36 +1,187 @@
 {
     "name": "casper",
-    "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
+    "description": "A clean, minimal default theme for the Ghost publishing platform",
     "demo": "https://demo.ghost.io",
-    "version": "1.3.5",
+    "version": "4.3.0",
     "engines": {
-        "ghost": ">=0.9.0 <1.0.0"
+        "ghost": ">=4.0.0",
+        "ghost-api": "v4"
     },
     "license": "MIT",
     "screenshots": {
         "desktop": "assets/screenshot-desktop.jpg",
         "mobile": "assets/screenshot-mobile.jpg"
     },
+    "scripts": {
+        "dev": "gulp",
+        "zip": "gulp zip",
+        "test": "gscan .",
+        "test:ci": "gscan --fatal --verbose .",
+        "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",
-        "url": "https://ghost.org"
+        "url": "https://ghost.org/"
     },
     "gpm": {
         "type": "theme",
         "categories": [
             "Minimal",
-            "Personal Blogs"
+            "Magazine"
         ]
     },
     "keywords": [
         "ghost",
-        "theme"
+        "theme",
+        "ghost-theme"
     ],
     "repository": {
         "type": "git",
         "url": "https://github.com/TryGhost/Casper.git"
     },
     "bugs": "https://github.com/TryGhost/Casper/issues",
-    "contributors": "https://github.com/TryGhost/Casper/graphs/contributors"
+    "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
+    "devDependencies": {
+        "@tryghost/release-utils": "0.6.12",
+        "autoprefixer": "10.2.5",
+        "beeper": "2.1.0",
+        "cssnano": "4.1.10",
+        "gscan": "4.11.1",
+        "gulp": "4.0.2",
+        "gulp-concat": "2.6.1",
+        "gulp-livereload": "4.0.2",
+        "gulp-postcss": "9.0.0",
+        "gulp-uglify": "3.0.2",
+        "gulp-zip": "5.1.0",
+        "inquirer": "8.0.0",
+        "postcss": "8.2.8",
+        "postcss-color-mod-function": "3.0.3",
+        "postcss-easy-import": "3.0.0",
+        "pump": "3.0.0"
+    },
+    "browserslist": [
+        "defaults"
+    ],
+    "config": {
+        "posts_per_page": 25,
+        "image_sizes": {
+            "xxs": {
+                "width": 30
+            },
+            "xs": {
+                "width": 100
+            },
+            "s": {
+                "width": 300
+            },
+            "m": {
+                "width": 600
+            },
+            "l": {
+                "width": 1000
+            },
+            "xl": {
+                "width": 2000
+            }
+        },
+        "card_assets": true,
+        "custom": {
+            "title_font": {
+                "type": "select",
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif"
+                ],
+                "default": "Modern sans-serif"
+            },
+            "body_font": {
+                "type": "select",
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif"
+                ],
+                "default": "Elegant serif"
+            },
+            "publication_cover_style": {
+                "type": "select",
+                "options": [
+                    "None",
+                    "Medium",
+                    "Large"
+                ],
+                "default": "Medium",
+                "group": "homepage"
+            },
+            "feed_layout": {
+                "type": "select",
+                "options": [
+                    "Dynamic grid",
+                    "Simple grid",
+                    "List"
+                ],
+                "default": "Dynamic grid",
+                "group": "homepage"
+            },
+            "color_scheme": {
+                "type": "select",
+                "options": [
+                    "Light",
+                    "Dark",
+                    "Auto"
+                ],
+                "default": "Light"
+            },
+            "header_button_background": {
+                "type": "color",
+                "default": "#ffffff"
+            },
+            "header_button_text_color": {
+                "type": "select",
+                "options": [
+                    "Light",
+                    "Dark"
+                ],
+                "default": "Dark"
+            },
+            "post_image_width": {
+                "type": "select",
+                "options": [
+                    "Wide",
+                    "Full",
+                    "Small"
+                ],
+                "default": "Wide",
+                "group": "post"
+            },
+            "email_signup_for_logged_out_visitors": {
+                "type": "select",
+                "options": [
+                    "Footer",
+                    "Bottom of post",
+                    "None"
+                ],
+                "default": "Footer",
+                "group": "post"
+            },
+            "email_signup_text": {
+                "type": "text",
+                "default": "Sign up for more like this.",
+                "group": "post"
+            },
+            "show_recent_posts": {
+                "type": "boolean",
+                "default": true,
+                "group": "post"
+            }
+        }
+    },
+    "renovate": {
+        "extends": [
+            "@tryghost:theme"
+        ]
+    }
 }

page.hbs

@@ -1,31 +1,45 @@
 {{!< default}}
 
-{{!-- This is a page template. A page outputs content just like any other post, and has all the same
-    attributes by default, but you can also customise it to behave differently if you prefer. --}}
+{{!-- The tag above means: insert everything in this file
+into the {body} tag of the default.hbs template --}}
+
 
-{{!-- Everything inside the #post tags pulls data from the page --}}
 {{#post}}
+{{!-- Everything inside the #post block pulls data from the page --}}
 
-<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
-    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-</header>
+<main id="site-main" class="site-main">
+    <article class="article {{post_class}}">
 
-<main class="content" role="main">
-    <article class="{{post_class}}">
-
-        <header class="post-header">
-            <h1 class="post-title">{{title}}</h1>
+        <header class="article-header gh-canvas">
+            {{#if feature_image}}
+            <figure class="article-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="(min-width: 1400px) 1400px, 92vw"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+            {{/if}}
         </header>
 
-        <section class="post-content">
+        <section class="gh-content gh-canvas">
+
+            <h1 class="article-title">{{title}}</h1>
+
             {{content}}
+
         </section>
 
     </article>
 </main>
-{{/post}}
+
+{{/post}}

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/icons/facebook.hbs

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm5.204 4.911h-3.546c-2.103 0-4.443.885-4.443 3.934.01 1.062 0 2.08 0 3.225h-2.433v3.872h2.509v11.147h4.61v-11.22h3.042l.275-3.81h-3.397s.007-1.695 0-2.187c0-1.205 1.253-1.136 1.329-1.136h2.054V4.911z" /></svg>

partials/icons/loader.hbs

@@ -0,0 +1,11 @@
+<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+    y="0px" width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
+    <path opacity="0.2" fill="#000" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
+s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
+c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
+    <path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
+C22.32,8.481,24.301,9.057,26.013,10.047z">
+        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
+            dur="0.5s" repeatCount="indefinite" />
+    </path>
+</svg>

partials/icons/rss.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"/><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/></svg>

partials/icons/twitter.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>

partials/loop.hbs

@@ -1,25 +0,0 @@
-{{!-- Previous/next page links - only displayed on page 2+ --}}
-<div class="extra-pagination inner">
-    {{pagination}}
-</div>
-
-{{!-- This is the post loop - each post will be output using this markup --}}
-{{#foreach posts}}
-<article class="{{post_class}}">
-    <header class="post-header">
-        <h2 class="post-title"><a href="{{url}}">{{title}}</a></h2>
-    </header>
-    <section class="post-excerpt">
-        <p>{{excerpt words="26"}} <a class="read-more" href="{{url}}">&raquo;</a></p>
-    </section>
-    <footer class="post-meta">
-        {{#if author.image}}<img class="author-thumb" src="{{author.image}}" alt="{{author.name}}" nopin="nopin" />{{/if}}
-        {{author}}
-        {{tags prefix=" on "}}
-        <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time>
-    </footer>
-</article>
-{{/foreach}}
-
-{{!-- Previous/next page links - displayed on every page --}}
-{{pagination}}

partials/navigation.hbs

@@ -1,17 +0,0 @@
-<div class="nav">
-    <h3 class="nav-title">Menu</h3>
-    <a href="#" class="nav-close">
-        <span class="hidden">Close</span>
-    </a>
-    <ul>
-        {{#foreach navigation}}
-            <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="presentation"><a href="{{url absolute="true"}}">{{label}}</a></li>
-        {{/foreach}}
-    </ul>
-    {{#if @labs.subscribers}}
-        <a class="subscribe-button" href="{{@blog.url}}/subscribe/">Subscribe</a>
-    {{else}}
-        <a class="subscribe-button icon-feed" href="{{@blog.url}}/rss/">Subscribe</a>
-    {{/if}}
-</div>
-<span class="nav-cover"></span>

partials/post-card.hbs

@@ -0,0 +1,61 @@
+{{!-- This is a partial file used to generate a post "card"
+which templates loop over to generate a list of posts. --}}
+
+<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#if feature_image}}post-card-large{{/if}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">
+
+    {{#if feature_image}}
+    <a class="post-card-image-link" href="{{url}}">
+        {{!-- 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, 800px"
+            src="{{img_url feature_image size="m"}}"
+            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+            loading="lazy"
+        />
+    </a>
+    {{/if}}
+
+    <div class="post-card-content">
+
+        <a class="post-card-content-link" href="{{url}}">
+            <header class="post-card-header">
+                {{#if primary_tag}}
+                    {{#primary_tag}}
+                    <div class="post-card-primary-tag">{{name}}</div>
+                    {{/primary_tag}}
+                {{/if}}
+                <h2 class="post-card-title">{{title}}</h2>
+            </header>
+            <div class="post-card-excerpt">
+                <p>{{excerpt}}</p>
+            </div>
+        </a>
+
+        <footer class="post-card-meta">
+            <ul class="author-list">
+                {{#foreach authors}}
+                <li class="author-list-item">
+                    {{#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>
+            <div class="post-card-byline-content">
+                <span>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
+                <span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
+            </div>
+        </footer>
+
+    </div>{{!--/.post-card-content--}}
+
+</article>

post.hbs

@@ -1,110 +1,126 @@
 {{!< default}}
 
-{{!-- The comment above "< default" means - insert everything in this file into
-    the {{{body}}} of the default.hbs template, containing the blog header/footer. --}}
+{{!-- The tag above means: insert everything in this file
+into the {body} tag of the default.hbs template --}}
+
 
-{{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
+{{!-- Everything inside the #post block pulls data from the post --}}
 
-<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
-    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-</header>
+<main id="site-main" class="site-main">
+    <article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
 
-<main class="content" role="main">
-    <article class="{{post_class}}">
+        <header class="article-header gh-canvas">
 
-        <header class="post-header">
-            <h1 class="post-title">{{title}}</h1>
-            <section class="post-meta">
-                <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time> {{tags prefix=" on "}}
+            {{#if primary_tag}}
+            <section class="article-tag">
+                <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
             </section>
+            {{/if}}
+
+            <h1 class="article-title">{{title}}</h1>
+
+            {{#if custom_excerpt}}
+            <p class="article-excerpt">{{custom_excerpt}}</p>
+            {{/if}}
+
+            <div class="article-byline">
+                <section class="article-byline-content">
+                    <ul class="author-list">
+                        {{#foreach authors}}
+                        <li class="author-list-item">
+                            {{#if profile_image}}
+                            <a href="{{url}}" class="author-avatar">
+                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                            </a>
+                            {{else}}
+                            <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
+                            {{/if}}
+                        </li>
+                        {{/foreach}}
+                    </ul>
+                    <div class="article-byline-meta">
+                        <h4 class="author-name">{{authors}}</h4>
+                        <div class="byline-meta-content">
+                            <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                            <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
+            {{#if feature_image}}
+            <figure class="article-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="(min-width: 1400px) 1400px, 92vw"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+            {{/if}}
         </header>
 
-        <section class="post-content">
+        <section class="gh-content gh-canvas">
             {{content}}
         </section>
 
-        <footer class="post-footer">
-
-        {{!-- Everything inside the #author tags pulls data from the author --}}
-        {{#author}}
-
-            {{#if image}}
-            <figure class="author-image">
-                <a class="img" href="{{url}}" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></a>
-            </figure>
-            {{/if}}
-
-            <section class="author">
-                <h4><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}}
-                <div class="author-meta">
-                    {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
-                    {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
-                </div>
-            </section>
-
-        {{/author}}
-
-            <section class="share">
-                <h4>Share this post</h4>
-                <a class="icon-twitter" href="https://twitter.com/intent/tweet?text={{encode title}}&amp;url={{url absolute="true"}}"
-                    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
-                    <span class="hidden">Twitter</span>
-                </a>
-                <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
-                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
-                    <span class="hidden">Facebook</span>
-                </a>
-                <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
-                   onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
-                    <span class="hidden">Google+</span>
-                </a>
-            </section>
-
-            {{!-- Email subscribe form at the bottom of the page --}}
-            {{#if @labs.subscribers}}
-            <section class="gh-subscribe">
-                <h3 class="gh-subscribe-title">Subscribe to {{@blog.title}}</h3>
-                <p>Get the latest posts delivered right to your inbox.</p>
-                {{subscribe_form placeholder="Your email address"}}
-                <span class="gh-subscribe-rss">or subscribe <a href="http://cloud.feedly.com/#subscription/feed/{{@blog.url}}/rss/">via RSS</a> with Feedly!</span>
-            </section>
-            {{/if}}
-
-        </footer>
+        {{!--
+        <section class="article-comments gh-canvas">
+            If you want to embed comments, this is a good place to paste your code!
+        </section>
+        --}}
 
     </article>
 </main>
 
-{{!-- Links to Previous/Next posts --}}
-<aside class="read-next">
-    {{#next_post}}
-    <a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
-        <section class="post">
-            <h2>{{title}}</h2>
-            <p>{{excerpt words="19"}}&hellip;</p>
-        </section>
-    </a>
-    {{/next_post}}
-    {{#prev_post}}
-    <a class="read-next-story prev {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
-        <section class="post">
-            <h2>{{title}}</h2>
-            <p>{{excerpt words="19"}}&hellip;</p>
-        </section>
-    </a>
-    {{/prev_post}}
-</aside>
+{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
+{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
+{{#unless @member}}{{#if access}}
+    <section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
+        <div class="inner">
+            {{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
+            <a class="footer-cta-button" href="#/portal" data-portal>
+                <div class="footer-cta-input">Enter your email</div>
+                <span>Subscribe</span>
+            </a>
+            {{!-- ^ This looks like a form element, but it's just a link to Portal,
+            making the form validation and submission much simpler. --}}
+        </div>
+    </section>
+{{/if}}{{/unless}}
+{{/match}}
 
-{{/post}}
+
+{{!-- Read more links, just above the footer --}}
+{{#if @custom.show_recent_posts}}
+<aside class="read-more-wrap">
+    <div class="read-more inner">
+
+        {{!-- The {#get} helper below fetches some of the latest posts here
+        so that people have something else to read when they finish this one.
+
+        This query gets the latest 3 posts on the site, but adds a filter to
+        exclude the post we're currently on from being included. --}}
+
+        {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
+            {{#if more_posts}}
+                {{#foreach more_posts}}
+                    {{> "post-card"}}
+                {{/foreach}}
+            {{/if}}
+        {{/get}}
+
+    </div>
+</aside>
+{{/if}}
+
+{{/post}}

tag.hbs

@@ -1,34 +1,57 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{!-- If we have a tag cover, display that - else blog cover - else nothing --}}
-<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
-    <nav class="main-nav overlay clearfix">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-    <div class="vertical">
-        {{#tag}}
-        <div class="main-header-content inner">
-            <h1 class="page-title">{{name}}</h1>
-            <h2 class="page-description">
-                {{#if description}}
-                    {{description}}
-                {{else}}
-                    A {{../pagination.total}}-post collection
+
+<main id="site-main" class="site-main outer">
+    <div class="inner posts">
+        <div class="post-feed">
+
+            {{#tag}}
+            <section class="post-card post-card-large">
+                {{#if feature_image}}
+                <div class="post-card-image-link">
+                    {{!-- 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, 800px"
+                        src="{{img_url feature_image size="m"}}"
+                        alt="{{title}}"
+                        loading="lazy"
+                    />
+                </div>
                 {{/if}}
-            </h2>
+                <div class="post-card-content">
+                    <div class="post-card-content-link">
+                        <header class="post-card-header">
+                            <div class="post-card-primary-tag">Tagged</div>
+                            <h2 class="post-card-title">{{name}}</h2>
+                        </header>
+                        <div class="post-card-excerpt">
+                            <p>
+                                {{#if description}}
+                                {{description}}
+                                {{else}}
+                                A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
+                                {{/if}}
+                            </p>
+                        </div>
+                    </div>
+                </div>{{!--/.post-card-content--}}
+
+            </section>
+            {{/tag}}
+
+            {{#foreach posts}}
+
+                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+                {{> "post-card"}}
+
+            {{/foreach}}
+
         </div>
-        {{/tag}}
     </div>
-</header>
-
-{{!-- The main content area on the homepage --}}
-<main class="content" role="main">
-
-    {{!-- The tag below includes the post loop - partials/loop.hbs --}}
-    {{> "loop"}}
-
 </main>