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,17 +303,17 @@ 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;
 }
 
 @media (min-width: 992px) {
     .is-head-left-logo .gh-head-menu {
-        margin-right: 32px;
+        margin-right: 64px;
         margin-left: 16px;
     }
 }
@@ -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 {
@@ -566,6 +566,17 @@ production stylesheet in assets/built/screen.css
     text-align: right;
 }
 
+.gh-head-members {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+}
+
+.gh-head-link {
+    font-weight: 500;
+    color: inherit;
+}
+
 .gh-head-button {
     display: inline-flex;
     justify-content: center;
@@ -585,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
 /* ---------------------------------------------------------- */
@@ -614,13 +633,13 @@ production stylesheet in assets/built/screen.css
     margin-right: -4px;
 }
 
-@media (max-width: 991px) {
+@media (max-width: 767px) {
     .gh-head-actions .gh-search {
         display: none;
     }
 }
 
-@media (min-width: 992px) {
+@media (min-width: 768px) {
     .gh-head-brand .gh-search {
         display: none;
     }
@@ -682,7 +701,7 @@ production stylesheet in assets/built/screen.css
 /* ---------------------------------------------------------- */
 /* IDs needed to ensure sufficient specificity */
 
-@media (max-width: 991px) {
+@media (max-width: 767px) {
     #gh-head {
         height: 64px;
     }
@@ -744,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;
@@ -754,10 +778,9 @@ production stylesheet in assets/built/screen.css
 
     .gh-head-open #gh-head {
         position: fixed;
-        right: 0;
-        left: 0;
+        inset: 0;
         z-index: 3999999;
-        height: 100vh;
+        height: 100%;
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
     }
@@ -794,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;
+    }
 }
 
 
@@ -2108,7 +2135,7 @@ html.dark-mode .post-card-image {
     background: var(--color-darkmode);
 }
 
-html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
+html.dark-mode :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content, .pagination .page-number) {
     color: color-mod(var(--color-secondary-text) l(-22%));
 }
 
@@ -2124,6 +2151,10 @@ html.dark-mode .post-card-excerpt {
     color: var(--color-secondary-text);
 }
 
+html.dark-mode .pagination a {
+    color: #fff;
+}
+
 html.dark-mode .author-profile-location {
     color: #fff;
 }
@@ -2288,7 +2319,7 @@ html.dark-mode .footer-cta-title {
         background: var(--color-darkmode);
     }
 
-    html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content) {
+    html.auto-color :is(.post-card-tags, .post-card-meta, .article-tag a, .byline-meta-content, .pagination .page-number) {
         color: color-mod(var(--color-secondary-text) l(-22%));
     }
 
@@ -2304,6 +2335,10 @@ html.dark-mode .footer-cta-title {
         color: var(--color-secondary-text);
     }
 
+    html.auto-color .pagination a {
+        color: #fff;
+    }
+
     html.auto-color .author-profile-location {
         color: #fff;
     }

assets/js/dropdown.js

@@ -1,7 +1,8 @@
 (function () {
-    const mediaQuery = window.matchMedia('(max-width: 991px)');
+    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,
-                            {{img_url feature_image size="m"}} 600w,
-                            {{img_url feature_image size="l"}} 1000w,
-                            {{img_url feature_image size="xl"}} 2000w"
+                    srcset="{{img_url cover_image size="s"}} 300w,
+                            {{img_url cover_image size="m"}} 600w,
+                            {{img_url cover_image size="l"}} 1000w,
+                            {{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}}
@@ -51,15 +51,18 @@
                     {{/match}}
                 {{else}}
                     <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
-                    {{#unless @member}}
-                        {{#unless @site.members_invite_only}}
-                            <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
+                    <div class="gh-head-members">
+                        {{#unless @member}}
+                            {{#unless @site.members_invite_only}}
+                                <a class="gh-head-link" href="#/portal/signin" data-portal="signin">Sign in</a>
+                                <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
+                            {{else}}
+                                <a class="gh-head-button" href="#/portal/signin" data-portal="signin">Sign in</a>
+                            {{/unless}}
                         {{else}}
-                            <a class="gh-head-button" href="#/portal/signin" data-portal="signin">Login</a>
+                            <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
                         {{/unless}}
-                    {{else}}
-                        <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
-                    {{/unless}}
+                    </div>
                 {{/unless}}
             </div>
         </div>

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