v4.7.4

Fix paginated posts of the list layout
Remove deprecated ghost-api property
2025-07-12 16:56:06 +00:00 · 2022-04-08 18:05:35 +08:00 · 2022-04-08 18:04:54 +08:00 · 2022-03-28 15:48:20 +08:00 · 2022-03-23 11:15:07 +08:00 · 2022-03-01 11:44:07 +08:00
22 changed files with 1115 additions and 1283 deletions
--- a/2
+++ b/2
@ -1,4 +1,4 @@
-Copyright (c) 2013-2021 Ghost Foundation
+Copyright (c) 2013-2022 Ghost Foundation

 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation
--- a/README.md
+++ b/README.md
@ -66,4 +66,4 @@ You can add your own SVG icons in the same manner.

 # Copyright & License

-Copyright (c) 2013-2021 Ghost Foundation - Released under the [MIT license](LICENSE).
+Copyright (c) 2013-2022 Ghost Foundation - Released under the [MIT license](LICENSE).
--- a/assets/built/casper.js
+++ b/assets/built/casper.js
@ -1,2 +1,2 @@
-!function(o){"use strict";o.fn.fitVids=function(e){var t,i,n={customSelector:null,ignore:null};return document.getElementById("fit-vids-style")||(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("div")).innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(i.childNodes[1])),e&&o.extend(n,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];n.customSelector&&e.push(n.customSelector);var r=".fitvidsignore";n.ignore&&(r=r+", "+n.ignore);e=o(this).find(e.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var e,t,i=o(this);0<i.parents(r).length||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length||(i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16)),e=("object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height())/(isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10)),i.attr("name")||(t="fitvid"+o.fn.fitVids._count,i.attr("name",t),o.fn.fitVids._count++),i.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(e){e.addEventListener("DOMContentLoaded",function(){e.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),e=e.attributes.width.value/e.attributes.height.value;t.style.flex=e+" 1 0%"})})}((window,document)),function(t,i){var r,n,o,d,s,a,l,c=i.querySelector("link[rel=next]");function h(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",m);this.response.querySelectorAll("article.post-card").forEach(function(e){r.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?c.href=e.href:(t.removeEventListener("scroll",f),t.removeEventListener("resize",m)),l=i.documentElement.scrollHeight,d=o=!1}function e(){var e;d||(s+a<=l-n?o=!1:(d=!0,(e=new t.XMLHttpRequest).responseType="document",e.addEventListener("load",h),e.open("GET",c.href),e.send(null)))}function u(){o||t.requestAnimationFrame(e),o=!0}function f(){s=t.scrollY,u()}function m(){a=t.innerHeight,l=i.documentElement.scrollHeight,u()}!c||(r=i.querySelector(".post-feed"))&&(d=o=!(n=300),s=t.scrollY,a=t.innerHeight,l=i.documentElement.scrollHeight,t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",m),u())}(window,document);
+!function(o){"use strict";o.fn.fitVids=function(e){var t,i,n={customSelector:null,ignore:null};return document.getElementById("fit-vids-style")||(t=document.head||document.getElementsByTagName("head")[0],(i=document.createElement("div")).innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(i.childNodes[1])),e&&o.extend(n,e),this.each(function(){var e=['iframe[src*="player.vimeo.com"]','iframe[src*="youtube.com"]','iframe[src*="youtube-nocookie.com"]','iframe[src*="kickstarter.com"][src*="video.html"]',"object","embed"];n.customSelector&&e.push(n.customSelector);var r=".fitvidsignore";n.ignore&&(r=r+", "+n.ignore);e=o(this).find(e.join(","));(e=(e=e.not("object object")).not(r)).each(function(){var e,t,i=o(this);0<i.parents(r).length||"embed"===this.tagName.toLowerCase()&&i.parent("object").length||i.parent(".fluid-width-video-wrapper").length||(i.css("height")||i.css("width")||!isNaN(i.attr("height"))&&!isNaN(i.attr("width"))||(i.attr("height",9),i.attr("width",16)),e=("object"===this.tagName.toLowerCase()||i.attr("height")&&!isNaN(parseInt(i.attr("height"),10))?parseInt(i.attr("height"),10):i.height())/(isNaN(parseInt(i.attr("width"),10))?i.width():parseInt(i.attr("width"),10)),i.attr("name")||(t="fitvid"+o.fn.fitVids._count,i.attr("name",t),o.fn.fitVids._count++),i.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*e+"%"),i.removeAttr("height").removeAttr("width"))})})},o.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(t,i){var r,n,o,d,s,a,c,l=i.querySelector("link[rel=next]");function h(){if(404===this.status)return t.removeEventListener("scroll",p),void t.removeEventListener("resize",f);this.response.querySelectorAll("article.post-card").forEach(function(e){r.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?l.href=e.href:(t.removeEventListener("scroll",p),t.removeEventListener("resize",f)),c=i.documentElement.scrollHeight,d=o=!1}function e(){var e;d||(s+a<=c-n?o=!1:(d=!0,(e=new t.XMLHttpRequest).responseType="document",e.addEventListener("load",h),e.open("GET",l.href),e.send(null)))}function u(){o||t.requestAnimationFrame(e),o=!0}function p(){s=t.scrollY,u()}function f(){a=t.innerHeight,c=i.documentElement.scrollHeight,u()}!l||(r=i.querySelector(".post-feed"))&&(d=o=!(n=300),s=t.scrollY,a=t.innerHeight,c=i.documentElement.scrollHeight,t.addEventListener("scroll",p,{passive:!0}),t.addEventListener("resize",f),u())}(window,document);
 //# sourceMappingURL=casper.js.map
--- a/assets/built/casper.js.map
+++ b/assets/built/casper.js.map
--- a/assets/built/global.css
+++ b/assets/built/global.css
@ -1,2 +1,2 @@
-a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{display:block;max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{padding-left:.3em;line-height:1.6em}li+li{margin-top:.5em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:2.4rem;font-weight:600}@media (max-width:600px){h3{font-size:1.7rem}}h4{font-size:2.2rem}h4,h5{margin:1.5em 0 .5em}h5{font-size:2rem}h6{margin:1.5em 0 .5em;font-size:1.8rem}
+a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{display:block;max-width:100%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}kbd{padding:3px 5px;font-family:var(--font-mono);font-size:1.5rem;background:#f6f8fa;border:1px solid rgba(124,139,154,.25);border-radius:6px;box-shadow:inset 0 -1px 0 rgba(124,139,154,.25)}@media (max-width:600px){kbd{font-size:1.3rem}}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{color:#35373a;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-moz-selection{text-shadow:none;background:#daf2fd}::selection{text-shadow:none;background:#daf2fd}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #f0f0f0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}::not(.gh-content) blockquote,::not(.gh-content) dl,::not(.gh-content) ol,::not(.gh-content) p,::not(.gh-content) ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{padding-left:.3em;line-height:1.6em}li+li{margin-top:.5em}dt{float:left;margin:0 20px 0 0;width:120px;color:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:2.4rem;font-weight:600}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:2rem}@media (max-width:600px){h4{font-size:1.7rem}}h5{font-size:2rem}h5,h6{margin:1.5em 0 .5em}h6{font-size:1.8rem}
 /*# sourceMappingURL=global.css.map */
--- a/assets/built/global.css.map
+++ b/assets/built/global.css.map
--- a/assets/built/screen.css
+++ b/assets/built/screen.css
--- a/assets/built/screen.css.map
+++ b/assets/built/screen.css.map
--- a/assets/css/.csscomb.json
+++ b/assets/css/.csscomb.json
@ -1,237 +0,0 @@
-{
-    "remove-empty-rulesets": true,
-    "always-semicolon": true,
-    "color-case": "lower",
-    "block-indent": "    ",
-    "color-shorthand": true,
-    "element-case": "lower",
-    "eof-newline": true,
-    "leading-zero": true,
-    "quotes": "double",
-    "space-before-colon": "",
-    "space-after-colon": " ",
-    "space-before-combinator": " ",
-    "space-after-combinator": " ",
-    "space-between-declarations": "\n",
-    "space-before-opening-brace": " ",
-    "space-after-opening-brace": "\n",
-    "space-after-selector-delimiter": "\n",
-    "space-before-selector-delimiter": "",
-    "space-before-closing-brace": "\n",
-    "strip-spaces": true,
-    "tab-size": 4,
-    "unitless-zero": true,
-    "sort-order": [ [
-        "content",
-        "visibility",
-        "position",
-        "top",
-        "right",
-        "bottom",
-        "left",
-        "z-index",
-        "order",
-        "flex",
-        "flex-grow",
-        "flex-shrink",
-        "flex-basis",
-        "align-self",
-        "display",
-        "flex-flow",
-        "flex-direction",
-        "flex-wrap",
-        "justify-content",
-        "align-items",
-        "align-content",
-        "flex-order",
-        "flex-pack",
-        "flex-align",
-        "float",
-        "clear",
-        "overflow",
-        "overflow-x",
-        "overflow-y",
-        "-webkit-overflow-scrolling",
-        "clip",
-        "box-sizing",
-        "margin",
-        "margin-top",
-        "margin-right",
-        "margin-bottom",
-        "margin-left",
-        "padding",
-        "padding-top",
-        "padding-right",
-        "padding-bottom",
-        "padding-left",
-        "min-width",
-        "min-height",
-        "max-width",
-        "max-height",
-        "width",
-        "height",
-        "outline",
-        "outline-width",
-        "outline-style",
-        "outline-color",
-        "outline-offset",
-        "border",
-        "border-spacing",
-        "border-collapse",
-        "border-width",
-        "border-style",
-        "border-color",
-        "border-top",
-        "border-top-width",
-        "border-top-style",
-        "border-top-color",
-        "border-right",
-        "border-right-width",
-        "border-right-style",
-        "border-right-color",
-        "border-bottom",
-        "border-bottom-width",
-        "border-bottom-style",
-        "border-bottom-color",
-        "border-left",
-        "border-left-width",
-        "border-left-style",
-        "border-left-color",
-        "border-image",
-        "border-image-source",
-        "border-image-slice",
-        "border-image-width",
-        "border-image-outset",
-        "border-image-repeat",
-        "border-top-image",
-        "border-right-image",
-        "border-bottom-image",
-        "border-left-image",
-        "border-corner-image",
-        "border-top-left-image",
-        "border-top-right-image",
-        "border-bottom-right-image",
-        "border-bottom-left-image",
-        "color",
-        "font",
-        "font-family",
-        "font-size",
-        "line-height",
-        "font-weight",
-        "font-style",
-        "font-variant",
-        "font-size-adjust",
-        "font-stretch",
-        "font-feature-settings",
-        "letter-spacing",
-        "text-rendering",
-        "text-align",
-        "text-align-last",
-        "text-decoration",
-        "text-emphasis",
-        "text-emphasis-position",
-        "text-emphasis-style",
-        "text-emphasis-color",
-        "text-indent",
-        "text-justify",
-        "text-outline",
-        "text-transform",
-        "text-wrap",
-        "text-overflow",
-        "text-overflow-ellipsis",
-        "text-overflow-mode",
-        "text-shadow",
-        "white-space",
-        "word-spacing",
-        "word-wrap",
-        "word-break",
-        "tab-size",
-        "hyphens",
-        "user-select",
-        "fill",
-        "stroke",
-        "background",
-        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-        "background-color",
-        "background-image",
-        "background-attachment",
-        "background-position",
-        "background-position-x",
-        "background-position-y",
-        "background-clip",
-        "background-origin",
-        "background-size",
-        "background-repeat",
-        "border-radius",
-        "border-top-left-radius",
-        "border-top-right-radius",
-        "border-bottom-right-radius",
-        "border-bottom-left-radius",
-        "box-decoration-break",
-        "box-shadow",
-        "table-layout",
-        "caption-side",
-        "empty-cells",
-        "list-style",
-        "list-style-position",
-        "list-style-type",
-        "list-style-image",
-        "quotes",
-        "counter-increment",
-        "counter-reset",
-        "vertical-align",
-        "src",
-        "opacity",
-        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-        "filter",
-        "resize",
-        "cursor",
-        "nav-index",
-        "nav-up",
-        "nav-right",
-        "nav-down",
-        "nav-left",
-        "transition",
-        "transition-delay",
-        "transition-timing-function",
-        "transition-duration",
-        "transition-property",
-        "transform",
-        "transform-origin",
-        "animation",
-        "animation-name",
-        "animation-duration",
-        "animation-play-state",
-        "animation-timing-function",
-        "animation-delay",
-        "animation-iteration-count",
-        "animation-direction",
-        "animation-fill-mode",
-        "pointer-events",
-        "unicode-bidi",
-        "direction",
-        "columns",
-        "column-span",
-        "column-width",
-        "column-count",
-        "column-fill",
-        "column-gap",
-        "column-rule",
-        "column-rule-width",
-        "column-rule-style",
-        "column-rule-color",
-        "break-before",
-        "break-inside",
-        "break-after",
-        "page-break-before",
-        "page-break-inside",
-        "page-break-after",
-        "orphans",
-        "widows",
-        "zoom",
-        "max-zoom",
-        "min-zoom",
-        "user-zoom",
-        "orientation"
-    ] ]
-}
--- a/assets/css/csscomb.json
+++ b/assets/css/csscomb.json
@ -1,240 +0,0 @@
-{
-    "remove-empty-rulesets": true,
-    "always-semicolon": true,
-    "color-case": "lower",
-    "block-indent": "    ",
-    "color-shorthand": true,
-    "element-case": "lower",
-    "eof-newline": true,
-    "leading-zero": true,
-    "quotes": "double",
-    "space-before-colon": "",
-    "space-after-colon": " ",
-    "space-before-combinator": " ",
-    "space-after-combinator": " ",
-    "space-between-declarations": "\n",
-    "space-before-opening-brace": " ",
-    "space-after-opening-brace": "\n",
-    "space-after-selector-delimiter": "\n",
-    "space-before-selector-delimiter": "",
-    "space-before-closing-brace": "\n",
-    "strip-spaces": true,
-    "tab-size": 4,
-    "unitless-zero": true,
-    "sort-order": [ [
-        "content",
-        "visibility",
-        "position",
-        "top",
-        "right",
-        "bottom",
-        "left",
-        "z-index",
-        "order",
-        "flex",
-        "flex-grow",
-        "flex-shrink",
-        "flex-basis",
-        "align-self",
-        "display",
-        "flex-flow",
-        "flex-direction",
-        "justify-content",
-        "align-items",
-        "align-content",
-        "flex-wrap",
-        "flex-order",
-        "flex-pack",
-        "flex-align",
-        "float",
-        "clear",
-        "box-sizing",
-        "width",
-        "height",
-        "min-width",
-        "min-height",
-        "max-width",
-        "max-height",
-        "overflow",
-        "overflow-x",
-        "overflow-y",
-        "clip",
-        "margin",
-        "margin-top",
-        "margin-right",
-        "margin-bottom",
-        "margin-left",
-        "padding",
-        "padding-top",
-        "padding-right",
-        "padding-bottom",
-        "padding-left",
-        "outline",
-        "outline-width",
-        "outline-style",
-        "outline-color",
-        "outline-offset",
-        "border",
-        "border-spacing",
-        "border-collapse",
-        "border-width",
-        "border-style",
-        "border-color",
-        "border-top",
-        "border-top-width",
-        "border-top-style",
-        "border-top-color",
-        "border-right",
-        "border-right-width",
-        "border-right-style",
-        "border-right-color",
-        "border-bottom",
-        "border-bottom-width",
-        "border-bottom-style",
-        "border-bottom-color",
-        "border-left",
-        "border-left-width",
-        "border-left-style",
-        "border-left-color",
-        "border-image",
-        "border-image-source",
-        "border-image-slice",
-        "border-image-width",
-        "border-image-outset",
-        "border-image-repeat",
-        "border-top-image",
-        "border-right-image",
-        "border-bottom-image",
-        "border-left-image",
-        "border-corner-image",
-        "border-top-left-image",
-        "border-top-right-image",
-        "border-bottom-right-image",
-        "border-bottom-left-image",
-        "table-layout",
-        "caption-side",
-        "empty-cells",
-        "list-style",
-        "list-style-position",
-        "list-style-type",
-        "list-style-image",
-        "quotes",
-        "counter-increment",
-        "counter-reset",
-        "vertical-align",
-        "stroke",
-        "fill",
-        "stroke-width",
-        "stroke-opacity",
-        "color",
-        "font",
-        "font-family",
-        "font-size",
-        "line-height",
-        "font-weight",
-        "font-style",
-        "font-variant",
-        "font-size-adjust",
-        "font-stretch",
-        "text-rendering",
-        "font-feature-settings",
-        "letter-spacing",
-        "hyphens",
-        "text-align",
-        "text-align-last",
-        "text-decoration",
-        "text-emphasis",
-        "text-emphasis-position",
-        "text-emphasis-style",
-        "text-emphasis-color",
-        "text-indent",
-        "text-justify",
-        "text-outline",
-        "text-transform",
-        "text-wrap",
-        "text-overflow",
-        "text-overflow-ellipsis",
-        "text-overflow-mode",
-        "text-shadow",
-        "white-space",
-        "word-spacing",
-        "word-wrap",
-        "word-break",
-        "tab-size",
-        "user-select",
-        "src",
-        "resize",
-        "cursor",
-        "nav-index",
-        "nav-up",
-        "nav-right",
-        "nav-down",
-        "nav-left",
-        "background",
-        "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
-        "background-color",
-        "background-image",
-        "background-size",
-        "background-attachment",
-        "background-position",
-        "background-position-x",
-        "background-position-y",
-        "background-clip",
-        "background-origin",
-        "background-repeat",
-        "border-radius",
-        "border-top-left-radius",
-        "border-top-right-radius",
-        "border-bottom-right-radius",
-        "border-bottom-left-radius",
-        "box-decoration-break",
-        "box-shadow",
-        "opacity",
-        "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
-        "filter",
-        "transition",
-        "transition-delay",
-        "transition-timing-function",
-        "transition-duration",
-        "transition-property",
-        "transform",
-        "transform-origin",
-        "animation",
-        "animation-name",
-        "animation-duration",
-        "animation-play-state",
-        "animation-timing-function",
-        "animation-delay",
-        "animation-iteration-count",
-        "animation-direction",
-        "animation-fill-mode",
-        "pointer-events",
-        "unicode-bidi",
-        "direction",
-        "columns",
-        "column-span",
-        "column-width",
-        "column-count",
-        "column-fill",
-        "column-gap",
-        "column-rule",
-        "column-rule-width",
-        "column-rule-style",
-        "column-rule-color",
-        "break-before",
-        "break-inside",
-        "break-after",
-        "page-break-before",
-        "page-break-inside",
-        "page-break-after",
-        "orphans",
-        "widows",
-        "zoom",
-        "max-zoom",
-        "min-zoom",
-        "user-zoom",
-        "orientation",
-        "-webkit-overflow-scrolling",
-        "-ms-overflow-scrolling"
-    ] ]
-}
--- a/assets/css/global.css
+++ b/assets/css/global.css
@ -176,6 +176,20 @@ samp {
    font-family: monospace, monospace;
    font-size: 1em;
 }
+kbd {
+    padding: 3px 5px;
+    font-family: var(--font-mono);
+    font-size: 1.5rem;
+    background: #f6f8fa;
+    border: 1px solid rgba(124, 139, 154, 0.25);
+    border-radius: 6px;
+    box-shadow: inset 0 -1px 0 rgba(124, 139, 154, 0.25);
+}
+@media (max-width: 600px) {
+    kbd {
+        font-size: 1.3rem;
+    }
+}
 button,
 input,
 optgroup,
@ -374,12 +388,6 @@ blockquote {
    border-left: #daf2fd;
 }

-blockquote p {
-    margin: 0.8em 0;
-    font-size: 1.2em;
-    font-weight: 300;
-}
-
 blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
@ -452,7 +460,12 @@ h3 {

 h4 {
    margin: 1.5em 0 0.5em 0;
-    font-size: 2.2rem;
+    font-size: 2rem;
+}
+@media (max-width: 600px) {
+    h4 {
+        font-size: 1.7rem;
+    }
 }

 h5 {
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@ -48,7 +48,7 @@ production stylesheet in assets/built/screen.css

    --ghost-accent-color: {value};

-    You can use this variale throughout your styles
+    You can use this variable throughout your styles
     */

    /* Fonts */
@ -68,7 +68,7 @@ production stylesheet in assets/built/screen.css
    min-height: 100vh;
 }

-.viewport > main {
+.site-content {
    flex-grow: 1;
 }

@ -161,6 +161,10 @@ production stylesheet in assets/built/screen.css
    background: var(--ghost-accent-color);
 }

+.site-header-content.large {
+    padding-top: 28vmin;
+    padding-bottom: 28vmin;
+}


 /* 5. Site Navigation
@ -301,12 +305,12 @@ production stylesheet in assets/built/screen.css
 a.gh-head-button {
    display: block;
    padding: 8px 15px;
-    color: var(--color-darkgrey);
+    color: var(--button-text-color, var(--color-darkgrey));
    font-weight: 500;
    letter-spacing: -0.015em;
    font-size: 1.5rem;
    line-height: 1em;
-    background: #fff;
+    background: var(--button-bg-color, #fff);
    border-radius: 30px;
 }

@ -422,7 +426,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
        justify-content: space-between;
        user-select: none;
    }
-    .home-template #gh-head .gh-head-brand {
+    .home-template #gh-head.has-cover .gh-head-brand {
        justify-content: flex-end;
    }
    #gh-head .gh-head-menu {
@ -489,7 +493,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
    }
 }

-.home-template .gh-head {
+.home-template .gh-head.has-cover {
    position: absolute;
    top: 0;
    right: 0;
@ -505,10 +509,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
    background: var(--ghost-accent-color);
 }

-.home-template .gh-head-logo {
+.home-template .gh-head.has-cover .gh-head-logo {
    display: none;
 }
-.home-template .gh-head-menu {
+.home-template .gh-head.has-cover .gh-head-menu {
    margin-left: -2.5vmin;
 }

@ -524,6 +528,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
    padding: 4vmin 0;
 }

+.post-feed.list {
+    row-gap: 6vmin;
+    max-width: 940px;
+    margin: 2vmin auto 0;
+}
+
@media (max-width: 1000px) {
    .post-feed {
        grid-template-columns: 1fr 1fr;
@ -546,6 +556,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
    word-break: break-word;
 }

+@media (max-width: 700px) {
+    .post-card {
+        min-height: auto;
+    }
+}
+
 .post-card-image-link {
    position: relative;
    display: block;
@ -602,6 +618,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
    margin-top: 0;
 }

+.has-serif-title .post-card-title {
+    font-family: var(--font-serif);
+}
+
 .post-card-content {
    flex-grow: 1;
    display: flex;
@ -611,6 +631,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 .post-card-excerpt {
    max-width: 56em;
    color: color-mod(var(--color-midgrey) l(-8%));
+    font-family: var(--font-serif);
+}
+
+.has-sans-body .post-card-excerpt {
+    font-family: var(--font-sans-serif);
 }

 .post-card-excerpt p {
@ -731,6 +756,30 @@ make sure this only happens on large viewports / desktop-ish devices.

 */

+@media (min-width: 701px) {
+    .post-feed.list .post-card-large {
+        grid-column: 1 / span 3;
+        display: grid;
+        grid-gap: 4vmin;
+        grid-template-columns: 3fr 5fr;
+        min-height: auto;
+        border-top: 0;
+    }
+
+    .post-feed.list .post-card-large.no-image {
+        grid-template-columns: 1fr;
+    }
+
+    .post-feed.list .post-card-large:not(.no-image) .post-card-header {
+        margin-top: 0;
+    }
+
+    .post-feed.list .post-card-large .post-card-content {
+        justify-content: flex-start;
+        margin-top: -6px;
+    }
+}
+
@media (min-width: 1001px) {
    .post-card-large {
        grid-column: 1 / span 3;
@ -752,6 +801,18 @@ make sure this only happens on large viewports / desktop-ish devices.
        min-height: 380px;
    }

+    .post-feed.list .post-card-large .post-card-image-link {
+        grid-column: 1 / span 1;
+        height: max-content;
+        min-height: auto;
+    }
+
+    .post-feed.list .post-card-large .post-card-image-link::after {
+        content: "";
+        display: block;
+        padding-bottom: 60%;
+    }
+
    .post-card-large .post-card-image {
        position: absolute;
        width: 100%;
@ -767,8 +828,11 @@ make sure this only happens on large viewports / desktop-ish devices.
        font-size: 3.2rem;
    }

+    .post-feed.list .post-card-large .post-card-title {
+        font-size: 2.4rem;
+    }
+
    .post-card-large .post-card-excerpt p {
-        margin-bottom: 1.5em;
        font-size: 1.7rem;
        line-height: 1.55em;
        -webkit-line-clamp: 8;
@ -820,6 +884,10 @@ make sure this only happens on large viewports / desktop-ish devices.
    color: color-mod(var(--color-darkgrey) l(-5%));
 }

+.has-serif-title .article-title {
+    font-family: var(--font-serif);
+}
+
 .article-excerpt {
    margin: 0 0 1rem;
    font-size: 2rem;
@ -833,6 +901,14 @@ make sure this only happens on large viewports / desktop-ish devices.
    margin: 6vmin 0 0;
 }

+.image-full .article-image {
+    grid-column: full-start / full-end;
+}
+
+.image-small .article-image {
+    grid-column: main-start / main-end;
+}
+
 .gh-canvas .article-image img {
    display: block;
    margin-left: auto;
@ -908,6 +984,10 @@ headings, text, images and lists. We deal with cards lower down. */
    color: var(--color-darkgrey);
 }

+.has-serif-title .gh-content > [id] {
+    font-family: var(--font-serif);
+}
+
 /* Add back a top margin to all headings, unless a heading
 is the very first element in the post content */
 .gh-content > [id]:not(:first-child) {
@ -937,7 +1017,7 @@ is the very first element in the post content */
    word-break: break-word;
 }

-.gh-content > blockquote,
+.gh-content > blockquote:not([class]),
 .gh-content > ol,
 .gh-content > ul,
 .gh-content > dl,
@ -948,19 +1028,61 @@ is the very first element in the post content */
    line-height: 1.6em;
 }

+.gh-content .kg-callout-card .kg-callout-text,
+.gh-content .kg-toggle-card .kg-toggle-content > ol,
+.gh-content .kg-toggle-card .kg-toggle-content > ul,
+.gh-content .kg-toggle-card .kg-toggle-content > p {
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: 1.9rem;
+    line-height: 1.6em;
+}
+
+.gh-content .kg-product-card .kg-product-card-description > p,
+.gh-content .kg-product-card .kg-product-card-description > ol,
+.gh-content .kg-product-card .kg-product-card-description > ul {
+    font-size: 1.7rem;
+    line-height: 1.6em;
+}
+
+.gh-content .kg-callout-card .kg-callout-emoji {
+    font-size: 2.1rem;
+    line-height: 1.4em;
+}
+
+.gh-content .kg-toggle-card .kg-toggle-heading-text {
+    font-size: 2.0rem;
+}
+
+.has-sans-body .gh-content > blockquote,
+.has-sans-body .gh-content > ol,
+.has-sans-body .gh-content > ul,
+.has-sans-body .gh-content > dl,
+.has-sans-body .gh-content > p,
+.has-sans-body .gh-content .kg-callout-card .kg-callout-text,
+.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ol,
+.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > ul,
+.has-sans-body .gh-content .kg-toggle-card .kg-toggle-content > p {
+    font-family: var(--font-sans);
+}
+
 .gh-content > ul,
 .gh-content > ol,
-.gh-content > dl {
+.gh-content > dl,
+.gh-content .kg-toggle-card .kg-toggle-content > ol,
+.gh-content .kg-toggle-card .kg-toggle-content > ul,
+.gh-content .kg-product-card .kg-product-card-description > ol,
+.gh-content .kg-product-card .kg-product-card-description > ul {
    padding-left: 1.9em;
 }

-.gh-content > blockquote {
+.gh-content > blockquote:not([class]) {
    position: relative;
    font-style: italic;
    padding: 0;
 }

-.gh-content > blockquote::before {
+.gh-content > blockquote:not([class])::before {
    content: "";
    position: absolute;
    left: -1.5em;
@ -994,15 +1116,25 @@ is the very first element in the post content */
 }

@media (max-width: 650px) {
-    .gh-content blockquote,
-    .gh-content ol,
-    .gh-content ul,
-    .gh-content dl,
-    .gh-content p {
+    .gh-content > blockquote:not([class]),
+    .gh-content > ol,
+    .gh-content > ul,
+    .gh-content > dl,
+    .gh-content > p,
+    .gh-content .kg-callout-card .kg-callout-text,
+    .gh-content .kg-toggle-card .kg-toggle-content > ol,
+    .gh-content .kg-toggle-card .kg-toggle-content > ul,
+    .gh-content .kg-toggle-card .kg-toggle-content > p {
        font-size: 1.7rem;
    }

-    .gh-content blockquote::before {
+    .gh-content .kg-product-card .kg-product-card-description > p,
+    .gh-content .kg-product-card .kg-product-card-description > ol,
+    .gh-content .kg-product-card .kg-product-card-description > ul {
+        font-size: 1.5rem;
+    }
+
+    .gh-content blockquote:not([class])::before {
        left: -4vmin;
    }
 }
@ -1040,9 +1172,38 @@ except for when immediately preceeded by a heading */
    margin: auto;
 }

+.has-serif-title .kg-toggle-card .kg-toggle-heading-text {
+    font-family: var(--font-serif);
+}
+
+.gh-content .kg-callout-card-accent a {
+    text-decoration: underline;
+}
+
+.kg-blockquote-alt {
+    font-family: var(--font-serif);
+    color: var(--color-midgrey);
+}
+
+.has-sans-body .kg-blockquote-alt {
+    font-family: var(--font-sans);
+}
+
+.kg-card.kg-header-card.kg-style-dark {
+    background: var(--color-darkgrey);
+}
+
+.kg-header-card.kg-style-light h2.kg-header-card-header {
+    color: color-mod(var(--color-darkgrey) l(-5%));
+}
+
+.has-serif-title .kg-header-card h2.kg-header-card-header {
+    font-family: var(--font-serif);
+}
+

 /* Captions */
-.kg-card figcaption {
+figcaption {
    padding: 1.5rem 1.5rem 0;
    text-align: center;
    color: rgba(0,0,0,0.5);
@ -1050,9 +1211,12 @@ except for when immediately preceeded by a heading */
    font-size: 1.3rem;
    line-height: 1.4em;
 }
-.kg-card figcaption strong {
+figcaption strong {
    color: rgba(0,0,0,0.8);
 }
+figcaption a {
+    color: var(--ghost-accent-color);
+}


 /* Highly specific styles for traditional Instagram embeds */
@ -1068,162 +1232,6 @@ iframe.instagram-media + script + :not([id]) {
 }


-/* Galleries
-/* ---------------------------------------------------------- */
-
-/* When there galleries are mixed with images, reduce margin
-between them, so it looks like 1 big gallery */
-.kg-image-card + .kg-gallery-card,
-.kg-gallery-card + .kg-image-card,
-.kg-gallery-card + .kg-gallery-card {
-    margin-top: 0.75em;
-}
-
-.kg-image-card.kg-card-hascaption + .kg-gallery-card,
-.kg-gallery-card.kg-card-hascaption + .kg-image-card,
-.kg-gallery-card.kg-card-hascaption + .kg-gallery-card {
-    margin-top: 1.75em;
-}
-
-.kg-gallery-container {
-    position: relative;
-}
-
-.kg-gallery-row {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-}
-
-.kg-gallery-image img {
-    display: block;
-    margin: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.kg-gallery-row:not(:first-of-type) {
-    margin: 0.75em 0 0 0;
-}
-
-.kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 0.75em;
-}
-
-
-/* Bookmark Cards
-/* ---------------------------------------------------------- */
-
-/* These are styled links with structured data, similar to a
-Twitter card. These styles roughly match what you see in the
-Ghost editor. */
-
-.kg-bookmark-card,
-.kg-bookmark-publisher {
-    position: relative;
-    width: 100%;
-}
-
-.kg-bookmark-container,
-.kg-bookmark-container:hover {
-    display: flex;
-    color: currentColor;
-    font-family: var(--font-sans-serif);
-    text-decoration: none !important;
-    background: rgba(255,255,255,0.6);
-    border-radius: 5px;
-    box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.4);
-    overflow: hidden;
-}
-
-.kg-bookmark-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    flex-basis: 100%;
-    align-items: flex-start;
-    justify-content: flex-start;
-    padding: 20px;
-}
-
-.kg-bookmark-title {
-    font-size: 1.5rem;
-    line-height: 1.4em;
-    font-weight: 600;
-    color: #15171A;
-}
-
-.kg-bookmark-description {
-    display: -webkit-box;
-    font-size: 1.4rem;
-    line-height: 1.5em;
-    margin-top: 3px;
-    color: #626d79;
-    font-weight: 400;
-    max-height: 44px;
-    overflow-y: hidden;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-
-.kg-bookmark-metadata {
-    display: flex;
-    align-items: center;
-    margin-top: 22px;
-    width: 100%;
-    color: #394047;
-    font-size: 1.4rem;
-    font-weight: 500;
-}
-
-.kg-bookmark-icon {
-    width: 20px;
-    height: 20px;
-    margin-right: 6px;
-}
-
-.kg-bookmark-author,
-.kg-bookmark-publisher {
-    display: inline;
-}
-
-.kg-bookmark-publisher {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 240px;
-    white-space: nowrap;
-    display: block;
-    line-height: 1.65em;
-}
-
-.kg-bookmark-metadata > span:nth-of-type(2) {
-    color: #626d79;
-    font-weight: 400;
-}
-
-.kg-bookmark-metadata > span:nth-of-type(2):before {
-    content: "•";
-    color: #394047;
-    margin: 0 6px;
-}
-
-.kg-bookmark-thumbnail {
-    position: relative;
-    flex-grow: 1;
-    min-width: 33%;
-}
-
-.kg-bookmark-thumbnail img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-radius: 0 4px 4px 0;
-}
-
-
 /* Card captions
 /* ---------------------------------------------------------- */

@ -1395,18 +1403,28 @@ Ghost editor. */

 .footer-cta {
    position: relative;
+    margin-bottom: -40px;
    padding: 9vmin 4vmin 10vmin;
    color: #fff;
    text-align: center;
    background: var(--color-darkgrey);
 }

+.footer-cta.cta-alt {
+    padding: 2vmin 4vmin 12vmin;
+    background: transparent;
+}
+
 /* Increases the default h2 size by 15%, for small and large screens */
 .footer-cta h2 {
    margin: 0 0 30px;
    font-size: 3.2rem;
 }

+.footer-cta.cta-alt h2 {
+    color: var(--color-darkgrey);
+}
+
@media (max-width: 600px) {
    .footer-cta h2 {
        font-size: 2.65rem;
@ -1427,9 +1445,13 @@ Ghost editor. */
    border-radius: 8px;
 }

+.footer-cta.cta-alt .footer-cta-button {
+    border: 1px solid var(--color-lightgrey);
+}
+
 .footer-cta-button span {
    display: inline-block;
-    padding: 10px 20px;
+    padding: 10px 15px;
    color: #fff;
    font-weight: 500;
    background: var(--ghost-accent-color);
@ -1443,7 +1465,7 @@ Ghost editor. */
 .read-more-wrap {
    width: 100%;
    padding: 4vmin;
-    margin: 0 auto -40px;
+    margin: 40px auto -40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: color-mod(var(--color-darkgrey) l(-5%));
 }
@ -1767,6 +1789,10 @@ html.dark-mode img {
    opacity: 0.9;
 }

+html.dark-mode kbd {
+    background: color-mod(var(--color-darkmode) l(+5%));
+}
+
 html.dark-mode .post-card,
 html.dark-mode .post-card:hover {
    border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
@ -1824,12 +1850,7 @@ html.dark-mode .no-image .author-social-link a {
    color: rgba(255, 255, 255, 0.75);
 }

-html.dark-mode .gh-content h1,
-html.dark-mode .gh-content h2,
-html.dark-mode .gh-content h3,
-html.dark-mode .gh-content h4,
-html.dark-mode .gh-content h5,
-html.dark-mode .gh-content h6 {
+html.dark-mode .gh-content > [id] {
    color: rgba(255, 255, 255, 0.9);
 }

@ -1843,20 +1864,19 @@ html.dark-mode .gh-content :not(pre) > code {
    color: var(--color-wash);
 }

-html.dark-mode .post-full-content a {
-    color: #fff;
-    box-shadow: inset 0 -1px 0 #fff;
-}
-
-html.dark-mode .post-full-content strong {
+html.dark-mode .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
    color: #fff;
 }

-html.dark-mode .post-full-content em {
+html.dark-mode .gh-content strong {
    color: #fff;
 }

-html.dark-mode .post-full-content code {
+html.dark-mode .gh-content em {
+    color: #fff;
+}
+
+html.dark-mode .gh-content code {
    color: #fff;
    background: #000;
 }
@ -1865,94 +1885,209 @@ html.dark-mode hr {
    border-top-color: color-mod(var(--color-darkmode) l(+8%));
 }

-html.dark-mode .post-full-content hr:after {
+html.dark-mode .gh-content hr:after {
    background: color-mod(var(--color-darkmode) l(+8%));
    box-shadow: var(--color-darkmode) 0 0 0 5px;
 }

-html.dark-mode .gh-content figcaption {
+html.dark-mode figcaption {
    color: rgba(255, 255, 255, 0.6);
 }

-html.dark-mode .post-full-content table td:first-child {
+html.dark-mode .gh-content table td:first-child {
    background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
 }

-html.dark-mode .post-full-content table td:last-child {
+html.dark-mode .gh-content table td:last-child {
    background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
 }

-html.dark-mode .post-full-content table th {
+html.dark-mode .gh-content table th {
    color: rgba(255, 255, 255, 0.85);
    background-color: color-mod(var(--color-darkmode) l(+8%));
 }

-html.dark-mode .post-full-content table th,
-html.dark-mode .post-full-content table td {
+html.dark-mode .gh-content table th,
+html.dark-mode .gh-content table td {
    border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
 }

-html.dark-mode .post-full-content .kg-bookmark-container,
-html.dark-mode .post-full-content .kg-bookmark-container:hover {
-    color: rgba(255, 255, 255, 0.75);
-    box-shadow: 0 0 1px rgba(255,255,255,0.9);
-}
-
-html.dark-mode .post-full-content input {
+html.dark-mode .gh-content input {
    color: color-mod(var(--color-midgrey) l(-30%));
 }

-html.dark-mode .kg-bookmark-title {
-    color: #fff;
-}
-
-html.dark-mode .kg-bookmark-description {
-    color: rgba(255, 255, 255, 0.75);
-}
-
-html.dark-mode .kg-bookmark-metadata {
-    color: rgba(255, 255, 255, 0.75);
-}
-
 html.dark-mode .site-archive-header .no-image {
    color: rgba(255, 255, 255, 0.9);
    background: var(--color-darkmode);
 }

-html.dark-mode .subscribe-form {
-    border: none;
-    background: linear-gradient(color-mod(var(--color-darkmode) l(-6%)), color-mod(var(--color-darkmode) l(-3%)));
+html.dark-mode .kg-header-card.kg-style-dark {
+    background: color-mod(var(--color-darkgrey) l(-5%));
 }

-html.dark-mode .subscribe-form-title {
-    color: rgba(255, 255, 255, 0.9);
+html.dark-mode .kg-header-card.kg-style-light {
+    background: color-mod(var(--color-darkgrey) l(+5%));
 }

-html.dark-mode .subscribe-form p {
-    color: rgba(255, 255, 255, 0.7);
+html.dark-mode .kg-header-card h2.kg-header-card-header,
+html.dark-mode .kg-header-card h3.kg-header-card-subheader {
+    color: #fff;
 }

-html.dark-mode .subscribe-email {
-    border-color: color-mod(var(--color-darkmode) l(+6%));
-    color: rgba(255, 255, 255, 0.9);
-    background: color-mod(var(--color-darkmode) l(+3%));
-}
+@media (prefers-color-scheme: dark) {
+    html.auto-color body {
+        color: rgba(255, 255, 255, 0.75);
+        background: var(--color-darkmode);
+    }

-html.dark-mode .subscribe-email:focus {
-    border-color: color-mod(var(--color-darkmode) l(+25%));
-}
+    html.auto-color img {
+        opacity: 0.9;
+    }

-html.dark-mode .subscribe-form button {
-    opacity: 0.9;
-}
+    html.auto-color kbd {
+        background: color-mod(var(--color-darkmode) l(+5%));
+    }

-html.dark-mode .subscribe-form .invalid .message-error,
-html.dark-mode .subscribe-form .error .message-error {
-    color: color-mod(var(--color-red) l(+5%) s(-5%));
-}
+    html.auto-color .post-card,
+    html.auto-color .post-card:hover {
+        border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
+    }

-html.dark-mode .subscribe-form .success .message-success {
-    color: color-mod(var(--color-green) l(+5%) s(-5%));
+    html.auto-color .post-card-byline-content a {
+        color: rgba(255, 255, 255, 0.75);
+    }
+
+    html.auto-color .post-card-byline-content a:hover {
+        color: #fff;
+    }
+
+    html.auto-color .post-card-image {
+        background: var(--color-darkmode);
+    }
+
+    html.auto-color .post-card-title {
+        color: rgba(255, 255, 255, 0.85);
+    }
+
+    html.auto-color .post-card-excerpt {
+        color: color-mod(var(--color-midgrey) l(+10%));
+    }
+
+    html.auto-color .post-full-content {
+        background: var(--color-darkmode);
+    }
+
+    html.auto-color .article-title {
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    html.auto-color .article-excerpt {
+        color: color-mod(var(--color-midgrey) l(+10%));
+    }
+
+    html.auto-color .post-full-image {
+        background-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+
+    html.auto-color .article-byline {
+        border-top-color: color-mod(var(--color-darkmode) l(+15%));
+    }
+
+    html.auto-color .article-byline-meta h4 a {
+        color: rgba(255, 255, 255, 0.75);
+    }
+
+    html.auto-color .article-byline-meta h4 a:hover {
+        color: #fff;
+    }
+
+    html.auto-color .no-image .author-social-link a {
+        color: rgba(255, 255, 255, 0.75);
+    }
+
+    html.auto-color .gh-content > [id] {
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    html.auto-color .gh-content pre {
+        background: color-mod(var(--color-darkgrey) l(-8%));
+    }
+
+    html.auto-color .gh-content :not(pre) > code {
+        background: color-mod(var(--color-darkgrey) l(+6%));
+        border-color: color-mod(var(--color-darkmode) l(+8%));
+        color: var(--color-wash);
+    }
+
+    html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
+        color: #fff;
+    }
+
+    html.auto-color .gh-content strong {
+        color: #fff;
+    }
+
+    html.auto-color .gh-content em {
+        color: #fff;
+    }
+
+    html.auto-color .gh-content code {
+        color: #fff;
+        background: #000;
+    }
+
+    html.auto-color hr {
+        border-top-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+
+    html.auto-color .gh-content hr:after {
+        background: color-mod(var(--color-darkmode) l(+8%));
+        box-shadow: var(--color-darkmode) 0 0 0 5px;
+    }
+
+    html.auto-color figcaption {
+        color: rgba(255, 255, 255, 0.6);
+    }
+
+    html.auto-color .gh-content table td:first-child {
+        background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+    }
+
+    html.auto-color .gh-content table td:last-child {
+        background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+    }
+
+    html.auto-color .gh-content table th {
+        color: rgba(255, 255, 255, 0.85);
+        background-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+
+    html.auto-color .gh-content table th,
+    html.auto-color .gh-content table td {
+        border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
+    }
+
+    html.auto-color .gh-content input {
+        color: color-mod(var(--color-midgrey) l(-30%));
+    }
+
+    html.auto-color .site-archive-header .no-image {
+        color: rgba(255, 255, 255, 0.9);
+        background: var(--color-darkmode);
+    }
+
+    html.auto-color .kg-header-card.kg-style-dark {
+        background: color-mod(var(--color-darkgrey) l(-5%));
+    }
+
+    html.auto-color .kg-header-card.kg-style-light {
+        background: color-mod(var(--color-darkgrey) l(+5%));
+    }
+
+    html.auto-color .kg-header-card h2.kg-header-card-header,
+    html.auto-color .kg-header-card h3.kg-header-card-subheader {
+        color: #fff;
+    }
 }

 /*
--- a/assets/js/gallery-card.js
+++ b/assets/js/gallery-card.js
@ -1,24 +0,0 @@
-/* eslint-env browser */
-
-/**
- * Gallery card support
- * Used on any individual post/page
- *
- * Detects when a gallery card has been used and applies sizing to make sure
- * the display matches what is seen in the editor.
- */
-
-(function (window, document) {
-    var resizeImagesInGalleries = function resizeImagesInGalleries() {
-        var images = document.querySelectorAll('.kg-gallery-image img');
-        images.forEach(function (image) {
-            var container = image.closest('.kg-gallery-image');
-            var width = image.attributes.width.value;
-            var height = image.attributes.height.value;
-            var ratio = width / height;
-            container.style.flex = ratio + ' 1 0%';
-        });
-    };
-
-    document.addEventListener('DOMContentLoaded', resizeImagesInGalleries);
-})(window, document);
--- a/author.hbs
+++ b/author.hbs
@ -31,13 +31,13 @@
                    <div class="author-profile-location">📍 {{location}}</div>
                    {{/if}}
                    {{#if website}}
-                    <span ></span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
+                    <span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
                    {{/if}}
                    {{#if twitter}}
-                    <span ></span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
+                    <span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
                    {{/if}}
                    {{#if facebook}}
-                    <span ></span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
+                    <span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
                    {{/if}}
                </div>

--- a/default.hbs
+++ b/default.hbs
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{@site.locale}}">
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}{{#match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
 <head>

    {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
@ -9,6 +9,15 @@
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

+    <style>
+        :root {
+            {{#if @custom.header_button_background}}
+            --button-bg-color: {{@custom.header_button_background}};
+            {{/if}}
+            --button-text-color: {{#match @custom.header_button_text_color "Light"}}#fff{{else}}var(--color-darkgrey){{/match}};
+        }
+    </style>
+
    {{!-- 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"}}" />
@ -18,10 +27,10 @@
    {{ghost_head}}

 </head>
-<body class="{{body_class}}">
+<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}">
 <div class="viewport">

-    <header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
+    <header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
        <nav class="gh-head-inner inner gh-container">

            <div class="gh-head-brand">
@ -52,18 +61,18 @@
                </div>

                {{#unless @member}}
-                    <a class="gh-head-button" href="#/portal/signup">Subscribe</a>
+                    <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
                {{else}}
-                    <a class="gh-head-button" href="#/portal/account">Account</a>
+                    <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
                {{/unless}}
            </div>
        </nav>
    </header>

-    <main>
+    <div class="site-content">
        {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
        {{{body}}}
-    </main>
+    </div>

    {{!-- The global footer at the very bottom of the screen --}}
    <footer class="site-footer outer">
--- a/index.hbs
+++ b/index.hbs
@ -2,35 +2,37 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}

-<div class="site-header-content">
-    {{#if @site.cover_image}}
-        {{!-- This is a responsive image, it loads different sizes depending on device
-        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-        <img class="site-header-cover"
-            srcset="{{img_url @site.cover_image size="s"}} 300w,
-                    {{img_url @site.cover_image size="m"}} 600w,
-                    {{img_url @site.cover_image size="l"}} 1000w,
-                    {{img_url @site.cover_image size="xl"}} 2000w"
-            sizes="100vw"
-            src="{{img_url @site.cover_image size="xl"}}"
-            alt=""
-        />
-    {{/if}}
-    <h1 class="site-title">
-        {{#if @site.logo}}
-            <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
-        {{else}}
-            {{@site.title}}
+{{#match @custom.publication_cover_style "!=" "None"}}
+    <div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
+        {{#if @site.cover_image}}
+            {{!-- This is a responsive image, it loads different sizes depending on device
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+            <img class="site-header-cover"
+                srcset="{{img_url @site.cover_image size="s"}} 300w,
+                        {{img_url @site.cover_image size="m"}} 600w,
+                        {{img_url @site.cover_image size="l"}} 1000w,
+                        {{img_url @site.cover_image size="xl"}} 2000w"
+                sizes="100vw"
+                src="{{img_url @site.cover_image size="xl"}}"
+                alt=""
+            />
        {{/if}}
-    </h1>
-    <p>{{@site.description}}</p>
-</div>
+        <h1 class="site-title">
+            {{#if @site.logo}}
+                <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
+            {{else}}
+                {{@site.title}}
+            {{/if}}
+        </h1>
+        <p>{{@site.description}}</p>
+    </div>
+{{/match}}

 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer">
    <div class="inner posts">

-        <div class="post-feed">
+        <div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
            {{#foreach posts}}

                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
--- a/package.json
+++ b/package.json
@ -2,10 +2,9 @@
    "name": "casper",
    "description": "A clean, minimal default theme for the Ghost publishing platform",
    "demo": "https://demo.ghost.io",
-    "version": "4.0.5",
+    "version": "4.7.4",
    "engines": {
-        "ghost": ">=4.0.0",
-        "ghost-api": "v4"
+        "ghost": ">=4.0.0"
    },
    "license": "MIT",
    "screenshots": {
@ -50,7 +49,7 @@
        "autoprefixer": "10.2.5",
        "beeper": "2.1.0",
        "cssnano": "4.1.10",
-        "gscan": "4.0.0",
+        "gscan": "4.22.0",
        "gulp": "4.0.2",
        "gulp-concat": "2.6.1",
        "gulp-livereload": "4.0.2",
@ -87,6 +86,96 @@
            "xl": {
                "width": 2000
            }
+        },
+        "card_assets": true,
+        "custom": {
+            "title_font": {
+                "type": "select",
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif"
+                ],
+                "default": "Modern sans-serif"
+            },
+            "body_font": {
+                "type": "select",
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif"
+                ],
+                "default": "Elegant serif"
+            },
+            "publication_cover_style": {
+                "type": "select",
+                "options": [
+                    "None",
+                    "Medium",
+                    "Large"
+                ],
+                "default": "Medium",
+                "group": "homepage"
+            },
+            "feed_layout": {
+                "type": "select",
+                "options": [
+                    "Dynamic grid",
+                    "Simple grid",
+                    "List"
+                ],
+                "default": "Dynamic grid",
+                "group": "homepage"
+            },
+            "color_scheme": {
+                "type": "select",
+                "options": [
+                    "Light",
+                    "Dark",
+                    "Auto"
+                ],
+                "default": "Light"
+            },
+            "header_button_background": {
+                "type": "color",
+                "default": "#ffffff"
+            },
+            "header_button_text_color": {
+                "type": "select",
+                "options": [
+                    "Light",
+                    "Dark"
+                ],
+                "default": "Dark"
+            },
+            "post_image_width": {
+                "type": "select",
+                "options": [
+                    "Wide",
+                    "Full",
+                    "Small"
+                ],
+                "default": "Wide",
+                "group": "post"
+            },
+            "email_signup_for_logged_out_visitors": {
+                "type": "select",
+                "options": [
+                    "Footer",
+                    "Bottom of post",
+                    "None"
+                ],
+                "default": "Footer",
+                "group": "post"
+            },
+            "email_signup_text": {
+                "type": "text",
+                "default": "Sign up for more like this.",
+                "group": "post"
+            },
+            "show_recent_posts": {
+                "type": "boolean",
+                "default": true,
+                "group": "post"
+            }
        }
    },
    "renovate": {
--- a/page.hbs
+++ b/page.hbs
@ -7,34 +7,39 @@ into the {body} tag of the default.hbs template --}}
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the page --}}

-<article class="article {{post_class}}">
+<main id="site-main" class="site-main">
+    <article class="article {{post_class}}">

-    <header class="article-header gh-canvas">
-        {{#if feature_image}}
-        <figure class="article-image">
-            {{!-- This is a responsive image, it loads different sizes depending on device
-            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-            <img
-                srcset="{{img_url feature_image size="s"}} 300w,
-                        {{img_url feature_image size="m"}} 600w,
-                        {{img_url feature_image size="l"}} 1000w,
-                        {{img_url feature_image size="xl"}} 2000w"
-                sizes="(min-width: 1400px) 1400px, 92vw"
-                src="{{img_url feature_image size="xl"}}"
-                alt="{{title}}"
-            />
-        </figure>
-        {{/if}}
-    </header>
+        <header class="article-header gh-canvas">
+            {{#if feature_image}}
+            <figure class="article-image">
+                {{!-- This is a responsive image, it loads different sizes depending on device
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                <img
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(min-width: 1400px) 1400px, 92vw"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+            {{/if}}
+        </header>

-    <section class="gh-content gh-canvas">
+        <section class="gh-content gh-canvas">

-        <h1 class="article-title">{{title}}</h1>
+            <h1 class="article-title">{{title}}</h1>

-        {{content}}
+            {{content}}

-    </section>
+        </section>

-</article>
+    </article>
+</main>

 {{/post}}
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@ -1,7 +1,7 @@
 {{!-- 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}} {{#is "home"}}{{#if feature_image}}{{#has index="0"}}post-card-large{{/has}}{{/if}}{{/is}}">
+<article class="post-card {{post_class}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home, paged"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#is "home"}}{{#if feature_image}}post-card-large{{/if}}{{/is}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">

    {{#if feature_image}}
    <a class="post-card-image-link" href="{{url}}">
@ -14,7 +14,7 @@ which templates loop over to generate a list of posts. --}}
                    {{img_url feature_image size="xl"}} 2000w"
            sizes="(max-width: 1000px) 400px, 800px"
            src="{{img_url feature_image size="m"}}"
-            alt="{{title}}"
+            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
            loading="lazy"
        />
    </a>
@ -31,9 +31,9 @@ which templates loop over to generate a list of posts. --}}
                {{/if}}
                <h2 class="post-card-title">{{title}}</h2>
            </header>
-            <section class="post-card-excerpt">
+            <div class="post-card-excerpt">
                <p>{{excerpt}}</p>
-            </section>
+            </div>
        </a>

        <footer class="post-card-meta">
@ -42,7 +42,7 @@ which templates loop over to generate a list of posts. --}}
                <li class="author-list-item">
                    {{#if profile_image}}
                    <a href="{{url}}" class="static-avatar">
-                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy" />
                    </a>
                    {{else}}
                    <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
@ -51,7 +51,7 @@ which templates loop over to generate a list of posts. --}}
                {{/foreach}}
            </ul>
            <div class="post-card-byline-content">
-                <span>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
+                <span class="post-card-byline-author">{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</span>
                <span class="post-card-byline-date"><time datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time> <span class="bull">&bull;</span> {{reading_time}}</span>
            </div>
        </footer>
--- a/post.hbs
+++ b/post.hbs
@ -7,111 +7,119 @@ into the {body} tag of the default.hbs template --}}
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the post --}}

-<article class="article {{post_class}}">
+<main id="site-main" class="site-main">
+    <article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">

-    <header class="article-header gh-canvas">
+        <header class="article-header gh-canvas">

-        {{#if primary_tag}}
-        <section class="article-tag">
-            <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
-        </section>
-        {{/if}}
-
-        <h1 class="article-title">{{title}}</h1>
-
-        {{#if custom_excerpt}}
-        <p class="article-excerpt">{{custom_excerpt}}</p>
-        {{/if}}
-
-        <div class="article-byline">
-            <section class="article-byline-content">
-                <ul class="author-list">
-                    {{#foreach authors}}
-                    <li class="author-list-item">
-                        {{#if profile_image}}
-                        <a href="{{url}}" class="author-avatar">
-                            <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
-                        </a>
-                        {{else}}
-                        <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
-                        {{/if}}
-                    </li>
-                    {{/foreach}}
-                </ul>
-                <div class="article-byline-meta">
-                    <h4 class="author-name">{{authors}}</h4>
-                    <div class="byline-meta-content">
-                        <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-                        <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
-                    </div>
-                </div>
+            {{#if primary_tag}}
+            <section class="article-tag">
+                <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
            </section>
-        </div>
+            {{/if}}

-        {{#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="{{title}}"
-            />
-        </figure>
-        {{/if}}
-    </header>
+            <h1 class="article-title">{{title}}</h1>

-    <section class="gh-content gh-canvas">
-        {{content}}
-    </section>
+            {{#if custom_excerpt}}
+            <p class="article-excerpt">{{custom_excerpt}}</p>
+            {{/if}}

-    {{!--
-    <section class="article-comments gh-canvas">
-        If you want to embed comments, this is a good place to paste your code!
-    </section>
-    --}}
+            <div class="article-byline">
+                <section class="article-byline-content">
+                    <ul class="author-list">
+                        {{#foreach authors}}
+                        <li class="author-list-item">
+                            {{#if profile_image}}
+                            <a href="{{url}}" class="author-avatar">
+                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
+                            </a>
+                            {{else}}
+                            <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
+                            {{/if}}
+                        </li>
+                        {{/foreach}}
+                    </ul>
+                    <div class="article-byline-meta">
+                        <h4 class="author-name">{{authors}}</h4>
+                        <div class="byline-meta-content">
+                            <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+                            <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
+                        </div>
+                    </div>
+                </section>
+            </div>

-</article>
+            {{#if feature_image}}
+            <figure class="article-image">
+                {{!-- This is a responsive image, it loads different sizes depending on device
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+                <img
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url feature_image size="xl"}} 2000w"
+                    sizes="(min-width: 1400px) 1400px, 92vw"
+                    src="{{img_url feature_image size="xl"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                />
+                {{#if feature_image_caption}}
+                    <figcaption>{{feature_image_caption}}</figcaption>
+                {{/if}}
+            </figure>
+            {{/if}}
+        </header>
+
+        <section class="gh-content gh-canvas">
+            {{content}}
+        </section>
+
+        {{!--
+        <section class="article-comments gh-canvas">
+            If you want to embed comments, this is a good place to paste your code!
+        </section>
+        --}}
+
+    </article>
+</main>

 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
-{{#unless @member}}
-<section class="footer-cta">
-    <div class="inner">
-        <h2>Sign up for more like this.</h2>
-        <a class="footer-cta-button" href="#/portal">
-            <div>Enter your email</div>
-            <span>Subscribe</span>
-        </a>
-        {{!-- ^ This looks like a form element, but it's just a link to Portal,
-        making the form validation and submission much simpler. --}}
-    </div>
-</section>
-{{/unless}}
+{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
+{{#unless @member}}{{#if access}}
+    <section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
+        <div class="inner">
+            {{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
+            <a class="footer-cta-button" href="#/portal" data-portal>
+                <div class="footer-cta-input">Enter your email</div>
+                <span>Subscribe</span>
+            </a>
+            {{!-- ^ This looks like a form element, but it's just a link to Portal,
+            making the form validation and submission much simpler. --}}
+        </div>
+    </section>
+{{/if}}{{/unless}}
+{{/match}}


 {{!-- Read more links, just above the footer --}}
-<aside class="read-more-wrap">
-    <div class="read-more inner">
+{{#if @custom.show_recent_posts}}
+    {{!-- The {#get} helper below fetches some of the latest posts here
+    so that people have something else to read when they finish this one.

-        {{!-- The {#get} helper below fetches some of the latest posts here
-        so that people have something else to read when they finish this one.
+    This query gets the latest 3 posts on the site, but adds a filter to
+    exclude the post we're currently on from being included. --}}
+    {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}

-        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. --}}
+        {{#if more_posts}}
+            <aside class="read-more-wrap">
+                <div class="read-more inner">
+                    {{#foreach more_posts}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+            </aside>
+        {{/if}}

-        {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
-            {{#if more_posts}}
-                {{#foreach more_posts}}
-                    {{> "post-card"}}
-                {{/foreach}}
-            {{/if}}
-        {{/get}}
-
-    </div>
-</aside>
+    {{/get}}
+{{/if}}

 {{/post}}
--- a/tag.hbs
+++ b/tag.hbs
@ -2,12 +2,12 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}


-<section class="outer">
+<main id="site-main" class="site-main outer">
    <div class="inner posts">
        <div class="post-feed">

            {{#tag}}
-            <header class="post-card post-card-large">
+            <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
@ -30,7 +30,7 @@
                            <div class="post-card-primary-tag">Tagged</div>
                            <h2 class="post-card-title">{{name}}</h2>
                        </header>
-                        <section class="post-card-excerpt">
+                        <div class="post-card-excerpt">
                            <p>
                                {{#if description}}
                                {{description}}
@ -38,11 +38,11 @@
                                A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
                                {{/if}}
                            </p>
-                        </section>
+                        </div>
                    </div>
                </div>{{!--/.post-card-content--}}

-            </header>
+            </section>
            {{/tag}}

            {{#foreach posts}}
@ -54,4 +54,4 @@

        </div>
    </div>
-</section>
+</main>
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Sodbileg Gansukh	f41761e0ad	v4.7.4	2022-04-08 18:05:35 +08:00
Sodbileg Gansukh	11b52ed0cf	Fix paginated posts of the list layout	2022-04-08 18:04:54 +08:00
Sodbileg Gansukh	c3fa4f6b24	Remove deprecated ghost-api property	2022-03-28 15:48:20 +08:00
Sodbileg Gansukh	19d5b6c297	Remove unused csscomb files	2022-03-23 11:15:07 +08:00
Sodbileg Gansukh	76f0037467	v4.7.3	2022-03-01 11:44:07 +08:00
Sodbileg Gansukh	37a09189c3	Make editor and markdown blockquote styles consistent	2022-03-01 11:43:00 +08:00
Sodbileg Gansukh	13458e0d2d	Add a class to card meta author	2022-01-26 13:10:55 +08:00
Sodbileg Gansukh	eb007cb1c1	Show read more wrapper when only there are other recent posts	2022-01-25 14:28:22 +08:00
renovate[bot]	55f5ba65c6	Update dependency gscan to v4.22.0 (#827 ) Co-authored-by: Renovate Bot <bot@renovateapp.com>	2022-01-14 10:39:46 +00:00
John O'Nolan	5cdcda15ee	2022	2022-01-05 12:43:26 +00:00
Maegan Wilson	18f6d85da5	Updating spelling fixes #834	2022-01-04 11:57:24 +08:00
Sodbileg Gansukh	1f3418708c	Add <kbd> style fixes #822	2022-01-03 12:08:16 +08:00
Sodbileg Gansukh	05d0b0c7db	v4.7.2	2021-12-17 18:16:43 +08:00
Sodbileg Gansukh	08f480ff78	Update dark style header card background color	2021-12-17 18:16:21 +08:00
Sodbileg Gansukh	56ec2e9a90	v4.7.1	2021-12-17 16:30:15 +08:00
Sodbileg Gansukh	c4f2d74d80	Apply custom heading color only to light header style	2021-12-17 16:24:24 +08:00
Sodbileg Gansukh	c378e9a9c9	v4.7.0	2021-12-17 15:58:13 +08:00
Sodbileg Gansukh	db98015d41	Header card tweaks	2021-12-17 15:06:34 +08:00
Daniel Lockyer	7e9cf5c478	v4.6.1	2021-12-16 09:46:13 +01:00
Sodbileg Gansukh	0f9a3c79c1	Fix list layout style on medium screen size	2021-12-16 12:53:45 +08:00
Peter Zimon	8ff91f709e	Updated callout emoji line-height	2021-12-15 15:00:52 +01:00
Sam Lord	feb2de765c	v4.6.0	2021-12-15 13:02:03 +00:00
Peter Zimon	9b45ff3418	Card css specificity update (#832 ) The default CSS styles of new Koenig cards that have been released in the past couple of weeks was updated for better usability in themes in general (read commit message for reasons and more reference). This commit contains CSS cleanup and updates in theme styles that aligns Casper to this change.	2021-12-15 13:06:42 +01:00
Peter Zimon	827f37255c	Updated styles for file upload card	2021-12-14 14:38:49 +01:00
Daniel Lockyer	ffdf853323	v4.5.0	2021-12-13 17:47:11 +01:00
Thibaut Patel	e4543555fa	Fixed a rule so that it doesn't overrides the product card css refs https://github.com/TryGhost/Team/issues/1245 - Followed the same pattern as the callout, ntf and bookmark cards.	2021-12-13 17:23:49 +01:00
Rafael Corrêa Gomes	67e7291c2b	Footer > Adding Lazy loading in the profile image	2021-12-13 16:09:13 +08:00
Sodbileg Gansukh	c880856a32	Revert dark mode style of product card rating	2021-12-10 09:55:52 +08:00
Daniel Lockyer	b06bcd6534	v4.4.0	2021-12-08 15:00:14 +00:00
Sodbileg Gansukh	49f99d956f	Add dark mode support to product card star rating	2021-12-08 17:17:47 +08:00
Sodbileg Gansukh	cdb03b65fb	Add alternate blockquote styles	2021-12-07 19:05:00 +08:00
Sodbileg Gansukh	e80f22c2a5	v4.3.1	2021-12-06 18:52:26 +08:00
Peter Zimon	b6474446f8	Updated toggle styles	2021-12-04 08:14:00 -04:00
Peter Zimon	462770968a	Updated callout styles	2021-12-04 08:06:09 -04:00
Daniel Lockyer	017a2829b6	v4.3.0	2021-12-01 12:56:41 +00:00
Daniel Lockyer	198f12b725	Updated `yarn.lock` no issue - this needed updating after we bumped gscan	2021-12-01 12:55:55 +00:00
Sodbileg Gansukh	48260130fe	Update toggle card heading selector	2021-11-29 13:33:59 +08:00
Sodbileg Gansukh	8b392ec6dd	Add typography option to toggle card heading	2021-11-25 18:42:19 +08:00
Sodbileg Gansukh	4ea98431b3	Card responsive style refinements	2021-11-25 10:44:09 +08:00
Sodbileg Gansukh	6bc9b021b5	Add toggle content flow spacing	2021-11-25 10:31:36 +08:00
Sodbileg Gansukh	c1006ec649	Use data attribute for Portal links	2021-11-24 10:50:46 +08:00
Sodbileg Gansukh	cad48b230c	Add missing styles for toggle card content	2021-11-23 11:32:24 +08:00
Sodbileg Gansukh	b3f6b8a82c	Include lists inside toggle card to content styling	2021-11-23 11:28:35 +08:00
Sodbileg Gansukh	2d940d8f59	Exclude default CTA links from link styling	2021-11-23 11:22:56 +08:00
Sodbileg Gansukh	b7ea0cbff7	Upgrade gscan	2021-11-22 21:37:28 +08:00
Sodbileg Gansukh	a8150f7c30	Include toggle text in content styling	2021-11-22 21:35:48 +08:00
Peter Zimon	b5b1ea001e	Updated NFT card styles	2021-11-19 12:02:09 +01:00
Sodbileg Gansukh	370b9ec74e	Include .kg-callout-text to content styling	2021-11-19 16:07:09 +08:00
Sodbileg Gansukh	3cbe9b2c97	Remove bookmark card related CSS	2021-11-17 18:22:47 +08:00
Sodbileg Gansukh	d652252699	Remove gallery card related CSS and JS	2021-11-17 17:02:16 +08:00
Sodbileg Gansukh	6107a411a1	Exclude cards from default link styling refs https://github.com/TryGhost/Team/issues/1227	2021-11-17 15:40:32 +08:00
Sodbileg Gansukh	8feb988375	Update heading selector on dark mode	2021-11-15 13:22:03 +08:00
Sodbileg Gansukh	e898d56f0b	v4.2.0	2021-11-05 20:58:43 +08:00
Sodbileg Gansukh	b8319c5bb9	Update gscan	2021-11-05 20:17:41 +08:00
Sodbileg Gansukh	ceaa887371	Add custom settings	2021-11-05 20:14:53 +08:00
Sodbileg Gansukh	c63a07e8df	v4.1.1	2021-09-22 15:28:46 +08:00
Sodbileg Gansukh	0e0898d7e9	Fix W3C warning about section lacks heading	2021-09-22 15:26:39 +08:00
Sodbileg Gansukh	2234b14bbd	Fix nested main element issue	2021-09-22 15:24:17 +08:00
Sodbileg Gansukh	046d53e885	v4.1.0	2021-07-07 12:16:03 +08:00
Sodbileg Gansukh	e49664eca4	Add alt and caption support to feature images (#812 ) * Add alt and caption support to feature images * Add feature image alt support to post card * Remove three-curlies	2021-07-05 10:59:21 +08:00
Sodbileg Gansukh	21bdffbd8a	Fix header element inside header	2021-06-10 13:32:41 +08:00
Leedan	ea33b00c0a	Author page: remove span stray end tag (#808 )	2021-06-03 10:15:25 +08:00