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
 /* ---------------------------------------------------------- */
 

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.4",
+    "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>