Merge branch 'main' of https://github.com/TryGhost/Casper

- This reverts commit e1515319889ca4b6d34d8cb132bbb9b2fdadf63a.
- This change results in further changes when running gulp build that will need verifying separately

.editorconfig

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

.github/ISSUE_TEMPLATE.md

@@ -1,19 +0,0 @@
-Do you need help or have a question? Please come chat in our forum: https://forum.ghost.org 👫.
-
-If you're filing a bug 🐛, please include the following information:
-
-### Screenshot
-
-![]()
-
-### Steps to Reproduce
- 
- 1. This is the first step
- 2. This may be the post content used to cause an issue...
-
-### Technical details
-
-* Casper Version:
-* Ghost Version:
-* Browser Version:
-* OS Version:

.github/workflows/autoupdate.yml

@@ -0,0 +1,31 @@
+name: autoupdate
+
+on:
+  schedule:
+    - cron:  '0 0 * * *'
+  workflow_dispatch:
+
+jobs:
+  merge-upstream:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+    - name: Setup bot
+      run: |
+        git config --local user.email "github-actions[bot]@users.noreply.github.com"
+        git config --local user.name "github-actions"
+        git config --local pull.rebase false
+    - name: Add upstream repo
+      run: git remote add upstream https://github.com/TryGhost/Casper.git
+    - name: Checkout master
+      run: git checkout master
+    - name: Merge upstream
+      run: git pull upstream main --tags
+    - name: Push changes
+      uses: ad-m/github-push-action@master
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        branch: ${{ github.ref }}
+        tags: true

.travis.yml

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

.yarnrc

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

LICENSE

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

README.md

@@ -1,66 +1,39 @@
-# Casper
+# Casper-i18n
 
