v5.2.0

assets/css/screen.css

@@ -373,7 +373,7 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
 
 .gh-social-link {
     line-height: 0;
-    color: #fff;
+    color: inherit;
 }
 
 .gh-social-link:hover {
@@ -413,6 +413,36 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
 }
 
 
+/* Search
+/* ---------------------------------------------------------- */
+
+.gh-search {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    outline: none;
+}
+
+.gh-search:hover {
+    opacity: 0.9;
+}
+
+@media (max-width: 991px) {
+    .gh-search {
+        position: fixed;
+        top: 16px;
+        left: 16px;
+        z-index: 10;
+    }
+}
+
+
 /* Mobile Menu Trigger
 /* ---------------------------------------------------------- */
 
@@ -643,19 +673,19 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding-bottom: 55%;
 }
 
-.post-card:is(.post-access-members, .post-access-paid) .post-card-image-link::after {
+.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:is(.post-access-members, .post-access-paid) .post-card-image-link::after {
+.post-card.keep-ratio[class*="post-access-"] .post-card-image-link::after {
     position: absolute;
     inset: 0;
     padding-bottom: 0;
 }
 
-.post-card.keep-ratio.post-access-public:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
+.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 {

default.hbs

@@ -42,6 +42,7 @@
                 {{navigation}}
             </div>
             <div class="gh-head-actions">
+                <button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
                 <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>

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.1.1",
+    "version": "5.2.0",
     "engines": {
         "ghost": ">=5.0.0"
     },

partials/icons/search.hbs

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" width="20" height="20"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>

partials/post-card.hbs

@@ -1,7 +1,7 @@
 {{!-- 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}} post-access-{{visibility}}">
+<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}}">
@@ -19,11 +19,18 @@ which templates loop over to generate a list of posts. --}}
             loading="lazy"
         />
 
+        {{#unless access}}
         {{^has visibility="public"}}
             <div class="post-card-access">
-                {{> "icons/lock"}} Members-only
+                {{> "icons/lock"}}
+                {{#has visibility="members"}}
+                    Members only
+                {{else}}
+                    Paid-members only
+                {{/has}}
             </div>
         {{/has}}
+        {{/unless}}
 
     </a>
     {{/if}}
@@ -41,11 +48,13 @@ which templates loop over to generate a list of posts. --}}
                     {{/if}}
                 </div>
                 <h2 class="post-card-title">
+                    {{#unless access}}
                     {{^has visibility="public"}}
                         {{#unless feature_image}}
                             {{> "icons/lock"}}
                         {{/unless}}
                     {{/has}}
+                    {{/unless}}
                     {{title}}
                 </h2>
             </header>