Bug fixes

assets/css/screen.css

@@ -63,6 +63,7 @@ production stylesheet in assets/built/screen.css
     --color-border: rgb(0 0 0 / 0.08);
     --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
     --font-serif: "EB Garamond", Georgia, Times, serif;
+    --font-serif-alt: Georgia, Times, serif;
     --font-slab: "Roboto Slab", Georgia, Times, serif;
     --font-mono: Menlo, Courier, monospace;
     --container-width: 1320px;
@@ -303,8 +304,7 @@ a:hover {
 
 .gh-navigation-logo {
     position: relative;
-    font-size: 2.6rem;
+    font-size: calc(2.6rem * var(--factor, 1));
-    font-weight: 750;
     letter-spacing: -0.015em;
     white-space: nowrap;
 }
@@ -778,8 +778,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-card-title {
-    font-size: 2.1rem;
+    font-size: calc(2.1rem * var(--factor, 1));
-    font-weight: 800;
     letter-spacing: -0.014em;
 }
 
@@ -1025,7 +1024,8 @@ Search                         LOGO                    Login Subscribe
 
 .gh-header.is-classic {
     display: flex;
-    min-height: calc(100vh - 100px - 240px);
+    margin-top: 0;
+    padding-block: 160px;
 }
 
 .gh-header.is-classic .gh-header-inner {
@@ -1039,8 +1039,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-header.is-classic .gh-header-title {
-    font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
+    font-size: calc(clamp(3.2rem, 3.18vw + 1.93rem, 6rem) * var(--factor, 1));
-    font-weight: 750;
     line-height: 1.1;
     letter-spacing: -0.022em;
 }
@@ -1212,10 +1211,6 @@ Search                         LOGO                    Login Subscribe
     font-weight: 600;
 }
 
-.gh-header.is-classic ~ .gh-cta {
-    display: none;
-}
-
 /* 10. Featured posts
 /* ---------------------------------------------------------- */
 
@@ -1300,11 +1295,15 @@ Search                         LOGO                    Login Subscribe
     margin-top: 100px;
 }
 
+.gh-header.is-classic:not(.has-image) ~ .gh-container {
+    margin-top: 0;
+}
+
 .gh-more {
     display: none;
     grid-column: 1 / -1;
     margin-top: 48px;
-    font-size: 2.4rem;
+    font-size: calc(2.4rem * var(--factor, 1));
     font-weight: 750;
     letter-spacing: -0.019em;
 }
@@ -1340,7 +1339,7 @@ Search                         LOGO                    Login Subscribe
 
 /* 11.2. Without sidebar */
 
-.gh-container:not(.has-sidebar) .gh-main {
+.gh-container:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
     grid-column: 3 / span 12;
 }
 
@@ -1358,6 +1357,10 @@ Search                         LOGO                    Login Subscribe
     border-bottom: 1px solid var(--color-border);
 }
 
+.gh-container-title:has(+ .gh-main:not(:has(.gh-card))) {
+    display: none;
+}
+
 .gh-container .gh-feed {
     gap: var(--grid-gap);
 }
@@ -1466,8 +1469,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-about-title {
-    font-size: 2.4rem;
+    font-size: calc(2.4rem * var(--factor, 1));
-    font-weight: 800;
     letter-spacing: -0.019em;
 }
 
@@ -1493,7 +1495,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-article-header {
-    margin: 40px 0;
+    margin: 72px 0 40px;
 }
 
 .gh-article-tag {
@@ -1506,8 +1508,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-article-title {
-    font-size: clamp(3.2rem, 1.59vw + 2.56rem, 4.6rem);
+    font-size: calc(clamp(3.2rem, 1.59vw + 2.56rem, 4.6rem) * var(--factor, 1));
-    font-weight: 750;
     line-height: 1.05;
     letter-spacing: -0.022em;
 }
@@ -1813,6 +1814,10 @@ unless a heading is the very first element in the post content */
     font-family: var(--font-serif);
 }
 
