Archive page

assets/css/screen.css

@@ -249,8 +249,8 @@ a:hover {
 
 .gh-canvas,
 .kg-width-full.kg-content-wide {
-    --main: min(var(--content-width, 680px), 100% - var(--container-gap) * 2);
+    --main: min(var(--content-width, 720px), 100% - var(--container-gap) * 2);
-    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 680px)) / 2));
+    --wide: minmax(0, calc((var(--container-width, 1200px) - var(--content-width, 720px)) / 2));
     --full: minmax(var(--container-gap), 1fr);
 
     display: grid;
@@ -937,41 +937,6 @@ Search                         LOGO                    Login Subscribe
     gap: var(--grid-gap);
 }
 
-.gh-header.is-highlight .gh-card:first-child {
-    grid-column: span 8;
-    grid-row: span 3;
-}
-
-.gh-header.is-highlight .gh-card:first-child .gh-card-link {
-    gap: 28px;
-}
-
-.gh-header.is-highlight .gh-card:first-child .gh-card-tag {
-    display: block;
-    margin-bottom: 12px;
-}
-
-.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-title {
-    max-width: 840px;
-    font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
-    font-weight: 750;
-    line-height: 0.95;
-    letter-spacing: -0.03em;
-}
-
-.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-excerpt {
-    margin-top: 20px;
-    font-size: 1.8rem;
-}
-
-.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-meta:not(:empty) {
-    margin-top: 14px;
-}
-
-.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
-    display: none;
-}
-
 .gh-header.is-highlight .gh-header-left {
     position: relative;
     display: grid;
@@ -980,8 +945,22 @@ Search                         LOGO                    Login Subscribe
     grid-column: span 12;
 }
 
-.gh-header.is-highlight .gh-header-left .gh-card:not(:first-child) {
+.gh-header.is-highlight .gh-header-left > .gh-card:first-child {
-    grid-column: 9 / -1;
+    grid-column: span 8;
+    grid-row: span 3;
+}
+
+.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-link {
+    gap: 28px;
+}
+
+.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-image {
+    aspect-ratio: 16 / 10;
+}
+
+.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-tag {
+    display: block;
+    margin-bottom: 12px;
 }
 
 .gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-title {
@@ -990,14 +969,27 @@ Search                         LOGO                    Login Subscribe
     letter-spacing: -0.022em;
 }
 
-.gh-header.is-highlight .gh-header-left .gh-card:first-child .gh-card-image {
+.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-excerpt {
-    aspect-ratio: 16 / 10;
+    margin-top: 20px;
+    font-size: 1.8rem;
+}
+
+.gh-header.is-highlight .gh-header-left > .gh-card:first-child .gh-card-meta:not(:empty) {
+    margin-top: 14px;
+}
+
+.gh-header.is-highlight .gh-header-left .gh-card:not(:first-child) {
+    grid-column: 9 / -1;
 }
 
 .gh-header.is-highlight .gh-header-left .gh-card:nth-child(4) .gh-card-image {
     display: none;
 }
 
+.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
+    display: none;
+}
+
 .gh-header.is-highlight .gh-header-right {
     grid-column: 13 / -1;
 }
@@ -1012,7 +1004,7 @@ Search                         LOGO                    Login Subscribe
     flex-direction: column;
 }
 
