Post access indicator

assets/css/screen.css

@@ -624,6 +624,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;
 }
@@ -634,6 +635,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding-bottom: 55%;
 }
 
+.post-card:not(.post-access-public) .post-card-image-link::after {
+    position: relative;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(3px);
+}
+
 .post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
     display: none;
 }
@@ -651,6 +658,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;
@@ -703,6 +723,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;

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/post-card.hbs

@@ -1,23 +1,31 @@
 {{!-- 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"}} post-card-large{{/is}}{{/match}} post-access-{{visibility}}">
 
     {{#if feature_image}}
-        <a class="post-card-image-link" href="{{url}}">
+    <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 --}}
+        {{!-- This is a responsive image, it loads different sizes depending on device
-            <img class="post-card-image"
+        https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-                srcset="{{img_url feature_image size="s"}} 300w,
+        <img class="post-card-image"
-                        {{img_url feature_image size="m"}} 600w,
+            srcset="{{img_url feature_image size="s"}} 300w,
-                        {{img_url feature_image size="l"}} 1000w,
+                    {{img_url feature_image size="m"}} 600w,
-                        {{img_url feature_image size="xl"}} 2000w"
+                    {{img_url feature_image size="l"}} 1000w,
-                sizes="(max-width: 1000px) 400px, 800px"
+                    {{img_url feature_image size="xl"}} 2000w"
-                src="{{img_url feature_image size="m"}}"
+            sizes="(max-width: 1000px) 400px, 800px"
-                alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+            src="{{img_url feature_image size="m"}}"
-                loading="lazy"
+            alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
-            />
+            loading="lazy"
-        </a>
+        />
+
+        {{^has visibility="public"}}
+            <div class="post-card-access">
+                {{> "icons/lock"}} Members-only
+            </div>
+        {{/has}}
+
+    </a>
     {{/if}}
 
     <div class="post-card-content">
@@ -32,7 +40,14 @@ which templates loop over to generate a list of posts. --}}
                         <span class="post-card-featured">{{> "icons/fire"}} Featured</span>
                     {{/if}}
                 </div>
-                <h2 class="post-card-title">{{title}}</h2>
+                <h2 class="post-card-title">
+                    {{^has visibility="public"}}
+                        {{#unless feature_image}}
+                            {{> "icons/lock"}}
+                        {{/unless}}
+                    {{/has}}
+                    {{title}}
+                </h2>
             </header>
             {{#if excerpt}}
                 <div class="post-card-excerpt">{{excerpt}}</div>