-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.
+[![Autoupdate](https://github.com/GenZmeY/Casper-i18n/actions/workflows/autoupdate.yml/badge.svg)](https://github.com/GenZmeY/Casper-i18n/actions/workflows/autoupdate.yml)
+[![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/GenZmeY/Casper-i18n)](https://github.com/GenZmeY/Casper-i18n/tags)
+[![GitHub](https://img.shields.io/github/license/GenZmeY/Casper-i18n)](LICENSE)
 
- 
+The same [casper](https://github.com/TryGhost/Casper), but with localization support.  
+For more detailed information about theme, see the [casper page](https://github.com/TryGhost/Casper).
 
-![screenshot-desktop](https://user-images.githubusercontent.com/120485/27221326-1e31d326-5280-11e7-866d-82d550a7683b.jpg)
+# Available languages
+- Chinese (zh)
+- Croatian (hr)
+- Dutch (nl)
+- English (en)
+- Finnish (fi)
+- French (fr)
+- German (de)
+- Hungarian (hu)
+- Indonesian (id)
+- Italian (it)
+- Latvian (lv)
+- Lithuanian (lt)
+- Norwegian Bokmål (nb)
+- Polish (pl)
+- Romanian (ro)
+- Russian (ru)
+- Spanish (es)
+- Swedish (sv)
+- Turkish (tr)
 
- 
+# Contribution
-
-# First time using a Ghost theme?
-
-Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
-
-We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/api/handlebars-themes/) which explains every possible Handlebars helper and template.
-
-**The main files are:**
-
-- `default.hbs` - The main template file
-- `index.hbs` - Used for the home page
-- `post.hbs` - Used for individual posts
-- `page.hbs` - Used for individual pages
-- `tag.hbs` - Used for tag archives
-- `author.hbs` - Used for author archives
-
-One really neat trick is that you can also create custom one-off templates just by adding the slug of a page to a template file. For example:
-
-- `page-about.hbs` - Custom template for the `/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
-$ yarn install
-$ 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
-$ 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.
-- Variables - Simple pure CSS variables
-- [Color Function](https://github.com/postcss/postcss-color-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.
 
+I had to use google translate in some places, so translation corrections are welcome.  
+And you can also add a new translation.  
+If your contribution is not related to translation - contribute it to the original [casper](https://github.com/TryGhost/Casper).  
 
 # Copyright & License
 
-Copyright (c) 2013-2019 Ghost Foundation - Released under the [MIT license](LICENSE).
+Copyright (c) 2013-2025 Ghost Foundation - Released under the [MIT license](LICENSE).

SECURITY.md

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

assets/built/global.css

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

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

assets/built/infinitescroll.js.map

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

assets/built/jquery.fitvids.js

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

assets/css/.csscomb.json

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

assets/css/csscomb.json

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

assets/css/global.css

@@ -1,21 +1,3 @@
-/* Variables
-/* ---------------------------------------------------------- */
-
-:root {
-    /* Colours */
-    --blue: #3eb0ef;
-    --green: #a4d037;
-    --purple: #ad26b4;
-    --yellow: #fecd35;
-    --red: #f05230;
-    --darkgrey: #15171A;
-    --midgrey: #738a94;
-    --lightgrey: #c5d2d9;
-    --whitegrey: #e5eff5;
-    --pink: #fa3a57;
-    --brown: #a3821a;
-}
-
 /* Reset
 /* ---------------------------------------------------------- */
 
@@ -106,10 +88,6 @@ video {
 body {
     line-height: 1;
 }
-ol,
-ul {
-    list-style: none;
-}
 blockquote,
 q {
     quotes: none;
@@ -126,7 +104,9 @@ table {
     border-collapse: collapse;
 }
 img {
+    display: block;
     max-width: 100%;
+    height: auto;
 }
 html {
     box-sizing: border-box;
@@ -192,6 +172,20 @@ 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,
@@ -272,17 +266,14 @@ th {
    ========================================================================== */
 
 html {
-    overflow-x: hidden;
-    overflow-y: scroll;
     font-size: 62.5%;
 
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 body {
-    overflow-x: hidden;
+    color: var(--color-darkgrey);
-    color: color(var(--midgrey) l(-25%));
+    font-family: var(--gh-font-body, var(--font-sans));
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    font-size: 1.6rem;
-    font-size: 1.5rem;
     line-height: 1.6em;
     font-weight: 400;
     font-style: normal;
@@ -297,7 +288,7 @@ body {
 
 ::selection {
     text-shadow: none;
-    background: color(var(--blue) lightness(+30%));
+    background: #daf2fd;
 }
 
 hr {
@@ -308,7 +299,7 @@ hr {
     padding: 0;
     height: 1px;
     border: 0;
-    border-top: 1px solid color(var(--lightgrey) l(+10%));
+    border-top: 1px solid #f0f0f0;
 }
 
 audio,
@@ -330,11 +321,11 @@ textarea {
     resize: vertical;
 }
 
-p,
+::not(.gh-content) p,
-ul,
+::not(.gh-content) ul,
-ol,
+::not(.gh-content) ol,
-dl,
+::not(.gh-content) dl,
-blockquote {
+::not(.gh-content) blockquote {
     margin: 0 0 1.5em 0;
 }
 
@@ -348,15 +339,7 @@ ol ol,
 ul ul,
 ul ol,
 ol ul {
-    margin: 0.5em 0 1em;
+    margin: 0.5em 0;
-}
-
-ul {
-    list-style: disc;
-}
-
-ol {
-    list-style: decimal;
 }
 
 ul,
@@ -365,16 +348,19 @@ ol {
 }
 
 li {
-    margin: 0.5em 0;
     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: var(--darkgrey);
+    color: #daf2fd;
     font-weight: 500;
     text-align: right;
 }
@@ -387,13 +373,7 @@ dd {
 blockquote {
     margin: 1.5em 0;
     padding: 0 1.6em 0 1.6em;
-    border-left: var(--whitegrey) 0.5em solid;
+    border-left: #daf2fd;
-}
-
-blockquote p {
-    margin: 0.8em 0;
-    font-size: 1.2em;
-    font-weight: 300;
 }
 
 blockquote small {
@@ -415,14 +395,10 @@ blockquote cite a {
 }
 
 a {
-    color: color(var(--blue) l(-5%));
+    color: #15171A;
     text-decoration: none;
 }
 
-a:hover {
-    text-decoration: underline;
-}
-
 h1,
 h2,
 h3,
@@ -431,37 +407,41 @@ h5,
 h6 {
     margin-top: 0;
     line-height: 1.15;
-    font-weight: 700;
+    font-family: var(--gh-font-heading, var(--font-sans));
+    font-weight: 600;
     text-rendering: optimizeLegibility;
+    letter-spacing: -0.01em;
 }
 
 h1 {
     margin: 0 0 0.5em 0;
-    font-size: 5rem;
+    font-size: 4.8rem;
     font-weight: 700;
+    letter-spacing: -0.015em;
 }
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     h1 {
-        font-size: 2.2rem;
+        font-size: 2.8rem;
     }
 }
 
 h2 {
     margin: 1.5em 0 0.5em 0;
-    font-size: 2rem;
+    font-size: 2.8rem;
+    font-weight: 700;
 }
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     h2 {
-        font-size: 1.8rem;
+        font-size: 2.3rem;
     }
 }
 
 h3 {
     margin: 1.5em 0 0.5em 0;
-    font-size: 1.8rem;
+    font-size: 2.4rem;
-    font-weight: 500;
+    font-weight: 600;
 }
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     h3 {
         font-size: 1.7rem;
     }
@@ -469,18 +449,20 @@ h3 {
 
 h4 {
     margin: 1.5em 0 0.5em 0;
-    font-size: 1.6rem;
+    font-size: 2rem;
-    font-weight: 500;
+}
+@media (max-width: 600px) {
+    h4 {
+        font-size: 1.7rem;
+    }
 }
 
 h5 {
     margin: 1.5em 0 0.5em 0;
-    font-size: 1.4rem;
+    font-size: 2rem;
-    font-weight: 500;
 }
 
 h6 {
     margin: 1.5em 0 0.5em 0;
-    font-size: 1.4rem;
+    font-size: 1.8rem;
-    font-weight: 500;
 }

assets/images/default-skin.svg

@@ -0,0 +1 @@
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>

assets/js/dropdown.js

@@ -0,0 +1,85 @@
+(function () {
+    const mediaQuery = window.matchMedia('(max-width: 767px)');
+
+    const head = document.querySelector('.gh-head');
+    const menu = head.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';
+        });
+    }
+
+    var windowClickListener;
+    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');
+        });
+
+        windowClickListener = function (e) {
+            if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
+                document.body.classList.remove('is-dropdown-open');
+            }
+        };
+        window.addEventListener('click', windowClickListener);
+    }
+
+    imagesLoaded(head, function () {
+        makeDropdown();
+    });
+
+    window.addEventListener('resize', function () {
+        setTimeout(function () {
+            window.removeEventListener('click', windowClickListener);
+            nav.innerHTML = navHTML;
+            makeDropdown();
+        }, 1);
+    });
+})();

assets/js/infinite-scroll.js

@@ -1,15 +1,32 @@
+/* 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) {
+    if (document.documentElement.classList.contains('no-infinite-scroll')) return;
+
     // next link element
     var nextElement = document.querySelector('link[rel=next]');
-    if (!nextElement) return;
+    if (!nextElement) {
+        return;
+    }
 
     // post feed element
     var feedElement = document.querySelector('.post-feed');
-    if (!feedElement) return;
+    if (!feedElement) {
+        return;
+    }
 
     var buffer = 300;
 
@@ -28,9 +45,12 @@
         }
 
         // append contents
-        var postElements = this.response.querySelectorAll('.post-card');
+        var postElements = this.response.querySelectorAll('article.post-card');
         postElements.forEach(function (item) {
-            feedElement.appendChild(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
@@ -50,7 +70,9 @@
 
     function onUpdate() {
         // return if already loading
-        if (loading) return;
+        if (loading) {
+            return;
+        }
 
         // return if not scroll to the bottom
         if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {

assets/js/lightbox.js

@@ -0,0 +1,109 @@
+function lightbox(trigger) {
+    var onThumbnailsClick = function (e) {
+        e.preventDefault();
+
+        var items = [];
+        var index = 0;
+
+        var prevSibling = e.target.closest('.kg-card').previousElementSibling;
+
+        while (prevSibling && (prevSibling.classList.contains('kg-image-card') || prevSibling.classList.contains('kg-gallery-card'))) {
+            var prevItems = [];
+
+            prevSibling.querySelectorAll('img').forEach(function (item) {
+                prevItems.push({
+                    src: item.getAttribute('src'),
+                    msrc: item.getAttribute('src'),
+                    w: item.getAttribute('width'),
+                    h: item.getAttribute('height'),
+                    el: item,
+                })
+
+                index += 1;
+            });
+            prevSibling = prevSibling.previousElementSibling;
+
+            items = prevItems.concat(items);
+        }
+
+        if (e.target.classList.contains('kg-image')) {
+            items.push({
+                src: e.target.getAttribute('src'),
+                msrc: e.target.getAttribute('src'),
+                w: e.target.getAttribute('width'),
+                h: e.target.getAttribute('height'),
+                el: e.target,
+            });
+        } else {
+            var reachedCurrentItem = false;
+
+            e.target.closest('.kg-gallery-card').querySelectorAll('img').forEach(function (item) {
+                items.push({
+                    src: item.getAttribute('src'),
+                    msrc: item.getAttribute('src'),
+                    w: item.getAttribute('width'),
+                    h: item.getAttribute('height'),
+                    el: item,
+                });
+
+                if (!reachedCurrentItem && item !== e.target) {
+                    index += 1;
+                } else {
+                    reachedCurrentItem = true;
+                }
+            });
+        }
+
+        var nextSibling = e.target.closest('.kg-card').nextElementSibling;
+
+        while (nextSibling && (nextSibling.classList.contains('kg-image-card') || nextSibling.classList.contains('kg-gallery-card'))) {
+            nextSibling.querySelectorAll('img').forEach(function (item) {
+                items.push({
+                    src: item.getAttribute('src'),
+                    msrc: item.getAttribute('src'),
+                    w: item.getAttribute('width'),
+                    h: item.getAttribute('height'),
+                    el: item,
+                })
+            });
+            nextSibling = nextSibling.nextElementSibling;
+        }
+
+        var pswpElement = document.querySelectorAll('.pswp')[0];
+
+        var options = {
+            bgOpacity: 0.9,
+            closeOnScroll: true,
+            fullscreenEl: false,
+            history: false,
+            index: index,
+            shareEl: false,
+            zoomEl: false,
+            getThumbBoundsFn: function(index) {
+                var thumbnail = items[index].el,
+                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                    rect = thumbnail.getBoundingClientRect();
+
+                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
+            }
+        }
+
+        var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+        gallery.init();
+
+        return false;
+    };
+
+    var triggers = document.querySelectorAll(trigger);
+    triggers.forEach(function (trig) {
+        trig.addEventListener('click', function (e) {
+            onThumbnailsClick(e);
+        });
+    });
+}
+
+(function () {
+    lightbox(
+        '.kg-image-card > .kg-image[width][height], .kg-gallery-image > img'
+    );
+})();

author.hbs

@@ -1,56 +1,97 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-{{#author}}
-{{!-- Everything inside the #author tags pulls data from the author --}}
-
-
-{{> header background=cover_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
-    <div class="inner">
-        {{> "site-nav"}}
-        <div class="site-header-content">
-            {{#if profile_image}}
-                <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
-            {{/if}}
-            <h1 class="site-title">{{name}}</h1>
-            {{#if bio}}
-                <h2 class="author-bio">{{bio}}</h2>
-            {{/if}}
-            <div class="author-meta">
-                {{#if location}}
-                    <div class="author-location">{{location}} <span class="bull">&bull;</span></div>
-                {{/if}}
-                <div class="author-stats">
-                    {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} <span class="bull">&bull;</span>
-                </div>
-                {{#if website}}
-                    <a class="social-link social-link-wb" href="{{website}}" target="_blank" rel="noopener">{{> "icons/website"}}</a>
-                {{/if}}
-                {{#if twitter}}
-                    <a class="social-link social-link-tw" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
-                {{/if}}
-                {{#if facebook}}
-                    <a class="social-link social-link-fb" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
-                {{/if}}
-                <a class="social-link social-link-rss" href="https://feedly.com/i/subscription/feed/{{url absolute="true"}}rss/" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
-            </div>
-        </div>
-    </div>
-</header>
-{{/author}}
-
-{{!-- The main content area --}}
 <main id="site-main" class="site-main outer">
-    <div class="inner">
+<div class="inner posts">
 
     <div class="post-feed">
-            {{#foreach posts}}
 
+        {{#author}}
+        <section class="post-card post-card-large">
+
+            {{#if cover_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 cover_image size="s"}} 300w,
+                            {{img_url cover_image size="m"}} 600w,
+                            {{img_url cover_image size="l"}} 1000w,
+                            {{img_url cover_image size="xl"}} 2000w"
+                    sizes="(max-width: 1000px) 400px, 800px"
+                    src="{{img_url cover_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="{{social_url type="twitter"}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                        {{/if}}
+                        {{#if facebook}}
+                            <a class="author-profile-social-link" href="{{social_url type="facebook"}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                        {{/if}}
+                        {{#if linkedin}}
+                            <a class="author-profile-social-link" href="{{social_url type="linkedin"}}" target="_blank" rel="noopener">{{> "icons/linkedin"}}</a>
+                        {{/if}}
+                        {{#if bluesky}}
+                            <a class="author-profile-social-link" href="{{social_url type="bluesky"}}" target="_blank" rel="noopener">{{> "icons/bluesky"}}</a>
+                        {{/if}}
+                        {{#if threads}}
+                            <a class="author-profile-social-link" href="{{social_url type="threads"}}" target="_blank" rel="noopener">{{> "icons/threads"}}</a>
+                        {{/if}}
+                        {{#if mastodon}}
+                            <a class="author-profile-social-link" href="{{social_url type="mastodon"}}" target="_blank" rel="noopener">{{> "icons/mastodon"}}</a>
+                        {{/if}}
+                        {{#if tiktok}}
+                            <a class="author-profile-social-link" href="{{social_url type="tiktok"}}" target="_blank" rel="noopener">{{> "icons/tiktok"}}</a>
+                        {{/if}}
+                        {{#if youtube}}
+                            <a class="author-profile-social-link" href="{{social_url type="youtube"}}" target="_blank" rel="noopener">{{> "icons/youtube"}}</a>
+                        {{/if}}
+                        {{#if instagram}}
+                            <a class="author-profile-social-link" href="{{social_url type="instagram"}}" target="_blank" rel="noopener">{{> "icons/instagram"}}</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>
 
+    {{pagination}}
+    
 </div>
 </main>

config.example.json

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

default.hbs

@@ -1,86 +1,119 @@
 <!DOCTYPE html>
-<html lang="{{@site.lang}}">
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
 <head>
 
-    {{!-- Document Settings --}}
+    {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
+    <title>{{meta_title}}</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-    {{!-- Base Meta --}}
-    <title>{{meta_title}}</title>
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     
-    {{!-- Styles'n'Scripts --}}
+    {{!-- Preload scripts --}}
+    <link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
+    <link rel="preload" as="script" href="{{asset "built/casper.js"}}" />
+
+    {{!-- 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 SEO meta+structured data and other important settings --}}
+    {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
+    it should always be the last tag before the closing head tag --}}
     {{ghost_head}}
 
 </head>
-<body class="{{body_class}}">
+<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">
 
-    <div class="site-wrapper">
+    <header id="gh-head" class="gh-head outer{{#match @custom.header_style "Hidden"}} is-header-hidden{{/match}}">
+        <div class="gh-head-inner inner">
+            <div class="gh-head-brand">
+                <a class="gh-head-logo{{#unless @site.logo}} no-image{{/unless}}" 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" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
+                <button class="gh-burger" aria-label="Main Menu"></button>
+            </div>
 
-        {{!-- All the main content gets inserted here, index.hbs, post.hbs, etc --}}
+            <nav class="gh-head-menu">
+                {{navigation}}
+                {{#unless @site.members_enabled}}
+                    {{#match @custom.navigation_layout "Stacked"}}
+                        <button class="gh-search gh-icon-btn" aria-label="Search this site" 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" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
+                    {{/match}}
+                {{else}}
+                    <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
+                    <div class="gh-head-members">
+                        {{#unless @member}}
+                            {{#unless @site.members_invite_only}}
+                                <a class="gh-head-link" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
+                                <a class="gh-head-button" href="#/portal/signup" data-portal="signup">{{t "Subscribe"}}</a>
+                            {{else}}
+                                <a class="gh-head-button" href="#/portal/signin" data-portal="signin">{{t "Sign in"}}</a>
+                            {{/unless}}
+                        {{else}}
+                            <a class="gh-head-button" href="#/portal/account" data-portal="account">{{t "Account"}}</a>
+                        {{/unless}}
+                    </div>
+                {{/unless}}
+            </div>
+        </div>
+    </header>
+
+    <div class="site-content">
+        {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
         {{{body}}}
+    </div>
 
-        {{!-- The footer at the very bottom of the screen --}}
+    {{!-- The global footer at the very bottom of the screen --}}
     <footer class="site-footer outer">
-            <div class="site-footer-content inner">
+        <div class="inner">
             <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
             <nav class="site-footer-nav">
-                    <a href="{{@site.url}}">Latest Posts</a>
+                {{navigation type="secondary"}}
-                    {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
-                    {{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
-                    <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
             </nav>
+            <div><a href="{{@site.url}}" target="_blank" rel="noopener">{{t "Latest Posts"}}</a></div>
         </div>
     </footer>
 
 </div>
+{{!-- /.viewport --}}
 
-    {{!-- The big email subscribe modal content --}}
+{{#is "post, page"}}
-    {{#if @labs.subscribers}}
+    {{> "lightbox"}}
-    <div id="subscribe" class="subscribe-overlay">
+{{/is}}
-        <a class="subscribe-overlay-close" href="#"></a>
-        <div class="subscribe-overlay-content">
-            {{#if @site.logo}}
-                <img class="subscribe-overlay-logo" src="{{@site.logo}}" alt="{{@site.title}}" />
-            {{/if}}
-            <h1 class="subscribe-overlay-title">Subscribe to {{@site.title}}</h1>
-            <p class="subscribe-overlay-description">Stay up to date! Get all the latest &amp; greatest posts delivered straight to your inbox</p>
-            {{subscribe_form placeholder="youremail@example.com"}}
-        </div>
-    </div>
-    {{/if}}
 
-    <script>
+{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
-        var images = document.querySelectorAll('.kg-gallery-image img');
-        images.forEach(function (image) {
-            var container = image.closest('.kg-gallery-image');
-            var width = image.attributes.width.value;
-            var height = image.attributes.height.value;
-            var ratio = width / height;
-            container.style.flex = ratio + ' 1 0%';
-        })
-    </script>
-
-
-    {{!-- jQuery + Fitvids, which makes all video embeds responsive --}}
 <script
-        src="https://code.jquery.com/jquery-3.2.1.min.js"
+    src="https://code.jquery.com/jquery-3.5.1.min.js"
-        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
     crossorigin="anonymous">
 </script>
-    <script type="text/javascript" src="{{asset "built/jquery.fitvids.js"}}"></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>
 
-    <script src="{{asset "built/infinitescroll.js"}}"></script>
+{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
-
-    {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
-    {{{block "scripts"}}}
-
-    {{!-- Ghost outputs important scripts and data with this tag - it should always be the very last thing before the closing body tag --}}
 {{ghost_foot}}
 
 </body>

error-404.hbs

@@ -1,56 +1,37 @@
+{{!< default}}
+
 {{!--
-This error template is used for all 404 errors, which might occur on your site.
+
-It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
+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!
+
 --}}
 
-<!DOCTYPE html>
+<section class="outer error-content">
-<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 class="error-template">
-    <div class="site-wrapper">
-
-        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
     <div class="inner">
-                <nav class="site-nav-center">
-                    {{#if @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>
-        </header>
-
-        <main id="site-main" class="site-main outer">
-            <div class="inner">
-
         <section class="error-message">
-                    <h1 class="error-code">{{code}}</h1>
+            <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>
+            <a class="error-link" href="{{@site.url}}">{{t "Go to the front page"}} →</a>
         </section>
     </div>
-        </main>
+</section>
 
-        {{#get "posts" limit="3"}}
+{{!-- Given that people landing on this page didn't find what they
-        <aside class="outer">
+were looking for, let's give them some alternative stuff to read. --}}
-            <div class="inner">
+<aside class="read-more-wrap outer">
-                <div class="post-feed">
+    <div class="read-more inner">
-                    {{#foreach posts}}
+        {{#get "posts" include="authors" limit="3" as |more_posts|}}
+            {{#if more_posts}}
+                {{#foreach more_posts}}
                     {{> "post-card"}}
                 {{/foreach}}
-                </div>
+            {{/if}}
+        {{/get}}
     </div>
 </aside>
-        {{/get}}
-
-    </div>
-</body>
-</html>

error.hbs

@@ -1,7 +1,15 @@
 {{!--
-This error template is used for all 400/500 errors, except 404, which might occur on your site.
+
-It's a good idea to keep this template as minimal as possible in terms of both file size and complexity.
+There are two error files in this theme, one for 404s and one for all other errors.
-You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in this file.
+This file is the latter, and handles all 400/500 errors that might occur.
+
+Because 500 errors in particular usually 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>
@@ -14,28 +22,31 @@ You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
 </head>
-<body class="error-template">
+<body>
     <div class="site-wrapper">
 
-        <header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-image{{/if}}">
+        <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>
+                        <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 id="site-main" class="site-main outer">
+        <main class="outer error-content">
             <div class="inner">
 
                 <section class="error-message">
-                    <h1 class="error-code">{{code}}</h1>
+                    <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>
+                    <a class="error-link" href="{{@site.url}}">{{t "Go to the front page"}} →</a>
                 </section>
 
                 {{#if errorDetails}}
@@ -47,8 +58,8 @@ You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in
                                 <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">{{t "Ref"}} {{ref}}</span></p>
-                                    <p><span class="error-stack-file">Message: {{message}}</span></p>
+                                    <p><span class="error-stack-file">{{t "Message"}} {{message}}</span></p>
                                 {{/foreach}}
                             </li>
                         {{/foreach}}

gulpfile.js

@@ -1,20 +1,28 @@
 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-function');
+const colorFunction = require('postcss-color-mod-function');
 const cssnano = require('cssnano');
-const customProperties = require('postcss-custom-properties');
 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();
@@ -37,17 +45,14 @@ function hbs(done) {
 }
 
 function css(done) {
-    const processors = [
-        easyimport,
-        customProperties({preserve: false}),
-        colorFunction(),
-        autoprefixer({browsers: ['last 2 versions']}),
-        cssnano()
-    ];
-
     pump([
         src('assets/css/*.css', {sourcemaps: true}),
-        postcss(processors),
+        postcss([
+            easyimport,
+            colorFunction(),
+            autoprefixer(),
+            cssnano()
+        ]),
         dest('assets/built/', {sourcemaps: '.'}),
         livereload()
     ], handleError(done));
@@ -55,7 +60,12 @@ function css(done) {
 
 function js(done) {
     pump([
-        src('assets/js/*.js', {sourcemaps: true}),
+        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()
@@ -63,47 +73,75 @@ function js(done) {
 }
 
 function zipper(done) {
-    const targetDir = 'dist/';
+    const filename = require('./package.json').name + '.zip';
-    const themeName = require('./package.json').name;
-    const filename = themeName + '.zip';
 
     pump([
         src([
             '**',
             '!node_modules', '!node_modules/**',
-            '!dist', '!dist/**'
+            '!dist', '!dist/**',
+            '!yarn-error.log',
+            '!yarn.lock',
+            '!gulpfile.js'
         ]),
         zip(filename),
-        dest(targetDir)
+        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, hbsWatcher);
+const watcher = parallel(cssWatcher, jsWatcher, hbsWatcher);
 const build = series(css, js);
-const dev = series(build, serve, watcher);
 
 exports.build = build;
 exports.zip = series(build, zipper);
-exports.default = dev;
+exports.default = series(build, serve, watcher);
 
-// release imports
+exports.release = async () => {
-const path = require('path');
+    // @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
-const releaseUtils = require('@tryghost/release-utils');
+    // 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;
 
-let config;
+    if (!newVersion || newVersion === '') {
-try {
+        console.log(`Invalid version: ${newVersion}`);
-    config = require('./config');
+        return;
-} catch (err) {
-    config = null;
     }
 
-const REPO = 'TryGhost/Casper';
+    console.log(`\nCreating release for ${newVersion}...`);
-const USER_AGENT = 'Casper';
+
-const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
+    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 = ({previousVersion}) => {
         const changelog = new releaseUtils.Changelog({
             changelogPath: CHANGELOG_PATH,
             folder: path.join(process.cwd(), '.')
@@ -116,92 +154,23 @@ const changelog = ({previousVersion}) => {
             })
             .sort()
             .clean();
-};
 
-const previousRelease = () => {
+        const newReleaseResponse = await releaseUtils.releases.create({
-    return releaseUtils
-        .releases
-        .get({
-            userAgent: USER_AGENT,
-            uri: `https://api.github.com/repos/${REPO}/releases`
-        })
-        .then((response) => {
-            if (!response || !response.length) {
-                console.log('No releases found. Skipping');
-                return;
-            }
-
-            console.log(`Previous version ${response[0].name}`);
-            return response[0].name;
-        });
-};
-
-/**
- *
- * `yarn ship` will trigger `postship` task.
- *
- * [optional] For full automation
- *
- * `GHOST=2.10.1,2.10.0 yarn ship`
- * First value: Ships with Ghost
- * Second value: Compatible with Ghost/GScan
- *
- * You can manually run in case the task has thrown an error.
- *
- * `npm_package_version=0.5.0 gulp release`
- */
-const release = () => {
-    // @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
-    const newVersion = process.env.npm_package_version;
-    let shipsWithGhost = '{version}';
-    let compatibleWithGhost = '2.10.0';
-    const ghostEnvValues = process.env.GHOST || null;
-
-    if (ghostEnvValues) {
-        shipsWithGhost = ghostEnvValues.split(',')[0];
-        compatibleWithGhost = ghostEnvValues.split(',')[1];
-
-        if (!compatibleWithGhost) {
-            compatibleWithGhost = '2.10.0';
-        }
-    }
-
-    if (!newVersion || newVersion === '') {
-        console.log('Invalid version.');
-        return;
-    }
-
-    console.log(`\nDraft release for ${newVersion}.`);
-
-    if (!config || !config.github || !config.github.username || !config.github.token) {
-        console.log('Please copy config.example.json and configure Github token.');
-        return;
-    }
-
-    return previousRelease()
-        .then((previousVersion) => {
-            changelog({previousVersion});
-
-            return releaseUtils
-                .releases
-                .create({
             draft: true,
             preRelease: false,
-                    tagName: newVersion,
+            tagName: 'v' + newVersion,
             releaseName: newVersion,
-                    userAgent: USER_AGENT,
+            userAgent: 'Casper',
             uri: `https://api.github.com/repos/${REPO}/releases`,
             github: {
-                        username: config.github.username,
+                token: githubToken
-                        token: config.github.token
             },
-                    content: [`**Ships with Ghost ${shipsWithGhost} Compatible with Ghost >= ${compatibleWithGhost}**\n\n`],
+            content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
             changelogPath: CHANGELOG_PATH
-                })
-                .then((response) => {
-                    console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
-                });
         });
+        console.log(`\nRelease draft generated: ${newReleaseResponse.releaseUrl}\n`);
+    } catch (err) {
+        console.error(err);
+        process.exit(1);
+    }
 };
-
-exports.release = release;

index.hbs

@@ -2,34 +2,53 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-{{> header background=@site.cover_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
+<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}}">
-    <div class="inner">
+
-        <div class="site-header-content">
+    {{#if @custom.show_publication_cover}}
-            <h1 class="site-title">
+        {{#if @site.cover_image}}
-                {{#if @site.logo}}
+            {{!-- This is a responsive image, it loads different sizes depending on device
-                    <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-                {{else}}
+            <img class="site-header-cover"
-                    {{@site.title}}
+                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}}
-            </h1>
-            <h2 class="site-description">{{@site.description}}</h2>
         </div>
-        {{> "site-nav"}}
+    {{/match}}
+
 </div>
-</header>
 
 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer">
-    <div class="inner">
+<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}}
     </div>
 
+    {{pagination}}
+
 </div>
 </main>

locales/de.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Geben sie ihre E-Mail Adresse ein",
+	"Account": "Konto",
+	"Subscribe": "Abonnieren",
+	"Subscribe to {blogtitle}": "Abonniere {blogtitle}",
+	"A collection of posts": "Eine Sammlung von Artikeln",
+	"A collection of 1 post": "Eine Sammlung von einem Artikel",
+	"A collection of % posts": "Eine Sammlung von % Artikeln",
+	"Get the latest posts delivered right to your inbox": "Erhalte die neusten Artikel direkt in dein Postfach",
+	"Go to the front page": "Gehe zur Startseite",
+	"Latest Posts": "Neuste Artikel",
+	"Message": "Fehlermeldung",
+	"No posts": "Keine Artikel",
+	"Ref": "Ref",
+	"1 post": "1 Artikel",
+	"% posts": "% Artikel",
+	"1 min read": "Lesezeit: 1 Min.",
+	"% min read": "Lesezeit: % Min.",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Großartig!</strong> Überprüfen Sie Ihren Posteingang und klicken Sie auf den Link, um Ihr Abonnement zu bestätigen.",
+	"Please enter a valid email address!": "Bitte geben Sie eine gültige E-Mail-Adresse ein!"
+}

locales/en.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Enter your email",
+	"Account": "Account",
+	"Subscribe": "Subscribe",
+	"Subscribe to {blogtitle}": "Subscribe to {blogtitle}",
+	"A collection of posts": "A collection of posts",
+	"A collection of 1 post": "A collection of 1 post",
+	"A collection of % posts": "A collection of % posts",
+	"Get the latest posts delivered right to your inbox": "Get the latest posts delivered right to your inbox",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Latest Posts",
+	"Message": "Message",
+	"No posts": "No posts",
+	"Ref": "Ref",
+	"1 post": "1 post",
+	"% posts": "% posts",
+	"1 min read": "1 min read",
+	"% min read": "% min read",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.",
+	"Please enter a valid email address!": "Please enter a valid email address!"
+}

locales/es.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Introduce tu correo electrónico",
+	"Account": "Cuenta ",
+	"Subscribe": "Suscríbete",
+	"Subscribe to {blogtitle}": "Suscríbete a {blogtitle}",
+	"A collection of posts": "Una colección de artículos",
+	"A collection of 1 post": "Una colección de 1 artículo",
+	"A collection of % posts": "Una colección de % artículos",
+	"Get the latest posts delivered right to your inbox": "Recibe los últimos artículos directamente en tu buzón",
+	"Go to the front page": "Ir a la página de inicio",
+	"Latest Posts": "Últimos Artículos",
+	"Message": "Mensaje",
+	"No posts": "No hay artículos",
+	"Ref": "Ref",
+	"1 post": "1 artículo",
+	"% posts": "% artículos",
+	"1 min read": "1 min de lectura",
+	"% min read": "% min de lectura",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>¡Excelente!</strong> Revise su bandeja de entrada y haga clic en el enlace para confirmar su suscripción.",
+	"Please enter a valid email address!": "¡Por favor, introduce una dirección de correo electrónico válida!"
+}

locales/fi.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Syötä sähköpostiosoitteesi",
+	"Account": "Tili",
+	"Subscribe": "Tilaa",
+	"Subscribe to {blogtitle}": "Tilaa blogi {blogtitle}",
+	"A collection of posts": "Artikkelien kokoelma",
+	"A collection of 1 post": "Kokoelmassa 1 artikkeli",
+	"A collection of % posts": "Kokoelmassa % artikkelia",
+	"Get the latest posts delivered right to your inbox": "Tilaa uusimmat artikkelit suoraan sähköpostiisi",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Uusimmat artikkelit",
+	"Message": "Viesti",
+	"No posts": "Ei artikkeleita",
+	"Ref": "Ref",
+	"1 post": "Yksi artikkeli",
+	"% posts": "% artikkelia",
+	"1 min read": "Lukuaika 1 minuutti",
+	"% min read": "Lukuaika % minuuttia",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Loistava!</strong> Tarkista postilaatikkosi ja vahvista tilauksesi napsauttamalla linkkiä.",
+	"Please enter a valid email address!": "Ole hyvä ja syötä toimiva sähköpostiosoite!"
+}

locales/fr.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Entrer votre Email",
+	"Account": "Compte",
+	"Subscribe": "S’abonner",
+	"Subscribe to {blogtitle}": "S’abonner à {blogtitle}",
+	"A collection of posts": "Une catégorie d’articles",
+	"A collection of 1 post": "Une catégorie avec un article",
+	"A collection of % posts": "Une catégorie avec % articles",
+	"Get the latest posts delivered right to your inbox": "Recevez les derniers articles directement dans votre boîte aux lettres.",
+	"Go to the front page": "Aller sur la page d’accueil",
+	"Latest Posts": "Derniers articles",
+	"Message": "Message",
+	"No posts": "Aucun article",
+	"Ref": "Réf",
+	"1 post": "Un article",
+	"% posts": "% articles",
+	"1 min read": "1 min de lecture",
+	"% min read": "% min de lecture",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Génial!</strong> Vérifiez votre boîte de réception et cliquez sur le lien pour confirmer votre abonnement.",
+	"Please enter a valid email address!": "S'il vous plaît, mettez une adresse email valide!"
+}

locales/hr.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Upiši svoj email",
+	"Account": "Račun",
+	"Subscribe": "Pretplati se",
+	"Subscribe to {blogtitle}": "Pretplati se na {blogtitle}",
+	"A collection of posts": "Kolekcija postova",
+	"A collection of 1 post": "Kolekcija s jednim postom",
+	"A collection of % posts": "Kolekcija sa % postova",
+	"Get the latest posts delivered right to your inbox": "Najnoviji postovi će biti dostavljeni u tvoj inbox",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Noviji Postovi",
+	"Message": "Poruka",
+	"No posts": "Nema postova",
+	"Ref": "Ref",
+	"1 post": "1 post",
+	"% posts": "% postova",
+	"1 min read": "1 min čitanja",
+	"% min read": "% min čitanja",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Sjajno!</strong> Provjerite pristiglu poštu i kliknite vezu da biste potvrdili pretplatu.",
+	"Please enter a valid email address!": "Unesite valjanu adresu e-pošte!"
+}

locales/hu.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Írd be az email címed",
+	"Account": "fiók",
+	"Subscribe": "Feliratkozás",
+	"Subscribe to {blogtitle}": "Iratkozz fel a {blogtitle}re",
+	"A collection of posts": "Cikkek gyűjteménye",
+	"A collection of 1 post": "Itt csupán egy cikk van",
+	"A collection of % posts": "% cikk gyűjteménye",
+	"Get the latest posts delivered right to your inbox": "Olvasd a legfrissebb cikkeket egyenesen a virtuális postaládádból",
+	"Go to the front page": "Vissza a kezdőlapra",
+	"Latest Posts": "Legfrissebb cikkek",
+	"Message": "Üzenet:",
+	"No posts": "Nincsenek cikkek",
+	"Ref": "Ref",
+	"1 post": "1 cikk",
+	"% posts": "% cikk",
+	"1 min read": "1 perces",
+	"% min read": "% perces",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Nagy!</strong> Ellenőrizze a beérkező leveleket, és kattintson a linkre az előfizetés megerősítéséhez.",
+	"Please enter a valid email address!": "Kérjük valós e-mail címet adjon meg!"
+}

