Header component design details

assets/css/screen.css

@@ -65,7 +65,7 @@ p, h1, h2, h3, h4, h5, h6 {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    line-height: 1.3;
+    line-height: 1.2;
 }
 
 /* 3. Globals */
@@ -633,6 +633,16 @@ Search                         LOGO                    Login Subscribe
 
 /* Card */
 
+.gh-card {
+    position: relative;
+}
+
+.gh-card-link {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
 .gh-card-link:hover {
     opacity: 1;
 }
@@ -655,10 +665,38 @@ Search                         LOGO                    Login Subscribe
     flex-grow: 1;
 }
 
+.gh-card-tag {
+    display: none;
+    margin-bottom: 4px;
+    font-size: 1.2rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    text-transform: uppercase;
+}
+
+.gh-card-title {
+    font-size: 2rem;
+    letter-spacing: -0.017em;
+}
+
+.gh-card-excerpt {
+    margin-top: 12px;
+    max-width: 720px;
+    line-height: 1.45;
+}
+
 .gh-card-meta {
     display: flex;
     gap: 4px;
     flex-wrap: wrap;
+    font-size: 1.3rem;
+    font-weight: 500;
+    letter-spacing: -0.0025em;
+    color: var(--color-secondary-text);
+}
+
+.gh-card-meta:not(:empty) {
+    margin-top: 8px;
 }
 
 .gh-card-author + .gh-card-date::before {
@@ -670,7 +708,7 @@ Search                         LOGO                    Login Subscribe
 
 .gh-header {
     position: relative;
-    margin: 40px;
+    margin-top: 40px;
 }
 
 .gh-header-image {
@@ -705,6 +743,7 @@ Search                         LOGO                    Login Subscribe
 }
 
 .gh-header.is-magazine .gh-header-inner > .gh-card {
+    position: relative;
     grid-column: 5 / span 8;
 }
 
@@ -712,10 +751,59 @@ Search                         LOGO                    Login Subscribe
     grid-column: 13 / -1;
 }
 
+.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-link {
+    gap: 20px;
+}
+
+.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-tag {
+    display: block;
+    margin-bottom: 8px;
+}
+
+.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
+    font-size: clamp(2rem, 2.73vw + 0.91rem, 4.4rem);
+    line-height: 1.05;
+    letter-spacing: -0.022em;
+}
+
+.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-meta:not(:empty) {
+    margin-top: 10px;
+}
+
+.gh-header.is-magazine :is(.gh-header-left, .gh-header-right) .gh-card:last-child .gh-card-image {
+    display: none;
+}
+
 .gh-header.is-magazine .gh-header-inner > div .gh-card-excerpt {
     display: none;
 }
 
+.gh-header.is-magazine .gh-header-inner > .gh-card::before,
+.gh-header.is-magazine .gh-header-inner > .gh-card::after {
+    position: absolute;
+    top: 0;
+    left: calc(var(--grid-gap) / -2);
+    content: "";
+    width: 1px;
+    height: 100%;
+    background-color: var(--color-border);
+}
+
+.gh-header.is-magazine .gh-header-inner > .gh-card::after {
+    right: calc(var(--grid-gap) / -2);
+    left: auto;
+}
+
+.gh-header.is-magazine .gh-header-inner > div .gh-card + .gh-card::before {
+    position: absolute;
+    top: calc(var(--grid-gap) / -2);
+    left: 0;
+    content: "";
+    width: 100%;
+    height: 1px;
+    background-color: var(--color-border);
+}
+
 /* 6.2. Highlight layout */
 
 .gh-header.is-highlight .gh-header-inner {
@@ -728,10 +816,53 @@ Search                         LOGO                    Login Subscribe
     grid-row: span 3;
 }
 
