v5.2.1

assets/css/screen.css

@@ -224,7 +224,6 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
 
 @media (max-width: 767px) {
     .has-cover .site-header-content {
-        padding-bottom: 36px;
         min-height: 240px;
     }
     .site-header-inner {
@@ -321,6 +320,11 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
     max-height: 26px;
 }
 
+.gh-head-brand-wrapper {
+    display: flex;
+    align-items: center;
+}
+
 
 /* Primary Navigation
 /* ---------------------------------------------------------- */
@@ -368,12 +372,12 @@ body:not(.has-cover) .site-header-content:not(.left-aligned) {
 .gh-social {
     display: flex;
     align-items: center;
-    gap: 16px;
+    gap: 20px;
 }
 
 .gh-social-link {
     line-height: 0;
-    color: #fff;
+    color: inherit;
 }
 
 .gh-social-link:hover {
@@ -413,6 +417,47 @@ 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;
+}
+
+.gh-head-brand .gh-search {
+    margin-right: 8px;
+}
+
+.gh-head-actions .gh-search {
+    margin-right: -10px;
+}
+
+@media (max-width: 991px) {
+    .gh-head-actions .gh-search {
+        display: none;
+    }
+}
+
+@media (min-width: 992px) {
+    .gh-head-brand .gh-search {
+        display: none;
+    }
+}
+
+
 /* Mobile Menu Trigger
 /* ---------------------------------------------------------- */
 
@@ -643,19 +688,19 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
     padding-bottom: 55%;
 }
 
-.post-card[class*="post-access-"]:not(.post-access-public) .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[class*="post-access-"]:not(.post-access-public) .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 {
-    display: none;
+.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
+    padding-bottom: 0;
 }
 
 .post-card-image {

default.hbs

@@ -32,16 +32,20 @@
                         {{@site.title}}
                     {{/if}}
                 </a>
-                <a class="gh-burger" role="button">
-                    <div class="gh-burger-box">
-                        <div class="gh-burger-inner"></div>
-                    </div>
-                </a>
+                <div class="gh-head-brand-wrapper">
+                    <button class="gh-search" data-ghost-search>{{> "icons/search"}}</button>
+                    <a class="gh-burger" role="button">
+                        <div class="gh-burger-box">
+                            <div class="gh-burger-inner"></div>
+                        </div>
+                    </a>
+                </div>
             </div>
             <div class="gh-head-menu">
                 {{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.2",
+    "version": "5.2.1",
     "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,6 +19,7 @@ which templates loop over to generate a list of posts. --}}
             loading="lazy"
         />
 
+        {{#unless access}}
         {{^has visibility="public"}}
             <div class="post-card-access">
                 {{> "icons/lock"}}
@@ -29,6 +30,7 @@ which templates loop over to generate a list of posts. --}}
                 {{/has}}
             </div>
         {{/has}}
+        {{/unless}}
 
     </a>
     {{/if}}
@@ -46,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>