locales/id.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Masukkan email Anda",
+	"Account": "Akun",
+	"Subscribe": "Langganan",
+	"Subscribe to {blogtitle}": "Langganan ke {blogtitle}",
+	"A collection of posts": "Koleksi artikel-artikel",
+	"A collection of 1 post": "Koleksi berisi 1 artikel",
+	"A collection of % posts": "Koleksi berisi % artikel",
+	"Get the latest posts delivered right to your inbox": "Langganan via email",
+	"Go to the front page": "Ke halaman depan",
+	"Latest Posts": "Artikel terbaru",
+	"Message": "Pesan",
+	"No posts": "Tidak ada artikel",
+	"Ref": "Ref",
+	"1 post": "1 artikel",
+	"% posts": "% artikel",
+	"1 min read": "Bacaan 1 menit",
+	"% min read": "Bacaan % menit",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Bagus!</strong> Periksa kotak masuk Anda dan klik tautan untuk mengonfirmasi langganan Anda.",
+	"Please enter a valid email address!": "Silakan isi alamat email!"
+}

locales/it.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Inserisci la tua email",
+	"Account": "Account",
+	"Subscribe": "Iscriviti",
+	"Subscribe to {blogtitle}": "Iscriviti a {blogtitle}",
+	"A collection of posts": "Una collezione di articoli",
+	"A collection of 1 post": "Una collezione di 1 articolo",
+	"A collection of % posts": "Una collezione di % articoli",
+	"Get the latest posts delivered right to your inbox": "Ricevi gli articoli più recenti direttamente nella tua casella di posta",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Ultimi articoli",
+	"Message": "Messaggio",
+	"No posts": "Nessun articolo",
+	"Ref": "Rif",
+	"1 post": "1 articolo",
+	"% posts": "% articoli",
+	"1 min read": "1 minuto di lettura",
+	"% min read": "% minuti di lettura",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Ottimo!</strong> Controlla la posta in arrivo e fai clic sul link per confermare l'iscrizione.",
+	"Please enter a valid email address!": "Si prega di inserire un indirizzo email valido!"
+}

