Update README.md

Latvian language

.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

.gitignore

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

LICENSE

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

README.md

@@ -1,16 +1,39 @@
-# Casper
+# Casper-i18n
 
-The default theme for [Ghost](http://github.com/tryghost/ghost/).
+[![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)
 
-To download, visit the [releases](https://github.com/TryGhost/Casper/releases) page.
+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).
 
-## Copyright & License
+# 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)
 
-Copyright (c) 2013-2015 Ghost Foundation - Released under the MIT License.
+# Contribution
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+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).  
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+# Copyright & License
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+Copyright (c) 2013-2023 Ghost Foundation - Released under the [MIT license](LICENSE).
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

assets/built/global.css

@@ -0,0 +1,2 @@
+a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}body{line-height:1}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/css/global.css

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

assets/fonts/casper-icons.svg

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

assets/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/index.js

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

assets/js/infinite-scroll.js

@@ -0,0 +1,114 @@
+/* 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;
+    }
+
+    // post feed element
+    var feedElement = document.querySelector('.post-feed');
+    if (!feedElement) {
+        return;
+    }
+
+    var buffer = 300;
+
+    var ticking = false;
+    var loading = false;
+
+    var lastScrollY = window.scrollY;
+    var lastWindowHeight = window.innerHeight;
+    var lastDocumentHeight = document.documentElement.scrollHeight;
+
+    function onPageLoad() {
+        if (this.status === 404) {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+            return;
+        }
+
+        // append contents
+        var postElements = this.response.querySelectorAll('article.post-card');
+        postElements.forEach(function (item) {
+            // document.importNode is important, without it the item's owner
+            // document will be different which can break resizing of
+            // `object-fit: cover` images in Safari
+            feedElement.appendChild(document.importNode(item, true));
+        });
+
+        // set next link
+        var resNextElement = this.response.querySelector('link[rel=next]');
+        if (resNextElement) {
+            nextElement.href = resNextElement.href;
+        } else {
+            window.removeEventListener('scroll', onScroll);
+            window.removeEventListener('resize', onResize);
+        }
+
+        // sync status
+        lastDocumentHeight = document.documentElement.scrollHeight;
+        ticking = false;
+        loading = false;
+    }
+
+    function onUpdate() {
+        // return if already loading
+        if (loading) {
+            return;
+        }
+
+        // return if not scroll to the bottom
+        if (lastScrollY + lastWindowHeight <= lastDocumentHeight - buffer) {
+            ticking = false;
+            return;
+        }
+
+        loading = true;
+
+        var xhr = new window.XMLHttpRequest();
+        xhr.responseType = 'document';
+
+        xhr.addEventListener('load', onPageLoad);
+
+        xhr.open('GET', nextElement.href);
+        xhr.send(null);
+    }
+
+    function requestTick() {
+        ticking || window.requestAnimationFrame(onUpdate);
+        ticking = true;
+    }
+
+    function onScroll() {
+        lastScrollY = window.scrollY;
+        requestTick();
+    }
+
+    function onResize() {
+        lastWindowHeight = window.innerHeight;
+        lastDocumentHeight = document.documentElement.scrollHeight;
+        requestTick();
+    }
+
+    window.addEventListener('scroll', onScroll, {passive: true});
+    window.addEventListener('resize', onResize);
+
+    requestTick();
+})(window, document);

assets/js/jquery.fitvids.js

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

assets/js/lib/jquery.fitvids.js

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

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

default.hbs

@@ -1,48 +1,120 @@
 <!DOCTYPE html>
-<html>
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
 <head>
-    {{! Document Settings }}
+
+    {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
+    <title>{{meta_title}}</title>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
-    {{! Page Meta }}
-    <title>{{meta_title}}</title>
-    <meta name="description" content="{{meta_description}}" />
-
     <meta name="HandheldFriendly" content="True" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    
+    {{!-- Preload scripts --}}
+    <link rel="preload" as="style" href="{{asset "built/screen.css"}}" />
+    <link rel="preload" as="script" href="{{asset "built/casper.js"}}" />
 
-    <link rel="shortcut icon" href="{{asset "favicon.ico"}}">
+    {{!-- 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"}}" />
 
-    {{! Styles'n'Scripts }}
+    {{!-- This tag outputs all your advanced SEO meta, structured data, and other important settings,
-    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
+    it should always be the last tag before the closing head tag --}}
-    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
-
-    {{! Ghost outputs important style and meta data with this tag }}
     {{ghost_head}}
+
 </head>
-<body class="{{body_class}} nav-closed">
+<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">
 
-    {{navigation}}
+    <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>
 
-    <div class="site-wrapper">
+            <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>
 
-        {{! Everything else gets inserted here }}
+            <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}}}
-
-        <footer class="site-footer clearfix">
-            <section class="copyright"><a href="{{@blog.url}}">{{@blog.title}}</a> &copy; {{date format="YYYY"}}</section>
-            <section class="poweredby">Proudly published with <a href="https://ghost.org">Ghost</a></section>
-        </footer>
-
     </div>
 
-    {{! Ghost outputs important scripts and data with this tag }}
+    {{!-- The global footer at the very bottom of the screen --}}
-    {{ghost_foot}}
+    <footer class="site-footer outer">
+        <div class="inner">
+            <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
+            <nav class="site-footer-nav">
+                {{navigation type="secondary"}}
+            </nav>
+            <div><a href="{{@site.url}}" target="_blank" rel="noopener">{{t "Latest Posts"}}</a></div>
+        </div>
+    </footer>
 
-    {{! The main JavaScript file for Casper }}
+</div>
-    <script type="text/javascript" src="{{asset "js/jquery.fitvids.js"}}"></script>
+{{!-- /.viewport --}}
-    <script type="text/javascript" src="{{asset "js/index.js"}}"></script>
+
+{{#is "post, page"}}
+    {{> "lightbox"}}
+{{/is}}
+
+{{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
+<script
+    src="https://code.jquery.com/jquery-3.5.1.min.js"
+    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
+    crossorigin="anonymous">
+</script>
+<script src="{{asset "built/casper.js"}}"></script>
+<script>
+$(document).ready(function () {
+    // Mobile Menu Trigger
+    $('.gh-burger').click(function () {
+        $('body').toggleClass('gh-head-open');
+    });
+    // FitVids - Makes video embeds responsive
+    $(".gh-content").fitVids();
+});
+</script>
+
+{{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}
+{{ghost_foot}}
 
 </body>
 </html>

error-404.hbs

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

error.hbs

@@ -0,0 +1,74 @@
+{{!--
+
+There are two error files in this theme, one for 404s and one for all other errors.
+This file is the latter, and 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>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>{{meta_title}}</title>
+    <meta name="HandheldFriendly" content="True" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
+</head>
+<body>
+    <div class="site-wrapper">
+
+        <header class="site-header no-image">
+            <div class="site-nav-main outer">
+                <div class="inner">
+                    <nav class="site-nav-center">
+                        {{#if @site.logo}}
+                        <a class="site-nav-logo" href="{{@site.url}}"><img src="{{img_url @site.logo size="xs"}}"
+                                alt="{{@site.title}}" /></a>
+                        {{else}}
+                        <a class="site-nav-logo" href="{{@site.url}}">{{@site.title}}</a>
+                        {{/if}}
+                    </nav>
+                </div>
+            </div>
+        </header>
+
+        <main class="outer error-content">
+            <div class="inner">
+
+                <section class="error-message">
+                    <h1 class="error-code">{{statusCode}}</h1>
+                    <p class="error-description">{{message}}</p>
+                    <a class="error-link" href="{{@site.url}}">{{t "Go to the front page"}} →</a>
+                </section>
+
+                {{#if errorDetails}}
+                <section class="error-stack">
+                    <h3>Theme errors</h3>
+                    <ul class="error-stack-list">
+                        {{#foreach errorDetails}}
+                            <li>
+                                <em class="error-stack-function">{{{rule}}}</em>
+
+                                {{#foreach failures}}
+                                    <p><span class="error-stack-file">{{t "Ref"}} {{ref}}</span></p>
+                                    <p><span class="error-stack-file">{{t "Message"}} {{message}}</span></p>
+                                {{/foreach}}
+                            </li>
+                        {{/foreach}}
+                    </ul>
+                </section>
+                {{/if}}
+
+            </div>
+        </main>
+    </div>
+</body>
+</html>

gulpfile.js

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

index.hbs

@@ -1,27 +1,54 @@
 {{!< default}}
-{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
+{{!-- The tag above means: insert everything in this file
+into the {body} of the default.hbs template --}}
 
-{{! The big featured header }}
+<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}}">
-<header class="main-header {{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}">
+
-    <nav class="main-nav overlay clearfix">
+    {{#if @custom.show_publication_cover}}
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
+        {{#if @site.cover_image}}
-        {{#if @blog.navigation}}
+            {{!-- This is a responsive image, it loads different sizes depending on device
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+            <img class="site-header-cover"
+                srcset="{{img_url @site.cover_image size="s"}} 300w,
+                        {{img_url @site.cover_image size="m"}} 600w,
+                        {{img_url @site.cover_image size="l"}} 1000w,
+                        {{img_url @site.cover_image size="xl"}} 2000w"
+                sizes="100vw"
+                src="{{img_url @site.cover_image size="xl"}}"
+                alt="{{@site.title}}"
+            />
         {{/if}}
-    </nav>
+    {{/if}}
-    <div class="vertical">
+
-        <div class="main-header-content inner">
+    {{#match @custom.header_style "!=" "Hidden"}}
-            <h1 class="page-title">{{@blog.title}}</h1>
+        <div class="site-header-inner inner">
-            <h2 class="page-description">{{@blog.description}}</h2>
+            {{#match @custom.navigation_layout "Logo on cover"}}
+                {{#if @site.logo}}
+                    <img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
+                {{else}}
+                    <h1 class="site-title">{{@site.title}}</h1>
+                {{/if}}
+            {{/match}}
+            {{#if @site.description}}
+                <p class="site-description">{{@site.description}}</p>
+            {{/if}}
         </div>
+    {{/match}}
+
+</div>
+
+{{!-- The main content area --}}
+<main id="site-main" class="site-main outer">
+<div class="inner posts">
+
+    <div class="post-feed">
+        {{#foreach posts}}
+            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+            {{> "post-card"}}
+        {{/foreach}}
     </div>
-    <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
-</header>
 
-{{! The main content area on the homepage }}
+    {{pagination}}
-<main id="content" class="content" role="main">
-
-    {{! The tag below includes the post loop - partials/loop.hbs }}
-    {{> "loop"}}
 
+</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,4 +1,179 @@
 {
-  "name": "Casper",
+    "name": "casper-i18n",
-  "version": "1.2.1"
+    "description": "The same casper theme, but with localization support",
+    "demo": "https://demo.ghost.io",
+    "version": "5.8.1",
+    "engines": {
+        "ghost": ">=5.0.0"
+    },
+    "license": "MIT",
+    "screenshots": {
+        "desktop": "assets/screenshot-desktop.jpg",
+        "mobile": "assets/screenshot-mobile.jpg"
+    },
+    "scripts": {
+        "dev": "gulp",
+        "zip": "gulp zip",
+        "test": "gscan .",
+        "test:ci": "gscan --fatal --verbose .",
+        "pretest": "gulp build",
+        "preship": "yarn test",
+        "ship": "STATUS=$(git status --porcelain); echo $STATUS; if [ -z \"$STATUS\" ]; then yarn version && git push --follow-tags; else echo \"Uncomitted changes found.\" && exit 1; fi",
+        "postship": "git fetch && gulp release"
+    },
+    "author": {
+        "name": "Ghost Foundation",
+        "email": "hello@ghost.org",
+        "url": "https://ghost.org/"
+    },
+    "gpm": {
+        "type": "theme",
+        "categories": [
+            "Minimal",
+            "Magazine"
+        ]
+    },
+    "keywords": [
+        "ghost",
+        "theme",
+        "ghost-theme"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/TryGhost/Casper.git"
+    },
+    "bugs": "https://github.com/TryGhost/Casper/issues",
+    "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
+    "devDependencies": {
+        "@tryghost/release-utils": "0.8.1",
+        "autoprefixer": "10.4.7",
+        "beeper": "2.1.0",
+        "cssnano": "5.1.12",
+        "gscan": "4.43.1",
+        "gulp": "4.0.2",
+        "gulp-concat": "2.6.1",
+        "gulp-livereload": "4.0.2",
+        "gulp-postcss": "9.0.1",
+        "gulp-uglify": "3.0.2",
+        "gulp-zip": "5.1.0",
+        "inquirer": "8.2.4",
+        "postcss": "8.2.13",
+        "postcss-color-mod-function": "3.0.3",
+        "postcss-easy-import": "4.0.0",
+        "pump": "3.0.0"
+    },
+    "browserslist": [
+        "defaults"
+    ],
+    "config": {
+        "posts_per_page": 25,
+        "image_sizes": {
+            "xxs": {
+                "width": 30
+            },
+            "xs": {
+                "width": 100
+            },
+            "s": {
+                "width": 300
+            },
+            "m": {
+                "width": 600
+            },
+            "l": {
+                "width": 1000
+            },
+            "xl": {
+                "width": 2000
+            }
+        },
+        "card_assets": true,
+        "custom": {
+            "navigation_layout": {
+                "type": "select",
+                "options": [
+                    "Logo on cover",
+                    "Logo in the middle",
+                    "Stacked"
+                ],
+                "default": "Logo on cover"
+            },
+            "title_font": {
+                "type": "select",
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif"
+                ],
+                "default": "Modern sans-serif"
+            },
+            "body_font": {
+                "type": "select",
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif"
+                ],
+                "default": "Elegant serif"
+            },
+            "show_publication_cover": {
+                "type": "boolean",
+                "default": true,
+                "group": "homepage"
+            },
+            "header_style": {
+                "type": "select",
+                "options": [
+                    "Center aligned",
+                    "Left aligned",
+                    "Hidden"
+                ],
+                "default": "Center aligned",
+                "group": "homepage"
+            },
+            "feed_layout": {
+                "type": "select",
+                "options": [
+                    "Classic",
+                    "Grid",
+                    "List"
+                ],
+                "default": "Classic",
+                "group": "homepage"
+            },
+            "color_scheme": {
+                "type": "select",
+                "options": [
+                    "Light",
+                    "Dark",
+                    "Auto"
+                ],
+                "default": "Light"
+            },
+            "post_image_style": {
+                "type": "select",
+                "options": [
+                    "Wide",
+                    "Full",
+                    "Small",
+                    "Hidden"
+                ],
+                "default": "Wide",
+                "group": "post"
+            },
+            "email_signup_text": {
+                "type": "text",
+                "default": "Sign up for more like this.",
+                "group": "post"
+            },
+            "show_recent_posts_footer": {
+                "type": "boolean",
+                "default": true,
+                "group": "post"
+            }
+        }
+    },
+    "renovate": {
+        "extends": [
+            "@tryghost:theme"
+        ]
+    }
 }

page.hbs

@@ -1,31 +1,47 @@
 {{!< default}}
 
-{{! This is a page template. A page outputs content just like any other post, and has all the same
+{{!-- The tag above means: insert everything in this file
-    attributes by default, but you can also customise it to behave differently if you prefer. }}
+into the {body} tag of the default.hbs template --}}
+
 
-{{! Everything inside the #post tags pulls data from the page }}
 {{#post}}
+{{!-- Everything inside the #post block pulls data from the page --}}
 
-<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
+<main id="site-main" class="site-main">
-    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
+<article class="article {{post_class}}">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-</header>
 
-<main class="content" role="main">
+    {{#match @page.show_title_and_feature_image}}
-    <article class="{{post_class}}">
+        <header class="article-header gh-canvas">
+
+            <h1 class="article-title">{{title}}</h1>
+
+            {{#if feature_image}}
+                <figure class="article-image">
+                    {{!-- This is a responsive image, it loads different sizes depending on device
+                    https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                    <img
+                        srcset="{{img_url feature_image size="s"}} 300w,
+                                {{img_url feature_image size="m"}} 600w,
+                                {{img_url feature_image size="l"}} 1000w,
+                                {{img_url feature_image size="xl"}} 2000w"
+                        sizes="(min-width: 1400px) 1400px, 92vw"
+                        src="{{img_url feature_image size="xl"}}"
+                        alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                    />
+                    {{#if feature_image_caption}}
+                        <figcaption>{{feature_image_caption}}</figcaption>
+                    {{/if}}
+                </figure>
+            {{/if}}
 
-        <header class="post-header">
-            <h1 class="post-title">{{title}}</h1>
         </header>
+    {{/match}}
 
-        <section class="post-content">
+    <section class="gh-content gh-canvas">
-            {{content}}
+        {{content}}
-        </section>
+    </section>
 
-    </article>
+</article>
 </main>
-{{/post}}
+
+{{/post}}

partials/icons/avatar.hbs

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

partials/icons/facebook.hbs

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

partials/icons/fire.hbs

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

partials/icons/loader.hbs

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

partials/icons/lock.hbs

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

partials/icons/rss.hbs

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

partials/icons/search.hbs

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

partials/icons/twitter.hbs

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

partials/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/loop.hbs

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

partials/navigation.hbs

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

partials/post-card.hbs

@@ -0,0 +1,78 @@
+{{!-- This is a partial file used to generate a post "card"
+which templates loop over to generate a list of posts. --}}
+
+<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{^is "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"
+            srcset="{{img_url feature_image size="s"}} 300w,
+                    {{img_url feature_image size="m"}} 600w,
+                    {{img_url feature_image size="l"}} 1000w,
+                    {{img_url feature_image size="xl"}} 2000w"
+            sizes="(max-width: 1000px) 400px, 800px"
+            src="{{img_url feature_image size="m"}}"
+            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+            loading="lazy"
+        />
+
+        {{#unless access}}
+        {{^has visibility="public"}}
+            <div class="post-card-access">
+                {{> "icons/lock"}}
+                {{#has visibility="members"}}
+                    Members only
+                {{else}}
+                    Paid-members only
+                {{/has}}
+            </div>
+        {{/has}}
+        {{/unless}}
+
+    </a>
+    {{/if}}
+
+    <div class="post-card-content">
+
+        <a class="post-card-content-link" href="{{url}}">
+            <header class="post-card-header">
+                <div class="post-card-tags">
+                    {{#primary_tag}}
+                        <span class="post-card-primary-tag">{{name}}</span>
+                    {{/primary_tag}}
+                    {{#if featured}}
+                        <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+                    {{/if}}
+                </div>
+                <h2 class="post-card-title">
+                    {{#unless access}}
+                    {{^has visibility="public"}}
+                        {{#unless feature_image}}
+                            {{> "icons/lock"}}
+                        {{/unless}}
+                    {{/has}}
+                    {{/unless}}
+                    {{title}}
+                </h2>
+            </header>
+            {{#if excerpt}}
+                <div class="post-card-excerpt">{{excerpt}}</div>
+            {{/if}}
+        </a>
+
+        <footer class="post-card-meta">
+            <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMM YYYY"}}</time>
+            {{#if reading_time}}
+                <span class="post-card-meta-length">{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
+            {{/if}}
+            {{#if @site.comments_enabled}}
+                {{comment_count}}
+            {{/if}}
+        </footer>
+
+    </div>
+
+</article>

partials/site-nav.hbs

@@ -0,0 +1,40 @@
+<nav class="site-nav">
+    <div class="site-nav-left-wrapper">
+        <div class="site-nav-left">
+            {{#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}}
+            <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>
+                {{/if}}
+                {{#if @site.twitter}}
+                    <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                {{/if}}
+            </div>
+            {{#unless @site.members_enabled}}
+                <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,99 +1,138 @@
 {{!< default}}
 
-{{! The comment above "< default" means - insert everything in this file into
+{{!-- The tag above means: insert everything in this file
-    the {body} of the default.hbs template, which contains our header/footer. }}
+into the {body} tag of the default.hbs template --}}
+
 
-{{! Everything inside the #post tags pulls data from the post }}
 {{#post}}
+{{!-- Everything inside the #post block pulls data from the post --}}
 
-<header class="main-header post-head {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}">
+<main id="site-main" class="site-main">
-    <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
+<article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-</header>
 
-<main class="content" role="main">
+    <header class="article-header gh-canvas">
-    <article class="{{post_class}}">
 
-        <header class="post-header">
+        <div class="article-tag post-card-tags">
-            <h1 class="post-title">{{title}}</h1>
+            {{#primary_tag}}
-            <section class="post-meta">
+                <span class="post-card-primary-tag">
-                <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time> {{tags prefix=" on "}}
+                    <a href="{{url}}">{{name}}</a>
-            </section>
+                </span>
-        </header>
+            {{/primary_tag}}
-
+            {{#if featured}}
-        <section class="post-content">
+                <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
-            {{content}}
-        </section>
-
-        <footer class="post-footer">
-
-        {{! Everything inside the #author tags pulls data from the author }}
-        {{#author}}
-
-            {{#if image}}
-            <figure class="author-image">
-                <a class="img" href="{{url}}" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></a>
-            </figure>
             {{/if}}
+        </div>
 
-            <section class="author">
+        <h1 class="article-title">{{title}}</h1>
-                <h4><a href="{{url}}">{{name}}</a></h4>
 
-                {{#if bio}}
+        {{#if custom_excerpt}}
-                    <p>{{bio}}</p>
+            <p class="article-excerpt">{{custom_excerpt}}</p>
-                {{else}}
+        {{/if}}
-                    <p>Read <a href="{{url}}">more posts</a> by this author.</p>
+
-                {{/if}}
+        <div class="article-byline">
-                <div class="author-meta">
+        <section class="article-byline-content">
-                    {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}}
+
-                    {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}}
+            <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>
-            </section>
+            </div>
 
-        {{/author}}
+        </section>
+        </div>
 
-            <section class="share">
+        {{#match @custom.post_image_style "!=" "Hidden"}}
-                <h4>Share this post</h4>
+        {{#if feature_image}}
-                <a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
+            <figure class="article-image">
-                    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
+                {{!-- This is a responsive image, it loads different sizes depending on device
-                    <span class="hidden">Twitter</span>
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-                </a>
+                <img
-                <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
+                    srcset="{{img_url feature_image size="s"}} 300w,
-                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
+                            {{img_url feature_image size="m"}} 600w,
-                    <span class="hidden">Facebook</span>
+                            {{img_url feature_image size="l"}} 1000w,
-                </a>
+                            {{img_url feature_image size="xl"}} 2000w"
-                <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}"
+                    sizes="(min-width: 1400px) 1400px, 92vw"
-                   onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
+                    src="{{img_url feature_image size="xl"}}"
-                    <span class="hidden">Google+</span>
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
-                </a>
+                />
-            </section>
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+        {{/if}}
+        {{/match}}
 
-        </footer>
+    </header>
 
-    </article>
+    <section class="gh-content gh-canvas">
+        {{content}}
+    </section>
+
+    {{#if comments}}
+        <section class="article-comments gh-canvas">
+            {{comments}}
+        </section>
+    {{/if}}
+
+</article>
 </main>
 
-<aside class="read-next">
+{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
-    {{#next_post}}
+{{#if @site.members_enabled}}
-    <a class="read-next-story {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
+{{#unless @member}}
-        <section class="post">
+{{#unless @site.comments_enabled}}
-            <h2>{{title}}</h2>
+{{#if access}}
-            <p>{{excerpt words="19"}}&hellip;</p>
+    <section class="footer-cta outer">
-        </section>
+        <div class="inner">
-    </a>
+            {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
-    {{/next_post}}
+            <a class="footer-cta-button" href="#/portal" data-portal>
-    {{#prev_post}}
+                <div class="footer-cta-input">{{t "Enter your email"}}</div>
-    <a class="read-next-story prev {{#if image}}" style="background-image: url({{image}}){{else}}no-cover{{/if}}" href="{{url}}">
+                <span>{{t "Subscribe"}}</span>
-        <section class="post">
+            </a>
-            <h2>{{title}}</h2>
+        </div>
-            <p>{{excerpt words="19"}}&hellip;</p>
+    </section>
-        </section>
+{{/if}}
-    </a>
+{{/unless}}
-    {{/prev_post}}
+{{/unless}}
-</aside>
+{{/if}}
+
+{{!-- Read more links, just above the footer --}}
+{{#if @custom.show_recent_posts_footer}}
+    {{!-- The {#get} helper below fetches some of the latest posts here
+    so that people have something else to read when they finish this one.
+
+    This query gets the latest 3 posts on the site, but adds a filter to
+    exclude the post we're currently on from being included. --}}
+    {{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
+
+        {{#if more_posts}}
+            <aside class="read-more-wrap outer">
+                <div class="read-more inner">
+                    {{#foreach more_posts}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+            </aside>
+        {{/if}}
+    {{/get}}
+{{/if}}
 
 {{/post}}

tag.hbs

@@ -1,32 +1,55 @@
 {{!< default}}
-{{! The tag above means - insert everything in this file into the {body} of the default.hbs template }}
+{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
+
+<main id="site-main" class="site-main outer">
+<div class="inner posts">
+    <div class="post-feed">
+
+        {{#tag}}
+        <section class="post-card post-card-large">
+
+            {{#if feature_image}}
+            <div class="post-card-image-link">
+                {{!-- This is a responsive image, it loads different sizes depending on device
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                <img class="post-card-image"
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(max-width: 1000px) 400px, 800px"
+                    src="{{img_url feature_image size="m"}}"
+                    alt="{{title}}"
+                />
+            </div>
+            {{/if}}
+
+            <div class="post-card-content">
+            <div class="post-card-content-link">
+                <header class="post-card-header">
+                    <h2 class="post-card-title">{{name}}</h2>
+                </header>
+                <div class="post-card-excerpt">
+                    {{#if description}}
+                        {{description}}
+                    {{else}}
+                        A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
+                    {{/if}}
+                </div>
+            </div>
+            </div>
+
+        </section>
+        {{/tag}}
+
+        {{#foreach posts}}
+            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+            {{> "post-card"}}
+        {{/foreach}}
 
-{{! If we have a tag cover, display that - else blog cover - else nothing }}
-<header class="main-header tag-head {{#if tag.image}}" style="background-image: url({{tag.image}}){{else}}{{#if @blog.cover}}" style="background-image: url({{@blog.cover}}){{else}}no-cover{{/if}}{{/if}}">
-    <nav class="main-nav overlay clearfix">
-        {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
-        {{#if @blog.navigation}}
-            <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
-        {{/if}}
-    </nav>
-    <div class="vertical">
-        <div class="main-header-content inner">
-            <h1 class="page-title">{{tag.name}}</h1>
-            <h2 class="page-description">
-                {{#if tag.description}}
-                    {{tag.description}}
-                {{else}}
-                    A {{pagination.total}}-post collection
-                {{/if}}
-            </h2>
-        </div>
     </div>
-</header>
-
-{{! The main content area on the homepage }}
-<main class="content" role="main">
-
-    {{! The tag below includes the post loop - partials/loop.hbs }}
-    {{> "loop"}}
 
+    {{pagination}}
+    
+</div>
 </main>