Header styles

assets/css/screen.css

@@ -581,3 +581,71 @@ Search                         LOGO                    Login Subscribe
         opacity: 0;
     }
 }
+
+/* Card */
+
+.gh-card-image {
+    position: relative;
+    aspect-ratio: 16 / 9;
+}
+
+.gh-card-image img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 6. Header */
+
+.gh-header {
+    --gap: 40px;
+}
+
+/* 6.1. Magazine layout */
+
+.gh-header.is-magazine .gh-header-inner {
+    display: grid;
+    grid-template-columns: 1fr 2fr 1fr;
+    gap: var(--gap);
+}
+
+.gh-header.is-magazine .gh-header-inner > div {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    grid-row: 1;
+}
+
+.gh-header.is-magazine .gh-header-left {
+    grid-column: 1;
+}
+
+.gh-header.is-magazine .gh-header-inner > .gh-card {
+    grid-column: 2;
+}
+
+.gh-header.is-magazine .gh-header-right {
+    grid-column: 3;
+}
+
+.gh-header.is-magazine .gh-header-inner > div .gh-card-excerpt {
+    display: none;
+}
+
+/* 6.2. Highlight layout */
+
+.gh-header.is-highlight .gh-header-inner {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    gap: var(--gap);
+}
+
+.gh-header.is-highlight .gh-card:first-child {
+    grid-row: span 3;
+}
+
+.gh-header.is-highlight .gh-card:not(:first-child) .gh-card-excerpt {
+    display: none;
+}

default.hbs

@@ -23,6 +23,7 @@
 <div class="gh-viewport">
     
     {{> "components/navigation" navigationLayout=@custom.navigation_layout}}
+    {{> "components/header" headerStyle="Search"}}
     
     {{{body}}}
 

package.json

@@ -93,6 +93,17 @@
                     "Stacked"
                 ],
                 "default": "Logo in the middle"
+            },
+            "header_style": {
+                "type": "select",
+                "options": [
+                    "Magazine",
+                    "Highlight",
+                    "Landing",
+                    "Search"
+                ],
+                "default": "Magazine",
+                "group": "homepage"
             }
         }
     },

partials/components/header.hbs

@@ -0,0 +1,46 @@
+<section class="gh-header is-{{#match headerStyle "Magazine"}}magazine{{else match headerStyle "Highlight"}}highlight{{else}}classic{{/match}} gh-outer">
+    <div class="gh-header-inner gh-inner">
+
+        {{!-- Magazine layout --}}
+        {{#match headerStyle "Magazine"}}
+            {{#foreach posts limit="7"}}
+                {{#match @number 2}}
+                    <div class="gh-header-left">
+                {{/match}}
+                {{#match @number 5}}
+                    <div class="gh-header-right">
+                {{/match}}
+                {{> "loop"}}
+                {{#match @number 4}}
+                    </div>
+                {{/match}}
+                {{#match @number 7}}
+                    </div>
+                {{/match}}
+            {{/foreach}}
+        {{/match}}
+
+        {{!-- Highlight layout --}}
+        {{#match headerStyle "Highlight"}}
+            {{#foreach posts limit="4"}}
+                {{> "loop"}}
+            {{/foreach}}
+        {{/match}}
+
+        {{!-- Landing layout --}}
+        {{#match headerStyle "Landing"}}
+            <h1>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+            <form>
+                <input type="email">
+                <button type="submit">Subscribe</button>
+            </form>
+        {{/match}}
+
+        {{!-- Search layout --}}
+        {{#match headerStyle "Search"}}
+            <h1>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+            <div>Search</div>
+        {{/match}}
+
+    </div>
+</section>

partials/loop.hbs

@@ -0,0 +1,22 @@
+<article class="gh-card {{post_class}}">
+    <a class="gh-card-link" href="{{url}}">
+        {{#if feature_image}}
+            <figure class="gh-card-image">
+                <img
+                    srcset="{{img_url feature_image size="s"}} 300w,
+                            {{img_url feature_image size="m"}} 720w,
+                            {{img_url feature_image size="l"}} 960w,
+                            {{img_url feature_image size="xl"}} 1200w,
+                            {{img_url feature_image size="xxl"}} 2000w"
+                    sizes="(max-width: 1200px) 100vw, 1200px"
+                    src="{{img_url feature_image size="m"}}"
+                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                >
+            </figure>
+        {{/if}}
+        <div class="gh-card-wrapper">
+            <h2 class="gh-card-title">{{title}}</h2>
+            <p class="gh-card-excerpt">{{excerpt}}</p>
+        </div>
+    </a>
+</article>