v5.0.0

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}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}
+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:var(--color-darkgrey);font-family:var(--font-sans);font-size:1.6rem;line-height:1.6em;font-weight:400;font-style:normal;letter-spacing:0;text-rendering:optimizeLegibility;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on}::-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 */

assets/css/.csscomb.json

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

assets/css/csscomb.json

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

assets/css/global.css

@@ -275,8 +275,8 @@ html {
     -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;
+    color: var(--color-darkgrey);
+    font-family: var(--font-sans);
     font-size: 1.6rem;
     line-height: 1.6em;
     font-weight: 400;

author.hbs

@@ -1,57 +1,70 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
+<main id="site-main" class="site-main outer">
+<div class="post-feed inner">
 
-<section class="outer">
-    <div class="inner posts">
-
-        <header class="author-profile">
     {{#author}}
-            {{!-- Everything inside the #author tags pulls data from the author --}}
+    <section class="post-card post-card-large">
 
-            <div class="author-profile-content">
+        {{#if feature_image}}
+        <div class="post-card-image-link">
+            {{!-- This is a responsive image, it loads different sizes depending on device
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+            <img class="post-card-image"
+                srcset="{{img_url feature_image size="s"}} 300w,
+                        {{img_url feature_image size="m"}} 600w,
+                        {{img_url feature_image size="l"}} 1000w,
+                        {{img_url feature_image size="xl"}} 2000w"
+                sizes="(max-width: 1000px) 400px, 800px"
+                src="{{img_url feature_image size="m"}}"
+                alt="{{title}}"
+            />
+        </div>
+        {{/if}}
+
+        <div class="post-card-content">
+        <div class="post-card-content-link">
 
             {{#if profile_image}}
                 <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
-                {{else}}
-                <span class="author-profile-pic">{{> "icons/avatar"}}</span>
             {{/if}}
 
-                <h1>{{name}}</h1>
-                <p>
-                    {{#if bio}}
-                        {{bio}}
-                    {{else}}
-                        {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}} published
-                    {{/if}}
-                </p>
-
-                <div class="author-profile-meta">
-                    {{#if location}}
-                    <div class="author-profile-location">📍 {{location}}</div>
-                    {{/if}}
-                    {{#if website}}
-                    <span><a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a></span>
-                    {{/if}}
-                    {{#if twitter}}
-                    <span><a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{twitter_url}}</a></span>
-                    {{/if}}
-                    {{#if facebook}}
-                    <span><a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{facebook_url}}</a></span>
-                    {{/if}}
-                </div>
-
-            </div>
-
-            {{/author}}
+            <header class="post-card-header">
+                <h2 class="post-card-title">{{name}}</h2>
             </header>
 
-        <div class="post-feed">
+            {{#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>
 
-    </div>
-</section>
+</div>
+</main>

default.hbs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}{{#match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}>
 <head>
 
     {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
@@ -9,15 +9,6 @@
     <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"}}" />
@@ -27,14 +18,14 @@
     {{ghost_head}}
 
 </head>
-<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}}">
+<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}}{{#if @custom.show_publication_cover}} has-cover-image{{/if}}{{#is "home"}}{{#unless @custom.show_logo_in_navigation}} no-logo{{/unless}}{{/is}}">
 <div class="viewport">
 
-    <header id="gh-head" class="gh-head{{#match @custom.publication_cover_style "!=" "None"}} has-cover{{/match}}">
-        <nav class="gh-head-inner inner gh-container">
+    <header id="gh-head" class="gh-head outer">
+        <nav class="gh-head-inner inner">
 
             <div class="gh-head-brand">
-                <a class="gh-head-logo" href="{{@site.url}}">
+                <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}}
@@ -51,15 +42,6 @@
                 {{navigation}}
             </div>
             <div class="gh-head-actions">
-                <div class="gh-social">
-                    {{#if @site.facebook}}
-                        <a class="gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
-                    {{/if}}
-                    {{#if @site.twitter}}
-                        <a class="gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
-                    {{/if}}
-                </div>
-
                 {{#unless @member}}
                     <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
                 {{else}}

error-404.hbs

@@ -24,7 +24,7 @@ Keep this template as lightweight as you can!
 
 {{!-- 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">
+<aside class="read-more-wrap outer">
     <div class="read-more inner">
         {{#get "posts" include="authors" limit="3" as |more_posts|}}
             {{#if more_posts}}

index.hbs

@@ -2,8 +2,9 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-{{#match @custom.publication_cover_style "!=" "None"}}
-    <div class="site-header-content{{#match @custom.publication_cover_style "Large"}} large{{/match}}">
+<div class="site-header-content outer{{#match @custom.header_style "Left aligned"}} left-aligned{{/match}}{{#unless @custom.show_publication_cover}}{{#match @custom.header_style "Hidden"}} no-content{{/match}}{{/unless}}">
+
+    {{#if @custom.show_publication_cover}}
         {{#if @site.cover_image}}
             {{!-- This is a responsive image, it loads different sizes depending on device
             https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
@@ -14,32 +15,38 @@ into the {body} of the default.hbs template --}}
                         {{img_url @site.cover_image size="xl"}} 2000w"
                 sizes="100vw"
                 src="{{img_url @site.cover_image size="xl"}}"
-                alt=""
+                alt="{{@site.title}}"
             />
         {{/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}}
     {{/if}}
-        </h1>
-        <p>{{@site.description}}</p>
+
+    {{#match @custom.header_style "!=" "Hidden"}}
+        <div class="site-header-inner inner">
+            {{#unless @custom.show_logo_in_navigation}}
+                {{#if @site.logo}}
+                    <img class="site-logo" src="{{@site.logo}}" alt="{{@site.title}}">
+                {{else}}
+                    <h1 class="site-title">{{@site.title}}</h1>
+                {{/if}}
+            {{/unless}}
+            {{#if @site.description}}
+                <p class="site-description">{{@site.description}}</p>
+            {{/if}}
         </div>
-{{/match}}
+    {{/match}}
+
+</div>
 
 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer">
-    <div class="inner posts">
+<div class="inner posts">
 
-        <div class="post-feed{{#match @custom.feed_layout "List"}} list{{/match}}">
+    <div class="post-feed">
         {{#foreach posts}}
-
             {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
             {{> "post-card"}}
-
         {{/foreach}}
     </div>
 
-    </div>
+</div>
 </main>

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.7.3",
+    "version": "5.0.0",
     "engines": {
-        "ghost": ">=4.0.0",
-        "ghost-api": "v4"
+        "ghost": ">=5.0.0"
     },
     "license": "MIT",
     "screenshots": {
@@ -106,73 +105,61 @@
                 ],
                 "default": "Elegant serif"
             },
-            "publication_cover_style": {
+            "show_publication_cover": {
+                "type": "boolean",
+                "default": true,
+                "group": "homepage"
+            },
+            "header_style": {
                 "type": "select",
                 "options": [
-                    "None",
-                    "Medium",
-                    "Large"
+                    "Center aligned",
+                    "Left aligned",
+                    "Hidden"
                 ],
-                "default": "Medium",
+                "default": "Center aligned",
+                "group": "homepage"
+            },
+            "show_logo_in_navigation": {
+                "type": "boolean",
+                "default": false,
                 "group": "homepage"
             },
             "feed_layout": {
                 "type": "select",
                 "options": [
-                    "Dynamic grid",
-                    "Simple grid",
+                    "Classic",
+                    "Grid",
                     "List"
                 ],
-                "default": "Dynamic grid",
+                "default": "Classic",
                 "group": "homepage"
             },
             "color_scheme": {
                 "type": "select",
                 "options": [
                     "Light",
-                    "Dark",
-                    "Auto"
+                    "Dark"
                 ],
                 "default": "Light"
             },
-            "header_button_background": {
-                "type": "color",
-                "default": "#ffffff"
-            },
-            "header_button_text_color": {
-                "type": "select",
-                "options": [
-                    "Light",
-                    "Dark"
-                ],
-                "default": "Dark"
-            },
-            "post_image_width": {
+            "post_image_style": {
                 "type": "select",
                 "options": [
                     "Wide",
                     "Full",
-                    "Small"
+                    "Small",
+                    "Hidden"
                 ],
                 "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": {
+            "show_recent_posts_footer": {
                 "type": "boolean",
                 "default": true,
                 "group": "post"

page.hbs

@@ -8,9 +8,12 @@ into the {body} tag of the default.hbs template --}}
 {{!-- Everything inside the #post block pulls data from the page --}}
 
 <main id="site-main" class="site-main">
-    <article class="article {{post_class}}">
+<article class="article {{post_class}}">
 
     <header class="article-header gh-canvas">
+
+        <h1 class="article-title">{{title}}</h1>
+
         {{#if feature_image}}
             <figure class="article-image">
                 {{!-- This is a responsive image, it loads different sizes depending on device
@@ -29,17 +32,14 @@ into the {body} tag of the default.hbs template --}}
                 {{/if}}
             </figure>
         {{/if}}
+
     </header>
 
     <section class="gh-content gh-canvas">
-
-            <h1 class="article-title">{{title}}</h1>
-
         {{content}}
-
     </section>
 
-    </article>
+</article>
 </main>
 
 {{/post}}

partials/icons/facebook.hbs

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

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"/></svg>
+<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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/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}} {{#match @custom.feed_layout "!=" "Simple grid"}}{{#is "home"}}{{#match @custom.feed_layout "Dynamic grid"}}{{#has index="0"}}{{#if feature_image}}post-card-large{{/if}}{{/has}}{{else}}post-card-large{{/match}}{{/is}}{{/match}}">
+<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}}">
 
     {{#if feature_image}}
         <a class="post-card-image-link" href="{{url}}">
@@ -24,38 +24,24 @@ which templates loop over to generate a list of posts. --}}
 
         <a class="post-card-content-link" href="{{url}}">
             <header class="post-card-header">
-                {{#if primary_tag}}
                 {{#primary_tag}}
                     <div class="post-card-primary-tag">{{name}}</div>
                 {{/primary_tag}}
-                {{/if}}
                 <h2 class="post-card-title">{{title}}</h2>
             </header>
-            <div class="post-card-excerpt">
-                <p>{{excerpt}}</p>
-            </div>
+            {{#if excerpt}}
+                <div class="post-card-excerpt">{{excerpt}}</div>
+            {{/if}}
         </a>
 
         <footer class="post-card-meta">
-            <ul class="author-list">
-                {{#foreach authors}}
-                <li class="author-list-item">
-                    {{#if profile_image}}
-                    <a href="{{url}}" class="static-avatar">
-                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" loading="lazy" />
-                    </a>
-                    {{else}}
-                    <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
+            <time class="post-card-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
+            {{#if reading_time}}
+                <span class="sep">—</span>
+                <span class="post-card-meta-length">{{reading_time}}</span>
             {{/if}}
-                </li>
-                {{/foreach}}
-            </ul>
-            <div class="post-card-byline-content">
-                <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>
 
-    </div>{{!--/.post-card-content--}}
+    </div>
 
 </article>

post.hbs

@@ -8,12 +8,12 @@ into the {body} tag of the default.hbs template --}}
 {{!-- Everything inside the #post block pulls data from the post --}}
 
 <main id="site-main" class="site-main">
-    <article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">
+<article class="article {{post_class}} {{#match @custom.post_image_style "Full"}}image-full{{else match @custom.post_image_style "=" "Small"}}image-small{{/match}}">
 
     <header class="article-header gh-canvas">
 
         {{#if primary_tag}}
-            <section class="article-tag">
+            <section class="article-tag post-card-primary-tag">
                 <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
             </section>
         {{/if}}
@@ -26,6 +26,7 @@ into the {body} tag of the default.hbs template --}}
 
         <div class="article-byline">
         <section class="article-byline-content">
+
             <ul class="author-list">
                 {{#foreach authors}}
                 <li class="author-list-item">
@@ -39,6 +40,7 @@ into the {body} tag of the default.hbs template --}}
                 </li>
                 {{/foreach}}
             </ul>
+
             <div class="article-byline-meta">
                 <h4 class="author-name">{{authors}}</h4>
                 <div class="byline-meta-content">
@@ -46,9 +48,11 @@ into the {body} tag of the default.hbs template --}}
                     <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
                 </div>
             </div>
+
         </section>
         </div>
 
+        {{#match @custom.post_image_style "!=" "Hidden"}}
         {{#if feature_image}}
             <figure class="article-image">
                 {{!-- This is a responsive image, it loads different sizes depending on device
@@ -67,6 +71,8 @@ into the {body} tag of the default.hbs template --}}
                 {{/if}}
             </figure>
         {{/if}}
+        {{/match}}
+
     </header>
 
     <section class="gh-content gh-canvas">
@@ -79,15 +85,14 @@ into the {body} tag of the default.hbs template --}}
     </section>
     --}}
 
-    </article>
+</article>
 </main>
 
 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
-{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
 {{#unless @member}}{{#if access}}
-    <section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
+    <section class="footer-cta outer">
         <div class="inner">
-            {{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
+            {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
             <a class="footer-cta-button" href="#/portal" data-portal>
                 <div class="footer-cta-input">Enter your email</div>
                 <span>Subscribe</span>
@@ -97,11 +102,10 @@ into the {body} tag of the default.hbs template --}}
         </div>
     </section>
 {{/if}}{{/unless}}
-{{/match}}
 
 
 {{!-- Read more links, just above the footer --}}
-{{#if @custom.show_recent_posts}}
+{{#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.
 
@@ -110,7 +114,7 @@ into the {body} tag of the default.hbs template --}}
     {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
 
         {{#if more_posts}}
-            <aside class="read-more-wrap">
+            <aside class="read-more-wrap outer">
                 <div class="read-more inner">
                     {{#foreach more_posts}}
                         {{> "post-card"}}

tag.hbs

@@ -1,13 +1,13 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
-
 <main id="site-main" class="site-main outer">
-    <div class="inner posts">
+<div class="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
@@ -20,38 +20,33 @@
                     sizes="(max-width: 1000px) 400px, 800px"
                     src="{{img_url feature_image size="m"}}"
                     alt="{{title}}"
-                        loading="lazy"
                 />
             </div>
             {{/if}}
+
             <div class="post-card-content">
             <div class="post-card-content-link">
                 <header class="post-card-header">
-                            <div class="post-card-primary-tag">Tagged</div>
                     <h2 class="post-card-title">{{name}}</h2>
                 </header>
                 <div class="post-card-excerpt">
-                            <p>
                     {{#if description}}
                         {{description}}
                     {{else}}
                         A collection of {{plural ../pagination.total empty='zero posts' singular='% post' plural='% posts'}}
                     {{/if}}
-                            </p>
                 </div>
             </div>
-                </div>{{!--/.post-card-content--}}
+            </div>
 
         </section>
         {{/tag}}
 
         {{#foreach posts}}
-
             {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
             {{> "post-card"}}
-
         {{/foreach}}
 
     </div>
-    </div>
+</div>
 </main>