locales/lt.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Įrašykite savo el. paštą",
+	"Account": "Sąskaita",
+	"Subscribe": "Prenumeruoti",
+	"Subscribe to {blogtitle}": "Prenumeruoti {blogtitle}",
+	"A collection of posts": "A collection of posts",
+	"A collection of 1 post": "A collection of 1 post",
+	"A collection of % posts": "A collection of % posts",
+	"Get the latest posts delivered right to your inbox": "Gaukite naujienas į savo pašto dėžutę",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Paskutiniai įrašai",
+	"Message": "Pranešimas",
+	"No posts": "Nėra įrašų",
+	"Ref": "Nuoroda",
+	"1 post": "1 įrašas",
+	"% posts": "% įrašų",
+	"1 min read": "1 min skaitymo",
+	"% min read": "% min skaitymo",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Puiku!</strong> Patikrinkite gautuosius ir spustelėkite nuorodą, kad patvirtintumėte prenumeratą.",
+	"Please enter a valid email address!": "Prašome įvesti galiojantį elektroninio pašto adresą!"
+}

locales/lv.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Ievadiet savu e-pastu",
+	"Account": "Konts",
+	"Subscribe": "Abonēt",
+	"Subscribe to {blogtitle}": "Abonēt {blogtitle}",
+	"A collection of posts": "Ziņu kolekcija",
+	"A collection of 1 post": "1 ziņa kolekcija",
+	"A collection of % posts": "% ziņu kolekcija",
+	"Get the latest posts delivered right to your inbox": "Saņemiet jaunākās ziņas tieši jūsu iesūtnē",
+	"Go to the front page": "Dodieties uz sākumlapu",
+	"Latest Posts": "Dodieties uz sākumlapu",
+	"Message": "Ziņojums",
+	"No posts": "Nav ziņu",
+	"Ref": "Atsauce",
+	"1 post": "1 ziņa",
+	"% posts": "% ziņas",
+	"1 min read": "1 minūte lasīt",
+	"% min read": "% minūtes lasīts",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Lieliski!</strong> Pārbaudiet savu iesūtni un noklikšķiniet uz saites, lai apstiprinātu abonementu.",
+	"Please enter a valid email address!": "Lūdzu, ievadiet derīgu e-pasta adresi!"
+}

locales/nb.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Skriv inn din email",
+	"Account": "Regnskap",
+	"Subscribe": "Abbonér",
+	"Subscribe to {blogtitle}": "Abbonér på {blogtitle}",
+	"A collection of posts": "En samling innlegg",
+	"A collection of 1 post": "En samling av 1 innlegg",
+	"A collection of % posts": "En samling % innlegg",
+	"Get the latest posts delivered right to your inbox": "Få siste innlegg levert rett til din innboks",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Siste innlegg",
+	"Message": "Beskjed",
+	"No posts": "Ingen innlegg",
+	"Ref": "Ref",
+	"1 post": "1 innlegg",
+	"% posts": "% innlegg",
+	"1 min read": "1 min lesetid",
+	"% min read": "% min lesetid",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Flott!</strong> Sjekk innboksen din, og klikk på lenken for å bekrefte abonnementet.",
+	"Please enter a valid email address!": "Vennligst skriv inn en gyldig e-post adresse!"
+}

locales/nl.json

@@ -0,0 +1,22 @@
+{
+	"Enter your email": "Voer je mailadres in ",
+	"Account": "Account",
+	"Subscribe": "Abonneren",
+	"Sign in": "Inloggen",
+	"Subscribe to {blogtitle}": "Abonneer je op {blogtitle}",
+	"A collection of posts": "Een collectie van berichten",
+	"A collection of 1 post": "Een collectie van 1 bericht",
+	"A collection of % posts": "Een collectie van % berichten",
+	"Get the latest posts delivered right to your inbox": "Krijg nieuwe berichten direct in je inbox",
+	"Go to the front page": "Ga naar de voorpagina",
+	"Latest Posts": "Laatste berichten",
+	"Message": "Melding",
+	"No posts": "Geen berichten",
+	"Ref": "Ref",
+	"1 post": "1 bericht",
+	"% posts": "% bericht",
+	"1 min read": "1 minuut leestijd",
+	"% min read": "% minuten leestijd",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Geweldig!</strong> Controleer je inbox en klik op de link om je abonnement te bevestigen.",
+	"Please enter a valid email address!": "Voer alsjeblieft geen geldig e-mailadres in!"
+}

locales/pl.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Wprowadź swój email",
+	"Account": "Rachunek",
+	"Subscribe": "Subskrybuj",
+	"Subscribe to {blogtitle}": "Subskrybuj {blogtitle}",
+	"A collection of posts": "Kolekcja wpisów",
+	"A collection of 1 post": "Kolekcja 1 wpisu",
+	"A collection of % posts": "Kolekcja % wpisów",
+	"Get the latest posts delivered right to your inbox": "Otrzymuj najnowsze wpisy na skrzynkę pocztową",
+	"Go to the front page": "Przejdź do strony głównej",
+	"Latest Posts": "Najnowsze wpisy",
+	"Message": "Wiadomość",
+	"No posts": "Brak wpisów",
+	"Ref": "Ref",
+	"1 post": "1 wpis",
+	"% posts": "% wpisów",
+	"1 min read": "lektura na 1 min",
+	"% min read": "lektura na % min",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Świetnie!</strong> Sprawdź swoją skrzynkę odbiorczą i kliknij link, aby potwierdzić subskrypcję.",
+	"Please enter a valid email address!": "Proszę wpisać aktualny adres e-mail!"
+}

