v5.1.5

assets/css/screen.css

@@ -117,13 +117,13 @@ production stylesheet in assets/built/screen.css
     color: var(--color-darkgrey);
 }
 
-.has-cover-image .site-header-content {
+.has-cover .site-header-content {
     min-height: 560px;
     background-color: var(--ghost-accent-color);
     color: #fff;
 }
 
-body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
+body:not(.has-cover) .site-header-content:not(.left-aligned) {
     padding-bottom: max(4.8vmin, 24px);
 }
 
@@ -132,7 +132,7 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     text-align: left;
 }
 
-.has-cover-image .site-header-content.left-aligned {
+.has-cover .site-header-content.left-aligned {
     align-items: flex-end;
     padding-bottom: 6.4vmin;
 }
@@ -173,7 +173,7 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     font-family: var(--font-serif);
 }
 
-.has-cover-image .site-title {
+.has-cover .site-title {
     font-size: 6rem;
 }
 
@@ -181,7 +181,7 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     font-size: 4.4rem;
 }
 
-.has-cover-image .site-header-content.left-aligned .site-title {
+.has-cover .site-header-content.left-aligned .site-title {
     font-size: 4.6rem;
 }
 
@@ -208,22 +208,22 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     color: var(--color-secondary-text);
 }
 
-.has-cover-image .site-description {
+.has-cover .site-description {
     font-size: 3.2rem;
     letter-spacing: -0.005em;
     color: #fff;
 }
 
-.has-cover-image :is(.site-logo, .site-title) + .site-description {
+.has-cover :is(.site-logo, .site-title) + .site-description {
     font-size: 2.4rem;
 }
 
-.has-cover-image .site-header-content.left-aligned :is(.site-logo, .site-title) + .site-description {
+.has-cover .site-header-content.left-aligned :is(.site-logo, .site-title) + .site-description {
     font-size: 2.2rem;
 }
 
 @media (max-width: 767px) {
-    .has-cover-image .site-header-content {
+    .has-cover .site-header-content {
         padding-bottom: 36px;
         min-height: 240px;
     }
@@ -259,12 +259,12 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     background-color: #fff;
 }
 
-.has-cover-image:not(.home-template) .gh-head {
+.has-cover:not(.home-template) .gh-head {
     background-color: var(--ghost-accent-color);
     color: #fff;
 }
 
-.home-template.has-cover-image .gh-head {
+.home-template.has-cover .gh-head {
     position: absolute;
     top: 0;
     right: 0;
@@ -309,7 +309,7 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     margin-top: -2px;
 }
 
-.has-cover-image .gh-head-logo {
+.has-cover .gh-head-logo {
     color: #fff;
 }
 
@@ -357,14 +357,39 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     color: inherit;
 }
 
+.gh-head-menu .nav a:hover {
+    opacity: 0.9;
+}
+
 
 /* Secondary Navigation
 /* ---------------------------------------------------------- */
 
+.gh-social {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.gh-social-link {
+    line-height: 0;
+    color: inherit;
+}
+
+.gh-social-link:hover {
+    opacity: 0.9;
+}
+
+.gh-social-link svg {
+    width: 18px;
+    height: 18px;
+}
+
 .gh-head-actions {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    gap: 24px;
     list-style: none;
     text-align: right;
 }
@@ -382,7 +407,7 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     background: var(--ghost-accent-color);
 }
 
-.has-cover-image .gh-head-button {
+.has-cover .gh-head-button {
     color: var(--color-darkgrey);
     background: #fff;
 }
@@ -406,7 +431,7 @@ body:not(.has-cover-image) .site-header-content:not(.left-aligned) {
     height: 33px;
 }
 
-.has-cover-image .gh-burger-box {
+.has-cover .gh-burger-box {
     color: #fff;
 }
 
@@ -524,13 +549,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
         font-weight: 500;
     }
     #gh-head .gh-head-actions {
-        padding: 20px 0;
+        flex-direction: column-reverse;
         justify-content: center;
+        padding: 20px 0 32px;
         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 {
@@ -565,7 +588,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     }
 }
 
-.has-cover-image.gh-head-open .gh-head {
+.has-cover.gh-head-open .gh-head {
     background: var(--ghost-accent-color);
 }
 
@@ -609,6 +632,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
 
 .post-card-image-link {
     position: relative;
+    overflow: hidden;
     display: block;
     margin-bottom: 32px;
 }
@@ -619,8 +643,19 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding-bottom: 55%;
 }
 
+.post-card[class*="post-access-"] .post-card-image-link::after {
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(3px);
+}
+
+.post-card.keep-ratio[class*="post-access-"] .post-card-image-link::after {
+    position: absolute;
+    inset: 0;
+    padding-bottom: 0;
+}
+
 .post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
-    display: none;
+    padding-bottom: 0;
 }
 
 .post-card-image {
@@ -636,6 +671,19 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     position: static;
 }
 
+.post-card-access {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #fff;
+}
+
 .post-card-content-link {
     position: relative;
     display: block;
@@ -654,7 +702,10 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     margin-top: 0;
 }
 
-.post-card-primary-tag {
+.post-card-tags {
+    display: flex;
+    align-items: center;
+    gap: 12px;
     margin: 0 0 10px;
     color: var(--color-secondary-text);
     font-size: 1.4rem;
@@ -663,12 +714,30 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     line-height: 1;
 }
 
+.post-card-featured {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    padding-left: 18px;
+    color: var(--ghost-accent-color);
+}
+
+.post-card-featured svg {
+    position: absolute;
+    left: 0;
+}
+
 .post-card-title {
     margin: 0;
     font-size: 2.6rem;
     font-weight: 800;
 }
 
+.post-card-content-link:hover .post-card-title {
+    opacity: 0.9;
+}
+
 .no-image .post-card-title {
     margin-top: 0;
 }
@@ -678,6 +747,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     letter-spacing: -0.005em;
 }
 
+.post-card-title svg {
+    margin-top: -3px;
+    margin-left: -1px;
+}
+
 .post-card-content {
     flex-grow: 1;
     display: flex;
@@ -788,7 +862,7 @@ make sure this only happens on large viewports / desktop-ish devices.
         height: 100%;
     }
 
-    .post-card-large .post-card-primary-tag {
+    .post-card-large .post-card-tags {
         margin-bottom: 12px;
     }
 
@@ -810,7 +884,7 @@ make sure this only happens on large viewports / desktop-ish devices.
         margin-bottom: 40px;
     }
 
-    .post-card-full .post-card-primary-tag {
+    .post-card-full .post-card-tags {
         margin-bottom: 14px;
     }
 
@@ -936,7 +1010,7 @@ use it for applying any other styles. */
             [wide-start]
             minmax(auto, 240px)
                 [main-start]
-                    min(720px, calc(100% - 8vw))
+                    min(720px, calc(100% - max(8vmin, 40px)))
                 [main-end]
             minmax(auto, 240px)
             [wide-end]
@@ -1273,10 +1347,9 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 /* Tables */
-.post-full-content table {
+.gh-content table {
     display: inline-block;
     overflow-x: auto;
-    margin: 0.5em 0 2.5em;
     max-width: 100%;
     width: auto;
     border-spacing: 0;
@@ -1287,7 +1360,7 @@ iframe.instagram-media + script + :not([id]) {
     vertical-align: top;
 }
 
-.post-full-content table {
+.gh-content table {
     -webkit-overflow-scrolling: touch;
     background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
     background-attachment: scroll, scroll;
@@ -1295,20 +1368,20 @@ iframe.instagram-media + script + :not([id]) {
     background-repeat: no-repeat;
 }
 
-.post-full-content table td:first-child {
+.gh-content table td:first-child {
     background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
     background-size: 20px 100%;
     background-repeat: no-repeat;
 }
 
-.post-full-content table td:last-child {
+.gh-content table td:last-child {
     background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
     background-position: 100% 0;
     background-size: 20px 100%;
     background-repeat: no-repeat;
 }
 
-.post-full-content table th {
+.gh-content table th {
     color: var(--color-darkgrey);
     font-size: 1.2rem;
     font-weight: 700;
@@ -1318,8 +1391,8 @@ iframe.instagram-media + script + :not([id]) {
     background-color: color-mod(var(--color-wash) l(+4%));
 }
 
-.post-full-content table th,
-.post-full-content table td {
+.gh-content table th,
+.gh-content table td {
     padding: 6px 12px;
     border: color-mod(var(--color-wash) l(-1%) s(-5%)) 1px solid;
 }
@@ -1355,6 +1428,7 @@ iframe.instagram-media + script + :not([id]) {
     margin: 0 0 6px;
     font-size: 1.7rem;
     font-weight: 700;
+    letter-spacing: 0;
 }
 
 .article-byline-meta .bull {
@@ -1441,6 +1515,10 @@ iframe.instagram-media + script + :not([id]) {
 /* ---------------------------------------------------------- */
 
 .read-more-wrap {
+    margin-top: 2.4vmin;
+}
+
+.footer-cta + .read-more-wrap {
     margin-top: max(12vmin, 72px);
 }
 
@@ -1450,6 +1528,10 @@ iframe.instagram-media + script + :not([id]) {
     grid-gap: 4vmin;
 }
 
+.read-more .post-card-tags {
+    display: none;
+}
+
 @media (max-width: 1000px) {
     .read-more {
         grid-template-columns: repeat(4, 1fr);
@@ -1714,10 +1796,14 @@ html.dark-mode .post-card-image {
     background: var(--color-darkmode);
 }
 
-html.dark-mode :is(.post-card-primary-tag, .post-card-meta, .article-tag a, .byline-meta-content) {
+html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
     color: color-mod(var(--color-secondary-text) l(-22%));
 }
 
+html.dark-mode .post-card-featured {
+    color: #fff;
+}
+
 html.dark-mode .post-card-title {
     color: #fff;
 }
@@ -1738,8 +1824,17 @@ html.dark-mode .post-full-image {
     background-color: color-mod(var(--color-darkmode) l(+8%));
 }
 
-html.dark-mode .article-byline {
-    border-top-color: color-mod(var(--color-darkmode) l(+15%));
+html.dark-mode .author-avatar {
+    border-color: var(--color-darkmode);
+    background-color: color-mod(var(--color-darkmode) l(+8%));
+}
+
+html.dark-mode .author-profile-image {
+    opacity: 1;
+}
+
+html.dark-mode .author-profile-image path {
+    fill: var(--color-darkmode);
 }
 
 html.dark-mode .article-byline-meta .author-name a {
@@ -1838,6 +1933,179 @@ html.dark-mode .footer-cta-title {
     color: #fff;
 }
 
+@media (prefers-color-scheme: dark) {
+    html.auto-color body {
+        color: rgba(255, 255, 255, 0.75);
+        background: var(--color-darkmode);
+    }
+    
+    html.auto-color img {
+        opacity: 0.9;
+    }
+    
+    html.auto-color kbd {
+        background: color-mod(var(--color-darkmode) l(+5%));
+    }
+    
+    html.auto-color figcaption a {
+        color: #fff;
+    }
+    
+    html.auto-color .gh-head {
+        background: var(--color-darkmode);
+        color: #fff;
+    }
+    
+    html.auto-color .gh-burger-box {
+        color: #fff;
+    }
+    
+    html.auto-color .site-header-content {
+        color: #fff;
+    }
+    
+    html.auto-color .post-card-image {
+        background: var(--color-darkmode);
+    }
+    
+    html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
+        color: color-mod(var(--color-secondary-text) l(-22%));
+    }
+    
+    html.auto-color .post-card-featured {
+        color: #fff;
+    }
+    
+    html.auto-color .post-card-title {
+        color: #fff;
+    }
+    
+    html.auto-color .post-card-excerpt {
+        color: var(--color-secondary-text);
+    }
+    
+    html.auto-color .article-title {
+        color: #fff;
+    }
+    
+    html.auto-color .article-excerpt {
+        color: var(--color-secondary-text);
+    }
+    
+    html.auto-color .post-full-image {
+        background-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+
+    html.auto-color .author-avatar {
+        border-color: var(--color-darkmode);
+        background-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+    
+    html.auto-color .author-profile-image {
+        opacity: 1;
+    }
+    
+    html.auto-color .author-profile-image path {
+        fill: var(--color-darkmode);
+    }
+    
+    html.auto-color .article-byline-meta .author-name a {
+        color: #fff;
+    }
+    
+    html.auto-color .no-image .author-social-link a {
+        color: rgba(255, 255, 255, 0.75);
+    }
+    
+    html.auto-color .gh-content > [id] {
+        color: rgba(255, 255, 255, 0.9);
+    }
+    
+    html.auto-color .gh-content pre {
+        background: color-mod(var(--color-darkgrey) l(-8%));
+    }
+    
+    html.auto-color .gh-content :not(pre) > code {
+        background: color-mod(var(--color-darkgrey) l(+6%));
+        border-color: color-mod(var(--color-darkmode) l(+8%));
+        color: var(--color-wash);
+    }
+    
+    html.auto-color .gh-content a:not(.kg-btn):not(.kg-nft-card-container):not(.kg-product-card-button):not(.kg-header-card-button) {
+        color: #fff;
+    }
+    
+    html.auto-color .gh-content strong {
+        color: #fff;
+    }
+    
+    html.auto-color .gh-content em {
+        color: #fff;
+    }
+    
+    html.auto-color .gh-content code {
+        color: #fff;
+        background: #000;
+    }
+    
+    html.auto-color hr {
+        border-top-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+    
+    html.auto-color .gh-content hr:after {
+        background: color-mod(var(--color-darkmode) l(+8%));
+        box-shadow: var(--color-darkmode) 0 0 0 5px;
+    }
+    
+    html.auto-color figcaption {
+        color: rgba(255, 255, 255, 0.6);
+    }
+    
+    html.auto-color .gh-content table td:first-child {
+        background-image: linear-gradient(to right, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+    }
+    
+    html.auto-color .gh-content table td:last-child {
+        background-image: linear-gradient(to left, var(--color-darkmode) 50%, color-mod(var(--color-darkmode) a(0%)) 100%);
+    }
+    
+    html.auto-color .gh-content table th {
+        color: rgba(255, 255, 255, 0.85);
+        background-color: color-mod(var(--color-darkmode) l(+8%));
+    }
+    
+    html.auto-color .gh-content table th,
+    html.auto-color .gh-content table td {
+        border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
+    }
+    
+    html.auto-color .gh-content input {
+        color: color-mod(var(--color-midgrey) l(-30%));
+    }
+    
+    html.auto-color .site-archive-header .no-image {
+        color: rgba(255, 255, 255, 0.9);
+        background: var(--color-darkmode);
+    }
+    
+    html.auto-color .kg-header-card.kg-style-dark {
+        background: color-mod(var(--color-darkgrey) l(-5%));
+    }
+    
+    html.auto-color .kg-header-card.kg-style-light {
+        background: color-mod(var(--color-darkgrey) l(+5%));
+    }
+    
+    html.auto-color .kg-header-card h2.kg-header-card-header,
+    html.auto-color .kg-header-card h3.kg-header-card-subheader {
+        color: #fff;
+    }
+    
+    html.auto-color .footer-cta-title {
+        color: #fff;
+    }
+}
+
 /*
 
 Hey! You reached the end.

default.hbs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{/match}}>
+<html lang="{{@site.locale}}"{{#match @custom.color_scheme "Dark"}} class="dark-mode"{{else match @custom.color_scheme "Auto"}} class="auto-color"{{/match}}>
 <head>
 
     {{!-- Basic meta - advanced meta is output with {ghost_head} below --}}
@@ -18,7 +18,7 @@
     {{ghost_head}}
 
 </head>
-<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}{{#if @custom.show_publication_cover}} has-cover-image{{/if}}{{#is "home"}}{{#unless @custom.show_logo_in_navigation}} no-logo{{/unless}}{{/is}}">
+<body class="{{body_class}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Modern sans-serif"}} has-sans-body{{/match}}{{#if @custom.show_publication_cover}} has-cover{{/if}}{{#is "home"}}{{#unless @custom.show_logo_in_navigation}} no-logo{{/unless}}{{/is}}">
 <div class="viewport">
 
     <header id="gh-head" class="gh-head outer">
@@ -42,11 +42,21 @@
                 {{navigation}}
             </div>
             <div class="gh-head-actions">
-                {{#unless @member}}
-                    <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
-                {{else}}
-                    <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
-                {{/unless}}
+                <div class="gh-social">
+                    {{#if @site.facebook}}
+                        <a class="gh-social-link gh-social-facebook" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                    {{/if}}
+                    {{#if @site.twitter}}
+                        <a class="gh-social-link gh-social-twitter" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                    {{/if}}
+                </div>
+                {{#if @site.members_enabled}}
+                    {{#unless @member}}
+                        <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
+                    {{else}}
+                        <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
+                    {{/unless}}
+                {{/if}}
             </div>
         </nav>
     </header>

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": "5.0.0",
+    "version": "5.1.5",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -139,7 +139,8 @@
                 "type": "select",
                 "options": [
                     "Light",
-                    "Dark"
+                    "Dark",
+                    "Auto"
                 ],
                 "default": "Light"
             },

partials/icons/facebook.hbs

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>
+<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>

partials/icons/fire.hbs

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.49365 4.58752C3.53115 6.03752 2.74365 7.70002 2.74365 9.25002C2.74365 10.6424 3.29678 11.9778 4.28134 12.9623C5.26591 13.9469 6.60127 14.5 7.99365 14.5C9.38604 14.5 10.7214 13.9469 11.706 12.9623C12.6905 11.9778 13.2437 10.6424 13.2437 9.25002C13.2437 6.00002 10.9937 3.50002 9.16865 1.68127L6.99365 6.25002L4.49365 4.58752Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+</svg>

partials/icons/lock.hbs

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></path>
+</svg>

partials/icons/twitter.hbs

@@ -1 +1 @@
-<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
+<svg class="icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

partials/post-card.hbs

@@ -1,33 +1,62 @@
 {{!-- This is a partial file used to generate a post "card"
 which templates loop over to generate a list of posts. --}}
 
-<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}}">
+<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home, paged"}} post-card-large{{/is}}{{/match}}{{#unless access}} post-access-{{visibility}}{{/unless}}">
 
     {{#if feature_image}}
-        <a class="post-card-image-link" href="{{url}}">
-            {{!-- This is a responsive image, it loads different sizes depending on device
-            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-            <img class="post-card-image"
-                srcset="{{img_url feature_image size="s"}} 300w,
-                        {{img_url feature_image size="m"}} 600w,
-                        {{img_url feature_image size="l"}} 1000w,
-                        {{img_url feature_image size="xl"}} 2000w"
-                sizes="(max-width: 1000px) 400px, 800px"
-                src="{{img_url feature_image size="m"}}"
-                alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
-                loading="lazy"
-            />
-        </a>
+    <a class="post-card-image-link" href="{{url}}">
+
+        {{!-- This is a responsive image, it loads different sizes depending on device
+        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
+        <img class="post-card-image"
+            srcset="{{img_url feature_image size="s"}} 300w,
+                    {{img_url feature_image size="m"}} 600w,
+                    {{img_url feature_image size="l"}} 1000w,
+                    {{img_url feature_image size="xl"}} 2000w"
+            sizes="(max-width: 1000px) 400px, 800px"
+            src="{{img_url feature_image size="m"}}"
+            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+            loading="lazy"
+        />
+
+        {{#unless access}}
+        {{^has visibility="public"}}
+            <div class="post-card-access">
+                {{> "icons/lock"}}
+                {{#has visibility="members"}}
+                    Members only
+                {{else}}
+                    Paid-members only
+                {{/has}}
+            </div>
+        {{/has}}
+        {{/unless}}
+
+    </a>
     {{/if}}
 
     <div class="post-card-content">
 
         <a class="post-card-content-link" href="{{url}}">
             <header class="post-card-header">
-                {{#primary_tag}}
-                    <div class="post-card-primary-tag">{{name}}</div>
-                {{/primary_tag}}
-                <h2 class="post-card-title">{{title}}</h2>
+                <div class="post-card-tags">
+                    {{#primary_tag}}
+                        <span class="post-card-primary-tag">{{name}}</span>
+                    {{/primary_tag}}
+                    {{#if featured}}
+                        <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+                    {{/if}}
+                </div>
+                <h2 class="post-card-title">
+                    {{#unless access}}
+                    {{^has visibility="public"}}
+                        {{#unless feature_image}}
+                            {{> "icons/lock"}}
+                        {{/unless}}
+                    {{/has}}
+                    {{/unless}}
+                    {{title}}
+                </h2>
             </header>
             {{#if excerpt}}
                 <div class="post-card-excerpt">{{excerpt}}</div>

post.hbs

@@ -12,11 +12,16 @@ into the {body} tag of the default.hbs template --}}
 
     <header class="article-header gh-canvas">
 
-        {{#if primary_tag}}
-            <section class="article-tag post-card-primary-tag">
-                <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
-            </section>
-        {{/if}}
+        <div class="article-tag post-card-tags">
+            {{#primary_tag}}
+                <span class="post-card-primary-tag">
+                    <a href="{{url}}">{{name}}</a>
+                </span>
+            {{/primary_tag}}
+            {{#if featured}}
+                <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
+            {{/if}}
+        </div>
 
         <h1 class="article-title">{{title}}</h1>
 
@@ -45,7 +50,9 @@ into the {body} tag of the default.hbs template --}}
                 <h4 class="author-name">{{authors}}</h4>
                 <div class="byline-meta-content">
                     <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-                    <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
+                    {{#if reading_time}}
+                        <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
+                    {{/if}}
                 </div>
             </div>
 
@@ -89,7 +96,9 @@ into the {body} tag of the default.hbs template --}}
 </main>
 
 {{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
-{{#unless @member}}{{#if access}}
+{{#if @site.members_enabled}}
+{{#unless @member}}
+{{#if access}}
     <section class="footer-cta outer">
         <div class="inner">
             {{#if @custom.email_signup_text}}<h2 class="footer-cta-title">{{@custom.email_signup_text}}</h2>{{/if}}
@@ -101,7 +110,9 @@ into the {body} tag of the default.hbs template --}}
             making the form validation and submission much simpler. --}}
         </div>
     </section>
-{{/if}}{{/unless}}
+{{/if}}
+{{/unless}}
+{{/if}}
 
 
 {{!-- Read more links, just above the footer --}}
@@ -111,7 +122,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}}" include="authors" limit="3" as |more_posts|}}
+    {{#get "posts" filter="id:-{{id}}" limit="3" as |more_posts|}}
 
         {{#if more_posts}}
             <aside class="read-more-wrap outer">