And so the lord said unto Moses, let us obliterate this CSS

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%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}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}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:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.4rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.6rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
+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%;height:auto}html{box-sizing:border-box;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:inherit}a{background-color:transparent}a:active,a:hover{outline:0}b,strong{font-weight:700}dfn,em,i{font-style:italic}h1{margin:.67em 0;font-size:2em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}mark{background-color:#fdffb6}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;color:inherit;font:inherit}button{overflow:visible;border:none}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input:focus{outline:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}legend{padding:0;border:0}textarea{overflow:auto}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}html{overflow-y:scroll;font-size:62.5%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body,html{overflow-x:hidden}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}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:#daf2fd;font-weight:500;text-align:right}dd{margin:0 0 5px;text-align:left}blockquote{margin:1.5em 0;padding:0 1.6em;border-left:#daf2fd}blockquote p{margin:.8em 0;font-size:1.2em;font-weight:300}blockquote small{display:inline-block;margin:.8em 0 .8em 1.5em;font-size:.9em;opacity:.8}blockquote small:before{content:"\2014 \00A0"}blockquote cite{font-weight:700}blockquote cite a{font-weight:400}a{color:#15171a;text-decoration:none}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.15;font-weight:600;text-rendering:optimizeLegibility;letter-spacing:-.01em}h1{margin:0 0 .5em;font-size:4.8rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.8rem}}h2{margin:1.5em 0 .5em;font-size:2.8rem;font-weight:700}@media (max-width:600px){h2{font-size:2.3rem}}h3{margin:1.5em 0 .5em;font-size:1.8rem;font-weight:500}@media (max-width:600px){h3{font-size:1.7rem}}h4{margin:1.5em 0 .5em;font-size:1.6rem}h5,h6{margin:1.5em 0 .5em;font-size:1.4rem}
 /*# sourceMappingURL=global.css.map */

assets/css/global.css

@@ -423,7 +423,7 @@ h1 {
 }
 @media (max-width: 600px) {
     h1 {
-        font-size: 2.4rem;
+        font-size: 2.8rem;
     }
 }
 
@@ -434,7 +434,7 @@ h2 {
 }
 @media (max-width: 600px) {
     h2 {
-        font-size: 2.6rem;
+        font-size: 2.3rem;
     }
 }
 

assets/css/screen.css

@@ -15,7 +15,6 @@ production stylesheet in assets/built/screen.css
 7.  Single Post
   7.1. Post Byline
   7.2. Members Subscribe Form
-  7.3. Comments
   7.4. Related Posts
   7.5. Koenig Styles
 8.  Author Template
@@ -41,7 +40,7 @@ production stylesheet in assets/built/screen.css
     --color-midgrey: #738a94;
     --color-lightgrey: #c5d2d9;
     --color-wash: #e5eff5;
-    --color-darkmode: #1a1c20;
+    --color-darkmode: #151719;
 
     /*
     An accent color is also set by Ghost itself in
@@ -64,17 +63,12 @@ production stylesheet in assets/built/screen.css
 /* 2. Layout - Page building blocks
 /* ---------------------------------------------------------- */
 
-.site-wrapper {
+.viewport {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 }
 
-.site-main {
-    z-index: 100;
-    flex-grow: 1;
-}
-
 /* Full width page blocks */
 .outer {
     position: relative;
@@ -102,9 +96,8 @@ production stylesheet in assets/built/screen.css
 /* 4. Site Header
 /* ---------------------------------------------------------- */
 
-.site-header-background {
+.site-header {
     position: relative;
-    padding-bottom: 12px;
     color: #fff;
     background: var(--ghost-accent-color);
 }
@@ -191,10 +184,12 @@ production stylesheet in assets/built/screen.css
     overflow: hidden;
 }
 
-.site-home-header .site-header-content {
+.site-header-content {
-    padding: 5vw 3vw 6vw;
+    padding: 18vmin 4vmin;
     font-size: 2.5rem;
     font-weight: 400;
+    color: #fff;
+    background: var(--ghost-accent-color);
 }
 
 
@@ -232,228 +227,127 @@ production stylesheet in assets/built/screen.css
 /* 5. Site Navigation
 /* ---------------------------------------------------------- */
 
-.site-nav-main {
+.gh-head {
-    position: fixed;
+    padding: 1vmin 4vmin;
-    top: 0;
+    font-size: 1.6rem;
-    right: 0;
+    line-height: 1.3em;
-    left: 0;
+    color: #fff;
-    z-index: 1000;
     background: var(--ghost-accent-color);
 }
 
-.site-nav {
+.gh-head a {
-    position: relative;
+    color: inherit;
-    z-index: 100;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    overflow: hidden;
-    height: 68px;
-    font-size: 1.5rem;
-}
-
-.site-nav-left-wrapper {
-    position: relative;
-    flex: 1 0 auto;
-    display: flex;
-}
-
-.site-nav-left {
-    flex: 1 0 auto;
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
-    margin-right: 10px;
-    padding: 10px 0 80px;
-    font-weight: 500;
-    white-space: nowrap;
-
-    -ms-overflow-scrolling: touch;
-}
-
-.site-nav-left .nav li:last-of-type {
-    padding-right: 20px;
-}
-
-/* Site Nav Hack Explanation (above):
-
-What's happening above is .site-nav-left is set to overflow-x and
-allow sideways scrolling, so that when there isn't enough space for
-all nav items (either due to lots of nav items, or a small viewport),
-you can still scroll side-to-side to reach them. Also, there is a
-small gradient on the left and right side covering the menu so that
-the menu goes offscreen smoothly.
-
-The knock-on effect of this is ugly browser-scroll bars at the bottom,
-so 80px of padding-bottom and a 40px fixed height parent (.site-nav)
-hides that entirely. Slightly hacky code. But nice clean end-result.
-
-*/
-
-.site-nav-logo {
-    position: relative;
-    z-index: 100;
-    flex-shrink: 0;
-    display: inline-block;
-    margin-right: 32px;
-    padding: 12px 0;
-    color: #fff;
-    font-size: 1.7rem;
-    line-height: 1.8rem;
-    font-weight: bold;
-    letter-spacing: -0.5px;
-}
-
-.site-nav-logo:hover {
     text-decoration: none;
 }
 
-.site-nav-logo img {
+.gh-head-inner {
-    display: block;
+    display: grid;
-    width: auto;
+    grid-gap: 2.5vmin;
-    height: 21px;
+    grid-template-columns: auto auto 1fr;
+    grid-auto-flow: row dense;
 }
 
-.site-home-header .site-nav-logo {
-    display: none;
-}
 
-.site-nav-content {
+/* Brand
-    position: relative;
+/* ---------------------------------------------------------- */
-    align-self: flex-start;
-}
 
-.nav {
+.gh-head-brand {
-    position: absolute;
-    z-index: 1000;
     display: flex;
-    margin: 0 0 0 -12px;
+    align-items: center;
-    padding: 0;
+    height: 40px;
-    list-style: none;
+    max-width: 200px;
-    transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
+    text-align: center;
+    word-break: break-all;
 }
 
-.nav li {
+.gh-head-logo {
     display: block;
+    padding: 10px 0;
+    font-weight: 700;
+    font-size: 2rem;
+    line-height: 1.2em;
+    letter-spacing: -0.02em;
+}
+
+.gh-head-logo img {
+    max-height: 40px;
+}
+
+
+/* Primary Navigation
+/* ---------------------------------------------------------- */
+
+.gh-head-menu {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+}
+
+.gh-head-menu .nav {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
     margin: 0;
     padding: 0;
 }
 
-.nav li a {
+.gh-head-menu .nav li {
-    position: relative;
+    margin: 0 2.5vmin 0 0;
-    display: block;
+    padding: 0;
-    padding: 12px 12px;
-    color: #fff;
-    opacity: 0.75;
 }
 
-.nav li a:hover {
+.gh-head-menu .nav a {
-    text-decoration: none;
+    display: inline-block;
+    padding: 5px 0;
+    opacity: 0.8
+}
+
+.gh-head-menu .nav a:hover {
     opacity: 1;
 }
 
-.nav-post-title-active .nav {
-    visibility: hidden;
-    opacity: 0;
-    transform: translateY(-175%);
-}
 
-.nav-post-title {
+/* Secondary Navigation
-    visibility: hidden;
+/* ---------------------------------------------------------- */
-    position: absolute;
-    top: 9px;
-    color: #fff;
-    font-size: 1.7rem;
-    font-weight: 400;
-    opacity: 0;
-    transition: all 1.0s cubic-bezier(0.19, 1, 0.22, 1);
-    transform: translateY(175%);
-}
 
-.nav-post-title.dash {
+.gh-head-actions {
-    left: -25px;
-}
-
-.nav-post-title.dash:before {
-    content: "– ";
-    opacity: 0.5;
-}
-
-.nav-post-title-active .nav-post-title {
-    visibility: visible;
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.site-nav-right {
-    flex: 0 1 auto;
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    padding: 10px 0;
+    list-style: none;
-    height: 64px;
+    text-align: right;
 }
 
-.site-nav-right .nav {
+.gh-head-actions-list {
-    position: relative;
+    display: inline-flex;
-    margin: 0;
+    flex-wrap: wrap;
-}
+    justify-content: flex-end;
-
-.site-nav-right .nav a {
-    white-space: nowrap;
-}
-
-.site-nav-right .nav a:before {
-    display: none;
-}
-
-.site-nav-right .nav li:last-of-type a {
-    margin-right: -12px;
-}
-
-.social-links {
-    flex-shrink: 0;
-    display: flex;
     align-items: center;
 }
 
-.social-link {
+.gh-head-actions-list a:not([class]) {
     display: inline-block;
-    margin: 0;
+    margin: 0 0 0 1.5vmin;
-    padding: 10px;
+    padding: 5px 0;
-    opacity: 0.8;
 }
 
-.social-link:hover {
+.gh-social a {
-    opacity: 1.0;
+    margin: 0 1.5vmin 0 0;
+    opacity: 0.8
+}
+.gh-social a:hover {
+    opacity: 1;
 }
 
-.social-link svg {
+.gh-social svg {
-    height: 1.8rem;
+    height: 22px;
+    width: 22px;
     fill: #fff;
 }
 
-.social-link-fb svg {
+a.gh-head-button {
-    height: 1.6rem;
-}
-
-.social-link-wb svg {
-    height: 1.6rem;
-}
-
-.social-link-wb svg path {
-    stroke: #fff;
-}
-
-.social-link-rss svg {
-    height: 1.9rem;
-}
-
-.subscribe-button {
     display: block;
-    margin: 0 0 0 10px;
     padding: 8px 15px;
     color: var(--color-darkgrey);
     font-weight: 500;
@@ -464,59 +358,212 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
     border-radius: 30px;
 }
 
-.site-nav-right .nav + .subscribe-button {
+
-    margin-left: 24px;
+/* Mobile Menu Trigger
+/* ---------------------------------------------------------- */
+
+.gh-burger {
+    position: relative;
+    display: none;
+    cursor: pointer;
 }
 
-.rss-button {
+.gh-burger-box {
-    padding: 10px 8px;
+    position: relative;
-    opacity: 0.8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 33px;
+    height: 33px;
 }
 
-.rss-button:hover {
+.gh-burger-inner {
-    opacity: 1;
+    width: 100%;
+    height: 100%;
 }
 
-.rss-button svg {
+.gh-burger-box::before {
-    margin-bottom: 1px;
+    position: absolute;
-    height: 2.1rem;
+    display: block;
-    fill: #fff;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: currentcolor;
+    transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
+    will-change: transform, width;
 }
 
-/* Special behaviors for home navigation */
+.gh-burger-inner::before,
-
+.gh-burger-inner::after {
-.home-template .site-nav-main {
+    position: absolute;
-    z-index: 100;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: currentcolor;
+    transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
+    will-change: transform, width;
 }
 
-.home-template .site-nav-main .site-nav {
+.gh-burger-inner::before {
-    opacity: 0;
+    transform: translatey(-6px);
-    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
+}
+.gh-burger-inner::after {
+    transform: translatey(6px);
 }
 
-.home-template .site-nav-main .fixed-nav-active {
+body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::before {
-    opacity: 1;
+    transform: translatey(-8px);
-    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0.05s;
+}
+body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
+    transform: translatey(8px);
 }
 
-@media (max-width: 700px) {
+.gh-head-open .gh-burger-box::before {
-    .site-home-header .site-nav {
+    width: 0;
-        margin-left: -5vw;
+    transform: translatex(19px);
+    transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
+}
+
+.gh-head-open .gh-burger-inner::before {
+    width: 26px;
+    transform: translatex(6px) rotate(135deg);
+}
+
+.gh-head-open .gh-burger-inner::after {
+    width: 26px;
+    transform: translatex(6px) rotate(-135deg);
+}
+
+
+/* Mobile Menu
+/* ---------------------------------------------------------- */
+/* IDs needed to ensure sufficient specificity */
+
+@media (max-width: 900px) {
+    .gh-burger {
+        display: inline-block;
     }
-
+    #gh-head {
-    .site-nav-main {
+        transition: all 0.4s ease-out;
-        padding-right: 0;
+        overflow: hidden;
-        padding-left: 0;
     }
-
+    #gh-head .gh-head-inner {
-    .site-nav-left {
+        height: 100%;
-        margin-right: 0;
+        grid-template-columns: 1fr;
-        padding-left: 5vw;
     }
-
+    #gh-head .gh-head-brand {
-    .site-nav-right {
+        position: relative;
+        z-index: 10;
+        grid-column-start: auto;
+        max-width: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        user-select: none;
+    }
+    .home-template #gh-head .gh-head-brand {
+        justify-content: flex-end;
+    }
+    #gh-head .gh-head-logo {
+        font-size: 2rem;
+    }
+    #gh-head .gh-head-logo img {
+        max-height: 40px;
+    }
+    #gh-head .gh-head-menu {
+        align-self: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        margin: 0 0 10vh 0;
+        font-weight: 300;
+        font-size: 3.6rem;
+        line-height: 1.1em;
+    }
+    #gh-head .gh-head-menu .nav li {
+        margin: 5px 0;
+    }
+    #gh-head .gh-head-menu .nav a {
+        padding: 8px 0;
+    }
+    #gh-head .gh-head-menu .nav {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    #gh-head .gh-head-actions {
+        padding: 20px 0;
+        justify-content: center;
+        text-align: left;
+    }
+    #gh-head .gh-head-actions a {
+        margin: 0 10px;
+    }
+    /* Hide collapsed content */
+    #gh-head .gh-head-actions,
+    #gh-head .gh-head-menu {
         display: none;
     }
+    /* Open the menu */
+    .gh-head-open {
+        overflow: hidden;
+        height: 100vh;
+    }
+    .gh-head-open #gh-head {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 9999999;
+        overflow-y: scroll;
+    }
+    .gh-head-open #gh-head .gh-head-inner {
+        grid-template-rows: auto 1fr auto;
+    }
+    .gh-head-open #gh-head .gh-head-actions,
+    .gh-head-open #gh-head .gh-head-menu {
+        display: flex;
+    }
+}
+
+@media (max-width: 600px) {
+    #gh-head .gh-head-menu {
+        font-size: 6vmin;
+    }
+}
+
+.home-template .gh-head {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 2000;
+}
+
+.home-template .gh-head.has-cover {
+    background: transparent;
+}
+
+.home-template.gh-head-open .gh-head {
+    background: var(--ghost-accent-color);
+}
+
+.home-template .gh-head-logo {
+    display: none;
+}
+.home-template .gh-head-menu {
+    margin-left: -2.5vmin;
 }
 
 
@@ -796,8 +843,7 @@ make sure this only happens on large viewports / desktop-ish devices.
 /* ---------------------------------------------------------- */
 
 .article {
-    padding: calc(68px + 8vmin) 0 8vmin;
+    padding: 8vmin 0;
-    /* Add 68px to account for sticky navbar */
 }
 
 .article-header {
@@ -839,10 +885,9 @@ make sure this only happens on large viewports / desktop-ish devices.
     margin: 6vmin 0 0;
 }
 
-@media (max-width: 500px) {
+@media (max-width: 600px) {
     .article-excerpt {
-        font-size: 1.9rem;
+        font-size: 1.8rem;
-        line-height: 1.5em;
     }
 }
 
@@ -993,7 +1038,7 @@ is the very first element in the post content */
     .gh-content ul,
     .gh-content dl,
     .gh-content p {
-        font-size: 1.8rem;
+        font-size: 1.7rem;
     }
 
     .gh-content blockquote::before {
@@ -1216,7 +1261,9 @@ Ghost editor. */
     grid-column: main-start / main-end;
 }
 
-
+.article-comments {
+    margin: 6vmin 0 0 0;
+}
 
 /* -----old------ */
 
@@ -1356,33 +1403,44 @@ Ghost editor. */
     opacity: 0.15;
 }
 
-@media (max-width: 500px) {
-    .author-avatar {
-        width: 36px;
-        height: 36px;
-    }
 
-    .article-byline {
+/* 7.3. Subscribe
-        margin-top: 20px;
-    }
-
-    .article-byline-meta {
-        font-size: 1.2rem;
-    }
-
-    .article-byline-meta h4 {
-        margin-bottom: 2px;
-        font-size: 1.2rem;
-    }
-}
-
-
-/* 7.3. Comments
 /* ---------------------------------------------------------- */
 
-.post-full-comments {
+.footer-cta {
-    margin: 0 auto;
+    position: relative;
-    max-width: 840px;
+    padding: 9vmin 4vmin 10vmin;
+    color: #fff;
+    text-align: center;
+    background: var(--ghost-accent-color);
+}
+
+.footer-cta h2 {
+    margin: 0 0 30px;
+    transform: scale(1.15);
+}
+
+.footer-cta-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 500px;
+    padding: 5px 5px 5px 15px;
+    font-size: 1.8rem;
+    color: var(--color-midgrey);
+    background: #fff;
+    border-radius: 8px;
+}
+
+.footer-cta-button span {
+    display: inline-block;
+    padding: 10px 20px;
+    color: #fff;
+    font-weight: 500;
+    background: var(--ghost-accent-color);
+    border-radius: 5px;
 }
 
 
@@ -1673,7 +1731,7 @@ Ghost editor. */
     position: relative;
     margin: 40px 0 0 0;
     padding-top: 40px;
-    padding-bottom: 120px;
+    padding-bottom: 140px;
     color: #fff;
     background: color-mod(var(--color-darkgrey) l(-5%));
 }
@@ -1748,6 +1806,7 @@ to the html tag on the very first line of the file.
 
 html.dark-mode body {
     color: rgba(255, 255, 255, 0.75);
+    background: var(--color-darkmode);
 }
 
 html.dark-mode img {

author.hbs

@@ -1,55 +1,49 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
+
 {{#author}}
 {{!-- Everything inside the #author tags pulls data from the author --}}
 
-
+<div class="outer site-header-background no-image">
-<header class="site-archive-header">
+    <div class="inner">
-    <div class="outer site-nav-main">
+        <div class="site-header-content author-header">
-        <div class="inner">
+            {{#if profile_image}}
-            {{> "site-nav"}}
+            <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
-        </div>
+            {{else}}
-    </div>
+            <span class="author-profile-image">{{> "icons/avatar"}}</span>
-    <div class="outer site-header-background no-image">
+            {{/if}}
-        <div class="inner">
+            <div class="author-header-content">
-            <div class="site-header-content author-header">
+                <h1 class="site-title">{{name}}</h1>
-                {{#if profile_image}}
+                {{#if bio}}
-                    <img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" />
+                <h2 class="author-bio">{{bio}}</h2>
-                {{else}}
-                    <span class="author-profile-image">{{> "icons/avatar"}}</span>
                 {{/if}}
-                <div class="author-header-content">
+                <div class="author-meta">
-                    <h1 class="site-title">{{name}}</h1>
+                    {{#if location}}
-                    {{#if bio}}
+                    <div class="author-location">{{location}}</div>
-                        <h2 class="author-bio">{{bio}}</h2>
                     {{/if}}
-                    <div class="author-meta">
+                    <div class="author-stats">
-                        {{#if location}}
+                        {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
-                            <div class="author-location">{{location}}</div>
-                        {{/if}}
-                        <div class="author-stats">
-                            {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}
-                        </div>
-                        {{#if website}}
-                            <span class="author-social-link"><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
-                        {{/if}}
-                        {{#if twitter}}
-                            <span class="author-social-link"><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
-                        {{/if}}
-                        {{#if facebook}}
-                            <span class="author-social-link"><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
-                        {{/if}}
                     </div>
+                    {{#if website}}
+                    <span class="author-social-link"><a href="{{website}}" target="_blank" rel="noopener">Website</a></span>
+                    {{/if}}
+                    {{#if twitter}}
+                    <span class="author-social-link"><a href="{{twitter_url}}" target="_blank" rel="noopener">Twitter</a></span>
+                    {{/if}}
+                    {{#if facebook}}
+                    <span class="author-social-link"><a href="{{facebook_url}}" target="_blank" rel="noopener">Facebook</a></span>
+                    {{/if}}
                 </div>
             </div>
         </div>
     </div>
-</header>
+</div>
+
 {{/author}}
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer">
+<section class="outer">
     <div class="inner posts">
 
         <div class="post-feed">
@@ -62,4 +56,4 @@
         </div>
 
     </div>
-</main>
+</section>

default.hbs

@@ -19,27 +19,64 @@
 
 </head>
 <body class="{{body_class}}">
+<div class="viewport">
 
+    <header id="gh-head" class="gh-head {{#if @site.cover_image}}has-cover{{/if}}">
+        <nav class="gh-head-inner inner gh-container">
 
-    <div class="site-wrapper">
+            <div class="gh-head-brand">
+                <a class="gh-head-logo" href="{{@site.url}}">
+                    {{#if @site.logo}}
+                        <img src="{{@site.logo}}" alt="{{@site.title}}" />
+                    {{else}}
+                        {{@site.title}}
+                    {{/if}}
+                </a>
+                <a class="gh-burger" role="button">
+                    <div class="gh-burger-box">
+                        <div class="gh-burger-inner"></div>
+                    </div>
+                </a>
+            </div>
+            <div class="gh-head-menu">
+                {{navigation}}
+            </div>
+            <div class="gh-head-actions">
+                <div class="gh-social">
+                    {{#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">Subscribe</a>
+                {{else}}
+                    <a class="gh-head-button" href="#/portal/account">Account</a>
+                {{/unless}}
+            </div>
+        </nav>
+    </header>
+
+    <main>
         {{!-- All other templates get inserted here, index.hbs, post.hbs, etc --}}
         {{{body}}}
+    </main>
 
-        {{!-- The global footer at the very bottom of the screen --}}
+    {{!-- The global footer at the very bottom of the screen --}}
-        <footer class="site-footer outer">
+    <footer class="site-footer outer">
-            <div class="site-footer-content inner">
+        <div class="site-footer-content inner">
-                <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
+            <section class="copyright"><a href="{{@site.url}}">{{@site.title}}</a> &copy; {{date format="YYYY"}}</section>
-                <nav class="site-footer-nav">
+            <nav class="site-footer-nav">
-                    <a href="{{@site.url}}">Latest Posts</a>
+                <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.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}}
+                {{#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">Powered by Ghost</a>
+                <a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a>
-                </nav>
+            </nav>
-            </div>
+        </div>
-        </footer>
+    </footer>
 
-    </div>
+</div>
+{{!-- /.viewport --}}
 
 
 {{!-- Scripts - handle member signups, responsive videos, infinite scroll, floating headers, and galleries --}}
@@ -50,40 +87,12 @@
 </script>
 <script src="{{asset "built/casper.js"}}"></script>
 <script>
-    // Parse the URL parameter
+$(document).ready(function () {
-    function getParameterByName(name, url) {
+    // Mobile Menu Trigger
-        if (!url) url = window.location.href;
+    $('.gh-burger').click(function () {
-        name = name.replace(/[\[\]]/g, "\\$&");
+        $('body').toggleClass('gh-head-open');
-        var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-            results = regex.exec(url);
-        if (!results) return null;
-        if (!results[2]) return '';
-        return decodeURIComponent(results[2].replace(/\+/g, " "));
-    }
-
-    // Give the parameter a variable name
-    var action = getParameterByName('action');
-    var success = getParameterByName('success');
-
-    $(document).ready(function () {
-        if (action == 'subscribe' && (success === null || success === 'true')) {
-            $('body').addClass('subscribe-success');
-        }
-
-        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
-        $('.subscribe-button').click(function() {
-            $('.subscribe-overlay form').removeClass();
-            $('.subscribe-email').val('');
-        });
     });
+});
 </script>
 
 {{!-- Ghost outputs required functional scripts with this tag - it should always be the last thing before the closing body tag --}}

error-404.hbs

@@ -1,3 +1,5 @@
+{{!< default}}
+
 {{!--
 
 There are two error files in this theme, one for 404s and one for all other errors.
@@ -10,19 +12,7 @@ Keep this template as lightweight as you can!
 
 --}}
 
-{{!< default}}
+<section class="outer error-content">
-{{!-- The tag above means: insert everything in this file
-into the {body} of the default.hbs template --}}
-
-<header class="site-header">
-    <div class="outer site-nav-main">
-        <div class="inner">
-            {{> "site-nav"}}
-        </div>
-    </div>
-</header>
-
-<main id="site-main" class="site-main outer error-content">
     <div class="inner">
         <section class="error-message">
             <h1 class="error-code">{{statusCode}}</h1>
@@ -38,4 +28,4 @@ into the {body} of the default.hbs template --}}
             </div>
         {{/get}}
     </div>
-</main>
+</section>

error.hbs

@@ -40,7 +40,7 @@ Keep this template as lightweight as you can!
             </div>
         </header>
 
-        <main id="site-main" class="site-main outer error-content">
+        <main class="outer error-content">
             <div class="inner">
 
                 <section class="error-message">

index.hbs

@@ -2,36 +2,29 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} of the default.hbs template --}}
 
-<header class="site-home-header">
+<div class="site-header-content">
-    <div class="outer site-header-background">
+    {{#if @site.cover_image}}
-        {{#if @site.cover_image}}
+        {{!-- This is a responsive image, it loads different sizes depending on device
-            {{!-- 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 --}}
-            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+        <img class="site-header-cover"
-            <img class="site-header-cover"
+            srcset="{{img_url @site.cover_image size="s"}} 300w,
-                srcset="{{img_url @site.cover_image size="s"}} 300w,
+                    {{img_url @site.cover_image size="m"}} 600w,
-                        {{img_url @site.cover_image size="m"}} 600w,
+                    {{img_url @site.cover_image size="l"}} 1000w,
-                        {{img_url @site.cover_image size="l"}} 1000w,
+                    {{img_url @site.cover_image size="xl"}} 2000w"
-                        {{img_url @site.cover_image size="xl"}} 2000w"
+            sizes="100vw"
-                sizes="100vw"
+            src="{{img_url @site.cover_image size="xl"}}"
-                src="{{img_url @site.cover_image size="xl"}}"
+            alt=""
-                alt=""
+        />
-            />
+    {{/if}}
+    <h1 class="site-title">
+        {{#if @site.logo}}
+            <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
+        {{else}}
+            {{@site.title}}
         {{/if}}
-        <div class="inner">
+    </h1>
-            {{> "site-nav"}}
+    <p>{{@site.description}}</p>
-            <div class="site-header-content">
+</div>
-                <h1 class="site-title">
-                    {{#if @site.logo}}
-                        <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
-                    {{else}}
-                        {{@site.title}}
-                    {{/if}}
-                </h1>
-                <p>{{@site.description}}</p>
-            </div>
-        </div>
-    </div>
-</header>
 
 {{!-- The main content area --}}
 <main id="site-main" class="site-main outer">
@@ -49,11 +42,6 @@ into the {body} of the default.hbs template --}}
     </div>
 </main>
 
-<div class="outer site-nav-main">
-    <div class="inner">
-        {{> "site-nav"}}
-    </div>
-</div>
 
 {{!-- Scripts - Sticky behaviour for the header/nav when scrolling --}}
 <script>

page.hbs

@@ -3,14 +3,6 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} tag of the default.hbs template --}}
 
-<header class="site-header">
-    <div class="outer site-nav-main">
-        <div class="inner">
-            {{> "site-nav"}}
-        </div>
-    </div>
-</header>
-
 
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the page --}}

post.hbs

@@ -3,14 +3,6 @@
 {{!-- The tag above means: insert everything in this file
 into the {body} tag of the default.hbs template --}}
 
-<header class="site-header">
-    <div class="outer site-nav-main">
-        <div class="inner">
-            {{> "site-nav"}}
-        </div>
-    </div>
-</header>
-
 
 {{#post}}
 {{!-- Everything inside the #post block pulls data from the post --}}
@@ -78,21 +70,34 @@ into the {body} tag of the default.hbs template --}}
     </section>
 
     {{!--
-
+    <section class="article-comments gh-canvas">
-    <section class="post-full-comments">
+        If you want to embed comments, this is a good place to paste your code!
-        If you want to embed comments, this is a good place to do it!
     </section>
-
     --}}
 
 </article>
 
+{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
+{{#unless @member}}
+<section class="footer-cta">
+    <div class="inner">
+        <h2>Sign up for more like this.</h2>
+        <a class="footer-cta-button" href="#/portal">
+            <div>Enter your email</div>
+            <span>Subscribe</span>
+        </a>
+        {{!-- ^ This looks like a form element, but it's just a link to Portal,
+        making the form validation and submission much simpler. --}}
+    </div>
+</section>
+{{/unless}}
+
 
 {{!-- Read more links, just above the footer --}}
 <aside class="read-more-wrap">
     <div class="read-more inner">
 
-        {{!-- The {#get} helper fetches some of the latest posts here
+        {{!-- The {#get} helper below fetches some of the latest posts here
         so that people have something else to read when they finish this one.
 
         This query gets the latest 3 posts on the site, but adds a filter to

tag.hbs

@@ -1,30 +1,24 @@
 {{!< default}}
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
+
 {{#tag}}
-<header class="site-archive-header">
+<div class="outer">
-    <div class="outer site-nav-main">
+    <div class="inner site-header-content">
-        <div class="inner">
+        <h1 class="site-title">{{name}}</h1>
-            {{> "site-nav"}}
+        <h2 class="site-description">
-        </div>
+            {{#if description}}
+            {{description}}
+            {{else}}
+            A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
+            {{/if}}
+        </h2>
     </div>
-    <div class="outer site-header-background">
+</div>
-        <div class="inner site-header-content">
-            <h1 class="site-title">{{name}}</h1>
-            <h2 class="site-description">
-                {{#if description}}
-                {{description}}
-                {{else}}
-                A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
-                {{/if}}
-            </h2>
-        </div>
-    </div>
-</header>
 {{/tag}}
 
 {{!-- The main content area --}}
-<main id="site-main" class="site-main outer">
+<section class="outer">
     <div class="inner posts">
         <div class="post-feed">
             {{#foreach posts}}
@@ -33,4 +27,4 @@
             {{/foreach}}
         </div>
     </div>
-</main>
+</section>