locales/ro.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Introduceți adresa dvs. de email",
+	"Account": "Cont",
+	"Subscribe": "Înscrie-te",
+	"Subscribe to {blogtitle}": "Înscrie-te la {blogtitle}",
+	"A collection of posts": "O colecție de articole",
+	"A collection of 1 post": "O colecție de un articol",
+	"A collection of % posts": "O colecție de % articole",
+	"Get the latest posts delivered right to your inbox": "Citește ultimele articole livrate direct în inbox-ul tău",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Ultimele Articole",
+	"Message": "Mesaj",
+	"No posts": "Nu există articole",
+	"Ref": "Ref",
+	"1 post": "1 articol",
+	"% posts": "% articole",
+	"1 min read": "lectură de 1 min",
+	"% min read": "lectură de % min",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Minunat!</strong> Verificați căsuța de e-mail și dați clic pe link pentru a vă confirma abonamentul.",
+	"Please enter a valid email address!": "Te rog introdu o adresa de email valida!"
+}

locales/ru.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Введите адрес электронной почты",
+	"Account": "Аккаунт",
+	"Subscribe": "Подписаться",
+	"Subscribe to": "Подписаться на",
+	"A collection of posts": "Коллекция статей",
+	"A collection of 1 post": "Коллекция из 1 статьи",
+	"A collection of % posts": "Коллекция из % статей",
+	"Get the latest posts delivered right to your inbox": "Получайте свежие статьи прямо на свою почту",
+	"Go to the front page": "На главную",
+	"Latest Posts": "Последние статьи",
+	"Message": "Сообщение",
+	"No posts": "Статьи отсутствуют",
+	"Ref": "Ссылка",
+	"1 post": "1 статья",
+	"% posts": "% статьи(-ей)",
+	"1 min read": "1 мин на чтение",
+	"% min read": "% мин на чтение",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Отлично!</strong> Проверьте свой почтовый ящик и нажмите ссылку, чтобы подтвердить подписку",
+	"Please enter a valid email address!": "Пожалуйста, введите действительный адрес электронной почты!"
+}

locales/sv.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "Skriv in din e-postadress",
+	"Account": "Konto",
+	"Subscribe": "Prenumerera",
+	"Subscribe to {blogtitle}": "Prenumerera på {blogtitle}",
+	"A collection of posts": "En samling artiklar",
+	"A collection of 1 post": "En samling av 1 artikel",
+	"A collection of % posts": "En samling av % artiklar",
+	"Get the latest posts delivered right to your inbox": "Få de senaste artiklarna levererade direkt till din inkorg",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "Senaste artiklarna",
+	"Message": "Meddelande",
+	"No posts": "Inga artiklar",
+	"Ref": "Ref",
+	"1 post": "1 artikel",
+	"% posts": "% artiklar",
+	"1 min read": "1 minuts läsning",
+	"% min read": "% minuters läsning",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Bra!</strong> Kontrollera din inkorg och klicka på länken för att bekräfta din prenumeration.",
+	"Please enter a valid email address!": "Ange en giltig e-postadress!"
+}

locales/tr.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "E-postanızı giriniz",
+	"Account": "Hesap",
+	"Subscribe": "Abone Ol",
+	"Subscribe to {blogtitle}": "{blogtitle} abone ol",
+	"A collection of posts": "Yazılar",
+	"A collection of 1 post": "1 yazı",
+	"A collection of % posts": "% yazı",
+	"Get the latest posts delivered right to your inbox": "Son paylaşılan içerikler gelen kutuna gelsin",
+	"Go to the front page": "Anasayfaya git",
+	"Latest Posts": "Son Yazılar",
+	"Message": "İleti",
+	"No posts": "İçerik Yok",
+	"Ref": "Ref",
+	"1 post": "1 yazı",
+	"% posts": "% yazı",
+	"1 min read": "1 dakikalık okuma",
+	"% min read": "% dakikalık okuma",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>Harika!</strong> Gelen kutunuzu kontrol edin ve aboneliğinizi onaylamak için bağlantıyı tıklayın.",
+	"Please enter a valid email address!": "Geçerli bir e!"
+}

locales/zh.json

@@ -0,0 +1,21 @@
+{
+	"Enter your email": "输入你的电子邮箱",
+	"Account": "帐户",
+	"Subscribe": "订阅",
+	"Subscribe to {blogtitle}": "订阅{blogtitle}",
+	"A collection of posts": "文章集合",
+	"A collection of 1 post": "共1篇文章",
+	"A collection of % posts": "共%篇文章",
+	"Get the latest posts delivered right to your inbox": "最新文章直达邮箱",
+	"Go to the front page": "Go to the front page",
+	"Latest Posts": "最新文章",
+	"Message": "信息",
+	"No posts": "没有文章",
+	"Ref": "参考",
+	"1 post": "1 篇文章",
+	"% posts": "% 篇文章",
+	"1 min read": "1 min read",
+	"% min read": "% min read",
+	"<strong>Great!</strong> Check your inbox and click the link to confirm your subscription.": "<strong>好极了！</strong> 检查您的收件箱，然后单击链接以确认您的订阅。",
+	"Please enter a valid email address!": "请输入有效的电子邮件地址！"
+}

package.json

