Header component design details
This commit is contained in:
Sodbileg Gansukh
parent
e29085e389
commit
eefe34bc1c
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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 {
|
||||
|
||||
@ -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/ */
|
||||
|
||||
12
package.json
12
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": {
|
||||
|
||||
@ -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>
|
||||
<form>
|
||||
<input type="email" placeholder="jamie@example.com">
|
||||
<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 class="gh-header-form">
|
||||
<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>
|
||||
<button data-ghost-search>{{> "icons/search"}}Search</button>
|
||||
<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 class="gh-header-form">
|
||||
{{> "icons/search"}}
|
||||
<button class="gh-header-input" data-ghost-search>Search posts, tags and authors</button>
|
||||
</form>
|
||||
{{/match}}
|
||||
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
{{#if @custom.show_author}}
|
||||
<footer class="gh-card-meta" data-body><!--
|
||||
-->{{#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}}
|
||||
</footer>
|
||||
{{/if}}<!--
|
||||
--></footer>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
51
yarn.lock
51
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user