v5.4.1

fixes #895

.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 The Ghost Foundation
+Copyright (c) 2013-2022 Ghost Foundation
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation
@@ -19,4 +19,4 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
-OTHER DEALINGS IN THE SOFTWARE.
+OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,14 +1,69 @@
-# Casper v0.2.0
+# 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.
 
-## Copyright & License
+ 
 
-Copyright (C) 2013 The Ghost Foundation - Released under the MIT Lincense.
+![screenshot-desktop](https://user-images.githubusercontent.com/1418797/183329195-8e8f2ee5-a473-4694-a813-a2575491209e.png)
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ 
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+# First time using a Ghost theme?
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+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-2022 Ghost Foundation - Released under the [MIT license](LICENSE).

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{border:0;font:inherit;font-size:100%;margin:0;padding:0;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;height:auto;max-width:100%}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;box-sizing:border-box;font-family:sans-serif}*,: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{font-size:2em;margin:.67em 0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;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}kbd{background:#f6f8fa;border:1px solid rgba(124,139,154,.25);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(124,139,154,.25);font-family:var(--font-mono);font-size:1.5rem;padding:3px 5px}@media (max-width:600px){kbd{font-size:1.3rem}}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{border:none;overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding: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]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{border:0;padding:0}textarea{overflow:auto}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{-webkit-tap-highlight-color:rgba(0,0,0,0);font-size:62.5%}body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on;background:#fff;color:var(--color-darkgrey);font-family:var(--font-sans);font-size:1.6rem;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.6em}::-moz-selection{background:#daf2fd;text-shadow:none}::selection{background:#daf2fd;text-shadow:none}hr{border:0;border-top:1px solid #f0f0f0;display:block;height:1px;margin:2.5em 0 3.5em;padding:0;position:relative;width:100%}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding: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{line-height:1.6em;padding-left:.3em}li+li{margin-top:.5em}dt{color:#daf2fd;float:left;font-weight:500;margin:0 20px 0 0;text-align:right;width:120px}dd{margin:0 0 5px;text-align:left}blockquote{border-left:#daf2fd;margin:1.5em 0;padding:0 1.6em}blockquote small{display:inline-block;font-size:.9em;margin:.8em 0 .8em 1.5em;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{text-rendering:optimizeLegibility;font-weight:600;letter-spacing:-.01em;line-height:1.15;margin-top:0}h1{font-size:4.8rem;font-weight:700;letter-spacing:-.015em;margin:0 0 .5em}@media (max-width:600px){h1{font-size:2.8rem}}h2{font-size:2.8rem;font-weight:700;margin:1.5em 0 .5em}@media (max-width:600px){h2{font-size:2.3rem}}h3{font-size:2.4rem;font-weight:600;margin:1.5em 0 .5em}@media (max-width:600px){h3{font-size:1.7rem}}h4{font-size:2rem;margin:1.5em 0 .5em}@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/global.css

@@ -0,0 +1,479 @@
+/* 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;
+}
+kbd {
+    padding: 3px 5px;
+    font-family: var(--font-mono);
+    font-size: 1.5rem;
+    background: #f6f8fa;
+    border: 1px solid rgba(124, 139, 154, 0.25);
+    border-radius: 6px;
+    box-shadow: inset 0 -1px 0 rgba(124, 139, 154, 0.25);
+}
+@media (max-width: 600px) {
+    kbd {
+        font-size: 1.3rem;
+    }
+}
+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: var(--color-darkgrey);
+    font-family: var(--font-sans);
+    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 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/js/dropdown.js

@@ -0,0 +1,81 @@
+(function () {
+    const mediaQuery = window.matchMedia('(max-width: 991px)');
+
+    const menu = document.querySelector('.gh-head-menu');
+    const nav = menu.querySelector('.nav');
+    if (!nav) return;
+
+    const logo = document.querySelector('.gh-head-logo');
+    const navHTML = nav.innerHTML;
+
+    if (mediaQuery.matches) {
+        const items = nav.querySelectorAll('li');
+        items.forEach(function (item, index) {
+            item.style.transitionDelay = 0.03 * (index + 1) + 's';
+        });
+    }
+
+    const makeDropdown = function () {
+        if (mediaQuery.matches) return;
+        const submenuItems = [];
+
+        while ((nav.offsetWidth + 64) > menu.offsetWidth) {
+            if (nav.lastElementChild) {
+                submenuItems.unshift(nav.lastElementChild);
+                nav.lastElementChild.remove();
+            } else {
+                return;
+            }
+        }
+
+        if (!submenuItems.length) {
+            document.body.classList.add('is-dropdown-loaded');
+            return;
+        }
+
+        const toggle = document.createElement('button');
+        toggle.setAttribute('class', 'nav-more-toggle');
+        toggle.setAttribute('aria-label', 'More');
+        toggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="currentColor"><path d="M21.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM13.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0zM5.333 16c0-1.473 1.194-2.667 2.667-2.667v0c1.473 0 2.667 1.194 2.667 2.667v0c0 1.473-1.194 2.667-2.667 2.667v0c-1.473 0-2.667-1.194-2.667-2.667v0z"></path></svg>';
+
+        const wrapper = document.createElement('div');
+        wrapper.setAttribute('class', 'gh-dropdown');
+
+        if (submenuItems.length >= 10) {
+            document.body.classList.add('is-dropdown-mega');
+            wrapper.style.gridTemplateRows = 'repeat(' + Math.ceil(submenuItems.length / 2) + ', 1fr)';
+        } else {
+            document.body.classList.remove('is-dropdown-mega');
+        }
+
+        submenuItems.forEach(function (child) {
+            wrapper.appendChild(child);
+        });
+
+        toggle.appendChild(wrapper);
+        nav.appendChild(toggle);
+
+        document.body.classList.add('is-dropdown-loaded');
+
+        toggle.addEventListener('click', function () {
+            document.body.classList.toggle('is-dropdown-open');
+        });
+
+        window.addEventListener('click', function (e) {
+            if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
+                document.body.classList.remove('is-dropdown-open');
+            }
+        });
+    }
+
+    imagesLoaded(logo, function () {
+        makeDropdown();
+    });
+
+    window.addEventListener('resize', function () {
+        setTimeout(function () {
+            nav.innerHTML = navHTML;
+            makeDropdown();
+        }, 1);
+    });
+})();

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/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

@@ -0,0 +1,70 @@
+{{!< default}}
+{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
+
+<main id="site-main" class="site-main outer">
+<div class="post-feed inner">
+
+    {{#author}}
+    <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}}"
+            />
+        </div>
+        {{/if}}
+
+        <div class="post-card-content">
+        <div class="post-card-content-link">
+
+            {{#if profile_image}}
+                <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
+            {{/if}}
+
+            <header class="post-card-header">
+                <h2 class="post-card-title">{{name}}</h2>
+            </header>
+
+            {{#if bio}}
+                <div class="post-card-excerpt">{{bio}}</div>
+            {{/if}}
+
+            <footer class="author-profile-footer">
+                {{#if location}}
+                    <div class="author-profile-location">{{location}}</div>
+                {{/if}}
+                <div class="author-profile-meta">
+                    {{#if website}}
+                        <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
+                    {{/if}}
+                    {{#if twitter}}
+                        <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                    {{/if}}
+                    {{#if facebook}}
+                        <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                    {{/if}}
+                </div>
+            </footer>
+
+        </div>
+        </div>
+
+    </section>
+    {{/author}}
+
+    {{#foreach posts}}
+        {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+        {{> "post-card"}}
+    {{/foreach}}
+
+</div>
+</main>

css/boilerplate.css

@@ -1,267 +0,0 @@
-/*
- * HTML5 Boilerplate
- *
- * What follows is the result of much research on cross-browser styling.
- * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
- * Kroc Camen, and the H5BP dev community and team.
- */
-
-/* ==========================================================================
-   Base styles: opinionated defaults
-   ========================================================================== */
-
-html,
-button,
-input,
-select,
-textarea {
-    color: #222;
-}
-
-body {
-    font-size: 1em;
-    line-height: 1.4;
-}
-
-/*
- * Remove text-shadow in selection highlight: h5bp.com/i
- * These selection declarations have to be separate.
- * Customize the background color to match your design.
- */
-
-::-moz-selection {
-    background: #ff0054;
-    color:#fff;
-    text-shadow: none;
-}
-
-::selection {
-    background: #ff0054;
-    color:#fff;
-    text-shadow: none;
-}
-
-/*
- * A better looking default horizontal rule
- */
-
-hr {
-    display: block;
-    height: 1px;
-    border: 0;
-    border-top: 1px solid #dadada;
-    margin: 3em 0;
-    padding: 0;
-}
-
-/*
- * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
- */
-
-img {
-    vertical-align: middle;
-}
-
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
-    resize: vertical;
-}
-
-/* ==========================================================================
-   Helper classes
-   ========================================================================== */
-
-/*
- * Image replacement
- */
-
-.ir {
-    background-color: transparent;
-    border: 0;
-    overflow: hidden;
-    /* IE 6/7 fallback */
-    *text-indent: -9999px;
-}
-
-.ir:before {
-    content: "";
-    display: block;
-    width: 0;
-    height: 100%;
-}
-
-/*
- * Hide from both screenreaders and browsers: h5bp.com/u
- */
-
-.hidden {
-    display: none !important;
-    visibility: hidden;
-}
-
-/*
- * Hide only visually, but have it available for screenreaders: h5bp.com/v
- */
-
-.visuallyhidden,
-.screen-reader-text {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-/*
- * Extends the .visuallyhidden class to allow the element to be focusable
- * when navigated to via the keyboard: h5bp.com/p
- */
-
-.visuallyhidden.focusable:active,
-.visuallyhidden.focusable:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
-}
-
-/*
- * Hide visually and from screenreaders, but maintain layout
- */
-
-.invisible {
-    visibility: hidden;
-}
-
-/*
- * Clearfix: contain floats
- *
- * For modern browsers
- * 1. The space content is one way to avoid an Opera bug when the
- *    `contenteditable` attribute is included anywhere else in the document.
- *    Otherwise it causes space to appear at the top and bottom of elements
- *    that receive the `clearfix` class.
- * 2. The use of `table` rather than `block` is only necessary if using
- *    `:before` to contain the top-margins of child elements.
- */
-
-.clearfix:before,
-.clearfix:after {
-    content: " "; /* 1 */
-    display: table; /* 2 */
-}
-
-.clearfix:after {
-    clear: both;
-}
-
-/*
- * For IE 6/7 only
- * Include this rule to trigger hasLayout and contain floats.
- */
-
-.clearfix {
-    *zoom: 1;
-}
-
-/*
- * Some standard WordPress classes commonly used by themes/plugins.
- */
-
-.alignleft {
-    float:left;
-}
-
-.alignright {
-    float:right;
-}
-
-/* ==========================================================================
-   Print styles.
-   Inlined to avoid required HTTP connection: h5bp.com/r
-   ========================================================================== */
-
-@media print {
-    * {
-        background: transparent !important;
-        color: #000 !important; /* Black prints faster: h5bp.com/s */
-        box-shadow: none !important;
-        text-shadow: none !important;
-    }
-
-    a,
-    a:visited {
-        text-decoration: underline;
-    }
-
-    a[href]:after {
-        content: " (" attr(href) ")";
-    }
-
-    abbr[title]:after {
-        content: " (" attr(title) ")";
-    }
-
-    /*
-     * Don't show links for images, or javascript/internal links
-     */
-
-    .ir a:after,
-    a[href^="javascript:"]:after,
-    a[href^="#"]:after {
-        content: "";
-    }
-
-    pre,
-    blockquote {
-        border: 1px solid #999;
-        page-break-inside: avoid;
-    }
-
-    thead {
-        display: table-header-group; /* h5bp.com/t */
-    }
-
-    tr,
-    img {
-        page-break-inside: avoid;
-    }
-
-    img {
-        max-width: 100% !important;
-    }
-
-    @page {
-        margin: 0.5cm;
-    }
-
-    p,
-    h2,
-    h3 {
-        orphans: 3;
-        widows: 3;
-    }
-
-    h2,
-    h3 {
-        page-break-after: avoid;
-    }
-}

