Cleanup

.github/ISSUE_TEMPLATE.md

@@ -1,19 +0,0 @@
-Do you need help or have a question? Please come chat in our forum: https://forum.ghost.org 👫.
-
-If you're filing a bug 🐛, please include the following information:
-
-### Screenshot
-
-![]()
-
-### Steps to Reproduce
- 
- 1. This is the first step
- 2. This may be the post content used to cause an issue...
-
-### Technical details
-
-* Casper Version:
-* Ghost Version:
-* Browser Version:
-* OS Version:

.github/workflows/deploy-theme.yml

@@ -1,16 +0,0 @@
-name: Deploy Theme
-on:
-  push:
-    branches:
-      - master
-      - main
-jobs:
-  deploy:
-    runs-on: ubuntu-18.04
-    steps:
-      - 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 }}
-          theme-name: "casper-master"

.github/workflows/test.yml

@@ -1,15 +0,0 @@
-name: Test
-on:
-  pull_request:
-  push:
-    branches:
-      - master
-      - 'renovate/*'
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    if: github.event_name == 'push' || (github.event_name == 'pull_request' && !startsWith(github.head_ref, 'renovate/'))
-    steps:
-      - uses: actions/checkout@v2
-      - run: yarn
-      - run: yarn test:ci

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:#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:5rem;font-weight:700;letter-spacing:-.015em}@media (max-width:600px){h1{font-size:2.2rem}}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.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}
 /*# sourceMappingURL=global.css.map */

assets/css/global.css

