3.1.3

It's now possible to disable the dark mode with code injection instead of removing the CSS and rebuilding it, by simply adding a class no-dark to html element.

.github/workflows/deploy-theme.yml

@@ -3,12 +3,13 @@ on:
   push:
     branches:
       - master
+      - main
 jobs:
   deploy:
     runs-on: ubuntu-18.04
     steps:
-      - uses: actions/checkout@master
-      - uses: TryGhost/action-deploy-theme@v1.2.0
+      - uses: actions/checkout@v2
+      - uses: TryGhost/action-deploy-theme@v1.4.1
         with:
           api-url: ${{ secrets.GHOST_ADMIN_API_URL }}
           api-key: ${{ secrets.GHOST_ADMIN_API_KEY }}

.github/workflows/test.yml

@@ -4,29 +4,12 @@ on:
   push:
     branches:
       - master
-
+      - 'renovate/*'
 jobs:
-  build:
-    runs-on: ubuntu-18.04
-    strategy:
-      matrix:
-        node: [ '10' ]
-    name: Node ${{ matrix.node }}
+  test:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && !startsWith(github.head_ref, 'renovate/'))
     steps:
-      - uses: actions/checkout@v1
-      - name: Cache node modules
-        uses: actions/cache@v1
-        with:
-          path: node_modules
-          key: ${{ runner.OS }}-build-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.OS }}-build-${{ env.cache-name }}-
-            ${{ runner.OS }}-build-
-            ${{ runner.OS }}-
-      - name: Setup node
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node }}
-      - run: npm install yarn
-      - run: yarn install
+      - uses: actions/checkout@v2
+      - run: yarn
       - run: yarn test:ci

LICENSE

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

README.md