css/fonts.css

@@ -1,11 +0,0 @@
-@font-face {
-    font-family: 'galette';
-    src: url('../fonts/galette-med-webfont.eot');
-    src: url('../fonts/galette-med-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../fonts/galette-med-webfont.woff') format('woff'),
-         url('../fonts/galette-med-webfont.ttf') format('truetype'),
-         url('../fonts/galette-med-webfont.svg#galetteregular') format('svg');
-    font-weight: normal;
-    font-style: normal;
-
-}

css/normalize.css

@@ -1,511 +0,0 @@
-/*! normalize.css v1.0.2 | MIT License | git.io/normalize */
-
-/* ==========================================================================
-   HTML5 display definitions
-   ========================================================================== */
-
-/*
- * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
- */
-
-main,
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-nav,
-section,
-summary {
-    display: block;
-}
-
-/*
- * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
- */
-
-audio,
-canvas,
-video {
-    display: inline-block;
-    *display: inline;
-    *zoom: 1;
-}
-
-/*
- * Prevents modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-    display: none;
-    height: 0;
-}
-
-/*
- * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
- * and Safari 4.
- * Known issue: no IE 6 support.
- */
-
-[hidden] {
-    display: none;
-}
-
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-/*
- * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
- *    `em` units.
- * 2. Prevents iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-    font-size: 100%; /* 1 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-    -ms-text-size-adjust: 100%; /* 2 */
-}
-
-/*
- * Addresses `font-family` inconsistency between `textarea` and other form
- * elements.
- */
-
-html,
-button,
-input,
-select,
-textarea {
-    font-family: sans-serif;
-}
-
-/*
- * Addresses margins handled incorrectly in IE 6/7.
- */
-
-body {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Links
-   ========================================================================== */
-
-/*
- * Addresses `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
-    outline: thin dotted;
-}
-
-/*
- * Improves readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-    outline: 0;
-}
-
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
-/*
- * Addresses font sizes and margins set differently in IE 6/7.
- * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
- * and Chrome.
- */
-
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
-h2 {
-    font-size: 1.5em;
-    margin: 0.83em 0;
-}
-
-h3 {
-    font-size: 1.17em;
-    margin: 1em 0;
-}
-
-h4 {
-    font-size: 1em;
-    margin: 1.33em 0;
-}
-
-h5 {
-    font-size: 0.83em;
-    margin: 1.67em 0;
-}
-
-h6 {
-    font-size: 0.67em;
-    margin: 2.33em 0;
-}
-
-/*
- * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
- */
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-/*
- * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
- */
-
-b,
-strong {
-    font-weight: bold;
-}
-
-blockquote {
-    margin: 1em 40px;
-}
-
-/*
- * Addresses styling not present in Safari 5 and Chrome.
- */
-
-dfn {
-    font-style: italic;
-}
-
-/*
- * Addresses styling not present in IE 6/7/8/9.
- */
-
-mark {
-    background: #ff0;
-    color: #000;
-}
-
-/*
- * Addresses margins set differently in IE 6/7.
- */
-
-p {
-    margin: 1em 0;
-}
-
-/*
- * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
- */
-
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, serif;
-    _font-family: 'courier new', monospace;
-    font-size: 1em;
-}
-
-/*
- * Improves readability of pre-formatted text in all browsers.
- */
-
-pre {
-    margin: 1.5em 0;
-    white-space: pre;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-}
-
-/*
- * Addresses CSS quotes not supported in IE 6/7.
- */
-
-q {
-    quotes: none;
-}
-
-/*
- * Addresses `quotes` property not supported in Safari 4.
- */
-
-q:before,
-q:after {
-    content: '';
-    content: none;
-}
-
-/*
- * Addresses inconsistent and variable font size in all browsers.
- */
-
-small {
-    font-size: 80%;
-}
-
-/*
- * Prevents `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-
-sup {
-    top: -0.5em;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-/* ==========================================================================
-   Lists
-   ========================================================================== */
-
-/*
- * Addresses margins set differently in IE 6/7.
- */
-
-dl,
-menu,
-ol,
-ul {
-    margin: 1em 0;
-}
-
-dd {
-    margin: 0 0 0 2em;
-}
-
-/*
- * Addresses paddings set differently in IE 6/7.
- */
-
-menu,
-ol,
-ul {
-    padding: 0 0 0 2em;
-}
-
-/*
- * Corrects list images handled incorrectly in IE 7.
- */
-
-nav ul,
-nav ol {
-    list-style: none;
-    list-style-image: none;
-}
-
-li {
-    padding:0;
-    margin-top:5px;
-    line-height: 1.6em;
-}
-
-/* ==========================================================================
-   Embedded content
-   ========================================================================== */
-
-/*
- * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
- * 2. Improves image quality when scaled in IE 7.
- */
-
-img {
-    border: 0; /* 1 */
-    -ms-interpolation-mode: bicubic; /* 2 */
-}
-
-/*
- * Corrects overflow displayed oddly in IE 9.
- */
-
-svg:not(:root) {
-    overflow: hidden;
-}
-
-/* ==========================================================================
-   Figures
-   ========================================================================== */
-
-/*
- * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
- */
-
-figure {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Forms
-   ========================================================================== */
-
-/*
- * Corrects margin displayed oddly in IE 6/7.
- */
-
-form {
-    margin: 0;
-}
-
-/*
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
-}
-
-/*
- * 1. Corrects color not being inherited in IE 6/7/8/9.
- * 2. Corrects text not wrapping in Firefox 3.
- * 3. Corrects alignment displayed oddly in IE 6/7.
- */
-
-legend {
-    border: 0; /* 1 */
-    padding: 0;
-    white-space: normal; /* 2 */
-    *margin-left: -7px; /* 3 */
-}
-
-/*
- * 1. Corrects font size not being inherited in all browsers.
- * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
- *    and Chrome.
- * 3. Improves appearance and consistency in all browsers.
- */
-
-button,
-input,
-select,
-textarea {
-    font-size: 100%; /* 1 */
-    margin: 0; /* 2 */
-    vertical-align: baseline; /* 3 */
-    *vertical-align: middle; /* 3 */
-}
-
-/*
- * Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-button,
-input {
-    line-height: normal;
-}
-
-/*
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Corrects inability to style clickable `input` types in iOS.
- * 3. Improves usability and consistency of cursor style between image-type
- *    `input` and others.
- * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
- *    Known issue: inner spacing remains in IE 6.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
-    *overflow: visible;  /* 4 */
-}
-
-/*
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-input[disabled] {
-    cursor: default;
-}
-
-/*
- * 1. Addresses box sizing set to content-box in IE 8/9.
- * 2. Removes excess padding in IE 8/9.
- * 3. Removes excess padding in IE 7.
- *    Known issue: excess padding remains in IE 6.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-    *height: 13px; /* 3 */
-    *width: 13px; /* 3 */
-}
-
-/*
- * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
-}
-
-/*
- * Removes inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-/*
- * Removes inner padding and border in Firefox 3+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/*
- * 1. Removes default vertical scrollbar in IE 6/7/8/9.
- * 2. Improves readability and alignment in all browsers.
- */
-
-textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
-}
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
-
-/*
- * Remove most spacing between table cells.
- */
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}