@@ -109,6 +109,7 @@ table {
 }
 img {
     max-width: 100%;
+    height: auto;
 }
 html {
     box-sizing: border-box;
@@ -416,13 +417,13 @@ h6 {
 
 h1 {
     margin: 0 0 0.5em 0;
-    font-size: 5rem;
+    font-size: 4.8rem;
     font-weight: 700;
     letter-spacing: -0.015em;
 }
 @media (max-width: 600px) {
     h1 {
-        font-size: 2.2rem;
+        font-size: 2.4rem;
     }
 }
 

assets/css/screen.css

@@ -104,14 +104,23 @@ production stylesheet in assets/built/screen.css
 
 .site-header-background {
     position: relative;
-    margin-top: 64px;
     padding-bottom: 12px;
     color: #fff;
-    background: var(--ghost-accent-color) no-repeat center center;
+    background: var(--ghost-accent-color);
-    background-size: cover;
 }
 
-.site-header-background:before {
+.site-header-cover {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.site-header-cover:before {
     content: "";
     position: absolute;
     top: 0;
@@ -123,7 +132,7 @@ production stylesheet in assets/built/screen.css
     background: rgba(0,0,0,0.18);
 }
 
-.site-header-background:after {
+.site-header-cover:after {
     content: "";
     position: absolute;
     top: 0;
@@ -133,15 +142,11 @@ production stylesheet in assets/built/screen.css
     z-index: 10;
     display: block;
     height: 140px;
-    background: linear-gradient(rgba(0,0,0,0.15),rgba(0,0,0,0));
+    background: linear-gradient(rgba(0,0,0,0.95),rgba(0,0,0,0));
-}
-
-.site-header-background.no-image:before,
-.site-header-background.no-image:after {
-    display: none;
 }
 
 .site-header-content {
+    position: relative;
     z-index: 100;
     display: flex;
     flex-direction: column;
@@ -150,55 +155,46 @@ production stylesheet in assets/built/screen.css
     padding: 6vw 3vw;
     min-height: 200px;
     max-height: 340px;
+    text-align: center;
 }
 
 .site-title {
     z-index: 10;
-    margin: 0 0 0 -2px;
+    margin: 0 0 0.15em;
     padding: 0;
-    font-size: 5.0rem;
-    line-height: 1em;
-    font-weight: 600;
 }
 
 .site-logo {
     max-height: 55px;
 }
 
-.site-description {
+.site-header-content p {
-    z-index: 10;
+    max-width: 600px;
-    margin: 0;
+    margin: 0 auto;
-    padding: 5px 0;
+    line-height: 1.2em;
-    font-size: 2.1rem;
-    line-height: 1.4em;
-    font-weight: 400;
     opacity: 0.8;
 }
 
+@media (max-width: 600px) {
+    .site-header-content p {
+        max-width: 80vmin;
+        font-size: 1.8rem;
+    }
+}
+
 /* 4.1 Home header
 /* ---------------------------------------------------------- */
 
 .site-home-header {
+    position: relative;
     z-index: 1000;
-}
+    overflow: hidden;
-
-.site-home-header .site-header-background {
-    margin-top: 0;
 }
 
 .site-home-header .site-header-content {
     padding: 5vw 3vw 6vw;
-}
+    font-size: 2.5rem;
-
+    font-weight: 400;
-.site-home-header .site-title {
-    font-size: 5.5rem;
-    text-align: center;
-}
-
-.site-home-header .site-description {
-    font-size: 2.2rem;
-    font-weight: 300;
-    text-align: center;
 }
 
 
@@ -232,39 +228,6 @@ production stylesheet in assets/built/screen.css
 }
 
 
-/* Special header styles for smaller screens */
-
-@media (max-width: 900px) {
-    .site-header-content {
-        padding-bottom: 9vw;
-    }
-}
-
-@media (max-width: 500px) {
-    .site-home-header .site-title {
-        font-size: 4.2rem;
-    }
-
-    .site-home-header .site-description {
-        font-size: 1.8rem;
-    }
-
-    .site-archive-header .site-header-content {
-        flex-direction: column;
-        align-items: center;
-        min-height: unset;
-    }
-
-    .site-archive-header .site-title {
-        font-size: 4.2rem;
-        text-align: center;
-    }
-
-    .site-archive-header .no-image .site-header-content {
-        padding: 12vw 0 20px;
-    }
-}
-
 
 /* 5. Site Navigation
 /* ---------------------------------------------------------- */
@@ -383,7 +346,7 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
     display: block;
     padding: 12px 12px;
     color: #fff;
-    opacity: 0.7;
+    opacity: 0.75;
 }
 
 .nav li a:hover {
@@ -491,18 +454,14 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
 .subscribe-button {
     display: block;
     margin: 0 0 0 10px;
-    padding: 5px 10px;
+    padding: 8px 15px;
-    border: #fff 1px solid;
+    color: var(--color-darkgrey);
-    color: #fff;
+    font-weight: 500;
-    font-size: 1.3rem;
+    letter-spacing: -0.015em;
+    font-size: 1.5rem;
     line-height: 1em;
-    border-radius: 5px;
+    background: #fff;
-    opacity: 0.8;
+    border-radius: 30px;
-}
-
-.subscribe-button:hover {
-    text-decoration: none;
-    opacity: 1;
 }
 
 .site-nav-right .nav + .subscribe-button {
@@ -564,10 +523,6 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
 /* 6. Post Feed
 /* ---------------------------------------------------------- */
 
-.posts {
-    overflow-x: hidden;
-}
-
 .post-feed {
     position: relative;
     display: grid;
@@ -593,7 +548,6 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
     flex: 1 1 301px;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
     min-height: 220px;
     background-size: cover;
 }
@@ -665,7 +619,7 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
     color: color-mod(var(--color-midgrey) l(-8%));
 }
 
-.post-card:not(.post-card-large) .post-card-excerpt p {
+.post-card-excerpt p {
     margin-bottom: 1em;
     display: -webkit-box;
     overflow-y: hidden;
@@ -716,17 +670,17 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
     margin: 0 0 0 -6px;
     width: 36px;
     height: 36px;
-    border: #fff 2px solid;
     border-radius: 100%;
+    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
 }
 
 .post-card-byline-content {
     flex: 1 1 50%;
     display: flex;
     flex-direction: column;
-    margin: 0 0 0 6px;
+    margin: 0 0 0 8px;
     color: color-mod(var(--color-midgrey) l(+10%));
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     line-height: 1.2em;
     font-weight: 400;
 }
@@ -736,17 +690,18 @@ hides that entirely. Slightly hacky code. But nice clean end-result.
 }
 
 .post-card-byline-content a {
-    color: color-mod(var(--color-darkgrey) l(+20%));
+    color: color-mod(var(--color-darkgrey) l(+15%));
     font-weight: 600;
 }
 
 .post-card-byline-date {
-    font-size: 1.2rem;
+    font-size: 1.3rem;
+    line-height: 1.5em;
 }
 
 .post-card-byline-date .bull {
     display: inline-block;
-    margin: 0 4px;
+    margin: 0 2px;
     opacity: 0.6;
 }
 
@@ -821,6 +776,7 @@ make sure this only happens on large viewports / desktop-ish devices.
         margin-bottom: 1.5em;
         font-size: 1.7rem;
         line-height: 1.55em;
+        -webkit-line-clamp: 8;
     }
 }
 
@@ -947,13 +903,14 @@ headings, text, images and lists. We deal with cards lower down. */
 }
 
 /* [id] represents all headings h1-h6, reset all margins */
-.gh-content [id] {
+.gh-content > [id] {
     margin: 0;
+    color: var(--color-darkgrey);
 }
 
 /* Add back a top margin to all headings, unless a heading
 is the very first element in the post content */
-.gh-content [id]:not(:first-child) {
+.gh-content > [id]:not(:first-child) {
     margin: 2em 0 0;
 }
 
@@ -963,12 +920,12 @@ is the very first element in the post content */
 }
 
 /* A larger margin before/after HRs and blockquotes */
-.gh-content hr,
+.gh-content > hr,
-.gh-content blockquote {
+.gh-content > blockquote {
     margin-top: 6vmin;
 }
-.gh-content hr + *,
+.gh-content > hr + *,
-.gh-content blockquote + * {
+.gh-content > blockquote + * {
     margin-top: 6vmin !important;
 }
 
@@ -1357,21 +1314,13 @@ Ghost editor. */
 
 .article-byline-meta {
     color: color-mod(var(--color-midgrey));
-    font-size: 1.3rem;
+    font-size: 1.4rem;
     line-height: 1.2em;
 }
 
 .article-byline-meta h4 {
     margin: 0 0 3px;
-    font-size: 1.5rem;
+    font-size: 1.6rem;
-}
-
-.article-byline-meta h4 a {
-    color: color-mod(var(--color-darkgrey));
-}
-
-.article-byline-meta h4 a:hover {
-    color: var(--color-darkgrey);
 }
 
 .article-byline-meta .bull {
@@ -1384,8 +1333,8 @@ Ghost editor. */
     display: block;
     overflow: hidden;
     margin: 0 -4px;
-    width: 40px;
+    width: 50px;
-    height: 40px;
+    height: 50px;
     border: #fff 2px solid;
     border-radius: 100%;
     transition: all 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99) 700ms;
@@ -1805,10 +1754,6 @@ html.dark-mode img {
     opacity: 0.9;
 }
 
-html.dark-mode .site-header-background:before {
-    background: rgba(0,0,0,0.6);
-}
-
 html.dark-mode .post-card,
 html.dark-mode .post-card:hover {
     border-bottom-color: color-mod(var(--color-darkmode) l(+8%));
@@ -1838,11 +1783,6 @@ html.dark-mode .post-card-excerpt {
     color: color-mod(var(--color-midgrey) l(+10%));
 }
 
-html.dark-mode .author-avatar,
-html.dark-mode .static-avatar {
-    border-color: color-mod(var(--color-darkgrey) l(+2%));
-}
-
 html.dark-mode .post-full-content {
     background: var(--color-darkmode);
 }

author.hbs

@@ -11,7 +11,7 @@
             {{> "site-nav"}}
         </div>
     </div>
-    {{> header-background background=cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="outer site-header-background no-image">
         <div class="inner">
             <div class="site-header-content author-header">
                 {{#if profile_image}}

index.hbs

@@ -3,18 +3,31 @@
 into the {body} of the default.hbs template --}}
 
 <header class="site-home-header">
-    {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="outer site-header-background">
+        {{#if @site.cover_image}}
+            {{!-- This is a responsive image, it loads different sizes depending on device
+            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+            <img class="site-header-cover"
+                srcset="{{img_url @site.cover_image size="s"}} 300w,
+                        {{img_url @site.cover_image size="m"}} 600w,
+                        {{img_url @site.cover_image size="l"}} 1000w,
+                        {{img_url @site.cover_image size="xl"}} 2000w"
+                sizes="100vw"
+                src="{{img_url @site.cover_image size="xl"}}"
+                alt=""
+            />
+        {{/if}}
         <div class="inner">
             {{> "site-nav"}}
             <div class="site-header-content">
                 <h1 class="site-title">
                     {{#if @site.logo}}
-                        <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
+                        <img class="site-logo" src="{{img_url @site.logo size="m"}}" alt="{{@site.title}}" />
                     {{else}}
                         {{@site.title}}
                     {{/if}}
                 </h1>
-                <h2 class="site-description">{{@site.description}}</h2>
+                <p>{{@site.description}}</p>
             </div>
         </div>
     </div>

partials/header-background.hbs

@@ -1,47 +0,0 @@
-{{!--
-Wow what the hell is going on in here even?
-
-Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
-have a heavy impact on performance, so it's a good idea to make them responsive. Because we
-can only get the image dynamically using Handlebars, and we can only set the image to properly
-be a background image using CSS, we end up with a handful of inline styles.
-
-If the template in question has a background image, then we render responsive image styles
-for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
-with a `no-image` class so we can style it accordingly.
---}}
-
-{{#if background}}
-
-<style type="text/css">
-    .responsive-header-img {
-        background-image: url({{img_url background size='xl'}});
-    }
-
-    @media(max-width: 1000px) {
-        .responsive-header-img {
-            background-image: url({{img_url background size='l'}});
-            background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
-                url({{img_url background size='xl'}}) 2x);
-            background-image: image-set(url({{img_url background size='l'}}) 1x,
-                url({{img_url background size='xl'}}) 2x);
-        }
-    }
-
-    @media(max-width: 600px) {
-        .responsive-header-img {
-            background-image: url({{img_url background size='m'}});
-            background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
-                url({{img_url background size='l'}}) 2x);
-            background-image: image-set(url({{img_url background size='m'}}) 1x,
-                url({{img_url background size='l'}}) 2x);
-        }
-    }
-</style>
-<div class="outer site-header-background responsive-header-img">
-
-{{else}}
-
-<div class="outer site-header-background no-image">
-
-{{/if}}

partials/site-nav.hbs

@@ -21,18 +21,14 @@
             {{navigation type="secondary"}}
         {{else}}
             <div class="social-links">
-                {{#if @site.facebook}}
-                    <a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
-                {{/if}}
                 {{#if @site.twitter}}
                     <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
                 {{/if}}
             </div>
-            <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank" rel="noopener">{{> "icons/rss"}}</a>
         {{/if}}
 
         {{#unless @member}}
-            <a class="subscribe-button" href="#subscribe">Subscribe</a>
+            <a class="subscribe-button" href="#/portal">Subscribe</a>
         {{else}}
             <a class="subscribe-button" href="#/portal/account">Account</a>
         {{/unless}}

post.hbs

@@ -98,7 +98,7 @@ into the {body} tag of the default.hbs template --}}
         This query gets the latest 3 posts on the site, but adds a filter to
         exclude the post we're currently on from being included. --}}
 
-        {{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
+        {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}
             {{#if more_posts}}
                 {{#foreach more_posts}}
                     {{> "post-card"}}
@@ -109,6 +109,7 @@ into the {body} tag of the default.hbs template --}}
     </div>
 </aside>
 
+
 {{/post}}
 
 

tag.hbs

@@ -8,7 +8,7 @@
             {{> "site-nav"}}
         </div>
     </div>
-    {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
+    <div class="outer site-header-background">
         <div class="inner site-header-content">
             <h1 class="site-title">{{name}}</h1>
             <h2 class="site-description">