v5.4.9

When the browser window is resized, a new click event listener is added
to the window but the old one is not removed. The old one ends up
preventing the newly-made dropdown from opening.

Fix this by remembering the click event listener function added to the
window, and remove it before making the new dropdown after a window
resize.

assets/css/screen.css

@@ -6,20 +6,19 @@ production stylesheet in assets/built/screen.css
 
 1.  Global Styles
 2.  Layout
-3.  Special Templates
+3.  Site Header
-4.  Site Header
+4.  Site Navigation
-5.  Site Navigation
+5.  Post Feed
-6.  Post Feed
+6.  Single Post
-7.  Single Post
+  6.1. Post Byline
-  7.1. Post Byline
+  6.2. Subscribe
-  7.2. Members Subscribe Form
+  6.3. Read More
-  7.4. Related Posts
+  6.4. Comments
-  7.5. Koenig Styles
+7.  Author Template
-  7.6  Comments
+8.  Tag Template
-8.  Author Template
 9.  Error Template
-11. Site Footer
+10.  Site Footer
-12. Dark Mode
+11. Dark Mode
 
 */
 
@@ -87,7 +86,7 @@ production stylesheet in assets/built/screen.css
 }
 
 
-/* 4. Site Header
+/* 3. Site Header
 /* ---------------------------------------------------------- */
 
 .site-header {
@@ -136,6 +135,7 @@ production stylesheet in assets/built/screen.css
 
 .site-header-content.no-content {
     padding-top: 0;
+    padding-bottom: 2vmin;
 }
 
 .site-header-inner {
@@ -192,9 +192,11 @@ production stylesheet in assets/built/screen.css
 }
 
 :is(.site-logo, .site-title) + .site-description {
+    max-width: 640px;
     margin-top: 16px;
     font-size: 2.4rem;
     font-weight: 400;
+    line-height: 1.4;
 }
 
 .site-logo + .site-description {
@@ -244,18 +246,18 @@ 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;
     }
 }
 
 
-/* 5. Site Navigation
+/* 4. Site Navigation
 /* ---------------------------------------------------------- */
 
 .gh-head {
@@ -263,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 {
@@ -270,7 +273,7 @@ production stylesheet in assets/built/screen.css
     color: #fff;
 }
 
-.home-template.has-cover .gh-head {
+:is(.home-template, .paged:not(.tag-template):not(.author-template)).has-cover .gh-head {
     position: absolute;
     top: 0;
     right: 0;
@@ -300,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;
     }
 }
@@ -323,10 +326,6 @@ production stylesheet in assets/built/screen.css
     grid-column-start: 2;
 }
 
-.is-head-middle-logo .gh-head-actions {
-    gap: 28px;
-}
-
 @media (min-width: 992px) {
     .is-head-middle-logo .gh-head-menu {
         margin-right: 64px;
@@ -413,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 {
@@ -514,7 +513,7 @@ production stylesheet in assets/built/screen.css
     grid-template-columns: 1fr 1fr;
     grid-auto-flow: column;
     column-gap: 40px;
-    width: auto;
+    min-width: 320px;
     padding: 20px 32px;
 }
 
@@ -567,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;
@@ -586,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
 /* ---------------------------------------------------------- */
@@ -615,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;
     }
@@ -683,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;
     }
@@ -745,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;
@@ -755,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;
     }
@@ -795,20 +817,24 @@ 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;
+    }
 }
 
 
-/* 6. Post Feed
+/* 5. Post Feed
 /* ---------------------------------------------------------- */
 
 .post-feed {
@@ -1146,8 +1172,43 @@ make sure this only happens on large viewports / desktop-ish devices.
     }
 }
 
+/* Pagination
+/* ---------------------------------------------------------- */
 