+.gh-header.is-highlight .gh-card:first-child .gh-card-link {
+    gap: 20px;
+}
+
+.gh-header.is-highlight .gh-card:first-child .gh-card-image {
+    aspect-ratio: 16 / 10;
+}
+
+.gh-header.is-highlight .gh-card:first-child .gh-card-tag {
+    display: block;
+    margin-bottom: 8px;
+}
+
+.gh-header.is-highlight .gh-card:first-child .gh-card-title {
+    font-size: clamp(2rem, 3.64vw + 0.55rem, 5.2rem);
+    line-height: 1.05;
+    letter-spacing: -0.022em;
+}
+
+.gh-header.is-highlight .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-card:first-child::after {
+    position: absolute;
+    top: 0;
+    right: calc(var(--grid-gap) / -2);
+    content: "";
+    width: 1px;
+    height: 100%;
+    background-color: var(--color-border);
+}
+
+.gh-header.is-highlight .gh-card:not(:first-child) + .gh-card::before {
+    position: absolute;
+    top: calc(var(--grid-gap) / -2);
+    left: 0;
+    content: "";
+    width: 100%;
+    height: 1px;
+    background-color: var(--color-border);
+}
+
 /* 6.3. Classic layout */
 
 .gh-header.is-classic {
@@ -743,15 +874,68 @@ Search                         LOGO                    Login Subscribe
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 32px;
+    gap: 48px;
     margin: auto;
-    max-width: 720px;
+    max-width: 960px;
+    text-align: center;
 }
 
 .gh-header.is-classic.has-image .gh-header-inner {
     color: #fff;
 }
 
+.gh-header.is-classic .gh-header-title {
+    font-size: clamp(4rem, 2.27vw + 3.09rem, 6rem);
+    line-height: 1.1;
+    letter-spacing: -0.022em;
+}
+
+.gh-header.is-classic .gh-header-form {
+    display: flex;
+    align-items: center;
+    position: relative;
+    max-width: 640px;
+    width: 100%;
+    height: 64px;
+    font-size: 1.8rem;
+    letter-spacing: -0.014em;
+    border-radius: 40px;
+    background-color: var(--color-lighter-gray);
+}
+
+.gh-header.is-classic .gh-header-input {
+    padding-inline: 24px;
+    width: 100%;
+    height: 100%;
+    font-size: inherit;
+    letter-spacing: inherit;
+    border: 0;
+    background-color: transparent;
+}
+
+.gh-header.is-classic button.gh-header-input {
+    padding-inline-start: 32px;
+    text-align: left;
+    color: var(--color-secondary-text);
+}
+
+.gh-header.is-classic .gh-button {
+    position: absolute;
+    right: 6px;
+    padding-inline: 40px;
+    height: 52px;
+    font-size: inherit;
+    font-weight: 600;
+}
+
+.gh-header.is-classic svg {
+    position: relative;
+    left: 20px;
+    width: 24px;
+    height: 24px;
+    color: var(--color-secondary-text);
+}
+
 /* 7. Featured posts */
 
 .gh-featured {

default.hbs

@@ -25,6 +25,8 @@
         }
     </style>
 
+    <script src="http://localhost:35729/livereload.js?snipver=1"></script>
+
     <script>
         /* The script for calculating the color contrast has been taken from
         https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */

package.json

@@ -54,7 +54,6 @@
         "gulp-zip": "5.1.0",
         "inquirer": "8.2.4",
         "postcss": "8.2.13",
-        "postcss-color-mod-function": "3.0.3",
         "postcss-easy-import": "4.0.0",
         "pump": "3.0.0"
     },
