v5.4.5

no refs.

The author's cover image didn't show up on the theme because the author template used `feature_image` instead of `cover_image`.

assets/css/screen.css

@@ -247,13 +247,13 @@ production stylesheet in assets/built/screen.css
         font-size: 3.4rem !important;
     }
     .site-description {
-        font-size: 2.8rem !important;
+        font-size: 2.2rem !important;
     }
     .site-logo + .site-description {
         margin-top: 12px !important;
     }
     .site-title + .site-description {
-        margin-top: 4px !important;
+        margin-top: 12px !important;
     }
 }
 
@@ -303,11 +303,11 @@ production stylesheet in assets/built/screen.css
     grid-template-columns: auto 1fr auto;
 }
 
-.is-head-left-logo.home-template .gh-head-logo {
+.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-logo {
     display: none;
 }
 
-.is-head-left-logo.home-template .gh-head-menu {
+.is-head-left-logo.home-template .gh-head:not(.is-header-hidden) .gh-head-menu {
     margin-left: -40px;
 }
 
@@ -412,7 +412,7 @@ production stylesheet in assets/built/screen.css
 }
 
 .gh-head-logo.no-image {
-    margin-top: -2px;
+    margin-top: -5px;
 }
 
 .has-cover .gh-head-logo {
@@ -596,6 +596,14 @@ production stylesheet in assets/built/screen.css
     background: #fff;
 }
 
+@media (max-width: 767px) {
+    .gh-head-members {
+        flex-direction: column-reverse;
+        gap: 16px;
+        width: 100%;
+    }
+}
+
 
 /* Search
 /* ---------------------------------------------------------- */
@@ -755,6 +763,11 @@ production stylesheet in assets/built/screen.css
         transform: translateY(-4px);
     }
 
+    #gh-head :is(.gh-head-button, .gh-head-link) {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+
     #gh-head .gh-head-button {
         width: 100%;
         font-size: 1.8rem;
@@ -765,10 +778,9 @@ production stylesheet in assets/built/screen.css
 
     .gh-head-open #gh-head {
         position: fixed;
-        right: 0;
+        inset: 0;
-        left: 0;
         z-index: 3999999;
-        height: 100vh;
+        height: 100%;
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
     }
@@ -805,16 +817,20 @@ production stylesheet in assets/built/screen.css
         flex-direction: column;
         gap: 12px;
         align-items: center;
-        padding: max(4vmin, 20px) 0;
+        padding: max(4vmin, 20px) 0 max(4vmin, 28px);
         background-color: #fff;
     }
 
-    .gh-head-open #gh-head .gh-head-button {
+    .gh-head-open #gh-head :is(.gh-head-button, .gh-head-link) {
         opacity: 1;
         transition: transform 0.4s, opacity 0.4s;
         transition-delay: 0.2s;
         transform: translateY(0);
     }
+
+    .gh-head-open #gh-head .gh-head-link {
+        transition-delay: 0.4s;
+    }
 }
 
 

assets/js/dropdown.js

@@ -1,7 +1,8 @@
 (function () {
     const mediaQuery = window.matchMedia('(max-width: 767px)');
 
-    const menu = document.querySelector('.gh-head-menu');
+    const head = document.querySelector('.gh-head');
+    const menu = head.querySelector('.gh-head-menu');
     const nav = menu.querySelector('.nav');
     if (!nav) return;
 
@@ -68,7 +69,7 @@
         });
     }
 
-    imagesLoaded(logo, function () {
+    imagesLoaded(head, function () {
         makeDropdown();
     });
 

author.hbs

@@ -9,17 +9,17 @@
         {{#author}}
         <section class="post-card post-card-large">
 
-            {{#if feature_image}}
+            {{#if cover_image}}
             <div class="post-card-image-link">
                 {{!-- 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,
+                    srcset="{{img_url cover_image size="s"}} 300w,
-                            {{img_url feature_image size="m"}} 600w,
+                            {{img_url cover_image size="m"}} 600w,
-                            {{img_url feature_image size="l"}} 1000w,
+                            {{img_url cover_image size="l"}} 1000w,
-                            {{img_url feature_image size="xl"}} 2000w"
+                            {{img_url cover_image size="xl"}} 2000w"
                     sizes="(max-width: 1000px) 400px, 800px"
-                    src="{{img_url feature_image size="m"}}"
+                    src="{{img_url cover_image size="m"}}"
                     alt="{{title}}"
                 />
             </div>

default.hbs

@@ -21,10 +21,10 @@
 <body class="{{body_class}} is-head-{{#match @custom.navigation_layout "Logo on cover"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#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}}">
 <div class="viewport">
 
-    <header id="gh-head" class="gh-head outer">
+    <header id="gh-head" class="gh-head outer{{#match @custom.header_style "Hidden"}} is-header-hidden{{/match}}">
         <div class="gh-head-inner inner">
             <div class="gh-head-brand">
-                <a class="gh-head-logo" href="{{@site.url}}">
+                <a class="gh-head-logo{{#unless @site.logo}} no-image{{/unless}}" href="{{@site.url}}">
                     {{#if @site.logo}}
                         <img src="{{@site.logo}}" alt="{{@site.title}}">
                     {{else}}

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