-.gh-header.is-highlight :is(.gh-card:first-child, .gh-header-left)::after {
+.gh-header.is-highlight .gh-header-left::after {
     position: absolute;
     top: 0;
     right: calc(var(--grid-gap) / -2);
@@ -1032,15 +1024,11 @@ Search                         LOGO                    Login Subscribe
     background-color: var(--color-border);
 }
 
-.gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:nth-child(2)::before,
+.gh-header.is-highlight .gh-header-left > .gh-card:nth-child(2)::before,
-.gh-header.is-highlight .gh-featured .gh-card::after {
+.gh-header.is-highlight .gh-featured-feed .gh-card::after {
     display: none;
 }
 
-/* .gh-header.is-highlight .gh-featured-feed .gh-card::before {
-    dis
-} */
-
 /* 8.3. Classic layout */
 
 .gh-header.is-classic {
@@ -1290,6 +1278,23 @@ Search                         LOGO                    Login Subscribe
     margin-top: 100px;
 }
 
+.gh-more {
+    display: none;
+    grid-column: 1 / -1;
+    margin-top: 48px;
+    font-size: 1.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+}
+
+.gh-container.has-sidebar .gh-more {
+    grid-column: span 12;
+}
+
+.home-template .gh-more {
+    display: block;
+}
+
 /* 11.1. With sidebar */
 
 .gh-container.has-sidebar .gh-main {
@@ -1488,9 +1493,9 @@ Search                         LOGO                    Login Subscribe
 .gh-article-excerpt {
     margin-top: 16px;
     max-width: 720px;
-    font-size: 2rem;
+    font-size: 2.2rem;
     line-height: 1.35;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.018em;
 }
 
 .gh-article-meta {
@@ -1567,11 +1572,7 @@ Search                         LOGO                    Login Subscribe
 /* 14.2. Page template */
 
 .page-template .gh-article-header {
-    margin-block: 72px 24px;
+    margin-block: 72px 32px;
-}
-
-.page-template .gh-article-excerpt {
-    margin-bottom: 12px;
 }
 
 /* 14.3. Page without header */
@@ -1596,7 +1597,7 @@ created within the Ghost editor. The main content handles
 headings, text, images and lists. We deal with cards lower down. */
 
 .gh-content {
-    font-size: calc(var(--content-font-size, 1.7rem) * var(--font-multiplier, 1));
+    font-size: calc(var(--content-font-size, 1.8rem) * var(--font-multiplier, 1));
     letter-spacing: var(--content-letter-spacing, 0);
 }
 

home.hbs

@@ -0,0 +1,12 @@
+{{!< default}}
+{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
+
+{{> "components/header" headerStyle=@custom.header_style}}
+
+{{#match @custom.header_style "!=" "Highlight"}}
+    {{> "components/featured" showFeatured=@custom.show_featured limit=4}}
+{{/match}}
+
+{{> "components/cta"}}
+
+{{> "components/post-list" postListStyle=@custom.post_list_style}}

index.hbs

@@ -1,12 +1,48 @@
 {{!< default}}
 {{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
 
-{{> "components/header" headerStyle=@custom.header_style}}
+<main class="gh-main gh-outer">
 
-{{#match @custom.header_style "!=" "Highlight"}}
+    <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.show_sidebar}} has-sidebar{{/if}}{{#if @custom.hide_images}} no-image{{/if}}">
-    {{> "components/featured" showFeatured=@custom.show_featured limit=4}}
+        <div class="gh-container-inner gh-inner">
-{{/match}}
 
-{{> "components/cta"}}
+            <h2 class="gh-container-title">Latest</h2>
             
-{{> "components/post-list" postListStyle=@custom.post_list_style}}
+            <main class="gh-main">
+                <div class="gh-feed">
+                    {{#match pagination.page 2}}
+                        {{#get "posts" include="authors" limit=@config.posts_per_page as |recent|}}
+                            {{#foreach recent}}
+                                {{> "post-card"}}
+                            {{/foreach}}
+                        {{/get}}
+                    {{/match}}
+                    {{#foreach posts}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+            </main>
+
+            {{#if @custom.show_sidebar}}
+                <aside class="gh-sidebar">
+                    <section class="gh-about">
+                        {{#if @site.icon}}
+                            <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
+                        {{/if}}
+                        <h3 class="gh-about-title is-title">{{@site.title}}</h3>
+                        {{#if @site.description}}
+                            <p class="gh-about-description is-body">{{@site.description}}</p>
+                        {{/if}}
+                        {{#if @site.members_enabled}}
+                            {{#unless @member}}
+                                <button class="gh-button">Subscribe</button>
+                            {{/unless}}
+                        {{/if}}
+                    </section>
+                </aside>
+            {{/if}}
+
+        </div>
+    </section>
+
+</main>

partials/components/header.hbs

@@ -14,6 +14,26 @@
 
         <div class="gh-header-inner gh-inner">
 
+            {{!-- Highlight layout --}}
+            {{#match headerStyle "Highlight"}}
+                <div class="gh-header-left">
+                    {{#foreach posts limit="4"}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                </div>
+                <div class="gh-header-right">
+                    {{#if @custom.show_featured}}
+                        {{> "components/featured" showFeatured=@custom.show_featured limit=6}}
+                    {{else}}
+                        <div class="gh-featured-feed">
+                            {{#foreach posts from="5" limit="6"}}
+                                {{> "post-card"}}
+                            {{/foreach}}
+                        </div>
+                    {{/if}}
+                </div>
+            {{/match}}
+
             {{!-- Magazine layout --}}
             {{#match headerStyle "Magazine"}}
                 {{#foreach posts limit="7"}}
@@ -33,24 +53,6 @@
                 {{/foreach}}
             {{/match}}
 
-            {{!-- Highlight layout --}}
-            {{#match headerStyle "Highlight"}}
-                {{#if @custom.show_featured}}
-                    <div class="gh-header-left">
-                        {{#foreach posts limit="4"}}
-                            {{> "post-card"}}
-                        {{/foreach}}
-                    </div>
-                    <div class="gh-header-right">
-                        {{> "components/featured" showFeatured=@custom.show_featured limit=6}}
-                    </div>
-                {{else}}
-                    {{#foreach posts limit="4"}}
-                        {{> "post-card"}}
-                    {{/foreach}}
-                {{/if}}
-            {{/match}}
-
             {{!-- 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>

partials/components/post-list.hbs

@@ -5,9 +5,19 @@
 
         <main class="gh-main">
             <div class="gh-feed">
+                {{#match @custom.header_style "Highlight"}}
+                    {{#foreach posts from="11" limit="9"}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                {{else match @custom.header_style "Magazine"}}
                     {{#foreach posts from="8" limit="9"}}
                         {{> "post-card"}}
                     {{/foreach}}
+                {{else}}
+                    {{#foreach posts limit="9"}}
+                        {{> "post-card"}}
+                    {{/foreach}}
+                {{/match}}
             </div>
         </main>
 
@@ -30,5 +40,9 @@
             </aside>
         {{/if}}
 
+        <div class="gh-more">
+            <a href="/page/2">See all →</a>
+        </div>
+
     </div>
 </section>

tag copy.hbs

@@ -1,38 +0,0 @@
-{{!< default}}
-{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
-
-<main class="gh-main gh-outer">
-    <div class="gh-archive gh-inner">
-
-        {{#tag}}
-            <section class="gh-archive-content">
-                <div class="gh-archive-inner">
-                    {{#if feature_image}}
-                        <img class="gh-archive-image" src="{{img_url feature_image size="s"}}" alt="{{name}}">
-                    {{/if}}
-                    <h1 class="gh-archive-title is-title">{{name}}</h1>
-                    <p class="gh-archive-description">
-                        {{#if description}}
-                            {{description}}
-                        {{else}}
-                            {{plural ../pagination.total empty="0 posts" singular="% post" plural="% posts"}}
-                        {{/if}}
-                    </p>
-                </div>
-            </section>
-        {{/tag}}
-        
-        <section class="gh-container is-{{#match @custom.post_list_style "List"}}list{{else}}grid{{/match}}{{#if @custom.hide_images}} no-image{{/if}}">
-            <div class="gh-container-inner">
-                <main class="gh-main">
-                    <div class="gh-feed">
-                        {{#foreach posts}}
-                            {{> "post-card"}}
-                        {{/foreach}}
-                    </div>
-                </main>
-            </div>
-        </section>
-
-    </div>
-</main>