@@ -108,12 +107,19 @@
             },
             "title_font": {
                 "type": "select",
-                "options": ["Modern sans-serif", "Elegant serif", "Clean slab"],
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif",
+                    "Clean slab"
+                ],
                 "default": "Modern sans-serif"
             },
             "body_font": {
                 "type": "select",
-                "options": ["Modern sans-serif", "Elegant serif"],
+                "options": [
+                    "Modern sans-serif",
+                    "Elegant serif"
+                ],
                 "default": "Modern sans-serif"
             },
             "footer_signup_header": {

partials/components/header.hbs

@@ -42,17 +42,20 @@
 
             {{!-- Landing layout --}}
             {{#match headerStyle "Landing"}}
-                <h1 data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+                <h1 class="gh-header-title" data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
-                <form>
+                <form class="gh-header-form">
-                    <input type="email" placeholder="jamie@example.com">
+                    <input class="gh-header-input" type="email" placeholder="jamie@example.com">
                     <button class="gh-button" type="submit">Subscribe</button>
                 </form>
             {{/match}}
 
             {{!-- Search layout --}}
             {{#match headerStyle "Search"}}
-                <h1 data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
+                <h1 class="gh-header-title" data-title>Founded by Australian journalist Claire Lehmann, Quillette publishes high quality long reads on diverse topics, daily.</h1>
-                <button data-ghost-search>{{> "icons/search"}}Search</button>
+                <form class="gh-header-form">
+                    {{> "icons/search"}}
+                    <button class="gh-header-input" data-ghost-search>Search posts, tags and authors</button>
+                </form>
             {{/match}}
 
         </div>

partials/loop.hbs

@@ -15,16 +15,19 @@
             </figure>
         {{/if}}
         <div class="gh-card-wrapper">
+            {{#if primary_tag}}
+                <p class="gh-card-tag">{{primary_tag.name}}</p>
+            {{/if}}
             <h3 class="gh-card-title" data-title>{{title}}</h3>
             <p class="gh-card-excerpt" data-body>{{excerpt}}</p>
-            <footer class="gh-card-meta" data-body>
+            <footer class="gh-card-meta" data-body><!--
-                {{#if @custom.show_author}}
+             -->{{#if @custom.show_author}}
                     <span class="gh-card-author">By {{#foreach authors}}{{#if @first}}{{name}}{{else}}, {{name}}{{/if}}{{/foreach}}</span>
                 {{/if}}
                 {{#if @custom.show_post_date}}
                     <time class="gh-card-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
-                {{/if}}
+                {{/if}}<!--
-            </footer>
+         --></footer>
         </div>
     </a>
 </article>

yarn.lock

@@ -2,11 +2,6 @@
 # yarn lockfile v1
 
 
-"@csstools/convert-colors@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
-  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
-
 "@elastic/elasticsearch@8.7.0":
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/@elastic/elasticsearch/-/elasticsearch-8.7.0.tgz#eb0396f6899e0000109af55cffee514811e571ee"
@@ -3134,11 +3129,6 @@ flagged-respawn@^1.0.0:
   resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-1.0.1.tgz#e7de6f1279ddd9ca9aac8a5971d618606b3aab41"
   integrity sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==
 
-flatten@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
-  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
-
 flush-write-stream@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -3730,11 +3720,6 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-indexes-of@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
-  integrity sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -4877,11 +4862,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==
 
-picocolors@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
-  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -4942,15 +4922,6 @@ postcss-calc@^8.2.3:
     postcss-selector-parser "^6.0.9"
     postcss-value-parser "^4.2.0"
 
-postcss-color-mod-function@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
-  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
 postcss-colormin@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-5.3.1.tgz#86c27c26ed6ba00d96c79e08f3ffb418d1d1988f"
@@ -5183,15 +5154,6 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss-values-parser@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
-  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
 postcss@8.2.13:
   version "8.2.13"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.13.tgz#dbe043e26e3c068e45113b1ed6375d2d37e2129f"
@@ -5201,14 +5163,6 @@ postcss@8.2.13:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
-postcss@^7.0.2:
-  version "7.0.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
-  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
-  dependencies:
-    picocolors "^0.2.1"
-    source-map "^0.6.1"
-
 prepend-http@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897"
@@ -6244,11 +6198,6 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
-uniq@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
-  integrity sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==
-
 unique-stream@^2.0.2:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/unique-stream/-/unique-stream-2.3.1.tgz#c65d110e9a4adf9a6c5948b28053d9a8d04cbeac"