simon/ghost-theme-sd.ai
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Header component design details

Browse Source
This commit is contained in:
Sodbileg Gansukh 2023-07-11 17:55:58 +08:00
parent e29085e389
commit eefe34bc1c
8 changed files with 216 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

192
assets/css/screen.css
View File

@ -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 {

2
default.hbs
View File

@ -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
View File

@ -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": {

13
partials/components/header.hbs
View File

@ -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>

11
partials/loop.hbs
View File

@ -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
View File

@ -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"