default.hbs

@@ -1,19 +1,110 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <title>{{settings.title}} | {{settings.description}}</title>
-    <link rel="stylesheet" type="text/css" href="/css/style.css">
 
-    <script type="text/javascript" src="/lib/jquery/jquery.min.js"></script>
-    <script type="text/javascript" src="/js/index.js"></script>
+    {{!-- 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" />
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    {{!-- 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"}}" />
+
+    {{!-- 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>
-    <header>
-        <a id="title" href="/">{{settings.title}}</a>
-        <p id="description">{{settings.description}}</p>
-        <div class="clearfix"></div>
+<body class="{{body_class}} is-head-{{#match @custom.navigation_layout "Logo on cover"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}{{#if @custom.show_publication_cover}} has-cover{{/if}}">
+<div class="viewport">
+
+    <header id="gh-head" class="gh-head outer">
+        <div class="gh-head-inner inner">
+            <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>
+                <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                <button class="gh-burger"></button>
+            </div>
+
+            <nav class="gh-head-menu">
+                {{navigation}}
+                {{#unless @site.members_enabled}}
+                    {{#match @custom.navigation_layout "Stacked"}}
+                        <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                    {{/match}}
+                {{/unless}}
+            </nav>
+
+            <div class="gh-head-actions">
+                {{#unless @site.members_enabled}}
+                    {{^match @custom.navigation_layout "Stacked"}}
+                        <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                    {{/match}}
+                {{else}}
+                    <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                    {{#unless @member}}
+                        {{#unless @site.members_invite_only}}
+                            <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
+                        {{else}}
+                            <a class="gh-head-button" href="#/portal/signin" data-portal="signin">Login</a>
+                        {{/unless}}
+                    {{else}}
+                        <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
+                    {{/unless}}
+                {{/unless}}
+            </div>
+        </div>
     </header>
-    {{{body}}}
+
+    <div class="site-content">
+        {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
+        {{{body}}}
+    </div>
+
+    {{!-- 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>
+</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 outer">
+    <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>

fonts/galette-med-webfont.svg

@@ -1,831 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta charset="utf-8">
-  <title>
-  JohnONolan / Casper 
-  / source  / css / fonts / galette-med-webfont.svg
- &mdash; Bitbucket
-</title>
-  <link rel="icon" type="image/png" href="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/img/favicon.png">
-  <meta id="bb-canon-url" name="bb-canon-url" content="https://bitbucket.org">
-  
-  
-<link rel="stylesheet" href="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/compressed/css/acebb1beb454.css" type="text/css" />
-<link rel="stylesheet" href="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/compressed/css/e8be34c6090b.css" type="text/css" />
-
-  <!--[if lt IE 9]><link rel="stylesheet" href="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/css/aui/aui-ie.css" media="all"><![endif]-->
-  <!--[if IE 9]><link rel="stylesheet" href="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/css/aui/aui-ie9.css" media="all"><![endif]-->
-  <!--[if IE]><link rel="stylesheet" href="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/css/aui-overrides-ie.css" media="all"><![endif]-->
-  <meta name="description" content=""/>
-  <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Bitbucket" />
-  
-  <link href="/JohnONolan/casper/rss?token=21b2d996077daf426102c1594ef1db36" rel="alternate nofollow" type="application/rss+xml" title="RSS feed for Casper" />
-
-<script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script></head>
-<body class="aui-layout production "
-      >
-<script type="text/javascript" src="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/compressed/js/e98deabf8a2e.js"></script>
-<div id="page">
-  <div id="wrapper">
-    
-    <header id="header" role="banner">
-      
-      <nav class="aui-header aui-dropdown2-trigger-group" role="navigation">
-        <div class="aui-header-inner">
-          <div class="aui-header-primary">
-            <h1 class="aui-header-logo aui-header-logo-bitbucket">
-              <a href="/" class="aui-nav-imagelink">
-                <span class="aui-header-logo-device">Bitbucket</span>
-              </a>
-            </h1>
-            <script id="repo-dropdown-template" type="text/html">
-  
-
-[[#hasViewed]]
-  <div class="aui-dropdown2-section">
-    <strong class="viewed">Recently viewed</strong>
-    <ul class="aui-list-truncate">
-      [[#viewed]]
-        <li class="[[#is_private]]private[[/is_private]][[^is_private]]public[[/is_private]] repository">
-          <a href="[[url]]" title="[[owner]]/[[name]]" class=" aui-icon-container">
-            <img class="repo-avatar size16" src="[[{avatar}]]" alt="[[owner]]/[[name]] avatar"/>
-            [[owner]] / [[name]]
-          </a>
-        </li>
-      [[/viewed]]
-    </ul>
-  </div>
-[[/hasViewed]]
-[[#hasUpdated]]
-<div class="aui-dropdown2-section">
-  <strong class="updated">Recently updated</strong>
-  <ul class="aui-list-truncate">
-    [[#updated]]
-    <li class="[[#is_private]]private[[/is_private]][[^is_private]]public[[/is_private]] repository">
-      <a href="[[url]]" title="[[owner]]/[[name]]" class=" aui-icon-container">
-        <img class="repo-avatar size16" src="[[{avatar}]]" alt="[[owner]]/[[name]] avatar"/>
-        [[owner]] / [[name]]
-      </a>
-    </li>
-    [[/updated]]
-  </ul>
-</div>
-[[/hasUpdated]]
-
-</script>
-            <ul role="menu" class="aui-nav">
-              
-                <li>
-                  <a class="aui-dropdown2-trigger aui-dropdown2-trigger selected"
-                     aria-owns="repo-dropdown" aria-haspopup="true" href="/repo/mine " id="repositories-dropdown-trigger">
-                    Repositories
-                    <span class="aui-icon-dropdown"></span>
-                  </a>
-                  <nav id="repo-dropdown" class="aui-dropdown2 aui-style-default">
-                    <div id="repo-dropdown-recent"></div>
-                    <div class="aui-dropdown2-section">
-                      <ul>
-                        <li>
-                          <a href="/repo/create" class="new-repository" id="create-repo-link">
-                            Create repository
-                          </a>
-                        </li>
-                        <li>
-                          <a href="/repo/import" class="import-repository" id="import-repo-link">
-                            Import repository
-                          </a>
-                        </li>
-                      </ul>
-                    </div>
-                  </nav>
-                </li>
-                <li>
-                  <a class="aui-button aui-button-primary aui-style" href="/repo/create" id="repo-create-cta">
-                    Create
-                  </a>
-                </li>
-              
-            </ul>
-          </div>
-          <div class="aui-header-secondary">
-            <ul role="menu" class="aui-nav">
-              <li>
-                <form action="/repo/all" method="get" class="aui-quicksearch">
-                  <label for="search-query" class="assistive">owner/repository</label>
-                  <input  id="search-query" class="search" type="text" placeholder="owner/repository" name="name">
-                </form>
-              </li>
-              <li>
-                <a class="aui-dropdown2-trigger"aria-controls="header-help-dropdown" aria-owns="header-help-dropdown"
-                   aria-haspopup="true" data-container="#header .aui-header-inner" href="#header-help-dropdown">
-                  <span class="aui-icon aui-icon-small aui-iconfont-help">Help</span><span class="aui-icon-dropdown"></span>
-                </a>
-                <nav id="header-help-dropdown" class="aui-dropdown2 aui-style-default aui-dropdown2-in-header" aria-hidden="true">
-                  <div class="aui-dropdown2-section">
-                    <ul>
-                      <li>
-                        <a href="/whats-new" id="features-link">
-                          What's new
-                        </a>
-                      </li>
-                    </ul>
-                  </div>
-                  <div class="aui-dropdown2-section">
-                    <ul>
-                      <li><a href="https://confluence.atlassian.com/display/BITBUCKET/bitbucket+Documentation+Home" target="_blank">Documentation</a></li>
-                      <li><a href="https://confluence.atlassian.com/display/BITBUCKET/bitbucket+101" target="_blank">Bitbucket 101</a></li>
-                      <li><a href="https://confluence.atlassian.com/display/BBKB/Bitbucket+Knowledge+Base+Home" target="_blank">Knowledge base</a></li>
-                    </ul>
-                  </div>
-                  <div class="aui-dropdown2-section">
-                    <ul>
-                      <li><a href="https://answers.atlassian.com/tags/bitbucket/" target="_blank">Bitbucket on Atlassian Answers</a></li>
-                      <li><a href="/support">Support</a></li>
-                    </ul>
-                  </div>
-                </nav>
-              </li>
-              
-              
-                <li>
-                  <a class="aui-dropdown2-trigger"
-                     aria-owns="user-dropdown" aria-haspopup="true" data-container="#header .aui-header-inner"
-                     href="/ErisDS" title="ErisDS" id="user-dropdown-trigger">
-                    <div class="aui-avatar aui-avatar-small">
-                        <div class="aui-avatar-inner">
-                            <img src="https://secure.gravatar.com/avatar/cb82ccb3c72846f4e111348b8d5a01e5?d=https%3A%2F%2Fd3oaxc4q5k2d6q.cloudfront.net%2Fm%2F8907ccc5f331%2Fimg%2Fdefault_avatar%2F32%2Fuser_blue.png&amp;s=32" alt="ErisDS" height="24" width="24" />
-                        </div>
-                    </div>
-                  </a>
-                  <nav id="user-dropdown" class="aui-dropdown2 aui-style-default" aria-hidden="true">
-                    <div class="aui-dropdown2-section">
-                      <ul>
-                        <li>
-                          <a href="/ErisDS" id="profile-link">View profile</a>
-                        </li>
-                        <li>
-                          <a href="/account/user/ErisDS/" id="account-link">Manage account</a>
-                        </li>
-                        <li>
-                          <a href="/account/notifications/" id="inbox-link">Inbox <span id="inbox-unread-count"></span></a>
-                        </li>
-                        <li>
-                          <a href="/account/signout/">Log out</a>
-                        </li>
-                      </ul>
-                    </div>
-                      <div class="aui-dropdown2-section" id="account-admin-links">
-                        <strong>Teams</strong>
-                          <ul class="aui-list-truncate">
-                          </ul>
-                        </div>
-                      <div class="aui-dropdown2-section">
-                          <ul>
-                              <li>
-                                  <a href="#general-invite" class='general-invite-link'>Invite a friend</a>
-                              </li>
-                          </ul>
-                      </div>
-                      
-                      <div class="aui-dropdown2-section">
-                        <ul>
-                          <li>
-                            <a href="/account/create-team/" id="create-team-link">Create team</a>
-                          </li>
-                          <li>
-                            <a href="/account/user/ErisDS/convert-team/">Convert to team</a>
-                          </li>
-                        </ul>
-                      </div>
-                    
-                  </nav>
-                </li>
-              
-            </ul>
-          </div>
-        </div>
-      </nav>
-    </header>
-      <header id="account-warning" role="banner"
-              class="aui-message-banner warning ">
-        <div class="center-content">
-          <span class="aui-icon aui-icon-warning"></span>
-          <span class="message">
-            
-          </span>
-        </div>
-      </header>
-    
-      <header id="aui-message-bar">
-        
-      </header>
-    
-    
-  <header id="repo-warning" role="banner" class="aui-message-banner warning">
-    <div class="center-content">
-      <span class="aui-icon aui-icon-warning"></span>
-      <span class="message">
-      </span>
-    </div>
-  </header>
-  <script id="repo-warning-template" type="text/html">
-  
-
-
-
-
-  This repository's ownership is pending transfer to <a href="/[[username]]">[[username]]</a>.
-  Visit the <a href="/JohnONolan/casper/admin/transfer">transfer repository page</a> to view more details.
-
-
-</script>
-  <header id="repo-header" class="subhead row">
-    <div class="center-content">
-      <div class="repo-summary">
-        <a class="repo-avatar-link" href="/JohnONolan/casper">
-          <span class="repo-avatar-container size64" title="JohnONolan/Casper">
-  <img alt="JohnONolan/Casper" src="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/img/language-avatars/default_64.png">
-</span>
-
-          
-          <span class="locked" rel="tooltip" title="Private repository" data-placement="bottom"></span>
-          
-        </a>
-        <h1><a class="repo-link" href="/JohnONolan/casper">Casper</a></h1>
-        <ul class="repo-metadata clearfix">
-          <li>
-            <a class="user" href="/JohnONolan">
-              <span class="icon user">User icon</span>
-              <span>JohnONolan</span>
-            </a>
-          </li>
-          
-          
-          <li class="social">
-            <a class="follow" id="repo-follow"
-               rel="nofollow"
-               href="/JohnONolan/casper/follow">
-              <span class="icon follow">Follow icon</span>
-              <span class="text">Follow</span>
-            </a>
-          </li>
-          
-        </ul>
-      </div>
-      <div id="repo-toolbar" class="bb-toolbar">
-        
-        <div class="aui-buttons">
-          <a id="repo-clone-button" class="aui-button aui-style" href="https://ErisDS@bitbucket.org/JohnONolan/casper.git">
-            <span class="icon clone">Clone icon</span>
-            <span>Clone</span>
-            <span class="aui-icon-dropdown"></span>
-          </a>
-          <a id="fork-button" class="aui-button aui-style"
-             href="/JohnONolan/casper/fork">
-            <span class="icon fork">Fork icon</span>
-            <span>Fork</span>
-          </a>
-        </div>
-        <div class="aui-buttons">
-          <a id="compare-button" class="aui-button aui-style"
-             href="/JohnONolan/casper/compare">
-            <span class="icon compare">Compare icon</span>
-            <span>Compare</span>
-          </a>
-          <a id="pull-request-button" class="aui-button aui-style"
-             href="/JohnONolan/casper/pull-request/new">
-            <span class="icon pull-request">Pull request icon</span>
-            <span>Pull request</span>
-          </a>
-        </div>
-        
-        
-
-<div id="repo-clone-dialog" class="clone-dialog hidden">
-  
-<div class="clone-url">
-  <div class="aui-buttons">
-    <a href="https://ErisDS@bitbucket.org/JohnONolan/casper.git"
-       class="aui-button aui-style aui-dropdown2-trigger" aria-haspopup="true"
-       aria-owns="clone-url-dropdown-header">
-      <span class="dropdown-text">HTTPS</span>
-    </a>
-    <div id="clone-url-dropdown-header" class="aui-dropdown2 aui-style-default">
-      <ul class="aui-list-truncate">
-        <li>
-          <a href="https://ErisDS@bitbucket.org/JohnONolan/casper.git"
-            
-              data-command="git clone https://ErisDS@bitbucket.org/JohnONolan/casper.git"
-            
-            class="item-link https">HTTPS
-          </a>
-        </li>
-        <li>
-          <a href="ssh://git@bitbucket.org/JohnONolan/casper.git"
-            
-              data-command="git clone git@bitbucket.org:JohnONolan/casper.git"
-            
-            class="item-link ssh">SSH
-          </a>
-        </li>
-      </ul>
-    </div>
-    <input type="text" readonly="readonly" value="git clone https://ErisDS@bitbucket.org/JohnONolan/casper.git">
-  </div>
-  
-  <p>Need help cloning? Visit
-     <a href="https://confluence.atlassian.com/x/cgozDQ" target="_blank">Bitbucket 101</a>.</p>
-  
-</div>
-
-
-  
-  
-  
-
-<div class="clone-in-sourcetree"
-  data-https-url="https://ErisDS@bitbucket.org/JohnONolan/casper.git"
-  data-ssh-url="ssh://git@bitbucket.org/JohnONolan/casper.git">
-  <p><button class="aui-button aui-style aui-button-primary">Clone in SourceTree</button></p>
-
-  <p>
-    
-      
-        <a href="http://www.sourcetreeapp.com" target="_blank">SourceTree</a>
-        is a free Mac client by Atlassian for Git, Mercurial, and Subversion.
-      
-    
-  </p>
-</div>
-
-  
-</div>
-
-      </div>
-    </div>
-    <div class="clearfix"></div>
-  </header>
-  <nav id="repo-tabs" class="aui-navgroup aui-navgroup-horizontal aui-navgroup-horizontal-roomy">
-    <div class="aui-navgroup-inner">
-      <div class="aui-navgroup-primary">
-        <ul class="aui-nav">
-          
-            <li>
-              <a href="/JohnONolan/casper/overview" id="repo-overview-link">Overview</a>
-            </li>
-          
-          
-            <li class="aui-nav-selected">
-              <a href="/JohnONolan/casper/src" id="repo-source-link">Source</a>
-            </li>
-          
-          
-            <li>
-              <a href="/JohnONolan/casper/commits" id="repo-commits-link">
-                Commits
-              </a>
-            </li>
-          
-          
-            <li>
-              <a href="/JohnONolan/casper/pull-requests" id="repo-pullrequests-link">
-                Pull requests
-                
-                  
-                
-              </a>
-            </li>
-          
-          
-            
-          
-            <li id="issues-tab" class="
-              
-                
-              
-            ">
-              <a href="/JohnONolan/casper/issues?status=new&amp;status=open" id="repo-issues-link">
-                Issues
-                
-                  
-                    <span class="aui-badge">1</span>
-                  
-                
-              </a>
-            </li>
-            <li id="wiki-tab" class="
-                
-                  hidden
-                
-              ">
-              <a href="/JohnONolan/casper/wiki" id="repo-wiki-link">Wiki</a>
-            </li>
-          
-            <li>
-            <a href="/JohnONolan/casper/downloads" id="repo-downloads-link">
-              Downloads
-              
-                
-              
-            </a>
-            </li>
-          
-        </ul>
-      </div>
-      <div class="aui-navgroup-secondary">
-        <ul class="aui-nav">
-          
-        </ul>
-      </div>
-    </div>
-  </nav>
-
-    <div id="content" role="main">
-      
-  <div id="repo-content">
-    
-  <div id="source-container">
-    
-
-
-
-<header id="source-path">
-  
-  <div class="labels labels-csv">
-    
-      <div class="aui-buttons">
-        <button data-branches-tags-url="/api/1.0/repositories/JohnONolan/casper/branches-tags"
-                class="aui-button aui-style branch-dialog-trigger" title="master">
-          
-            
-              <span class="branch icon">Branch</span>
-            
-            <span class="name">master</span>
-          
-          <span class="aui-icon-dropdown"></span>
-        </button>
-      </div>
-    
-  </div>
-  
-  
-    <div class="view-switcher">
-      <div class="aui-buttons">
-        
-          <a href="/JohnONolan/casper/src/0b79f5f4e8a2/css/fonts/galette-med-webfont.svg?at=master"
-             class="aui-button aui-style pjax-trigger" aria-pressed="true">
-            Source
-          </a>
-          <a href="/JohnONolan/casper/diff/css/fonts/galette-med-webfont.svg?diff2=0b79f5f4e8a2&at=master"
-             class="aui-button aui-style pjax-trigger"
-             title="Diff to previous change">
-            Diff
-          </a>
-          <a href="/JohnONolan/casper/history-node/0b79f5f4e8a2/css/fonts/galette-med-webfont.svg?at=master"
-             class="aui-button aui-style pjax-trigger">
-            History
-          </a>
-        
-      </div>
-    </div>
-  
-  <h1>
-    <a href="/JohnONolan/casper/src/0b79f5f4e8a2?at=master"
-       class="pjax-trigger" title="[u&#39;css&#39;, u&#39;fonts&#39;, u&#39;galette-med-webfont.svg&#39;]">Casper</a> /
-    
-      
-        
-          
-            <a href="/JohnONolan/casper/src/0b79f5f4e8a2/css?at=master"
-               class="pjax-trigger">css</a> /
-          
-        
-      
-    
-      
-        
-          
-            <a href="/JohnONolan/casper/src/0b79f5f4e8a2/css/fonts?at=master"
-               class="pjax-trigger">fonts</a> /
-          
-        
-      
-    
-      
-        
-          <span>galette-med-webfont.svg</span>
-        
-      
-    
-  </h1>
-  
-    
-    
-  
-  <div class="clearfix"></div>
-</header>
-
-
-  
-    <div id="source-view">
-      <div class="toolbar">
-        <div class="primary">
-          <div class="aui-buttons">
-            
-              <button id="file-history-trigger" class="aui-button aui-style changeset-info"
-                      data-changeset="0b79f5f4e8a236f99a30a7fa95f0dc9db7e931a2"
-                      data-path="css/fonts/galette-med-webfont.svg"
-                      data-current="0b79f5f4e8a236f99a30a7fa95f0dc9db7e931a2">
-                
-                   
-
-<img class="avatar avatar16" src="https://secure.gravatar.com/avatar/75e958a6674a7d68fe0d575fb235116c?d=https%3A%2F%2Fd3oaxc4q5k2d6q.cloudfront.net%2Fm%2F8907ccc5f331%2Fimg%2Fdefault_avatar%2F16%2Fuser_blue.png&amp;s=16" alt="John O'Nolan avatar" />
-<span class="changeset-hash">0b79f5f</span>
-<time datetime="2013-02-16T14:57:05+00:00" class="timestamp"></time>
-<span class="aui-icon-dropdown"></span>
-
-                
-              </button>
-            
-          </div>
-        </div>
-          <div class="secondary">
-            
-            <div class="aui-buttons">
-              
-              <a href="/JohnONolan/casper/full-commit/0b79f5f4e8a2/css/fonts/galette-med-webfont.svg" class="aui-button aui-style"
-                 title="View full commit 0b79f5f">Full commit</a>
-              
-              <a href="/JohnONolan/casper/raw/0b79f5f4e8a236f99a30a7fa95f0dc9db7e931a2/css/fonts/galette-med-webfont.svg"
-                 class="aui-button aui-style">Raw</a>
-            </div>
-          </div>
-        <div class="clearfix"></div>
-      </div>
-    </div>
-
-    
-      <div id="inline-image">
-          <img src="/JohnONolan/casper/raw/0b79f5f4e8a236f99a30a7fa95f0dc9db7e931a2/css/fonts/galette-med-webfont.svg" alt="">
-      </div>
-    
-  
-
-
-  <script id="source-changeset" type="text/html">
-  
-
-<a href="/JohnONolan/casper/src/[[raw_node]]/css/fonts/galette-med-webfont.svg?at=master"
-   class="[[#selected]]highlight[[/selected]]"
-   data-hash="[[node]]">
-  [[#author.username]]
-    <img class="avatar avatar16" src="[[author.avatar]]"/>
-    <span class="author" title="[[raw_author]]">[[author.display_name]]</span>
-  [[/author.username]]
-  [[^author.username]]
-    <img class="avatar avatar16" src="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/img/default_avatar/16/user_blue.png"/>
-    <span class="author unmapped" title="[[raw_author]]">[[author]]</span>
-  [[/author.username]]
-  <time datetime="[[utctimestamp]]" data-title="true">[[utctimestamp]]</time>
-  <span class="message">[[message]]</span>
-</a>
-
-</script>
-  <script id="embed-template" type="text/html">
-  
-
-<form class="aui embed">
-  <label for="embed-code">Embed this source in another page:</label>
-  <input type="text" readonly="true" value="&lt;script src=&quot;[[url]]&quot;&gt;&lt;/script&gt;" id="embed-code">
-</form>
-
-</script>
-
-
-<div class="mask"></div>
-
-
-
-  <script id="branch-dialog-template" type="text/html">
-  
-
-<div class="tabbed-filter-widget branch-dialog">
-  <div class="tabbed-filter">
-    <input placeholder="Filter branches" class="filter-box" autosave="branch-dropdown-2121860" type="text">
-    [[^ignoreTags]]
-      <div class="aui-tabs horizontal-tabs aui-tabs-disabled filter-tabs">
-        <ul class="tabs-menu">
-          <li class="menu-item active-tab"><a href="#branches">Branches</a></li>
-          <li class="menu-item"><a href="#tags">Tags</a></li>
-        </ul>
-      </div>
-    [[/ignoreTags]]
-  </div>
-  
-    <div class="tab-pane active-pane" id="branches" data-filter-placeholder="Filter branches">
-      <ol class="filter-list">
-        <li class="empty-msg">No matching branches</li>
-        [[#branches]]
-          [[#hasMultipleHeads]]
-            [[#heads]]
-              <li class="comprev filter-item">
-                <a href="/JohnONolan/casper/src/[[changeset]]/css/fonts/galette-med-webfont.svg?at=[[safeName]]"
-                   title="[[name]]">
-                  [[name]] ([[shortChangeset]])
-                </a>
-              </li>
-            [[/heads]]
-          [[/hasMultipleHeads]]
-          [[^hasMultipleHeads]]
-            <li class="comprev filter-item">
-              <a href="/JohnONolan/casper/src/[[changeset]]/css/fonts/galette-med-webfont.svg?at=[[safeName]]" title="[[name]]">
-                [[name]]
-              </a>
-            </li>
-          [[/hasMultipleHeads]]
-        [[/branches]]
-      </ol>
-    </div>
-    <div class="tab-pane" id="tags" data-filter-placeholder="Filter tags">
-      <ol class="filter-list">
-        <li class="empty-msg">No matching tags</li>
-        [[#tags]]
-          <li class="comprev filter-item">
-            <a href="/JohnONolan/casper/src/[[changeset]]/css/fonts/galette-med-webfont.svg?at=[[safeName]]" title="[[name]]">
-              [[name]]
-            </a>
-          </li>
-        [[/tags]]
-      </ol>
-    </div>
-  
-</div>
-
-</script>
-
-
-
-  </div>
-
-  </div>
-  
-    
-
-<form id="file-search-form" action="#"
-  
-  data-revision="0b79f5f4e8a236f99a30a7fa95f0dc9db7e931a2"
-  data-branch="master">
-  <input type="text" id="file-search-query" class="loading">
-  <div id="filtered-files"></div>
-  <div class="tip"><em>Tip:</em> Filter by directory path e.g. <strong>/media app.js</strong> to search for public<strong>/media/app.js</strong>.</div>
-  <div class="tip"><em>Tip:</em> Use camelCasing e.g. <strong>ProjME</strong> to search for <strong>ProjectModifiedE</strong>vent.java.</div>
-  <div class="tip"><em>Tip:</em> Filter by extension type e.g. <strong>/repo .js</strong> to search for all <strong>.js</strong> files in the <strong>/repo</strong> directory.</div>
-  <div class="tip"><em>Tip:</em> Separate your search with spaces e.g. <strong>/ssh pom.xml</strong> to search for src<strong>/ssh/pom.xml</strong>.</div>
-  <div class="tip"><em>Tip:</em> Use ↑ and ↓ arrow keys to navigate and <strong>return</strong> to view the file.</div>
-  <div class="tip mod-osx"><em>Tip:</em> You can also navigate files with <strong>Ctrl+j</strong> <em>(next)</em> and <strong>Ctrl+k</strong> <em>(previous)</em> and view the file with <strong>Ctrl+o</strong>.</div>
-  <div class="tip mod-win"><em>Tip:</em> You can also navigate files with <strong>Alt+j</strong> <em>(next)</em> and <strong>Alt+k</strong> <em>(previous)</em> and view the file with <strong>Alt+o</strong>.</div>
-  <script id="filtered-files-template" type="text/html">
-  
-
-<table class="aui bb-list">
-  <thead>
-    <tr class="assistive">
-      <th class="name">Filename</th>
-    </tr>
-  </thead>
-  <tbody>
-    [[#files]]
-    <tr class="iterable-item">
-      <td class="name [[#isDirectory]]directory[[/isDirectory]]">
-        <a href="/JohnONolan/casper/src/[[node]]/[[name]][[#branch]]?at=[[branch]][[/branch]]"
-           title="[[name]]" class="execute" tabindex="-1">
-          [[&highlightedName]]
-        </a>
-      </td>
-    </tr>
-    [[/files]]
-  </tbody>
-</table>
-
-</script>
-</form>
-
-  
-
-    </div>
-  </div>
-  <footer id="footer" role="contentinfo">
-    <section class="footer-body">
-      <ul>
-        <li><a href="http://blog.bitbucket.org">Blog</a></li>
-        <li><a href="//bitbucket.org/site/master/issues/new">Report a bug</a></li>
-        <li><a href="/support">Support</a></li>
-        <li><a href="http://confluence.atlassian.com/display/BITBUCKET">Documentation</a></li>
-        <li><a href="http://confluence.atlassian.com/x/IYBGDQ">API</a></li>
-        <li><a href="http://groups.google.com/group/bitbucket-users">Forum</a></li>
-        <li><a href="http://status.bitbucket.org/">Server status</a></li>
-        <li><a href="http://www.atlassian.com/hosted/terms.jsp">Terms of service</a></li>
-        <li><a href="http://www.atlassian.com/about/privacy.jsp">Privacy policy</a></li>
-      </ul>
-      <ul>
-        
-        <li><a href="http://git-scm.com/">Git 1.7.10.3</a></li>
-        <li><a href="http://mercurial.selenic.com/">Mercurial 2.2.2</a></li>
-        <li><a href="https://www.djangoproject.com/">Django 1.3.1</a></li>
-        <li><a href="http://www.python.org/">Python 2.7.3</a></li>
-        <li><a href="#">68e03d903b65 / 8907ccc5f331 @ bitbucket16</a></li>
-      </ul>
-    </section>
-  </footer>
-</div>
-
-<script type="text/javascript" src="https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/compressed/js/f48c93f171ac.js"></script>
-
-<!-- This script exists purely for the benefit of our selenium tests -->
-<script>
-  setTimeout(function () {
-    BB.JsLoaded = true;
-  }, 3000);
-</script>
-
-
-
-<script>
-  (function (window) {
-    // Base URL to use for non-CNAME URLs.
-    BB.baseUrl = 'https://bitbucket.org';
-
-    BB.images = {
-      invitation: 'https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/img/icons/fugue/card_address.png',
-      noAvatar: 'https://d3oaxc4q5k2d6q.cloudfront.net/m/8907ccc5f331/img/default_avatar/16/user_blue.png'
-    };
-    BB.user = {"username": "ErisDS", "displayName": "Hannah Wolfe", "firstName": "Hannah", "avatarUrl": "https://secure.gravatar.com/avatar/cb82ccb3c72846f4e111348b8d5a01e5?d=https%3A%2F%2Fd3oaxc4q5k2d6q.cloudfront.net%2Fm%2F8907ccc5f331%2Fimg%2Fdefault_avatar%2F32%2Fuser_blue.png\u0026s=32", "lastName": "Wolfe", "isTeam": false, "isSshEnabled": false, "isKbdShortcutsEnabled": true, "id": 819867, "isAuthenticated": true};
-    BB.repo || (BB.repo = {});
-    
-      BB.repo.id = 2121860;
-      BB.repo.scm = 'git';
-      
-      
-        BB.repo.language = null;
-        BB.repo.pygmentsLanguage = null;
-      
-      
-        BB.repo.slug = 'casper';
-      
-      
-        BB.repo.owner = {};
-        BB.repo.owner.username = 'JohnONolan';
-        BB.repo.owner.is_team = false;
-      
-      
-        BB.repo.creator = {};
-        BB.repo.creator.username = 'JohnONolan';
-      
-      // Coerce `BB.repo` to a string to get
-      // "davidchambers/mango" or whatever.
-      BB.repo.toString = function () {
-        return BB.cname ? this.slug : '{owner.username}/{slug}'.format(this);
-      }
-      
-        BB.changeset = '0b79f5f4e8a236f99a30a7fa95f0dc9db7e931a2'
-      
-      
-    
-    window.setInterval(BB.localize, 60 * 1000);
-    $(document).on('ready pjax:end', function () { BB.localize(); });
-  })(window);
-</script>
-
-
-<script>
-    // Bitbucket Google Analytics
-    // NOTE: these will not fire in development. In debug mode it just logs them to console.
-    (function (window) {
-        // Track the main pageview to the Bitbucket GA account.
-        BB.gaqPush(['_trackPageview']);
-        // Track the main pageview to the Atlassian GA account.
-        BB.gaqPush(['atl._trackPageview']);
-
-        
-
-
-        
-
-        // Include GA commands from sub-templates
-        
-
-        (function () {
-            var ga = document.createElement('script');
-            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-            ga.setAttribute('async', 'true');
-            document.documentElement.firstChild.appendChild(ga);
-        }());
-    })(window);
-</script>
-
-
-
-<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.src=(("http:"===document.location.protocol)?"http:":"https:")+"//"+"d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrfj","beacon-1.newrelic.com","7d4a9813d0","295788","MgMDYhcHDUJVVEIKWAtJJ0MLBRdYW1kZAV4RBBRVDgMXH1VHRhAZFwMRWVdIFVhRQEVZUQwKBFQXCRRCUQ==",0,227,new Date().getTime(),"","","","",""]);</script></body>
-</html>

gulpfile.js

@@ -0,0 +1,176 @@
+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 jsWatcher = () => watch('assets/js/**', js);
+const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
+const watcher = parallel(cssWatcher, jsWatcher, 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: '5.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,15 +1,52 @@
 {{!< default}}
-<section class="content">
-    <ul class="hfeed">
-        {{#foreach posts}}
-            {{#if @first}}
-                <li class="featured">
-                    {{> full-post}}
-                </li>
-            {{else}}
-                {{> list-post}}
+{{!-- The tag above means: insert everything in this file
+into the {body} of the default.hbs template --}}
+
+<div class="site-header-content outer{{#match @custom.header_style "Left aligned"}} left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden"}} no-content{{/match}}{{/unless}}">
+
+    {{#if @custom.show_publication_cover}}
+        {{#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="{{@site.title}}"
+            />
+        {{/if}}
+    {{/if}}
+
+    {{#match @custom.header_style "!=" "Hidden"}}
+        <div class="site-header-inner inner">
+            {{#match @custom.navigation_layout "Logo on cover"}}
+                {{#if @site.logo}}
+                    <img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
+                {{else}}
+                    <h1 class="site-title">{{@site.title}}</h1>
+                {{/if}}
+            {{/match}}
+            {{#if @site.description}}
+                <p class="site-description">{{@site.description}}</p>
             {{/if}}
+        </div>
+    {{/match}}
+
+</div>
+
+{{!-- The main content area --}}
+<main id="site-main" class="site-main outer">
+<div class="inner posts">
+
+    <div class="post-feed">
+        {{#foreach posts}}
+            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+            {{> "post-card"}}
         {{/foreach}}
-    </ul>
-    {{paginate}}
-</section>
+    </div>
+
+</div>
+</main>

js/index.js

@@ -1,12 +0,0 @@
-/**
- * Placeholder JS file for Casper behaviours
- */
-
-/*globals jQuery, document */
-(function ($) {
-    "use strict";
-
-    $(document).ready(function () {
-        // code goes here
-    });
-}(jQuery));

package.json

@@ -0,0 +1,179 @@
+{
+    "name": "casper",
+    "description": "A clean, minimal default theme for the Ghost publishing platform",
+    "demo": "https://demo.ghost.io",
+    "version": "5.4.1",
+    "engines": {
+        "ghost": ">=5.0.0"
+    },
+    "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/"
+    },
+    "gpm": {
+        "type": "theme",
+        "categories": [
+            "Minimal",
+            "Magazine"
+        ]
+    },
+    "keywords": [
+        "ghost",
+        "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",
+    "devDependencies": {
+        "@tryghost/release-utils": "0.8.1",
+        "autoprefixer": "10.4.7",
+        "beeper": "2.1.0",
+        "cssnano": "5.1.12",
+        "gscan": "4.34.0",
+        "gulp": "4.0.2",
+        "gulp-concat": "2.6.1",
+        "gulp-livereload": "4.0.2",
+        "gulp-postcss": "9.0.1",
+        "gulp-uglify": "3.0.2",
+        "gulp-zip": "5.1.0",
+        "inquirer": "8.2.4",
+        "postcss": "8.2.13",
+        "postcss-color-mod-function": "3.0.3",
+        "postcss-easy-import": "4.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": {
+            "navigation_layout": {
+                "type": "select",
+                "options": [
+                    "Logo on cover",
+                    "Logo in the middle",
+                    "Stacked"
+                ],
+                "default": "Logo on cover"
+            },
+            "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"
+            },
+            "show_publication_cover": {
+                "type": "boolean",
+                "default": true,
+                "group": "homepage"
+            },
+            "header_style": {
+                "type": "select",
+                "options": [
+                    "Center aligned",
+                    "Left aligned",
+                    "Hidden"
+                ],
+                "default": "Center aligned",
+                "group": "homepage"
+            },
+            "feed_layout": {
+                "type": "select",
+                "options": [
+                    "Classic",
+                    "Grid",
+                    "List"
+                ],
+                "default": "Classic",
+                "group": "homepage"
+            },
+            "color_scheme": {
+                "type": "select",
+                "options": [
+                    "Light",
+                    "Dark",
+                    "Auto"
+                ],
+                "default": "Light"
+            },
+            "post_image_style": {
+                "type": "select",
+                "options": [
+                    "Wide",
+                    "Full",
+                    "Small",
+                    "Hidden"
+                ],
+                "default": "Wide",
+                "group": "post"
+            },
+            "email_signup_text": {
+                "type": "text",
+                "default": "Sign up for more like this.",
+                "group": "post"
+            },
+            "show_recent_posts_footer": {
+                "type": "boolean",
+                "default": true,
+                "group": "post"
+            }
+        }
+    },
+    "renovate": {
+        "extends": [
+            "@tryghost:theme"
+        ]
+    }
+}

page.hbs

@@ -0,0 +1,45 @@
+{{!< default}}
+
+{{!-- The tag above means: insert everything in this file
+into the {body} tag of the default.hbs template --}}
+
+
+{{#post}}
+{{!-- Everything inside the #post block pulls data from the page --}}
+
+<main id="site-main" class="site-main">
+<article class="article {{post_class}}">
+
+    <header class="article-header gh-canvas">
+
+        <h1 class="article-title">{{title}}</h1>
+
+        {{#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="gh-content gh-canvas">
+        {{content}}
+    </section>
+
+</article>
+</main>
+
+{{/post}}

partials/full-post.hbs

@@ -1,17 +0,0 @@
-<article class="post type-post status-publish format-standard hentry">
-    {{#if image}}
-    <figure class="post-thumb">
-        <img width="550" height="250" src="/content/images/{{image}}" class="attachment-post-thumbnail wp-post-image" alt="ghostpost">
-    </figure>
-    {{/if}}
-    <div class="wrap">
-        <header>
-            <h2 class="entry-title h1"><a href="/{{slug}}" rel="bookmark">{{title}}</a></h2>
-            <span class="entry-meta">Published on <time class="updated" datetime="{{dateFormat published_at format='YYYY-MM-DD'}}">{{dateFormat published_at format='DD MMMM YYYY'}}</time></span>
-        </header>
-
-        <section class="entry-content">
-            {{content}}
-        </section>
-    </div>
-</article>

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 class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>

partials/icons/fire.hbs

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+</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/lock.hbs

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></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/search.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>

partials/icons/twitter.hbs

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

partials/list-post.hbs

@@ -1,6 +0,0 @@
-<li class="wrap">
-    <article class="post type-post status-publish format-standard hentry">
-        <h2 class="entry-title"><a href="/{{slug}}" rel="bookmark">{{title}}</a></h2>
-        <time class="updated" datetime="2012-05-03">{{dateFormat published_at format="MMMM DD, YYYY"}}</time>
-    </article>
-</li>

partials/post-card.hbs

@@ -0,0 +1,78 @@
+{{!-- 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 "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home, paged"}} post-card-large{{/is}}{{/match}}{{#unless access}} post-access-{{visibility}}{{/unless}}">
+
+    {{#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"
+        />
+
+        {{#unless access}}
+        {{^has visibility="public"}}
+            <div class="post-card-access">
+                {{> "icons/lock"}}
+                {{#has visibility="members"}}
+                    Members only
+                {{else}}
+                    Paid-members only
+                {{/has}}
+            </div>
+        {{/has}}
+        {{/unless}}
+
+    </a>
+    {{/if}}
+
+    <div class="post-card-content">
+
+        <a class="post-card-content-link" href="{{url}}">
+            <header class="post-card-header">
+                <div class="post-card-tags">
+                    {{#primary_tag}}
+                        <span class="post-card-primary-tag">{{name}}</span>
+                    {{/primary_tag}}
+                    {{#if featured}}
+                        <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+                    {{/if}}
+                </div>
+                <h2 class="post-card-title">
+                    {{#unless access}}
+                    {{^has visibility="public"}}
+                        {{#unless feature_image}}
+                            {{> "icons/lock"}}
+                        {{/unless}}
+                    {{/has}}
+                    {{/unless}}
+                    {{title}}
+                </h2>
+            </header>
+            {{#if excerpt}}
+                <div class="post-card-excerpt">{{excerpt}}</div>
+            {{/if}}
+        </a>
+
+        <footer class="post-card-meta">
+            <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+            {{#if reading_time}}
+                <span class="post-card-meta-length">{{reading_time}}</span>
+            {{/if}}
+            {{#if @site.comments_enabled}}
+                {{comment_count}}
+            {{/if}}
+        </footer>
+
+    </div>
+
+</article>

post.hbs

@@ -1,6 +1,140 @@
 {{!< default}}
-<section class="content">
-    {{#post}}
-        {{> full-post}}
-    {{/post}}
-</section>
+
+{{!-- The tag above means: insert everything in this file
+into the {body} tag of the default.hbs template --}}
+
+
+{{#post}}
+{{!-- Everything inside the #post block pulls data from the post --}}
+
+<main id="site-main" class="site-main">
+<article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}">
+
+    <header class="article-header gh-canvas">
+
+        <div class="article-tag post-card-tags">
+            {{#primary_tag}}
+                <span class="post-card-primary-tag">
+                    <a href="{{url}}">{{name}}</a>
+                </span>
+            {{/primary_tag}}
+            {{#if featured}}
+                <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+            {{/if}}
+        </div>
+
+        <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>
+                    {{#if reading_time}}
+                        <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
+                    {{/if}}
+                </div>
+            </div>
+
+        </section>
+        </div>
+
+        {{#match @custom.post_image_style "!=" "Hidden"}}
+        {{#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}}
+        {{/match}}
+
+    </header>
+
+    <section class="gh-content gh-canvas">
+        {{content}}
+    </section>
+
+    {{#if comments}}
+        <section class="article-comments gh-canvas">
+            {{comments}}
+        </section>
+    {{/if}}
+
+</article>
+</main>
+
+{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
+{{#if @site.members_enabled}}
+{{#unless @member}}
+{{#unless @site.comments_enabled}}
+{{#if access}}
+    <section class="footer-cta outer">
+        <div class="inner">
+            {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@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>
+        </div>
+    </section>
+{{/if}}
+{{/unless}}
+{{/unless}}
+{{/if}}
+
+
+{{!-- Read more links, just above the footer --}}
+{{#if @custom.show_recent_posts_footer}}
+    {{!-- 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}}" limit="3" as |more_posts|}}
+
+        {{#if more_posts}}
+            <aside class="read-more-wrap outer">
+                <div class="read-more inner">
+                    {{#foreach more_posts}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+            </aside>
+        {{/if}}
+
+    {{/get}}
+{{/if}}
+
+{{/post}}

tag.hbs

@@ -0,0 +1,52 @@
+{{!< default}}
+{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
+
+<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}}"
+                />
+            </div>
+            {{/if}}
+
+            <div class="post-card-content">
+            <div class="post-card-content-link">
+                <header class="post-card-header">
+                    <h2 class="post-card-title">{{name}}</h2>
+                </header>
+                <div class="post-card-excerpt">
+                    {{#if description}}
+                        {{description}}
+                    {{else}}
+                        A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
+                    {{/if}}
+                </div>
+            </div>
+            </div>
+
+        </section>
+        {{/tag}}
+
+        {{#foreach posts}}
+            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+            {{> "post-card"}}
+        {{/foreach}}
+
+    </div>
+</div>
+</main>