v5.4.6

refs #925

assets/css/screen.css

@@ -6,20 +6,19 @@ production stylesheet in assets/built/screen.css
 
 1.  Global Styles
 2.  Layout
-3.  Special Templates
-4.  Site Header
-5.  Site Navigation
-6.  Post Feed
-7.  Single Post
-  7.1. Post Byline
-  7.2. Members Subscribe Form
-  7.4. Related Posts
-  7.5. Koenig Styles
-  7.6  Comments
-8.  Author Template
+3.  Site Header
+4.  Site Navigation
+5.  Post Feed
+6.  Single Post
+  6.1. Post Byline
+  6.2. Subscribe
+  6.3. Read More
+  6.4. Comments
+7.  Author Template
+8.  Tag Template
 9.  Error Template
-11. Site Footer
-12. Dark Mode
+10.  Site Footer
+11. Dark Mode
 
 */
 
@@ -87,7 +86,7 @@ production stylesheet in assets/built/screen.css
 }
 
 
-/* 4. Site Header
+/* 3. Site Header
 /* ---------------------------------------------------------- */
 
 .site-header {
@@ -258,7 +257,7 @@ production stylesheet in assets/built/screen.css
 }
 
 
-/* 5. Site Navigation
+/* 4. Site Navigation
 /* ---------------------------------------------------------- */
 
 .gh-head {
@@ -266,6 +265,7 @@ production stylesheet in assets/built/screen.css
     font-size: 1.6rem;
     line-height: 1.3em;
     background-color: #fff;
+    z-index: 150;
 }
 
 .has-cover:not(.home-template) .gh-head {
@@ -834,7 +834,7 @@ production stylesheet in assets/built/screen.css
 }
 
 
-/* 6. Post Feed
+/* 5. Post Feed
 /* ---------------------------------------------------------- */
 
 .post-feed {
@@ -1208,7 +1208,7 @@ html.no-infinite-scroll .pagination {
 }
 
 
-/* 7. Single Post
+/* 6. Single Post
 /* ---------------------------------------------------------- */
 
 .article {
@@ -1687,7 +1687,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.1. Post Byline
+/* 6.1. Post Byline
 /* ---------------------------------------------------------- */
 
 .article-byline {
@@ -1750,7 +1750,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.3. Subscribe
+/* 6.2. Subscribe
 /* ---------------------------------------------------------- */
 
 .footer-cta {
@@ -1800,7 +1800,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.4. Read more
+/* 6.3. Read more
 /* ---------------------------------------------------------- */
 
 .read-more-wrap {
@@ -1839,7 +1839,7 @@ iframe.instagram-media + script + :not([id]) {
     }
 }
 
-/* 7.6. Comments
+/* 6.4. Comments
 /* ---------------------------------------------------------- */
 .comments {
     display: flex;
@@ -1877,7 +1877,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 8. Author Template
+/* 7. Author Template
 /* ---------------------------------------------------------- */
 
 .author-profile-pic {
@@ -2011,7 +2011,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 11. Site Footer
+/* 10. Site Footer
 /* ---------------------------------------------------------- */
 
 .site-footer {
@@ -2098,7 +2098,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 12. Dark Mode
+/* 11. Dark Mode
 /* ---------------------------------------------------------- */
 
 html.dark-mode body {
@@ -2123,8 +2123,9 @@ html.dark-mode .gh-head {
     color: #fff;
 }
 
-html.dark-mode .gh-burger-box {
-    color: #fff;
+html.dark-mode .gh-burger::before,
+html.dark-mode .gh-burger::after {
+    background-color: #fff;
 }
 
 html.dark-mode .site-header-content {
@@ -2284,6 +2285,12 @@ html.dark-mode .footer-cta-title {
     color: #fff;
 }
 
+@media (max-width: 767px) {
+    html.dark-mode .gh-head-open #gh-head .gh-head-actions {
+        background-color: var(--color-darkmode);
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     html.auto-color body {
         color: rgba(255, 255, 255, 0.75);
@@ -2307,8 +2314,9 @@ html.dark-mode .footer-cta-title {
         color: #fff;
     }
 
-    html.auto-color .gh-burger-box {
-        color: #fff;
+    html.auto-color .gh-burger::before,
+    html.auto-color .gh-burger::after {
+        background-color: #fff;
     }
 
     html.auto-color .site-header-content {
@@ -2467,6 +2475,12 @@ html.dark-mode .footer-cta-title {
     html.auto-color .footer-cta-title {
         color: #fff;
     }
+
+    @media (max-width: 767px) {
+        html.auto-color .gh-head-open #gh-head .gh-head-actions {
+            background-color: var(--color-darkmode);
+        }
+    }
 }
 
 /*

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

@@ -31,7 +31,7 @@
                         {{@site.title}}
                     {{/if}}
                 </a>
-                <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                 <button class="gh-burger"></button>
             </div>
 
@@ -39,7 +39,7 @@
                 {{navigation}}
                 {{#unless @site.members_enabled}}
                     {{#match @custom.navigation_layout "Stacked"}}
-                        <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
+                        <button class="gh-search gh-icon-btn" aria-label="Search this site" data-ghost-search>{{> "icons/search"}}</button>
                     {{/match}}
                 {{/unless}}
             </nav>

error.hbs

@@ -1,9 +1,9 @@
 {{!--
 
 There are two error files in this theme, one for 404s and one for all other errors.
-This file is the latter, and handle all 400/500 errors that might occur.
+This file is the latter, and handles all 400/500 errors that might occur.
 
-Because 500 errors in particular usuall happen when a server is struggling, this
+Because 500 errors in particular usually happen when a server is struggling, this
 template is as simple as possible. No template dependencies, no JS, no API calls.
 This is to prevent rendering the error-page itself compounding the issue causing
 the error in the first place.

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