-/* 7. Single Post
+.pagination {
+    display: none;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    margin-top: 8vmin;
+}
+
+html.no-infinite-scroll .pagination {
+    display: grid;
+}
+
+.pagination a {
+    font-size: 1.7rem;
+    font-weight: 600;
+}
+
+.pagination .page-number {
+    grid-column-start: 2;
+    color: var(--color-secondary-text);
+}
+
+.pagination .older-posts {
+    grid-column-start: 3;
+    text-align: right;
+}
+
+@media (max-width: 767px) {
+    .pagination .page-number {
+        display: none;
+    }
+}
+
+
+/* 6. Single Post
 /* ---------------------------------------------------------- */
 
 .article {
@@ -1626,7 +1687,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.1. Post Byline
+/* 6.1. Post Byline
 /* ---------------------------------------------------------- */
 
 .article-byline {
@@ -1689,7 +1750,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.3. Subscribe
+/* 6.2. Subscribe
 /* ---------------------------------------------------------- */
 
 .footer-cta {
@@ -1739,7 +1800,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 7.4. Read more
+/* 6.3. Read more
 /* ---------------------------------------------------------- */
 
 .read-more-wrap {
@@ -1778,7 +1839,7 @@ iframe.instagram-media + script + :not([id]) {
     }
 }
 
-/* 7.6. Comments
+/* 6.4. Comments
 /* ---------------------------------------------------------- */
 .comments {
     display: flex;
@@ -1816,7 +1877,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 8. Author Template
+/* 7. Author Template
 /* ---------------------------------------------------------- */
 
 .author-profile-pic {
@@ -1950,7 +2011,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 11. Site Footer
+/* 10. Site Footer
 /* ---------------------------------------------------------- */
 
 .site-footer {
@@ -2037,7 +2098,7 @@ iframe.instagram-media + script + :not([id]) {
 }
 
 
-/* 12. Dark Mode
+/* 11. Dark Mode
 /* ---------------------------------------------------------- */
 
 html.dark-mode body {
@@ -2062,8 +2123,9 @@ html.dark-mode .gh-head {
     color: #fff;
 }
 
-html.dark-mode .gh-burger-box {
+html.dark-mode .gh-burger::before,
-    color: #fff;
+html.dark-mode .gh-burger::after {
+    background-color: #fff;
 }
 
 html.dark-mode .site-header-content {
@@ -2074,7 +2136,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%));
 }
 
@@ -2090,6 +2152,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;
 }
@@ -2193,7 +2259,7 @@ html.dark-mode .gh-content table:not(.gist table) td {
     border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
 }
 
-html.dark-mode .gh-content input {
+html.dark-mode .gh-content :is(input, textarea) {
     color: color-mod(var(--color-midgrey) l(-30%));
 }
 
@@ -2242,8 +2308,9 @@ html.dark-mode .footer-cta-title {
         color: #fff;
     }
 
-    html.auto-color .gh-burger-box {
+    html.auto-color .gh-burger::before,
-        color: #fff;
+    html.auto-color .gh-burger::after {
+        background-color: #fff;
     }
 
     html.auto-color .site-header-content {
@@ -2254,7 +2321,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%));
     }
 
@@ -2270,6 +2337,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;
     }
@@ -2373,7 +2444,7 @@ html.dark-mode .footer-cta-title {
         border: color-mod(var(--color-darkmode) l(+8%)) 1px solid;
     }
 
-    html.auto-color .gh-content input {
+    html.auto-color .gh-content :is(input, textarea) {
         color: color-mod(var(--color-midgrey) l(-30%));
     }
 

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;
 
@@ -15,6 +16,7 @@
         });
     }
 
+    var windowClickListener;
     const makeDropdown = function () {
         if (mediaQuery.matches) return;
         const submenuItems = [];
@@ -61,19 +63,21 @@
             document.body.classList.toggle('is-dropdown-open');
         });
 
-        window.addEventListener('click', function (e) {
+        windowClickListener = function (e) {
             if (!toggle.contains(e.target) && document.body.classList.contains('is-dropdown-open')) {
                 document.body.classList.remove('is-dropdown-open');
             }
-        });
+        };
+        window.addEventListener('click', windowClickListener);
     }
 