+.has-slab-title .kg-toggle-card .kg-toggle-heading-text {
+    font-family: var(--font-slab);
+}
+
 /* Callout */
 
 .kg-callout-card.kg-card {
@@ -1848,6 +1853,10 @@ blockquote.kg-blockquote-alt {
     font-family: var(--font-serif);
 }
 
+.has-slab-title .kg-card.kg-header-card h2.kg-header-card-header {
+    font-family: var(--font-slab);
+}
+
 .has-serif-body .kg-header-card h3.kg-header-card-subheader {
     font-family: var(--font-serif);
 }
@@ -1858,6 +1867,10 @@ blockquote.kg-blockquote-alt {
     border-radius: 0.25em !important;
 }
 
+.kg-bookmark-card .kg-bookmark-container:hover {
+    opacity: 1;
+}
+
 .kg-bookmark-card .kg-bookmark-content {
     padding: 1.15em;
 }
@@ -1891,12 +1904,18 @@ blockquote.kg-blockquote-alt {
     margin-top: 12px;
 }
 
-.is-font-serif .kg-product-card.kg-card .kg-product-card-title,
+.has-serif-title .kg-product-card.kg-card .kg-product-card-title {
-.is-font-serif .kg-product-card.kg-card .kg-product-card-description :is(p, ul, ol),
-.is-font-serif .kg-product-card.kg-card .kg-product-card-button {
     font-family: var(--font-serif);
 }
 
+.has-slab-title .kg-product-card.kg-card .kg-product-card-title {
+    font-family: var(--font-slab);
+}
+
+.has-serif-body .kg-product-card-description :is(p, ul, ol) {
+    font-family: var(--font-serif-alt);
+}
+
 /* File */
 
 .kg-file-card.kg-card .kg-file-card-container {
@@ -1920,7 +1939,7 @@ blockquote.kg-blockquote-alt {
 
 figcaption {
     margin-top: 12px;
-    font-size: calc(1.4rem * var(--font-multiplier, 1));
+    font-size: 1.4rem;
     text-align: center;
 }
 
@@ -2039,16 +2058,27 @@ figcaption a {
 
 /* 20.1. Typography */
 
+.has-serif-title {
+    --factor: 1.15;
+}
+
+.has-slab-title {
+    --factor: 1.1;
+}
+
 .has-sans-title .is-title {
     font-family: var(--font-sans);
+    font-weight: 800;
 }
 
 .has-serif-title .is-title {
     font-family: var(--font-serif);
+    font-weight: 600;
 }
 
 .has-slab-title .is-title {
     font-family: var(--font-slab);
+    font-weight: 650;
 }
 
 .has-sans-body .is-body {
@@ -2056,12 +2086,7 @@ figcaption a {
 }
 
 .has-serif-body .is-body {
-    font-family: Georgia;
+    font-family: var(--font-serif-alt);
-}
-
-.has-serif-title :is(.gh-navigation-logo, .gh-footer-logo) {
-    font-size: 2.8rem;
-    font-weight: 600;
 }
 
 .has-serif-title .gh-header.is-classic .gh-header-title {
@@ -2069,30 +2094,24 @@ figcaption a {
     letter-spacing: -0.015em;
 }
 
+.has-serif-title .gh-header.is-classic .gh-header-form {
+    border-radius: 0;
+}
+
 .has-serif-title .gh-card-title {
-    font-size: 2.3rem;
-    font-weight: 600;
     line-height: 1.1;
     letter-spacing: -0.006em;
 }
 
-.has-serif-title .gh-featured-feed .gh-card-title {
-    font-size: 2.1rem;
-}
-
 .has-serif-title .gh-about-title {
-    font-size: 2.6rem;
-    font-weight: 600;
     letter-spacing: -0.009em;
 }
 
 .has-serif-title .gh-footer-signup-header {
-    font-weight: 550;
     letter-spacing: -0.019em;
 }
 
 .has-serif-title .gh-article-title {
-    font-weight: 600;
     letter-spacing: -0.019em;
 }
 
@@ -2123,12 +2142,12 @@ figcaption a {
     letter-spacing: 0;
 }
 
-.has-slab-title :is(.gh-button, .gh-header-form) {
+.has-serif-title :is(.gh-button, .gh-header.is-classic .gh-header-form) {
-    border-radius: 8px;
+    border-radius: 0;
 }
 
-.has-serif-title :is(.gh-button, .gh-header-form) {
+.has-slab-title :is(.gh-button, .gh-header.is-classic .gh-header-form) {
-    border-radius: 0;
+    border-radius: 8px;
 }
 
 /* 20.2. Colors */
@@ -2141,7 +2160,7 @@ figcaption a {
 /* ---------------------------------------------------------- */
 
 .gh-footer {
-    margin-top: 120px;
+    margin-top: 160px;
     font-size: 1.6rem;
     color: var(--color-darker-gray);
 }
@@ -2188,12 +2207,15 @@ figcaption a {
 
 .gh-footer-logo {
     position: relative;
-    font-size: 2.6rem;
+    font-size: calc(2.6rem * var(--factor, 1));
-    font-weight: 750;
     letter-spacing: -0.015em;
     white-space: nowrap;
 }
 
+.gh-footer-logo img {
+    max-height: 40px;
+}
+
 .gh-footer-menu .nav {
     display: flex;
     gap: 28px;
@@ -2220,7 +2242,7 @@ figcaption a {
 }
 
 .gh-footer-signup-header {
-    font-size: clamp(3.2rem, 2.5vw + 2.2rem, 5.4rem);
+    font-size: calc(clamp(3.2rem, 2.5vw + 2.2rem, 5.4rem) * var(--factor, 1));
     font-weight: 750;
     letter-spacing: -0.03em;
 }

home.hbs

@@ -7,6 +7,12 @@
     {{> "components/featured" showFeatured=@custom.show_featured limit=4}}
 {{/match}}
 
-{{> "components/cta"}}
+{{#match @custom.header_style "!=" "Landing"}}
+{{#match @custom.header_style "!=" "Search"}}
+{{#match @custom.header_style "!=" "Off"}}
+    {{> "components/cta"}}
+{{/match}}
+{{/match}}
+{{/match}}
 
 {{> "components/post-list" postListStyle=@custom.post_list_style}}

page.hbs

@@ -6,13 +6,15 @@
 <main class="gh-main">
     <article class="gh-article {{post_class}}">
 
-        <header class="gh-article-header gh-canvas">
+        {{#match @page.show_title_and_feature_image}}
-            <h1 class="gh-article-title is-title">{{title}}</h1>
+            <header class="gh-article-header gh-canvas">
-            {{#if custom_excerpt}}
+                <h1 class="gh-article-title is-title">{{title}}</h1>
-                <p class="gh-article-excerpt is-body">{{custom_excerpt}}</p>
+                {{#if custom_excerpt}}
-            {{/if}}
+                    <p class="gh-article-excerpt is-body">{{custom_excerpt}}</p>
-            {{> "feature-image"}}
+                {{/if}}
-        </header>
+                {{> "feature-image"}}
+            </header>
+        {{/match}}
 
         <section class="gh-content gh-canvas is-body">
             {{content}}

partials/components/header.hbs

@@ -1,5 +1,5 @@
 {{#match headerStyle "!=" "Off"}}
-    <section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.use_publication_cover_as_background}} has-image{{/if}} gh-outer">
+    <section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}}{{#if @custom.use_publication_cover_as_background}}{{#if @site.cover_image}} has-image{{/if}}{{/if}} gh-outer">
         
         {{!-- Background image --}}
         {{#if @custom.use_publication_cover_as_background}}
@@ -55,7 +55,7 @@
 
             {{!-- Landing layout --}}
             {{#match headerStyle "Landing"}}
-                <h1 class="gh-header-title is-title">Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+                <h1 class="gh-header-title is-title">{{@site.description}}</h1>
                 <form class="gh-header-form">
                     <input class="gh-header-input" type="email" placeholder="jamie@example.com">
                     <button class="gh-button" type="submit">Subscribe</button>
@@ -64,7 +64,7 @@
 
             {{!-- Search layout --}}
             {{#match headerStyle "Search"}}
-                <h1 class="gh-header-title is-title">Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+                <h1 class="gh-header-title is-title">{{@site.description}}</h1>
                 <form class="gh-header-form">
                     {{> "icons/search"}}
                     <button class="gh-header-input" data-ghost-search>Search posts, tags and authors</button>

partials/components/post-list.hbs

@@ -40,9 +40,11 @@
             </aside>
         {{/if}}
 
-        <div class="gh-more is-title">
+        {{#match pagination.pages ">" 1}}
-            <a href="/page/2">See all →</a>
+            <div class="gh-more is-title">
-        </div>
+                <a href="/page/2">See all →</a>
+            </div>
+        {{/match}}
 
     </div>
 </section>