@@ -12,7 +12,7 @@ The default theme for [Ghost](http://github.com/tryghost/ghost/). This is the la
 
 Ghost uses a simple templating language called [Handlebars](http://handlebarsjs.com/) for its themes.
 
-This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/api/handlebars-themes/) which explains every possible Handlebars helper and template.
+This theme has lots of code comments to help explain what's going on just by reading the code. Once you feel comfortable with how everything works, we also have full [theme API documentation](https://ghost.org/docs/themes/) which explains every possible Handlebars helper and template.
 
 **The main files are:**
 
@@ -54,8 +54,7 @@ yarn zip
 # PostCSS Features Used
 
 - Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
-- Variables - Simple pure CSS variables
-- [Color Function](https://github.com/postcss/postcss-color-function)
+- [Color Mod](https://github.com/jonathantneal/postcss-color-mod-function)
 
 
 # SVG Icons
@@ -67,4 +66,4 @@ You can add your own SVG icons in the same manner.
 
 # Copyright & License
 
-Copyright (c) 2013-2020 Ghost Foundation - Released under the [MIT license](LICENSE).
+Copyright (c) 2013-2021 Ghost Foundation - Released under the [MIT license](LICENSE).

SECURITY.md

@@ -4,6 +4,6 @@ Potential security vulnerabilities can be reported directly us at `security@ghos
 
 The full, up-to-date details of our security policy and procedure can always be found in our documentation:
 
-https://ghost.org/docs/concepts/security/
+https://ghost.org/docs/security/
 
 Please refer to this before emailing us. Thanks for helping make Ghost safe for everyone 🙏.

assets/built/casper.js

@@ -1,2 +1,2 @@
-!function(n){"use strict";n.fn.fitVids=function(e){var i={customSelector:null,ignore:null};if(!document.getElementById("fit-vids-style")){var t=document.head||document.getElementsByTagName("head")[0],r=document.createElement("div");r.innerHTML='<p>x</p><style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>',t.appendChild(r.childNodes[1])}return e&&n.extend(i,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"];i.customSelector&&e.push(i.customSelector);var r=".fitvidsignore";i.ignore&&(r=r+", "+i.ignore);var t=n(this).find(e.join(","));(t=(t=t.not("object object")).not(r)).each(function(){var e=n(this);if(!(0<e.parents(r).length||"embed"===this.tagName.toLowerCase()&&e.parent("object").length||e.parent(".fluid-width-video-wrapper").length)){e.css("height")||e.css("width")||!isNaN(e.attr("height"))&&!isNaN(e.attr("width"))||(e.attr("height",9),e.attr("width",16));var t=("object"===this.tagName.toLowerCase()||e.attr("height")&&!isNaN(parseInt(e.attr("height"),10))?parseInt(e.attr("height"),10):e.height())/(isNaN(parseInt(e.attr("width"),10))?e.width():parseInt(e.attr("width"),10));if(!e.attr("name")){var i="fitvid"+n.fn.fitVids._count;e.attr("name",i),n.fn.fitVids._count++}e.wrap('<div class="fluid-width-video-container"><div class="fluid-width-video-wrapper"></div></div>').parent(".fluid-width-video-wrapper").css("padding-top",100*t+"%"),e.removeAttr("height").removeAttr("width")}})})},n.fn.fitVids._count=0}(window.jQuery||window.Zepto),function(e,t){t.addEventListener("DOMContentLoaded",function(){t.querySelectorAll(".kg-gallery-image img").forEach(function(e){var t=e.closest(".kg-gallery-image"),i=e.attributes.width.value/e.attributes.height.value;t.style.flex=i+" 1 0%"})})}(window,document),function(t,i){var r=i.querySelector("link[rel=next]");if(r){var n=i.querySelector(".post-feed");if(n){var o=300,s=!1,a=!1,d=t.scrollY,l=t.innerHeight,c=i.documentElement.scrollHeight;t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",v),h()}}function u(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",v);this.response.querySelectorAll(".post-card").forEach(function(e){n.appendChild(i.importNode(e,!0))});var e=this.response.querySelector("link[rel=next]");e?r.href=e.href:(t.removeEventListener("scroll",f),t.removeEventListener("resize",v)),c=i.documentElement.scrollHeight,a=s=!1}function e(){if(!a)if(d+l<=c-o)s=!1;else{a=!0;var e=new t.XMLHttpRequest;e.responseType="document",e.addEventListener("load",u),e.open("GET",r.href),e.send(null)}}function h(){s||t.requestAnimationFrame(e),s=!0}function f(){d=t.scrollY,h()}function v(){l=t.innerHeight,c=i.documentElement.scrollHeight,h()}}(window,document),function(s,a){s.Casper||(s.Casper={}),s.Casper.stickyNavTitle=function(e){var t=a.querySelector(e.navSelector),i=a.querySelector(e.titleSelector),r=s.scrollY,n=!1;function o(){i.getBoundingClientRect().top+s.scrollY+(i.offsetHeight+35)<=r?t.classList.add(e.activeClass):t.classList.remove(e.activeClass),n=!1}s.addEventListener("scroll",function(){r=s.scrollY,function(){n||requestAnimationFrame(o);n=!0}()},{passive:!0}),o()}}(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(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,s,a,d,l,c=i.querySelector("link[rel=next]");function u(){if(404===this.status)return t.removeEventListener("scroll",f),void t.removeEventListener("resize",v);this.response.querySelectorAll(".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",v)),l=i.documentElement.scrollHeight,s=o=!1}function e(){var e;s||(a+d<=l-n?o=!1:(s=!0,(e=new t.XMLHttpRequest).responseType="document",e.addEventListener("load",u),e.open("GET",c.href),e.send(null)))}function h(){o||t.requestAnimationFrame(e),o=!0}function f(){a=t.scrollY,h()}function v(){d=t.innerHeight,l=i.documentElement.scrollHeight,h()}!c||(r=i.querySelector(".post-feed"))&&(s=o=!(n=300),a=t.scrollY,d=t.innerHeight,l=i.documentElement.scrollHeight,t.addEventListener("scroll",f,{passive:!0}),t.addEventListener("resize",v),h())}(window,document),function(s,a){s.Casper||(s.Casper={}),s.Casper.stickyNavTitle=function(e){var t=a.querySelector(e.navSelector),i=a.querySelector(e.titleSelector),r=s.scrollY,n=!1;function o(){i.getBoundingClientRect().top+s.scrollY+(i.offsetHeight+35)<=r?t.classList.add(e.activeClass):t.classList.remove(e.activeClass),n=!1}s.addEventListener("scroll",function(){r=s.scrollY,n||requestAnimationFrame(o),n=!0},{passive:!0}),o()}}(window,document);
 //# sourceMappingURL=casper.js.map

assets/built/global.css

@@ -1,2 +1,2 @@
-a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{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{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#313b3f;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:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e3e9ed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:#15171a;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid #e5eff5}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#26a8ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5.5rem;font-weight:600}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
+:root{--blue:#3eb0ef;--green:#a4d037;--purple:#ad26b4;--yellow:#fecd35;--red:#f05230;--darkgrey:#15171a;--midgrey:#738a94;--lightgrey:#c5d2d9;--whitegrey:#e5eff5;--pink:#fa3a57;--brown:#a3821a;--darkmode:#1a1c20}a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}img{max-width:100%}html{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{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}body{color:#303a3e;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:#cbeafb}::selection{text-shadow:none;background:#cbeafb}hr{position:relative;display:block;width:100%;margin:2.5em 0 3.5em;padding:0;height:1px;border:0;border-top:1px solid #e4eaed}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{margin:0;padding:0;border:0}textarea{resize:vertical}blockquote,dl,ol,p,ul{margin:0 0 1.5em}ol,ul{padding-left:1.3em;padding-right:1.5em}ol ol,ol ul,ul ol,ul ul{margin:.5em 0 1em}ul{list-style:disc}ol{list-style:decimal}ol,ul{max-width:100%}li{margin:.5em 0;padding-left:.3em;line-height:1.6em}dt{float:left;margin:0 20px 0 0;width:120px;color:var(--darkgrey);font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:.5em solid var(--whitegrey)}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:#26a6ed;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility}h1{margin:0 0 .5em;font-size:5.5rem;font-weight:600}@media (max-width:500px){h1{font-size:2.2rem}}h2{margin:1.5em 0 .5em;font-size:2.2rem}@media (max-width:500px){h2{font-size:1.8rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:500px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem;font-weight:500}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem;font-weight:500}
 /*# sourceMappingURL=global.css.map */

assets/css/global.css

@@ -14,7 +14,7 @@
     --whitegrey: #e5eff5;
     --pink: #fa3a57;
     --brown: #a3821a;
-    --darkmode: color(var(--darkgrey) l(+2%));
+    --darkmode: color-mod(var(--darkgrey) l(+2%));
 }
 
 /* Reset
@@ -281,7 +281,7 @@ html {
 }
 body {
     overflow-x: hidden;
-    color: color(var(--midgrey) l(-30%));
+    color: color-mod(var(--midgrey) l(-30%));
     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;
@@ -298,7 +298,7 @@ body {
 
 ::selection {
     text-shadow: none;
-    background: color(var(--blue) lightness(+30%));
+    background: color-mod(var(--blue) lightness(+30%));
 }
 
 hr {
@@ -309,7 +309,7 @@ hr {
     padding: 0;
     height: 1px;
     border: 0;
-    border-top: 1px solid color(var(--lightgrey) l(+10%));
+    border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
 }
 
 audio,
@@ -416,7 +416,7 @@ blockquote cite a {
 }
 
 a {
-    color: color(var(--blue) l(-5%));
+    color: color-mod(var(--blue) l(-5%));
     text-decoration: none;
 }
 

assets/css/screen.css

@@ -114,7 +114,7 @@ body {
     margin-top: 64px;
     padding-bottom: 12px;
     color: #fff;
-    background: color(var(--darkgrey) l(-5%)) no-repeat center center;
+    background: color-mod(var(--darkgrey) l(-5%)) no-repeat center center;
     background-size: cover;
 }
 
@@ -236,7 +236,7 @@ body {
 
 .site-archive-header .no-image .site-header-content {
     padding: 5vw 0 10px;
-    border-bottom: 1px solid color(var(--lightgrey) l(+12%));
+    border-bottom: 1px solid color-mod(var(--lightgrey) l(+12%));
 }
 
 
@@ -283,7 +283,7 @@ body {
     right: 0;
     left: 0;
     z-index: 1000;
-    background: color(var(--darkgrey) l(-5%));
+    background: color-mod(var(--darkgrey) l(-5%));
 }
 
 .site-nav {
@@ -316,7 +316,7 @@ body {
 .site-header-background:not(.responsive-header-img) .site-nav-left-wrapper:after,
 .site-nav-main .site-nav-left-wrapper:after {
     right: 0;
-    background: linear-gradient(to right, color(var(--darkgrey) l(-5%) a(0)) 0%,color(var(--darkgrey) l(-5%)) 100%);
+    background: linear-gradient(to right, color-mod(var(--darkgrey) l(-5%) a(0)) 0%,color-mod(var(--darkgrey) l(-5%)) 100%);
 }
 
 .site-nav-left {
@@ -624,7 +624,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     margin: 0 0 40px;
     padding: 0 20px 40px;
     min-height: 220px;
-    border-bottom: 1px solid color(var(--lightgrey) l(+12%));
+    border-bottom: 1px solid color-mod(var(--lightgrey) l(+12%));
     background-size: cover;
 }
 
@@ -711,7 +711,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     display: block;
     width: 100%;
     height: 100%;
-    background: color(var(--lightgrey) l(+10%));
+    background: color-mod(var(--lightgrey) l(+10%));
     border-radius: 100%;
 
     object-fit: cover;
@@ -782,7 +782,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     display: flex;
     flex-direction: column;
     margin: 2px 0 0 6px;
-    color: color(var(--midgrey) l(+10%));
+    color: color-mod(var(--midgrey) l(+10%));
     font-size: 1.2rem;
     line-height: 1.4em;
     font-weight: 400;
@@ -795,7 +795,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
 }
 
 .post-card-byline-content a {
-    color: color(var(--darkgrey) l(+20%));
+    color: color-mod(var(--darkgrey) l(+20%));
     font-weight: 600;
 }
 
@@ -813,7 +813,7 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
     display: flex;
     flex-direction: column;
     margin-left: 5px;
-    color: color(var(--midgrey) l(-10%));
+    color: color-mod(var(--midgrey) l(-10%));
     font-size: 1.3rem;
     line-height: 1.4em;
     font-weight: 500;
@@ -850,7 +850,7 @@ make sure this only happens on large viewports / desktop-ish devices.
     }
 
     .post-card-large:hover {
-        border-bottom-color: color(var(--lightgrey) l(+10%));
+        border-bottom-color: color-mod(var(--lightgrey) l(+10%));
     }
 
     .post-card-large:not(.no-image) .post-card-header {
@@ -980,7 +980,7 @@ make sure this only happens on large viewports / desktop-ish devices.
 
 .post-full-title {
     margin: 0 0 0.2em;
-    color: color(var(--darkgrey) l(-5%));
+    color: color-mod(var(--darkgrey) l(-5%));
 }
 
 .post-full-custom-excerpt {
@@ -1004,7 +1004,7 @@ make sure this only happens on large viewports / desktop-ish devices.
     align-items: center;
     overflow: hidden;
     margin: 25px 0 50px;
-    background: color(var(--lightgrey) l(+10%));
+    background: color-mod(var(--lightgrey) l(+10%));
     border-radius: 3px;
 }
 
@@ -1104,7 +1104,7 @@ make sure this only happens on large viewports / desktop-ish devices.
 
 .post-full-content strong,
 .post-full-content em {
-    color: color(var(--darkgrey) l(-5%));
+    color: color-mod(var(--darkgrey) l(-5%));
 }
 
 .post-full-content small {
@@ -1169,7 +1169,7 @@ Usage (In Ghost editor):
 .post-full-content blockquote {
     margin: 0 0 1.5em;
     padding: 0 1.5em;
-    border-left: #3eb0ef 3px solid;
+    border-left: color-mod(var(--blue)) 3px solid;
 }
 @media (max-width: 500px) {
     .post-full-content blockquote {
@@ -1207,16 +1207,16 @@ Usage (In Ghost editor):
     margin: 1.5em 0 3em;
     padding: 20px;
     max-width: 100%;
-    border: color(var(--darkgrey) l(-10%)) 1px solid;
+    border: color-mod(var(--darkgrey) l(-10%)) 1px solid;
     color: var(--whitegrey);
     font-size: 1.4rem;
     line-height: 1.5em;
-    background: color(var(--darkgrey) l(-3%));
+    background: color-mod(var(--darkgrey) l(-3%));
     border-radius: 5px;
 }
 
 .post-full-content pre ::selection {
-    color: color(var(--midgrey) l(-25%));
+    color: color-mod(var(--midgrey) l(-25%));
 }
 
 .post-full-content pre code {
@@ -1247,7 +1247,7 @@ Usage (In Ghost editor):
     margin-left: -10px;
     width: 1px;
     height: 30px;
-    background: color(var(--lightgrey) l(+10%));
+    background: color-mod(var(--lightgrey) l(+10%));
     box-shadow: #fff 0 0 0 5px;
     transform: rotate(45deg);
 }
@@ -1256,13 +1256,17 @@ Usage (In Ghost editor):
     margin-top: 1.2em;
 }
 
+.post-full-content [id] {
+    scroll-margin-top: 110px;
+}
+
 .post-full-content h1,
 .post-full-content h2,
 .post-full-content h3,
 .post-full-content h4,
 .post-full-content h5,
 .post-full-content h6 {
-    color: color(var(--darkgrey) l(-5%));
+    color: color-mod(var(--darkgrey) l(-5%));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
@@ -1482,13 +1486,13 @@ Usage (In Ghost editor):
     letter-spacing: 0.2px;
     text-align: left;
     text-transform: uppercase;
-    background-color: color(var(--whitegrey) l(+4%));
+    background-color: color-mod(var(--whitegrey) l(+4%));
 }
 
 .post-full-content table th,
 .post-full-content table td {
     padding: 6px 12px;
-    border: color(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
+    border: color-mod(var(--whitegrey) l(-1%) s(-5%)) 1px solid;
 }
 
 
@@ -1500,7 +1504,7 @@ Usage (In Ghost editor):
     justify-content: space-between;
     margin: 35px 0 0;
     padding-top: 15px;
-    border-top: 1px solid color(var(--lightgrey) l(+10%));
+    border-top: 1px solid color-mod(var(--lightgrey) l(+10%));
 }
 
 .post-full-byline-content {
@@ -1516,7 +1520,7 @@ Usage (In Ghost editor):
 
 .post-full-byline-meta {
     margin: 2px 0 0;
-    color: color(var(--midgrey) l(+10%));
+    color: color-mod(var(--midgrey) l(+10%));
     font-size: 1.2rem;
     line-height: 1.2em;
     letter-spacing: 0.2px;
@@ -1531,7 +1535,7 @@ Usage (In Ghost editor):
 }
 
 .post-full-byline-meta h4 a {
-    color: color(var(--darkgrey) l(+10%));
+    color: color-mod(var(--darkgrey) l(+10%));
 }
 
 .post-full-byline-meta h4 a:hover {
@@ -1611,7 +1615,7 @@ Usage (In Ghost editor):
 
 .author-card .author-info p {
     margin: 4px 0 0;
-    color: color(var(--midgrey) l(-10%));
+    color: color-mod(var(--midgrey) l(-10%));
 }
 
 .author-card .author-info .bio h2 {
@@ -1689,9 +1693,9 @@ Usage (In Ghost editor):
 .subscribe-form {
     margin: 1.5em 0;
     padding: 6.5vw 7vw 8vw;
-    border: color(var(--lightgrey) l(+10%)) 1px solid;
+    border: color-mod(var(--lightgrey) l(+10%)) 1px solid;
     text-align: center;
-    background: linear-gradient(color(var(--whitegrey) l(+6%)), color(var(--whitegrey) l(+4%)));
+    background: linear-gradient(color-mod(var(--whitegrey) l(+6%)), color-mod(var(--whitegrey) l(+4%)));
     border-radius: 3px;
 }
 
@@ -1729,7 +1733,7 @@ Usage (In Ghost editor):
     display: block;
     padding: 10px;
     width: 100%;
-    border: color(var(--lightgrey) l(+7%)) 1px solid;
+    border: color-mod(var(--lightgrey) l(+7%)) 1px solid;
     color: var(--midgrey);
     font-size: 1.8rem;
     line-height: 1em;
@@ -1743,7 +1747,7 @@ Usage (In Ghost editor):
 
 .subscribe-email:focus {
     outline: 0;
-    border-color: color(var(--lightgrey) l(-2%));
+    border-color: color-mod(var(--lightgrey) l(-2%));
 }
 
 .subscribe-form button {
@@ -1759,10 +1763,10 @@ Usage (In Ghost editor):
     font-weight: 400;
     text-align: center;
     background: linear-gradient(
-    color(var(--blue) whiteness(+7%)),
-    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
-    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
-    color(var(--blue) lightness(-4%) saturation(-10%))
+    color-mod(var(--blue) whiteness(+7%)),
+    color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+    color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+    color-mod(var(--blue) lightness(-4%) saturation(-10%))
     );
     border-radius: 5px;
 
@@ -1771,7 +1775,7 @@ Usage (In Ghost editor):
 
 .subscribe-form button:active,
 .subscribe-form button:focus {
-    background: color(var(--blue) lightness(-9%) saturation(-10%));
+    background: color-mod(var(--blue) lightness(-9%) saturation(-10%));
 }
 
 .subscribe-form .button-loader,
@@ -1811,7 +1815,7 @@ Usage (In Ghost editor):
 
 .subscribe-form .success .message-success {
     display: block;
-    color: color(var(--green) l(-5%));
+    color: color-mod(var(--green) l(-5%));
 }
 
 .subscribe-form .invalid .message-error,
@@ -1861,7 +1865,7 @@ Usage (In Ghost editor):
 
 .read-next {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    background: color(var(--darkgrey) l(-5%));
+    background: color-mod(var(--darkgrey) l(-5%));
 }
 
 .read-next-feed {
@@ -1919,7 +1923,7 @@ Usage (In Ghost editor):
     overflow: hidden;
     margin: 0 25px 50px;
     padding: 25px;
-    background: linear-gradient(color(var(--darkgrey) l(+2%)), color(var(--darkgrey) l(-5%)));
+    background: linear-gradient(color-mod(var(--darkgrey) l(+2%)), color-mod(var(--darkgrey) l(-5%)));
     border-radius: 3px;
 }
 
@@ -2108,7 +2112,7 @@ Usage (In Ghost editor):
 
 .post-full-content figcaption {
     margin: 1.0em auto 0;
-    color: color(var(--midgrey) l(-10%));
+    color: color-mod(var(--midgrey) l(-10%));
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
     font-size: 75%;
     line-height: 1.5em;
@@ -2216,7 +2220,7 @@ Usage (In Ghost editor):
 }
 
 .kg-bookmark-title {
-    color: color(var(--midgrey) l(-30%));
+    color: color-mod(var(--midgrey) l(-30%));
     font-size: 1.6rem;
     line-height: 1.5em;
     font-weight: 600;
@@ -2232,7 +2236,7 @@ Usage (In Ghost editor):
     overflow-y: hidden;
     margin-top: 12px;
     max-height: 48px;
-    color: color(var(--midgrey) l(-10%));
+    color: color-mod(var(--midgrey) l(-10%));
     font-size: 1.5rem;
     line-height: 1.5em;
     font-weight: 400;
@@ -2263,9 +2267,9 @@ Usage (In Ghost editor):
     flex-wrap: wrap;
     align-items: center;
     margin-top: 14px;
-    color: color(var(--midgrey) l(-10%));
+    color: var(--darkgrey);
     font-size: 1.5rem;
-    font-weight: 400;
+    font-weight: 500;
 }
 
 .post-full-content .kg-bookmark-icon {
@@ -2289,6 +2293,8 @@ Usage (In Ghost editor):
     line-height: 1.5em;
     text-overflow: ellipsis;
     white-space: nowrap;
+    color: color-mod(var(--midgrey) l(-10%));
+    font-weight: 400;
 }
 
 @media (max-width: 800px) {
@@ -2521,7 +2527,7 @@ Usage (In Ghost editor):
 
 .error-message {
     padding-bottom: 10vw;
-    border-bottom: 1px solid color(var(--lightgrey) l(+10%));
+    border-bottom: 1px solid color-mod(var(--lightgrey) l(+10%));
     text-align: center;
 }
 
@@ -2584,7 +2590,7 @@ Usage (In Ghost editor):
 /* 10. Subscribe Message and Overlay
 /* ---------------------------------------------------------- */
 
-.subscribe-success-message {
+.subscribe-notification {
     position: fixed;
     top: 0;
     right: 0;
@@ -2598,17 +2604,41 @@ Usage (In Ghost editor):
     transform: translateY(-175%);
 }
 
+.subscribe-notification.subscribe-failure-message {
+    background: var(--red);
+}
+
 .subscribe-success .subscribe-success-message {
     visibility: visible;
     transform: translateY(0);
 }
 
-.subscribe-success-message.close {
+.subscribe-failure .subscribe-failure-message {
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.subscribe-notification.close {
     visibility: hidden;
     transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1);
     transform: translateY(-175%);
 }
 
+.subscribe-notification .subscribe-close-button {
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.subscribe-notification .subscribe-close-button:before,
+.subscribe-notification .subscribe-close-button:after {
+    top: 31px;
+    right: 20px;
+    width: 18px;
+    height: 2px;
+}
+
 .subscribe-close-overlay {
     position: absolute;
     top: 0;
@@ -2751,7 +2781,7 @@ Usage (In Ghost editor):
 
 .subscribe-email:focus {
     outline: 0;
-    border-color: color(var(--lightgrey) l(-2%));
+    border-color: color-mod(var(--lightgrey) l(-2%));
 }
 
 .subscribe-overlay button {
@@ -2766,10 +2796,10 @@ Usage (In Ghost editor):
     font-weight: 400;
     text-align: center;
     background: linear-gradient(
-    color(var(--blue) whiteness(+7%)),
-    color(var(--blue) lightness(-7%) saturation(-10%)) 60%,
-    color(var(--blue) lightness(-7%) saturation(-10%)) 90%,
-    color(var(--blue) lightness(-4%) saturation(-10%))
+    color-mod(var(--blue) whiteness(+7%)),
+    color-mod(var(--blue) lightness(-7%) saturation(-10%)) 60%,
+    color-mod(var(--blue) lightness(-7%) saturation(-10%)) 90%,
+    color-mod(var(--blue) lightness(-4%) saturation(-10%))
     );
     border-radius: 8px;
 
@@ -2778,7 +2808,7 @@ Usage (In Ghost editor):
 
 .subscribe-overlay button:active,
 .subscribe-overlay button:focus {
-    background: color(var(--blue) lightness(-9%) saturation(-10%));
+    background: color-mod(var(--blue) lightness(-9%) saturation(-10%));
 }
 
 .subscribe-overlay .loading .button-loader {
@@ -2800,7 +2830,7 @@ Usage (In Ghost editor):
     padding-top: 20px;
     padding-bottom: 60px;
     color: #fff;
-    background: color(var(--darkgrey) l(-5%));
+    background: color-mod(var(--darkgrey) l(-5%));
 }
 
 .site-footer-content {
@@ -2860,220 +2890,229 @@ Usage (In Ghost editor):
 /* 12. Dark Mode
 /* ---------------------------------------------------------- */
 @media (prefers-color-scheme: dark) {
-    body {
+    html:not(.no-dark) body {
         color: rgba(255, 255, 255, 0.75);
         background: var(--darkmode);
     }
 
-    img {
+    html:not(.no-dark) img {
         opacity: 0.9;
     }
 
-    .site-header-background:before {
+    html:not(.no-dark) .site-header-background:before {
         background: rgba(0,0,0,0.6);
     }
 
-    .post-feed {
+    html:not(.no-dark) .post-feed {
         background: var(--darkmode);
     }
 
-    .post-card,
-    .post-card:hover {
-        border-bottom-color: color(var(--darkmode) l(+8%));
+    html:not(.no-dark) .post-card,
+    html:not(.no-dark) .post-card:hover {
+        border-bottom-color: color-mod(var(--darkmode) l(+8%));
     }
 
-    .author-profile-image {
+    html:not(.no-dark) .author-profile-image {
         background: var(--darkmode);
     }
 
-    .post-card-byline-content a {
+    html:not(.no-dark) .post-card-byline-content a {
         color: rgba(255, 255, 255, 0.75);
     }
 
-    .post-card-byline-content a:hover {
+    html:not(.no-dark) .post-card-byline-content a:hover {
         color: #fff;
     }
 
-    .post-card-image {
+    html:not(.no-dark) .post-card-image {
         background: var(--darkmode);
     }
 
-    .post-card-title {
+    html:not(.no-dark) .post-card-title {
         color: rgba(255, 255, 255, 0.85);
     }
 
-    .post-card-excerpt {
-        color: color(var(--midgrey) l(+10%));
+    html:not(.no-dark) .post-card-excerpt {
+        color: color-mod(var(--midgrey) l(+10%));
     }
 
-    .author-avatar,
-    .static-avatar {
-        border-color: color(var(--darkgrey) l(+2%));
+    html:not(.no-dark) .author-avatar,
+    html:not(.no-dark) .static-avatar {
+        border-color: color-mod(var(--darkgrey) l(+2%));
     }
 
-    .site-main,
-    .post-template .site-main,
-    .page-template .site-main {
+    html:not(.no-dark) .site-main,
+    html:not(.no-dark) .post-template .site-main,
+    html:not(.no-dark) .page-template .site-main {
         background: var(--darkmode);
     }
 
-    .post-full-content {
+    html:not(.no-dark) .post-full-content {
         background: var(--darkmode);
     }
 
-    .post-full-title {
+    html:not(.no-dark) .post-full-title {
         color: rgba(255, 255, 255, 0.9);
     }
 
-    .post-full-custom-excerpt {
-        color: color(var(--midgrey) l(+10%));
+    html:not(.no-dark) .post-full-custom-excerpt {
+        color: color-mod(var(--midgrey) l(+10%));
     }
 
-    .post-full-image {
-        background-color: color(var(--darkmode) l(+8%));
+    html:not(.no-dark) .post-full-image {
+        background-color: color-mod(var(--darkmode) l(+8%));
     }
 
-    .post-full-byline {
-        border-top-color: color(var(--darkmode) l(+15%));
+    html:not(.no-dark) .post-full-byline {
+        border-top-color: color-mod(var(--darkmode) l(+15%));
     }
 
-    .post-full-byline-meta h4 a {
+    html:not(.no-dark) .post-full-byline-meta h4 a {
         color: rgba(255, 255, 255, 0.75);
     }
 
-    .post-full-byline-meta h4 a:hover {
+    html:not(.no-dark) .post-full-byline-meta h4 a:hover {
         color: #fff;
     }
 
-    .author-list-item .author-card {
-        background: color(var(--darkmode) l(+4%));
+    html:not(.no-dark) .author-list-item .author-card {
+        background: color-mod(var(--darkmode) l(+4%));
         box-shadow: 0 12px 26px rgba(0,0,0,0.4);
     }
 
-    .author-list-item .author-card:before {
-        border-top-color: color(var(--darkmode) l(+4%));
+    html:not(.no-dark) .author-list-item .author-card:before {
+        border-top-color: color-mod(var(--darkmode) l(+4%));
     }
 
-    .no-image .author-social-link a {
+    html:not(.no-dark) .no-image .author-social-link a {
         color: rgba(255, 255, 255, 0.75);
     }
 
-    .post-full-content h1,
-    .post-full-content h2,
-    .post-full-content h3,
-    .post-full-content h4,
-    .post-full-content h6 {
+    html:not(.no-dark) .post-full-content h1,
+    html:not(.no-dark) .post-full-content h2,
+    html:not(.no-dark) .post-full-content h3,
+    html:not(.no-dark) .post-full-content h4,
+    html:not(.no-dark) .post-full-content h6 {
         color: rgba(255, 255, 255, 0.9);
     }
 
-    .post-full-content a {
+    html:not(.no-dark) .post-full-content a {
         color: #fff;
         box-shadow: inset 0 -1px 0 #fff;
     }
 
-    .post-full-content strong {
+    html:not(.no-dark) .post-full-content strong {
         color: #fff;
     }
 
-    .post-full-content em {
+    html:not(.no-dark) .post-full-content em {
         color: #fff;
     }
 
-    .post-full-content code {
+    html:not(.no-dark) .post-full-content code {
         color: #fff;
         background: #000;
     }
 
-    hr {
-        border-top-color: color(var(--darkmode) l(+8%));
+    html:not(.no-dark) hr {
+        border-top-color: color-mod(var(--darkmode) l(+8%));
     }
 
-    .post-full-content figcaption {
+    html:not(.no-dark) .post-full-content hr:after {
+        background: color-mod(var(--darkmode) l(+8%));
+        box-shadow: var(--darkmode) 0 0 0 5px;
+    }
+
+    html:not(.no-dark) .post-full-content figcaption {
         color: rgba(255, 255, 255, 0.6);
     }
 
-    .post-full-content table td:first-child {
-        background-image: linear-gradient(to right, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
+    html:not(.no-dark) .post-full-content table td:first-child {
+        background-image: linear-gradient(to right, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
     }
 
-    .post-full-content table td:last-child {
-        background-image: linear-gradient(to left, var(--darkmode) 50%, color(var(--darkmode) a(0%)) 100%);
+    html:not(.no-dark) .post-full-content table td:last-child {
+        background-image: linear-gradient(to left, var(--darkmode) 50%, color-mod(var(--darkmode) a(0%)) 100%);
     }
 
-    .post-full-content table th {
+    html:not(.no-dark) .post-full-content table th {
         color: rgba(255, 255, 255, 0.85);
-        background-color: color(var(--darkmode) l(+8%));
+        background-color: color-mod(var(--darkmode) l(+8%));
     }
 
-    .post-full-content table th,
-    .post-full-content table td {
-        border: color(var(--darkmode) l(+8%)) 1px solid;
+    html:not(.no-dark) .post-full-content table th,
+    html:not(.no-dark) .post-full-content table td {
+        border: color-mod(var(--darkmode) l(+8%)) 1px solid;
     }
 
-    .post-full-content .kg-bookmark-container,
-    .post-full-content .kg-bookmark-container:hover {
+    html:not(.no-dark) .post-full-content .kg-bookmark-container,
+    html:not(.no-dark) .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);
     }
 
-    .kg-bookmark-title {
+    html:not(.no-dark) .post-full-content input {
+        color: color-mod(var(--midgrey) l(-30%));
+    }
+
+    html:not(.no-dark) .kg-bookmark-title {
         color: #fff;
     }
 
-    .kg-bookmark-description {
+    html:not(.no-dark) .kg-bookmark-description {
         color: rgba(255, 255, 255, 0.75);
     }
 
-    .kg-bookmark-metadata {
+    html:not(.no-dark) .kg-bookmark-metadata {
         color: rgba(255, 255, 255, 0.75);
     }
 
-    .site-archive-header .no-image {
+    html:not(.no-dark) .site-archive-header .no-image {
         color: rgba(255, 255, 255, 0.9);
         background: var(--darkmode);
     }
 
-    .site-archive-header .no-image .site-header-content {
-        border-bottom-color: color(var(--darkmode) l(+15%));
+    html:not(.no-dark) .site-archive-header .no-image .site-header-content {
+        border-bottom-color: color-mod(var(--darkmode) l(+15%));
     }
 
-    .site-header-content .author-profile-image {
+    html:not(.no-dark) .site-header-content .author-profile-image {
         box-shadow: 0 0 0 6px hsla(0,0%,100%,0.04);
     }
 
-    .subscribe-form {
+    html:not(.no-dark) .subscribe-form {
         border: none;
-        background: linear-gradient(color(var(--darkmode) l(-6%)), color(var(--darkmode) l(-3%)));
+        background: linear-gradient(color-mod(var(--darkmode) l(-6%)), color-mod(var(--darkmode) l(-3%)));
     }
 
-    .subscribe-form-title {
+    html:not(.no-dark) .subscribe-form-title {
         color: rgba(255, 255, 255, 0.9);
     }
 
-    .subscribe-form p {
+    html:not(.no-dark) .subscribe-form p {
         color: rgba(255, 255, 255, 0.7);
     }
 
-    .subscribe-email {
-        border-color: color(var(--darkmode) l(+6%));
+    html:not(.no-dark) .subscribe-email {
+        border-color: color-mod(var(--darkmode) l(+6%));
         color: rgba(255, 255, 255, 0.9);
-        background: color(var(--darkmode) l(+3%));
+        background: color-mod(var(--darkmode) l(+3%));
     }
 
-    .subscribe-email:focus {
-        border-color: color(var(--darkmode) l(+25%));
+    html:not(.no-dark) .subscribe-email:focus {
+        border-color: color-mod(var(--darkmode) l(+25%));
     }
 
-    .subscribe-form button {
+    html:not(.no-dark) .subscribe-form button {
         opacity: 0.9;
     }
 
-    .subscribe-form .invalid .message-error,
-    .subscribe-form .error .message-error {
-        color: color(var(--red) l(+5%) s(-5%));
+    html:not(.no-dark) .subscribe-form .invalid .message-error,
+    html:not(.no-dark) .subscribe-form .error .message-error {
+        color: color-mod(var(--red) l(+5%) s(-5%));
     }
 
-    .subscribe-form .success .message-success {
-        color: color(var(--green) l(+5%) s(-5%));
+    html:not(.no-dark) .subscribe-form .success .message-success {
+        color: color-mod(var(--green) l(+5%) s(-5%));
     }
 }

author.hbs

@@ -49,7 +49,7 @@
     <div class="inner posts">
 
         <div class="post-feed">
-            {{#foreach posts}}
+            {{#foreach posts visibility="all"}}
 
                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                 {{> "post-card"}}

config.example.json

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

default.hbs

@@ -33,7 +33,7 @@
                     <a href="{{@site.url}}">Latest Posts</a>
                     {{#if @site.facebook}}<a href="{{facebook_url @site.facebook}}" target="_blank" rel="noopener">Facebook</a>{{/if}}
                     {{#if @site.twitter}}<a href="{{twitter_url @site.twitter}}" target="_blank" rel="noopener">Twitter</a>{{/if}}
-                    <a href="https://ghost.org" target="_blank" rel="noopener">Ghost</a>
+                    <a href="https://ghost.org/" target="_blank" rel="noopener">Ghost</a>
                 </nav>
             </div>
         </footer>
@@ -42,10 +42,14 @@
 
     {{!-- The big email subscribe modal content --}}
     {{#if @labs.members}}
-    <div class="subscribe-success-message">
-        <a class="subscribe-close" href="javascript:;"></a>
+    <div class="subscribe-notification subscribe-success-message">
+        <a class="subscribe-close-button" href="javascript:;"></a>
         You've successfully subscribed to {{@site.title}}!
     </div>
+    <div class="subscribe-notification subscribe-failure-message">
+        <a class="subscribe-close-button" href="javascript:;"></a>
+        Could not sign up! Invalid sign up link.
+    </div>
 
     <div id="subscribe" class="subscribe-overlay">
         <a class="subscribe-close-overlay" href="#"></a>
@@ -80,8 +84,8 @@
 
     {{!-- jQuery, required for fitvids --}}
     <script
-        src="https://code.jquery.com/jquery-3.4.1.min.js"
-        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
+        src="https://code.jquery.com/jquery-3.5.1.min.js"
+        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
         crossorigin="anonymous">
     </script>
     {{!-- Fitvids (for responsive video embeds), infinite scroll, floating header, and gallery card support --}}
@@ -102,14 +106,19 @@
 
         // Give the parameter a variable name
         var action = getParameterByName('action');
+        var success = getParameterByName('success');
 
         $(document).ready(function () {
-            if (action == 'subscribe') {
-                $('body').addClass("subscribe-success");
+            if (action == 'subscribe' && (success === null || success === 'true')) {
+                $('body').addClass('subscribe-success');
             }
 
-            $('.subscribe-success-message .subscribe-close').click(function () {
-                $('.subscribe-success-message').addClass('close');
+            if (action == 'subscribe' && success === 'false') {
+                $('body').addClass('subscribe-failure');
+            }
+
+            $('.subscribe-notification .subscribe-close-button').click(function () {
+                $('.subscribe-notification').addClass('close');
             });
 
             // Reset form on opening subscrion overlay

gulpfile.js

@@ -1,5 +1,8 @@
 const {series, watch, src, dest, parallel} = require('gulp');
 const pump = require('pump');
+const path = require('path');
+const releaseUtils = require('@tryghost/release-utils');
+const inquirer = require('inquirer');
 
 // gulp plugins and utils
 const livereload = require('gulp-livereload');
@@ -12,11 +15,14 @@ const fs = require('fs');
 
 // postcss plugins
 const autoprefixer = require('autoprefixer');
-const colorFunction = require('postcss-color-function');
+const colorFunction = require('postcss-color-mod-function');
 const cssnano = require('cssnano');
-const customProperties = require('postcss-custom-properties');
 const easyimport = require('postcss-easy-import');
 
+const REPO = 'TryGhost/Casper';
+const REPO_READONLY = 'TryGhost/Casper';
+const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
+
 function serve(done) {
     livereload.listen();
     done();
@@ -39,17 +45,14 @@ function hbs(done) {
 }
 
 function css(done) {
-    const processors = [
-        easyimport,
-        customProperties({preserve: false}),
-        colorFunction(),
-        autoprefixer(),
-        cssnano()
-    ];
-
     pump([
         src('assets/css/*.css', {sourcemaps: true}),
-        postcss(processors),
+        postcss([
+            easyimport,
+            colorFunction(),
+            autoprefixer(),
+            cssnano()
+        ]),
         dest('assets/built/', {sourcemaps: '.'}),
         livereload()
     ], handleError(done));
@@ -70,18 +73,17 @@ function js(done) {
 }
 
 function zipper(done) {
-    const targetDir = 'dist/';
-    const themeName = require('./package.json').name;
-    const filename = themeName + '.zip';
+    const filename = require('./package.json').name + '.zip';
 
     pump([
         src([
             '**',
             '!node_modules', '!node_modules/**',
-            '!dist', '!dist/**'
+            '!dist', '!dist/**',
+            '!yarn-error.log'
         ]),
         zip(filename),
-        dest(targetDir)
+        dest('dist/')
     ], handleError(done));
 }
 
@@ -89,128 +91,97 @@ const cssWatcher = () => watch('assets/css/**', css);
 const hbsWatcher = () => watch(['*.hbs', 'partials/**/*.hbs'], hbs);
 const watcher = parallel(cssWatcher, hbsWatcher);
 const build = series(css, js);
-const dev = series(build, serve, watcher);
 
 exports.build = build;
 exports.zip = series(build, zipper);
-exports.default = dev;
+exports.default = series(build, serve, watcher);
 
-// release imports
-const path = require('path');
-const releaseUtils = require('@tryghost/release-utils');
-
-let config;
-try {
-    config = require('./config');
-} catch (err) {
-    config = null;
-}
-
-const REPO = 'TryGhost/Casper';
-const USER_AGENT = 'Casper';
-const CHANGELOG_PATH = path.join(process.cwd(), '.', 'changelog.md');
-
-const changelog = ({previousVersion}) => {
-    const changelog = new releaseUtils.Changelog({
-        changelogPath: CHANGELOG_PATH,
-        folder: path.join(process.cwd(), '.')
-    });
-
-    changelog
-        .write({
-            githubRepoPath: `https://github.com/${REPO}`,
-            lastVersion: previousVersion
-        })
-        .sort()
-        .clean();
-};
-
-const previousRelease = () => {
-    return releaseUtils
-        .releases
-        .get({
-            userAgent: USER_AGENT,
-            uri: `https://api.github.com/repos/${REPO}/releases`
-        })
-        .then((response) => {
-            if (!response || !response.length) {
-                console.log('No releases found. Skipping');
-                return;
-            }
-            let prevVersion = response[0].tag_name || response[0].name;
-            console.log(`Previous version ${prevVersion}`);
-            return prevVersion;
-        });
-};
-
-/**
- *
- * `yarn ship` will trigger `postship` task.
- *
- * [optional] For full automation
- *
- * `GHOST=2.10.1,2.10.0 yarn ship`
- * First value: Ships with Ghost
- * Second value: Compatible with Ghost/GScan
- *
- * You can manually run in case the task has thrown an error.
- *
- * `npm_package_version=0.5.0 gulp release`
- */
-const release = () => {
+exports.release = () => {
     // @NOTE: https://yarnpkg.com/lang/en/docs/cli/version/
     // require(./package.json) can run into caching issues, this re-reads from file everytime on release
     var packageJSON = JSON.parse(fs.readFileSync('./package.json'));
     const newVersion = packageJSON.version;
-    let shipsWithGhost = '{version}';
-    let compatibleWithGhost = '2.10.0';
-    const ghostEnvValues = process.env.GHOST || null;
-
-    if (ghostEnvValues) {
-        shipsWithGhost = ghostEnvValues.split(',')[0];
-        compatibleWithGhost = ghostEnvValues.split(',')[1];
-
-        if (!compatibleWithGhost) {
-            compatibleWithGhost = '2.10.0';
-        }
-    }
 
     if (!newVersion || newVersion === '') {
-        console.log('Invalid version.');
+        console.log(`Invalid version: ${newVersion}`);
         return;
     }
 
-    console.log(`\nDraft release for ${newVersion}.`);
+    console.log(`\nCreating release for ${newVersion}...`);
 
-    if (!config || !config.github || !config.github.username || !config.github.token) {
+    let config;
+    try {
+        config = require('./config');
+    } catch (err) {
+        config = null;
+    }
+
+    if (!config || !config.github || !config.github.token) {
         console.log('Please copy config.example.json and configure Github token.');
         return;
     }
 
-    return previousRelease()
-        .then((previousVersion) => {
-            changelog({previousVersion});
+    let compatibleWithGhost;
 
-            return releaseUtils
-                .releases
-                .create({
-                    draft: true,
-                    preRelease: false,
-                    tagName: newVersion,
-                    releaseName: newVersion,
-                    userAgent: USER_AGENT,
-                    uri: `https://api.github.com/repos/${REPO}/releases`,
-                    github: {
-                        username: config.github.username,
-                        token: config.github.token
-                    },
-                    content: [`**Ships with Ghost ${shipsWithGhost} Compatible with Ghost >= ${compatibleWithGhost}**\n\n`],
-                    changelogPath: CHANGELOG_PATH
-                })
-                .then((response) => {
-                    console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
-                });
+    return inquirer.prompt([{
+        type: 'input',
+        name: 'compatibleWithGhost',
+        message: 'Which version of Ghost is it compatible with?',
+        default: '3.0.0'
+    }])
+    .then(result => {
+        compatibleWithGhost = result.compatibleWithGhost;
+        return Promise.resolve();
+    })
+    .then(() => releaseUtils.releases.get({
+        userAgent: 'Casper',
+        uri: `https://api.github.com/repos/${REPO_READONLY}/releases`
+    }))
+    .then((response) => {
+        if (!response || !response.length) {
+            console.log('No releases found. Skipping...');
+            return;
+        }
+
+        let previousVersion = response[0].tag_name || response[0].name;
+        console.log(`Previous version: ${previousVersion}`);
+        return Promise.resolve(previousVersion);
+    })
+    .then((previousVersion) => {
+        const changelog = new releaseUtils.Changelog({
+            changelogPath: CHANGELOG_PATH,
+            folder: path.join(process.cwd(), '.')
         });
-};
 
-exports.release = release;
+        changelog
+            .write({
+                githubRepoPath: `https://github.com/${REPO}`,
+                lastVersion: previousVersion
+            })
+            .sort()
+            .clean();
+
+        return Promise.resolve();
+    })
+    .then(() => releaseUtils.releases.create({
+        draft: true,
+        preRelease: false,
+        tagName: newVersion,
+        releaseName: newVersion,
+        userAgent: 'Casper',
+        uri: `https://api.github.com/repos/${REPO}/releases`,
+        github: {
+            token: config.github.token
+        },
+        content: [`**Compatible with Ghost ≥ ${compatibleWithGhost}**\n\n`],
+        changelogPath: CHANGELOG_PATH
+    }))
+    .then((response) => {
+        console.log(`\nRelease draft generated: ${response.releaseUrl}\n`);
+        return Promise.resolve();
+    })
+    .catch((err) => {
+        console.error(err);
+        process.exit(1);
+    });
+};

index.hbs

@@ -25,7 +25,7 @@ into the {body} of the default.hbs template --}}
     <div class="inner posts">
 
         <div class="post-feed">
-            {{#foreach posts}}
+            {{#foreach posts visibility="all"}}
 
                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                 {{> "post-card"}}

package.json

@@ -2,7 +2,7 @@
     "name": "casper",
     "description": "A clean, minimal default theme for the Ghost publishing platform",
     "demo": "https://demo.ghost.io",
-    "version": "3.0.11",
+    "version": "3.1.3",
     "engines": {
         "ghost": ">=3.0.0",
         "ghost-api": "v3"
@@ -25,7 +25,7 @@
     "author": {
         "name": "Ghost Foundation",
         "email": "hello@ghost.org",
-        "url": "https://ghost.org"
+        "url": "https://ghost.org/"
     },
     "gpm": {
         "type": "theme",
@@ -46,19 +46,20 @@
     "bugs": "https://github.com/TryGhost/Casper/issues",
     "contributors": "https://github.com/TryGhost/Casper/graphs/contributors",
     "devDependencies": {
-        "@tryghost/release-utils": "0.4.1",
-        "autoprefixer": "9.7.4",
-        "beeper": "2.0.0",
+        "@tryghost/release-utils": "0.6.12",
+        "autoprefixer": "10.2.5",
+        "beeper": "2.1.0",
         "cssnano": "4.1.10",
-        "gscan": "3.3.3",
+        "gscan": "3.6.1",
         "gulp": "4.0.2",
         "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",
-        "gulp-postcss": "8.0.0",
+        "gulp-postcss": "9.0.0",
         "gulp-uglify": "3.0.2",
-        "gulp-zip": "5.0.1",
-        "postcss-color-function": "4.1.0",
-        "postcss-custom-properties": "9.1.1",
+        "gulp-zip": "5.1.0",
+        "inquirer": "8.0.0",
+        "postcss": "8.2.8",
+        "postcss-color-mod-function": "3.0.3",
         "postcss-easy-import": "3.0.0",
         "pump": "3.0.0"
     },

partials/post-card.hbs

@@ -10,6 +10,7 @@
                     {{img_url feature_image size="l"}} 1000w,
                     {{img_url feature_image size="xl"}} 2000w"
             sizes="(max-width: 1000px) 400px, 700px"
+            loading="lazy"
             src="{{img_url feature_image size="m"}}"
             alt="{{title}}"
         />

partials/site-nav.hbs

@@ -34,7 +34,11 @@
         {{/if}}
 
         {{#if @labs.members}}
-            <a class="subscribe-button" href="#subscribe">Subscribe</a>
+            {{#unless @member}}
+                <a class="subscribe-button" href="#subscribe">Subscribe</a>
+            {{else}}
+                <a class="subscribe-button" href="#/portal/account">Account</a>
+            {{/unless}}
         {{/if}}
     </div>
 </nav>

tag.hbs

@@ -23,7 +23,7 @@
 <main id="site-main" class="site-main outer">
     <div class="inner posts">
         <div class="post-feed">
-            {{#foreach posts}}
+            {{#foreach posts visibility="all"}}
                 {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                 {{> "post-card"}}
             {{/foreach}}