-    imagesLoaded(logo, function () {
+    imagesLoaded(head, function () {
         makeDropdown();
     });
 
     window.addEventListener('resize', function () {
         setTimeout(function () {
+            window.removeEventListener('click', windowClickListener);
             nav.innerHTML = navHTML;
             makeDropdown();
         }, 1);

assets/js/infinite-scroll.js

@@ -14,6 +14,8 @@
  */
 
 (function (window, document) {
+    if (document.documentElement.classList.contains('no-infinite-scroll')) return;
+
     // next link element
     var nextElement = document.querySelector('link[rel=next]');
     if (!nextElement) {

author.hbs

@@ -2,69 +2,75 @@
 {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
 
 <main id="site-main" class="site-main outer">
-<div class="post-feed inner">
+<div class="inner posts">
 
-    {{#author}}
+    <div class="post-feed">
-    <section class="post-card post-card-large">
 
-        {{#if feature_image}}
+        {{#author}}
-        <div class="post-card-image-link">
+        <section class="post-card post-card-large">
-            {{!-- 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"
-                sizes="(max-width: 1000px) 400px, 800px"
-                src="{{img_url feature_image size="m"}}"
-                alt="{{title}}"
-            />
-        </div>
-        {{/if}}
 
-        <div class="post-card-content">
+            {{#if cover_image}}
-        <div class="post-card-content-link">
+            <div class="post-card-image-link">
-
+                {{!-- This is a responsive image, it loads different sizes depending on device
-            {{#if profile_image}}
+                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
-                <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
+                <img class="post-card-image"
+                    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 cover_image size="m"}}"
+                    alt="{{title}}"
+                />
+            </div>
             {{/if}}
 
-            <header class="post-card-header">
+            <div class="post-card-content">
-                <h2 class="post-card-title">{{name}}</h2>
+            <div class="post-card-content-link">
-            </header>
 
-            {{#if bio}}
+                {{#if profile_image}}
-                <div class="post-card-excerpt">{{bio}}</div>
+                    <img class="author-profile-pic" src="{{profile_image}}" alt="{{name}}" />
-            {{/if}}
-
-            <footer class="author-profile-footer">
-                {{#if location}}
-                    <div class="author-profile-location">{{location}}</div>
                 {{/if}}
-                <div class="author-profile-meta">
+
-                    {{#if website}}
+                <header class="post-card-header">
-                        <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
+                    <h2 class="post-card-title">{{name}}</h2>
+                </header>
+
+                {{#if bio}}
+                    <div class="post-card-excerpt">{{bio}}</div>
+                {{/if}}
+
+                <footer class="author-profile-footer">
+                    {{#if location}}
+                        <div class="author-profile-location">{{location}}</div>
                     {{/if}}
-                    {{#if twitter}}
+                    <div class="author-profile-meta">
-                        <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
+                        {{#if website}}
-                    {{/if}}
+                            <a class="author-profile-social-link" href="{{website}}" target="_blank" rel="noopener">{{website}}</a>
-                    {{#if facebook}}
+                        {{/if}}
-                        <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                        {{#if twitter}}
-                    {{/if}}
+                            <a class="author-profile-social-link" href="{{twitter_url}}" target="_blank" rel="noopener">{{> "icons/twitter"}}</a>
-                </div>
+                        {{/if}}
-            </footer>
+                        {{#if facebook}}
+                            <a class="author-profile-social-link" href="{{facebook_url}}" target="_blank" rel="noopener">{{> "icons/facebook"}}</a>
+                        {{/if}}
+                    </div>
+                </footer>
 
-        </div>
+            </div>
-        </div>
+            </div>
 
-    </section>
+        </section>
-    {{/author}}
+        {{/author}}
 
-    {{#foreach posts}}
+        {{#foreach posts}}
-        {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
+            {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
-        {{> "post-card"}}
+            {{> "post-card"}}
-    {{/foreach}}
+        {{/foreach}}
 
+    </div>
+
+    {{pagination}}
+    
 </div>
 </main>

default.hbs

@@ -21,45 +21,48 @@
 <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}}
                         {{@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>
 
             <nav class="gh-head-menu">
                 {{navigation}}
                 {{#unless @site.members_enabled}}
-                    {{#match @custom.header_style "Stacked"}}
+                    {{#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>
 
             <div class="gh-head-actions">
                 {{#unless @site.members_enabled}}
-                    {{^match @custom.header_style "Stacked"}}
+                    {{^match @custom.navigation_layout "Stacked"}}
                         <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
                     {{/match}}
                 {{else}}
                     <button class="gh-search gh-icon-btn" data-ghost-search>{{> "icons/search"}}</button>
-                    {{#unless @member}}
+                    <div class="gh-head-members">
-                        {{#unless @site.members_invite_only}}
+                        {{#unless @member}}
-                            <a class="gh-head-button" href="#/portal/signup" data-portal="signup">Subscribe</a>
+                            {{#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}}
+                    </div>
-                        <a class="gh-head-button" href="#/portal/account" data-portal="account">Account</a>
-                    {{/unless}}
                 {{/unless}}
             </div>
         </div>
@@ -77,7 +80,7 @@
             <nav class="site-footer-nav">
                 {{navigation type="secondary"}}
             </nav>
-            <div><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
+            <div class="gh-powered-by"><a href="https://ghost.org/" target="_blank" rel="noopener">Powered by Ghost</a></div>
         </div>
     </footer>
 

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.

index.hbs

@@ -48,5 +48,7 @@ into the {body} of the default.hbs template --}}
         {{/foreach}}
     </div>
 
+    {{pagination}}
+
 </div>
 </main>

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.0",
+    "version": "5.4.9",
     "engines": {
         "ghost": ">=5.0.0"
     },
@@ -49,7 +49,7 @@
         "autoprefixer": "10.4.7",
         "beeper": "2.1.0",
         "cssnano": "5.1.12",
-        "gscan": "4.34.0",
+        "gscan": "4.36.1",
         "gulp": "4.0.2",
         "gulp-concat": "2.6.1",
         "gulp-livereload": "4.0.2",

tag.hbs

@@ -48,5 +48,8 @@
         {{/foreach}}
 
     </div>
+
+    {{pagination}}
+    
 </div>
 </main>