@@ -1,11 +1,10 @@
 {
-    "name": "casper",
+    "name": "casper-i18n",
-    "description": "The default personal blogging theme for Ghost. Beautiful, minimal and responsive.",
+    "description": "The same casper theme, but with localization support",
     "demo": "https://demo.ghost.io",
-    "version": "2.11.2",
+    "version": "5.9.0",
     "engines": {
-        "ghost": ">=2.0.0",
+        "ghost": ">=5.0.0"
-        "ghost-api": "v2"
     },
     "license": "MIT",
     "screenshots": {
@@ -16,6 +15,7 @@
         "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",
@@ -24,7 +24,7 @@
     "author": {
         "name": "Ghost Foundation",
         "email": "hello@ghost.org",
-        "url": "https://ghost.org"
+        "url": "https://ghost.org/"
     },
     "gpm": {
         "type": "theme",
@@ -45,21 +45,26 @@
     "bugs": "https://github.com/TryGhost/Casper/issues",
     "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
     "devDependencies": {
-        "@tryghost/release-utils": "0.3.2",
+        "@tryghost/release-utils": "0.8.1",
-        "autoprefixer": "9.6.1",
+        "autoprefixer": "10.4.7",
-        "beeper": "1.1.1",
+        "beeper": "2.1.0",
-        "cssnano": "4.1.10",
+        "cssnano": "5.1.12",
-        "gscan": "2.9.0",
+        "gscan": "4.48.0",
         "gulp": "4.0.2",
+        "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",
-        "gulp-postcss": "8.0.0",
+        "gulp-postcss": "9.0.1",
         "gulp-uglify": "3.0.2",
-        "gulp-zip": "4.2.0",
+        "gulp-zip": "5.1.0",
-        "postcss-color-function": "4.1.0",
+        "inquirer": "8.2.4",
-        "postcss-custom-properties": "8.0.11",
+        "postcss": "8.2.13",
-        "postcss-easy-import": "3.0.0",
+        "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": {
@@ -81,6 +86,94 @@
             "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

@@ -1,28 +1,22 @@
 {{!< default}}
+
 {{!-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template --}}
+into the {body} tag of the default.hbs template --}}
 
-{{!-- The big featured header, it uses blog cover image as a BG if available --}}
-<header class="site-header outer">
-    <div class="inner">
-        {{> "site-nav"}}
-    </div>
-</header>
 
-{{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
+{{!-- Everything inside the #post block pulls data from the page --}}
 
-<main id="site-main" class="site-main outer">
+<main id="site-main" class="site-main">
-    <div class="inner">
+<article class="article {{post_class}}">
 
-        <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
+    {{#match @page.show_title_and_feature_image}}
+        <header class="article-header gh-canvas">
 
-            <header class="post-full-header">
+            <h1 class="article-title">{{title}}</h1>
-                <h1 class="post-full-title">{{title}}</h1>
-            </header>
 
             {{#if feature_image}}
-            <figure class="post-full-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
@@ -30,34 +24,24 @@ into the {body} of the default.hbs template --}}
                                 {{img_url feature_image size="m"}} 600w,
                                 {{img_url feature_image size="l"}} 1000w,
                                 {{img_url feature_image size="xl"}} 2000w"
-                    sizes="(max-width: 800px) 400px,
+                        sizes="(min-width: 1400px) 1400px, 92vw"
-                            (max-width: 1170px) 700px,
-                            1400px"
                         src="{{img_url feature_image size="xl"}}"
-                    alt="{{title}}"
+                        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                     />
+                    {{#if feature_image_caption}}
+                        <figcaption>{{feature_image_caption}}</figcaption>
+                    {{/if}}
                 </figure>
             {{/if}}
 
-            <section class="post-full-content">
+        </header>
-                <div class="post-content">
+    {{/match}}
+
+    <section class="gh-content gh-canvas">
         {{content}}
-                </div>
     </section>
 
 </article>
-
-    </div>
 </main>
 
 {{/post}}
-
-{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
-{{#contentFor "scripts"}}
-<script>
-$(function() {
-    var $postContent = $(".post-full-content");
-    $postContent.fitVids();
-});
-</script>
-{{/contentFor}}

partials/byline-multiple.hbs

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

partials/byline-single.hbs

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

partials/floating-header.hbs

@@ -1,28 +0,0 @@
-<div class="floating-header">
-    <div class="floating-header-logo">
-        <a href="{{@site.url}}">
-            {{#if @site.icon}}
-                <img src="{{img_url @site.icon size="xxs"}}" alt="{{@site.title}} icon" />
-            {{/if}}
-            <span>{{@site.title}}</span>
-        </a>
-    </div>
-    <span class="floating-header-divider">&mdash;</span>
-    <div class="floating-header-title">{{title}}</div>
-    <div class="floating-header-share">
-        <div class="floating-header-share-label">Share this {{> "icons/point"}}</div>
-        <a class="floating-header-share-tw" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
-            onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
-            {{> "icons/twitter"}}
-        </a>
-        <a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
-            onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
-            {{> "icons/facebook"}}
-        </a>
-    </div>
-    <progress id="reading-progress" class="progress" value="0">
-        <div class="progress-container">
-            <span class="progress-bar"></span>
-        </div>
-    </progress>
-</div>

partials/header.hbs

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

partials/icons/bluesky.hbs

@@ -0,0 +1,3 @@
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.8868 11.3624C10.8107 9.1288 7.87874 4.96656 5.15331 2.91348C3.18679 1.43245 0 0.28612 0 3.93314C0 4.66121 0.416033 10.0519 0.660462 10.927C1.50889 13.9693 4.60131 14.7453 7.352 14.2758C2.54378 15.0967 1.32092 17.8158 3.9624 20.535C8.97901 25.6994 11.1728 19.2393 11.7346 17.584C11.8385 17.2784 11.8868 17.1365 11.8868 17.262C11.8868 17.1365 11.9351 17.2784 12.0391 17.584C12.6008 19.2393 14.7946 25.6994 19.8113 20.535C22.4527 17.8158 21.2298 15.0967 16.4217 14.2758C19.1723 14.7453 22.2648 13.9693 23.1132 10.927C23.3576 10.0519 23.7736 4.66121 23.7736 3.93314C23.7736 0.28612 20.5872 1.43245 18.6204 2.91348C15.8949 4.96656 12.963 9.1288 11.8868 11.3624Z" fill="currentColor"/>
+</svg>

partials/icons/facebook.hbs

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
+<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/ghost-logo.hbs

@@ -1 +0,0 @@
-<svg class="ghost-svg" viewBox="0 0 493 161" xmlns="http://www.w3.org/2000/svg"><title>Ghost Logo</title><g fill="none" fill-rule="evenodd"><path d="M328.52 37.36c-27.017 0-40.97 19.323-40.97 43.16 0 23.837 13.61 43.162 40.97 43.162s40.968-19.325 40.968-43.163c0-23.84-13.954-43.16-40.97-43.16zm20.438 43.237c-.02 15.328-5.126 27.743-20.44 27.743-15.312 0-20.42-12.414-20.435-27.743v-.078c.016-15.33 5.124-27.74 20.437-27.74 15.312 0 20.42 12.41 20.438 27.74v.07zM207.553 5.19c0-1.103.885-2.124 1.984-2.282 0 0 13.577-1.95 14.784-2.115 1.37-.187 3.19.798 3.19 2.744v44.236c3.23-3.105 6.79-5.608 10.66-7.515 3.88-1.906 8.43-2.86 13.66-2.86 4.53 0 8.53.776 12.03 2.33 3.5 1.55 6.43 3.73 8.77 6.533 2.34 2.81 4.12 6.16 5.33 10.05 1.21 3.9 1.82 8.19 1.82 12.87v51.35c0 1.1-.89 2-2 2h-15.95c-1.1 0-2-.9-2-1.99V69.18c0-5.118-1.17-9.08-3.51-11.888-2.35-2.804-5.86-4.207-10.544-4.207-3.45 0-6.677.79-9.69 2.37-3.02 1.58-5.87 3.73-8.564 6.46v58.617c0 1.102-.894 2-2.002 2h-15.94c-1.11 0-2.005-.895-2.005-2V5.188zm244.007 95.327v-43.68h-13.482c-1.1 0-1.742-.87-1.443-1.916l3-10.49c.262-.9.942-1.87 2.308-2.07l9.597-1.35 3.508-23.49c.163-1.09 1.18-2.1 2.274-2.26 0 0 9.192-1.31 10.963-1.58 1.673-.25 3.19.97 3.19 2.81v24.52h17.565c1.106 0 2.002.9 2.002 2.01v11.82c0 1.11-.89 2.01-2.002 2.01h-17.566v43.08c0 6.02 3.623 8.32 7.095 8.32 2.12 0 5.02-1.14 7.19-2.16 1.34-.62 3.41-.16 3.95 1.73l2.45 8.65c.3 1.07-.25 2.37-1.23 2.86 0 0-7.29 4.37-17.06 4.37-13.73 0-22.33-8.08-22.33-23.16zm-44.584-47.74c-7.084 0-12.657 2.476-12.657 8.433 0 7.44 12.01 9.606 20.23 12.64 5.49 2.027 20.24 5.98 20.24 22.016 0 19.48-16 27.807-33.06 27.807-17.06 0-25.4-5.465-25.4-5.465-.96-.527-1.5-1.822-1.2-2.89 0 0 2.1-7.52 2.64-9.386.48-1.68 2.41-2.27 3.64-1.792 4.39 1.712 12.32 4.092 21.28 4.092 9.07 0 13.46-2.803 13.46-8.777 0-7.95-12.26-10.38-20.36-12.967-5.59-1.78-20.36-5.93-20.36-23.566 0-17.373 15.08-25.524 31.2-25.524 13.64 0 23.5 4.69 23.5 4.69 1.01.427 1.58 1.635 1.28 2.698l-2.658 9.357c-.488 1.74-1.898 2.537-3.666 1.957-3.89-1.277-11.2-3.322-18.15-3.322zm-210.313-15.28c-6.695.775-11.472 3.962-14.562 6.93-6.06-4.81-14.49-7.106-23.94-7.106-18.95 0-33.76 9.26-33.76 29.43 0 11.58 4.88 19.56 12.62 24.26-5.75 2.75-9.57 8.59-9.57 14.34 0 9.61 7.5 12.61 7.5 12.61s-13.11 6.44-13.11 19.32c0 16.49 15.01 23.16 33.34 23.16 26.43 0 44.61-11.04 44.61-31.31 0-12.47-9.44-19.36-30.01-20.18-12.2-.48-20.11-.93-22.07-1.58-2.59-.87-3.86-2.96-3.86-5.28 0-2.55 2.08-4.98 5.35-6.65 2.86.516 5.87.768 8.99.768 18.97 0 33.76-9.223 33.76-29.425 0-4.897-.87-9.15-2.46-12.78 2.79-1.506 8.34-2.25 8.34-2.25 1.09-.17 1.975-1.21 1.974-2.31V40.3c0-1.88-1.59-2.955-3.1-2.78zm-49.13 85.132s9.954.38 19.9.84c11.172.52 14.654 2.96 14.654 8.81 0 7.15-9.71 14.1-23.28 14.1-12.88 0-19.314-4.54-19.314-12.08 0-4.33 2.26-9.18 8.04-11.69zm10.66-40.54c-8.978 0-15.983-4.83-15.983-15.35 0-10.53 7.01-15.35 15.983-15.35 8.974 0 15.984 4.81 15.984 15.34 0 10.53-7.002 15.34-15.984 15.34z" fill="#2D3134"/><g opacity=".6" transform="translate(0 36)" fill="#2E3134"><rect x=".209" y="69.017" width="33.643" height="17.014" rx="4"/><rect x="50.672" y="69.017" width="33.622" height="17.014" rx="4"/><rect x=".184" y="34.99" width="84.121" height="17.014" rx="4"/><rect x=".209" y=".964" width="50.469" height="17.013" rx="4"/><rect x="67.494" y=".964" width="16.821" height="17.013" rx="4"/></g></g></svg>

partials/icons/infinity.hbs

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"/></svg>

partials/icons/instagram.hbs

@@ -0,0 +1,5 @@
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 2.982C14.937 2.982 15.285 2.993 16.445 3.046C17.1424 3.05412 17.8331 3.18233 18.487 3.425C18.965 3.60111 19.3973 3.88237 19.752 4.248C20.1176 4.60269 20.3989 5.035 20.575 5.513C20.8177 6.16685 20.9459 6.85762 20.954 7.555C21.007 8.715 21.018 9.063 21.018 12C21.018 14.937 21.007 15.285 20.954 16.445C20.9459 17.1424 20.8177 17.8331 20.575 18.487C20.3919 18.9615 20.1116 19.3924 19.752 19.752C19.3924 20.1116 18.9615 20.3919 18.487 20.575C17.8331 20.8177 17.1424 20.9459 16.445 20.954C15.285 21.007 14.937 21.018 12 21.018C9.063 21.018 8.715 21.007 7.555 20.954C6.85762 20.9459 6.16685 20.8177 5.513 20.575C5.035 20.3989 4.60269 20.1176 4.248 19.752C3.88237 19.3973 3.60111 18.965 3.425 18.487C3.18233 17.8331 3.05412 17.1424 3.046 16.445C2.993 15.285 2.982 14.937 2.982 12C2.982 9.063 2.993 8.715 3.046 7.555C3.05412 6.85762 3.18233 6.16685 3.425 5.513C3.60111 5.035 3.88237 4.60269 4.248 4.248C4.60269 3.88237 5.035 3.60111 5.513 3.425C6.16685 3.18233 6.85762 3.05412 7.555 3.046C8.715 2.993 9.063 2.982 12 2.982ZM12 1C9.013 1 8.638 1.013 7.465 1.066C6.55258 1.08486 5.6499 1.25762 4.795 1.577C4.06355 1.86017 3.3994 2.29319 2.84521 2.84824C2.29102 3.40329 1.85904 4.06811 1.577 4.8C1.25762 5.6549 1.08486 6.55758 1.066 7.47C1.013 8.638 1 9.013 1 12C1 14.987 1.013 15.362 1.066 16.535C1.08486 17.4474 1.25762 18.3501 1.577 19.205C1.86017 19.9365 2.29319 20.6006 2.84824 21.1548C3.40329 21.709 4.06811 22.141 4.8 22.423C5.6549 22.7424 6.55758 22.9151 7.47 22.934C8.638 22.987 9.013 23 12 23C14.987 23 15.362 22.987 16.535 22.934C17.4474 22.9151 18.3501 22.7424 19.205 22.423C19.9365 22.1398 20.6006 21.7068 21.1548 21.1518C21.709 20.5967 22.141 19.9319 22.423 19.2C22.7424 18.3451 22.9151 17.4424 22.934 16.53C22.987 15.362 23 14.987 23 12C23 9.013 22.987 8.638 22.934 7.465C22.9151 6.55258 22.7424 5.6499 22.423 4.795C22.1398 4.06355 21.7068 3.3994 21.1518 2.84521C20.5967 2.29102 19.9319 1.85904 19.2 1.577C18.3451 1.25762 17.4424 1.08486 16.53 1.066C15.362 1.013 14.987 1 12 1Z" fill="currentColor"/>
+    <path d="M11.9996 6.35107C10.8823 6.35107 9.79015 6.68238 8.86117 7.3031C7.9322 7.92382 7.20815 8.80608 6.78059 9.8383C6.35303 10.8705 6.24116 12.0063 6.45913 13.1021C6.6771 14.1979 7.21512 15.2045 8.00514 15.9945C8.79517 16.7845 9.80172 17.3226 10.8975 17.5405C11.9933 17.7585 13.1291 17.6466 14.1614 17.2191C15.1936 16.7915 16.0758 16.0675 16.6966 15.1385C17.3173 14.2095 17.6486 13.1173 17.6486 12.0001C17.6486 10.5019 17.0534 9.06502 15.994 8.00563C14.9346 6.94624 13.4978 6.35107 11.9996 6.35107ZM11.9996 15.6671C11.2743 15.6671 10.5653 15.452 9.96231 15.0491C9.35928 14.6461 8.88927 14.0734 8.61172 13.4034C8.33418 12.7333 8.26156 11.996 8.40305 11.2847C8.54454 10.5734 8.89379 9.91995 9.40663 9.40711C9.91947 8.89427 10.5729 8.54503 11.2842 8.40353C11.9955 8.26204 12.7328 8.33466 13.4029 8.61221C14.0729 8.88975 14.6457 9.35976 15.0486 9.9628C15.4515 10.5658 15.6666 11.2748 15.6666 12.0001C15.6666 12.9726 15.2802 13.9053 14.5925 14.593C13.9049 15.2807 12.9721 15.6671 11.9996 15.6671Z" fill="currentColor"/>
+    <path d="M17.8718 7.44811C18.6008 7.44811 19.1918 6.85712 19.1918 6.12811C19.1918 5.39909 18.6008 4.80811 17.8718 4.80811C17.1427 4.80811 16.5518 5.39909 16.5518 6.12811C16.5518 6.85712 17.1427 7.44811 17.8718 7.44811Z" fill="currentColor"/>
+</svg>

partials/icons/linkedin.hbs

@@ -0,0 +1,3 @@
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.2 0H1.8C1.32261 0 0.864773 0.18964 0.527213 0.527213C0.18964 0.864773 0 1.32261 0 1.8V22.2C0 22.6773 0.18964 23.1352 0.527213 23.4728C0.864773 23.8104 1.32261 24 1.8 24H22.2C22.6773 24 23.1352 23.8104 23.4728 23.4728C23.8104 23.1352 24 22.6773 24 22.2V1.8C24 1.32261 23.8104 0.864773 23.4728 0.527213C23.1352 0.18964 22.6773 0 22.2 0ZM7.2 20.4H3.6V9.6H7.2V20.4ZM5.4 7.5C4.98741 7.48821 4.58747 7.35509 4.25011 7.11729C3.91275 6.87949 3.65293 6.54755 3.50316 6.16293C3.35337 5.77832 3.32025 5.35809 3.40793 4.95476C3.4956 4.55144 3.7002 4.18288 3.99613 3.89517C4.29208 3.60745 4.66624 3.41332 5.07188 3.33704C5.47752 3.26075 5.89664 3.30569 6.27688 3.46625C6.65712 3.6268 6.98163 3.89585 7.20983 4.23977C7.43804 4.58371 7.55983 4.98725 7.56 5.4C7.55052 5.96441 7.318 6.50213 6.91327 6.89564C6.50852 7.28913 5.96447 7.50643 5.4 7.5ZM20.4 20.4H16.8V14.712C16.8 13.008 16.08 12.396 15.144 12.396C14.8696 12.4143 14.6015 12.4865 14.3551 12.6088C14.1087 12.7309 13.8888 12.9007 13.7081 13.108C13.5276 13.3155 13.3896 13.5565 13.3024 13.8173C13.2152 14.0781 13.1804 14.3536 13.2 14.628C13.194 14.6839 13.194 14.7401 13.2 14.796V20.4H9.6V9.6H13.08V11.16C13.4311 10.626 13.9133 10.1911 14.4807 9.89693C15.048 9.6028 15.6813 9.4592 16.32 9.48C18.18 9.48 20.352 10.512 20.352 13.872L20.4 20.4Z" fill="currentColor"/>
+</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/location.hbs

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none"><path d="M19.5 8c0 4.144-7.5 15.5-7.5 15.5S4.5 12.144 4.5 8C4.5 3.858 7.857.5 12 .5c4.142 0 7.5 3.358 7.5 7.5z"/><circle cx="12" cy="8" r="3"/></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/mastodon.hbs

@@ -0,0 +1,3 @@
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.68 18.2926C19.6352 17.9336 22.2083 16.0807 22.5317 14.3878C23.0412 11.7208 22.9992 7.87958 22.9992 7.87958C22.9992 2.67325 19.647 1.14719 19.647 1.14719C17.9569 0.357269 15.0545 0.0250852 12.0393 0H11.9652C8.94993 0.0250852 6.04953 0.357269 4.35923 1.14719C4.35923 1.14719 1.00697 2.67325 1.00697 7.87958C1.00697 8.19521 1.00537 8.52719 1.0037 8.87279C0.999066 9.83259 0.993924 10.8974 1.02121 12.0089C1.14294 17.1004 1.93853 22.1184 6.56468 23.3644C8.69769 23.9389 10.529 24.0591 12.004 23.9766C14.6787 23.8257 16.1801 23.0053 16.1801 23.0053L16.092 21.0305C16.092 21.0305 14.1806 21.6438 12.0339 21.5691C9.90716 21.4949 7.66194 21.3357 7.31796 18.6786C7.28619 18.4452 7.2703 18.1957 7.2703 17.9336C7.2703 17.9336 9.35808 18.4528 12.004 18.5762C13.6218 18.6517 15.1391 18.4797 16.68 18.2926ZM19.045 14.5875V8.28346C19.045 6.99507 18.7227 5.97123 18.0752 5.21376C17.4074 4.45629 16.5328 4.06799 15.4474 4.06799C14.1913 4.06799 13.2402 4.55922 12.6114 5.54181L12 6.58465L11.3886 5.54181C10.7598 4.55922 9.80863 4.06799 8.55266 4.06799C7.46709 4.06799 6.59259 4.45629 5.92483 5.21376C5.27728 5.97123 4.9549 6.99507 4.9549 8.28346V14.5875H7.40928V8.46875C7.40928 7.17894 7.94259 6.52427 9.00936 6.52427C10.1888 6.52427 10.7801 7.30087 10.7801 8.8365V12.1856H13.22V8.8365C13.22 7.30087 13.8111 6.52427 14.9906 6.52427C16.0573 6.52427 16.5907 7.17894 16.5907 8.46875V14.5875H19.045Z" fill="currentColor"/>
+</svg>

partials/icons/point.hbs

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"/>
-</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/threads.hbs

@@ -0,0 +1,3 @@
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.5609 11.1236C17.4575 11.074 17.3526 11.0263 17.2462 10.9806C17.0611 7.56727 15.1967 5.61312 12.0661 5.59312C12.0519 5.59304 12.0379 5.59304 12.0237 5.59304C10.1512 5.59304 8.59388 6.39262 7.63537 7.84759L9.35708 9.0291C10.0732 7.94229 11.1969 7.7106 12.0245 7.7106C12.034 7.7106 12.0436 7.7106 12.0531 7.71068C13.0839 7.71726 13.8618 8.01708 14.3652 8.60175C14.7315 9.02742 14.9765 9.61563 15.0978 10.3579C14.1839 10.2026 13.1956 10.1548 12.139 10.2155C9.16261 10.387 7.24916 12.1235 7.37767 14.5365C7.44288 15.7605 8.05242 16.8135 9.09393 17.5014C9.97446 18.0829 11.1087 18.3673 12.2874 18.3029C13.844 18.2175 15.0652 17.6234 15.9171 16.5371C16.564 15.712 16.9732 14.6429 17.154 13.2958C17.8957 13.7436 18.4455 14.333 18.7492 15.0414C19.2655 16.2459 19.2956 18.225 17.6814 19.8385C16.267 21.2521 14.5669 21.8635 11.9976 21.8824C9.14756 21.8613 6.9921 20.9468 5.59068 19.1646C4.27836 17.4958 3.60015 15.0852 3.57484 12C3.60015 8.91472 4.27836 6.5042 5.59068 4.83533C6.9921 3.05312 9.14752 2.13875 11.9976 2.11756C14.8684 2.13891 17.0614 3.05767 18.5164 4.8485C19.2299 5.7267 19.7677 6.8311 20.1224 8.11879L22.14 7.58028C21.7102 5.99527 21.0338 4.62946 20.1135 3.49675C18.248 1.20083 15.5199 0.024398 12.0046 0H11.9906C8.48249 0.0243044 5.78485 1.20522 3.97257 3.50991C2.3599 5.5608 1.52804 8.41446 1.50008 11.9916L1.5 12L1.50008 12.0084C1.52804 15.5855 2.3599 18.4393 3.97257 20.4901C5.78485 22.7947 8.48249 23.9758 11.9906 24H12.0046C15.1235 23.9783 17.3219 23.1615 19.1329 21.3513C21.5024 18.9833 21.431 16.0149 20.6501 14.1927C20.0898 12.8859 19.0216 11.8245 17.5609 11.1236ZM12.1759 16.1884C10.8715 16.2619 9.51623 15.6761 9.44937 14.4215C9.39984 13.4913 10.1111 12.4533 12.256 12.3296C12.5016 12.3154 12.7427 12.3085 12.9794 12.3085C13.7585 12.3085 14.4874 12.3842 15.1499 12.5292C14.9028 15.6169 13.4532 16.1183 12.1759 16.1884Z" fill="currentColor"/>
+</svg>

partials/icons/tiktok.hbs

@@ -0,0 +1,3 @@
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.1891 8.937V13.059C9.66997 12.9221 9.12673 12.9034 8.59942 13.0044C8.07212 13.1054 7.57419 13.3234 7.14234 13.6424C6.7105 13.9613 6.35575 14.3732 6.10423 14.8475C5.85272 15.3218 5.71085 15.8466 5.6891 16.383C5.65937 16.8449 5.72887 17.3078 5.89293 17.7405C6.057 18.1733 6.31182 18.5659 6.64027 18.892C6.96872 19.2181 7.36318 19.4701 7.79713 19.631C8.23108 19.7919 8.69446 19.8581 9.1561 19.825C9.62242 19.8608 10.0909 19.7949 10.5293 19.6319C10.9677 19.4689 11.3654 19.2126 11.6951 18.8809C12.0247 18.5491 12.2784 18.1498 12.4387 17.7104C12.5989 17.271 12.6618 16.8021 12.6231 16.336V0H16.7001C17.3931 4.315 19.5511 5.316 22.4401 5.778V9.913C20.438 9.74881 18.5067 9.09645 16.8151 8.013V16.18C16.8151 19.88 14.6251 24 9.1881 24C8.16806 23.9955 7.15918 23.7875 6.22058 23.3881C5.28199 22.9886 4.43258 22.4059 3.72213 21.6739C3.01168 20.942 2.4545 20.0755 2.08325 19.1254C1.712 18.1754 1.53414 17.1607 1.5601 16.141C1.59241 15.0794 1.84936 14.0366 2.31401 13.0815C2.77866 12.1265 3.44047 11.2807 4.2558 10.6C5.07114 9.9193 6.02148 9.41915 7.0442 9.1325C8.06691 8.84586 9.13876 8.77923 10.1891 8.937Z" fill="currentColor"/>
+</svg>

partials/icons/twitter.hbs

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.2439 2.25H21.5519L14.3249 10.51L22.8269 21.75H16.1699L10.9559 14.933L4.98991 21.75H1.67991L9.40991 12.915L1.25391 2.25H8.07991L12.7929 8.481L18.2439 2.25ZM17.0829 19.77H18.9159L7.08391 4.126H5.11691L17.0829 19.77Z" fill="currentColor"/>
+</svg>

partials/icons/website.hbs

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.5 11.957c0 6.375-5.163 11.544-11.532 11.544C5.599 23.5.5 18.125.5 11.75.5 5.542 5.37.758 11.505.511l.5-.011C18.374.5 23.5 5.582 23.5 11.957zM11.505.511c-6 6.5-6 14.98 0 22.98m1-22.98c6 6.5 6 14.977 0 22.977M2 17.479h20.063m-19.657-12h19.062m-20.968 6h22.938" stroke="#000" stroke-linejoin="round" stroke-miterlimit="10" fill="none"/></svg>

partials/icons/youtube.hbs

@@ -0,0 +1,3 @@
+<svg class="icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3763 2.59736C22.4096 2.92662 23.2216 3.89324 23.4982 5.12324C23.9979 7.35042 24 12 24 12C24 12 24 16.6496 23.4982 18.8768C23.2216 20.1068 22.4096 21.0734 21.3763 21.4026C19.5055 22 12 22 12 22C12 22 4.49456 22 2.62363 21.4026C1.59039 21.0734 0.7784 20.1068 0.501806 18.8768C0 16.6496 0 12 0 12C0 12 0 7.35042 0.501806 5.12324C0.7784 3.89324 1.59039 2.92662 2.62363 2.59736C4.49456 2 12 2 12 2C12 2 19.5055 2 21.3763 2.59736ZM16.0153 12.0004L9.48326 15.8822V8.11841L16.0153 12.0004Z" fill="currentColor"/>
+</svg>

partials/lightbox.hbs

@@ -0,0 +1,41 @@
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="pswp__bg"></div>
+
+    <div class="pswp__scroll-wrap">
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <div class="pswp__ui pswp__ui--hidden">
+            <div class="pswp__top-bar">
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+                <button class="pswp__button pswp__button--share" title="Share"></button>
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                        <div class="pswp__preloader__cut">
+                            <div class="pswp__preloader__donut"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div>
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+        </div>
+    </div>
+</div>

partials/post-card.hbs

@@ -1,7 +1,11 @@
-<article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
+{{!-- 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 "tag, author"}} 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"
@@ -9,55 +13,66 @@
                     {{img_url feature_image size="m"}} 600w,
                     {{img_url feature_image size="l"}} 1000w,
                     {{img_url feature_image size="xl"}} 2000w"
-            sizes="(max-width: 1000px) 400px, 700px"
+            sizes="(max-width: 1000px) 400px, 800px"
             src="{{img_url feature_image size="m"}}"
-            alt="{{title}}"
+            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">
-                {{#if primary_tag}}
+                <div class="post-card-tags">
-                    <span class="post-card-tags">{{primary_tag.name}}</span>
+                    {{#primary_tag}}
+                        <span class="post-card-primary-tag">{{name}}</span>
+                    {{/primary_tag}}
+                    {{#if featured}}
+                        <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
                     {{/if}}
-                <h2 class="post-card-title">{{title}}</h2>
+                </div>
+                <h2 class="post-card-title">
+                    {{#unless access}}
+                    {{^has visibility="public"}}
+                        {{#unless feature_image}}
+                            {{> "icons/lock"}}
+                        {{/unless}}
+                    {{/has}}
+                    {{/unless}}
+                    {{title}}
+                </h2>
             </header>
-
+            {{#if excerpt}}
-            <section class="post-card-excerpt">
+                <div class="post-card-excerpt">{{excerpt}}</div>
-                <p>{{excerpt words="33"}}</p>
+            {{/if}}
-            </section>
-
         </a>
 
         <footer class="post-card-meta">
-
+            <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMM YYYY"}}</time>
-            <ul class="author-list">
+            {{#if reading_time}}
-            {{#foreach authors}}
+                <span class="post-card-meta-length">{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
-                <li class="author-list-item">
+            {{/if}}
-
+            {{#if @site.comments_enabled}}
-                    <div class="author-name-tooltip">
+                {{comment_count}}
-                        {{name}}
-                    </div>
-
-                    {{#if profile_image}}
-                        <a href="{{url}}" class="static-avatar">
-                            <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
-                        </a>
-                    {{else}}
-                        <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
             {{/if}}
-                </li>
-            {{/foreach}}
-            </ul>
-
-            <span class="reading-time">{{reading_time}}</span>
-
         </footer>
 
-    </div>{{!--/.post-card-content--}}
+    </div>
 
 </article>

partials/site-nav.hbs

@@ -1,17 +1,25 @@
 <nav class="site-nav">
+    <div class="site-nav-left-wrapper">
         <div class="site-nav-left">
-        {{^is "home"}}
             {{#if @site.logo}}
                 <a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
             {{else}}
                 <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
             {{/if}}
-        {{/is}}
+            <div class="site-nav-content">
                 {{#if @site.navigation}}
                     {{navigation}}
                 {{/if}}
+                {{#is "post"}}
+                    <span class="nav-post-title {{#unless @site.logo}}dash{{/unless}}">{{post.title}}</span>
+                {{/is}}
+            </div>
+        </div>
     </div>
     <div class="site-nav-right">
+        {{#if @site.secondary_navigation}}
+            {{navigation type="secondary"}}
+        {{else}}
             <div class="social-links">
                 {{#if @site.facebook}}
                     <a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
@@ -20,10 +28,13 @@
                     <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
                 {{/if}}
             </div>
-        {{#if @labs.subscribers}}
+            {{#unless @site.members_enabled}}
-            <a class="subscribe-button" href="#subscribe">Subscribe</a>
-        {{else}}
                 <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
+            {{/unless}}
+        {{/if}}
+
+        {{#if @site.members_enabled}}
+            <a class="subscribe-button" href="#subscribe">{{t "Subscribe"}}</a>
         {{/if}}
     </div>
 </nav>

partials/subscribe-form.hbs

@@ -0,0 +1,19 @@
+<section class="subscribe-form">
+    <h3 class="subscribe-form-title">{{t "Subscribe to"}} {{@site.title}}</h3>
+    <p class="subscribe-form-description">{{t "Get the latest posts delivered right to your inbox"}}</p>
+    <form data-members-form="subscribe">
+        <div class="form-group">
+            <input class="subscribe-email" data-members-email placeholder="youremail@example.com" autocomplete="false" />
+            <button class="button primary" type="submit">
+                <span class="button-content">{{t "Subscribe"}}</span>
+                <span class="button-loader">{{> "icons/loader"}}</span>
+            </button>
+        </div>
+        <div class="message-success">
+            {{t "<strong>Great!</strong> Check your inbox and click the link to confirm your subscription."}}
+        </div>
+        <div class="message-error">
+            {{t "Please enter a valid email address!"}}
+        </div>
+    </form>
+</section>

post.hbs

@@ -1,34 +1,67 @@
 {{!< default}}
 
 {{!-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template --}}
+into the {body} tag of the default.hbs template --}}
 
-<header class="site-header outer">
-    <div class="inner">
-        {{> "site-nav"}}
-    </div>
-</header>
 
-{{!-- Everything inside the #post tags pulls data from the post --}}
 {{#post}}
+{{!-- Everything inside the #post block pulls data from the post --}}
 
-<main id="site-main" class="site-main outer">
+<main id="site-main" class="site-main">
-    <div class="inner">
+<article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}">
 
-        <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">
+    <header class="article-header gh-canvas">
 
-            <header class="post-full-header">
+        <div class="article-tag post-card-tags">
-                <section class="post-full-meta">
-                    <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM YYYY"}}</time>
             {{#primary_tag}}
-                        <span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
+                <span class="post-card-primary-tag">
+                    <a href="{{url}}">{{name}}</a>
+                </span>
             {{/primary_tag}}
-                </section>
+            {{#if featured}}
-                <h1 class="post-full-title">{{title}}</h1>
+                <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
-            </header>
+            {{/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 instapaper_ignore">
+                {{#foreach authors}}
+                <li class="author-list-item">
+                    {{#if profile_image}}
+                    <a href="{{url}}" class="author-avatar" aria-label="Read more of {{name}}">
+                        <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" aria-label="Read more of {{name}}">{{> "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 format="DD MMM YYYY"}}</time>
+                    {{#if reading_time}}
+                        <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
+                    {{/if}}
+                </div>
+            </div>
+
+        </section>
+        </div>
+
+        {{#match @custom.post_image_style "!=" "Hidden"}}
         {{#if feature_image}}
-            <figure class="post-full-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
@@ -36,176 +69,70 @@ into the {body} of the default.hbs template --}}
                             {{img_url feature_image size="m"}} 600w,
                             {{img_url feature_image size="l"}} 1000w,
                             {{img_url feature_image size="xl"}} 2000w"
-                    sizes="(max-width: 800px) 400px,
+                    sizes="(min-width: 1400px) 1400px, 92vw"
-                            (max-width: 1170px) 700px,
-                            1400px"
                     src="{{img_url feature_image size="xl"}}"
-                    alt="{{title}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                 />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
             </figure>
         {{/if}}
+        {{/match}}
 
-            <section class="post-full-content">
+    </header>
-                <div class="post-content">
+
+    <section class="gh-content gh-canvas">
         {{content}}
-                </div>
     </section>
 
-            {{!-- Email subscribe form at the bottom of the page --}}
+    {{#if comments}}
-            {{#if @labs.subscribers}}
+        <section class="article-comments gh-canvas">
-            <section class="subscribe-form">
+            {{comments}}
-                <h3 class="subscribe-form-title">Subscribe to {{@site.title}}</h3>
-                <p>Get the latest posts delivered right to your inbox</p>
-                {{subscribe_form placeholder="youremail@example.com"}}
         </section>
     {{/if}}
 
-            <footer class="post-full-footer">
-
-                {{!-- There are two options for how we display the byline/author-info.
-                If the post has more than one author, we load a specific template
-                from includes/byline-multiple.hbs, otherwise, we just use the
-                default byline. --}}
-
-                {{#has author="count:>1"}}
-                    {{> "byline-multiple"}}
-                {{else}}
-                    {{> "byline-single"}}
-                {{/has}}
-
-            </footer>
-
-            {{!--
-            <section class="post-full-comments">
-                If you want to embed comments, this is a good place to do it!
-            </section>
-            --}}
-
 </article>
-
-    </div>
 </main>
 
-{{!-- Links to Previous/Next posts --}}
+{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
-<aside class="read-next outer">
+{{#if @site.members_enabled}}
+{{#unless @member}}
+{{#unless @site.comments_enabled}}
+{{#if access}}
+    <section class="footer-cta outer">
         <div class="inner">
-        <div class="read-next-feed">
+            {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
-            {{#if primary_tag}}
+            <a class="footer-cta-button" href="#/portal" data-portal>
-            {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
+                <div class="footer-cta-input">{{t "Enter your email"}}</div>
-                {{#if related_posts}}
+                <span>{{t "Subscribe"}}</span>
-                <article class="read-next-card"
+            </a>
-                    {{#if ../primary_tag.feature_image}}
-                        style="background-image: url({{img_url ../primary_tag.feature_image size="m"}})"
-                    {{else}}
-                        {{#if @site.cover_image}}
-                            style="background-image: url({{img_url @site.cover_image size="m"}})"{{/if}}
-                    {{/if}}
-                >
-                    <header class="read-next-card-header">
-                        <small class="read-next-card-header-sitetitle">&mdash; {{@site.title}} &mdash;</small>
-                        {{#../primary_tag}}
-                        <h3 class="read-next-card-header-title"><a href="{{url}}">{{name}}</a></h3>
-                        {{/../primary_tag}}
-                    </header>
-                    <div class="read-next-divider">{{> "icons/infinity"}}</div>
-                    <div class="read-next-card-content">
-                        <ul>
-                            {{#foreach related_posts}}
-                            <li><a href="{{url}}">{{title}}</a></li>
-                            {{/foreach}}
-                        </ul>
         </div>
-                    <footer class="read-next-card-footer">
+    </section>
-                        <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total empty='No posts' singular='% post' plural='See all % posts'}} →</a>
+{{/if}}
-                    </footer>
+{{/unless}}
-                </article>
+{{/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}}
 
-            {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
-            {{#next_post}}
-                {{> "post-card"}}
-            {{/next_post}}
-
-            {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
-            {{#prev_post}}
-                {{> "post-card"}}
-            {{/prev_post}}
-
-        </div>
-    </div>
-</aside>
-
-{{!-- Floating header which appears on-scroll, included from includes/floating-header.hbs --}}
-{{> floating-header}}
-
 {{/post}}
-
-{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
-{{#contentFor "scripts"}}
-<script>
-
-// NOTE: Scroll performance is poor in Safari
-// - this appears to be due to the events firing much more slowly in Safari.
-//   Dropping the scroll event and using only a raf loop results in smoother
-//   scrolling but continuous processing even when not scrolling
-$(document).ready(function () {
-    // Start fitVids
-    var $postContent = $(".post-full-content");
-    $postContent.fitVids();
-    // End fitVids
-
-    var progressBar = document.querySelector('#reading-progress');
-    var header = document.querySelector('.floating-header');
-    var title = document.querySelector('.post-full-title');
-
-    var lastScrollY = window.scrollY;
-    var lastWindowHeight = window.innerHeight;
-    var lastDocumentHeight = $(document).height();
-    var ticking = false;
-
-    function onScroll() {
-        lastScrollY = window.scrollY;
-        requestTick();
-    }
-
-    function onResize() {
-        lastWindowHeight = window.innerHeight;
-        lastDocumentHeight = $(document).height();
-        requestTick();
-    }
-
-    function requestTick() {
-        if (!ticking) {
-            requestAnimationFrame(update);
-        }
-        ticking = true;
-    }
-
-    function update() {
-        var trigger = title.getBoundingClientRect().top + window.scrollY;
-        var triggerOffset = title.offsetHeight + 35;
-        var progressMax = lastDocumentHeight - lastWindowHeight;
-
-        // show/hide floating header
-        if (lastScrollY >= trigger + triggerOffset) {
-            header.classList.add('floating-active');
-        } else {
-            header.classList.remove('floating-active');
-        }
-
-        progressBar.setAttribute('max', progressMax);
-        progressBar.setAttribute('value', lastScrollY);
-
-        ticking = false;
-    }
-
-    window.addEventListener('scroll', onScroll, {passive: true});
-    window.addEventListener('resize', onResize, false);
-
-    update();
-
-});
-</script>
-{{/contentFor}}

renovate.json

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

tag.hbs

@@ -1,32 +1,55 @@
 {{!< 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}}
-{{> header background=feature_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
+        <section class="post-card post-card-large">
-    <div class="inner">
+
-        {{> "site-nav"}}
+            {{#if feature_image}}
-        <div class="site-header-content">
+            <div class="post-card-image-link">
-            <h1 class="site-title">{{name}}</h1>
+                {{!-- This is a responsive image, it loads different sizes depending on device
-            <h2 class="site-description">
+                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='posts' singular='% post' plural='% posts'}}
+                        A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
                     {{/if}}
-            </h2>
                 </div>
             </div>
-</header>
+            </div>
+
+        </section>
         {{/tag}}
 
-{{!-- The main content area --}}
-<main id="site-main" class="site-main outer">
-    <div class="inner">
-        <div class="post-feed">
         {{#foreach posts}}
             {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
             {{> "post-card"}}
         {{/foreach}}
+
     </div>
+
+    {{pagination}}
+    
 </div>
 </main>