This commit is contained in:
Sodbileg Gansukh 2023-07-26 16:03:19 +08:00
parent 93bce3d338
commit fa133aa6ad
8 changed files with 193 additions and 26 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -195,14 +195,6 @@ a:hover {
border-radius: 100px; border-radius: 100px;
} }
.has-slab-title .gh-button {
border-radius: 8px;
}
.has-serif-title .gh-button {
border-radius: 0;
}
.gh-button:hover { .gh-button:hover {
opacity: 0.95; opacity: 0.95;
} }
@ -830,7 +822,7 @@ Search LOGO Login Subscribe
.gh-header { .gh-header {
position: relative; position: relative;
margin-top: 20px; margin-top: 40px;
} }
.gh-header-image { .gh-header-image {
@ -940,11 +932,12 @@ Search LOGO Login Subscribe
.gh-header.is-highlight .gh-header-inner { .gh-header.is-highlight .gh-header-inner {
display: grid; display: grid;
grid-template-columns: 3fr 1fr; grid-template-columns: repeat(16, 1fr);
gap: var(--grid-gap); gap: var(--grid-gap);
} }
.gh-header.is-highlight .gh-card:first-child { .gh-header.is-highlight .gh-card:first-child {
grid-column: span 8;
grid-row: span 3; grid-row: span 3;
} }
@ -957,7 +950,7 @@ Search LOGO Login Subscribe
margin-bottom: 10px; margin-bottom: 10px;
} }
.gh-header.is-highlight .gh-card:first-child .gh-card-title { .gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-title {
max-width: 840px; max-width: 840px;
font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem); font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
font-weight: 750; font-weight: 750;
@ -965,12 +958,12 @@ Search LOGO Login Subscribe
letter-spacing: -0.03em; letter-spacing: -0.03em;
} }
.gh-header.is-highlight .gh-card:first-child .gh-card-excerpt { .gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-excerpt {
margin-top: 10px; margin-top: 10px;
font-size: 1.7rem; font-size: 1.7rem;
} }
.gh-header.is-highlight .gh-card:first-child .gh-card-meta:not(:empty) { .gh-header.is-highlight :is(.gh-header-inner, .gh-header-left) > .gh-card:first-child .gh-card-meta:not(:empty) {
margin-top: 14px; margin-top: 14px;
} }
@ -978,7 +971,47 @@ Search LOGO Login Subscribe
display: none; display: none;
} }
.gh-header.is-highlight .gh-card:first-child::after { .gh-header.is-highlight .gh-header-left {
position: relative;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--grid-gap);
grid-column: span 12;
}
.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:first-child .gh-card-title {
font-size: clamp(2.4rem, 2.73vw + 1.31rem, 4.8rem);
line-height: 1;
letter-spacing: -0.022em;
}
.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:nth-child(4) .gh-card-image {
display: none;
}
.gh-header.is-highlight .gh-header-right {
grid-column: 13 / -1;
}
.gh-header.is-highlight .gh-featured {
margin-top: 0;
padding: 0;
}
.gh-header.is-highlight .gh-featured-feed {
display: flex;
flex-direction: column;
}
.gh-header.is-highlight :is(.gh-card:first-child, .gh-header-left)::after {
position: absolute; position: absolute;
top: 0; top: 0;
right: calc(var(--grid-gap) / -2); right: calc(var(--grid-gap) / -2);
@ -988,7 +1021,7 @@ Search LOGO Login Subscribe
background-color: var(--color-border); background-color: var(--color-border);
} }
.gh-header.is-highlight .gh-card:not(:first-child) + .gh-card::before { .gh-header.is-highlight .gh-card + .gh-card::before {
position: absolute; position: absolute;
top: calc(var(--grid-gap) / -2); top: calc(var(--grid-gap) / -2);
left: 0; left: 0;
@ -998,6 +1031,15 @@ Search LOGO Login Subscribe
background-color: var(--color-border); 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-featured .gh-card::after {
display: none;
}
/* .gh-header.is-highlight .gh-featured-feed .gh-card::before {
dis
} */
/* 8.3. Classic layout */ /* 8.3. Classic layout */
.gh-header.is-classic { .gh-header.is-classic {
@ -1117,7 +1159,8 @@ Search LOGO Login Subscribe
} }
.gh-featured-feed .gh-card-title { .gh-featured-feed .gh-card-title {
font-size: 1.8rem; font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.011em; letter-spacing: -0.011em;
} }
@ -1930,12 +1973,107 @@ figcaption a {
letter-spacing: 0; letter-spacing: 0;
} }
.has-slab-title :is(.gh-button, .gh-header-form) {
border-radius: 8px;
}
.has-serif-title :is(.gh-button, .gh-header-form) {
border-radius: 0;
}
/* 19.2. Colors */ /* 19.2. Colors */
.has-light-text .gh-header.is-classic .gh-header-form:hover { .has-light-text .gh-header.is-classic .gh-header-form:hover {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
.gh-cta {
margin-top: 64px;
}
.gh-cta-inner {
display: flex;
flex-direction: row;
align-items: center;
gap: 34px;
padding-top: 40px;
border-top: 1px solid var(--color-border);
}
.gh-cta-inner > * {
flex: 1;
}
.gh-cta-content {
padding: 8px 0 8px 24px;
border-left: 8px solid var(--ghost-accent-color);
}
.gh-cta-title {
max-width: 720px;
font-size: 3.8rem;
font-weight: 750;
line-height: 1.1;
letter-spacing: -0.017em;
}
.gh-cta-description {
margin-top: 8px;
font-size: 2rem;
font-weight: 450;
line-height: 1.4;
letter-spacing: -.015em;
color: var(--color-secondary-text);
}
.gh-cta .gh-header-form {
display: flex;
align-items: center;
position: relative;
overflow: hidden;
max-width: 640px;
width: 100%;
height: 64px;
font-size: 1.8rem;
font-weight: 450;
letter-spacing: -0.008em;
border-radius: 40px;
background-color: var(--color-lighter-gray);
transition: background-color 0.2s ease;
}
.gh-cta .gh-header-form:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.gh-cta .gh-header-input {
position: absolute;
inset: 0;
padding-inline: 28px;
width: 100%;
height: 100%;
font-size: inherit;
letter-spacing: inherit;
border: 0;
background-color: transparent;
}
.gh-cta button.gh-header-input {
padding-inline-start: 56px;
text-align: left;
color: var(--color-secondary-text);
cursor: pointer;
}
.gh-cta .gh-button {
position: absolute;
right: 6px;
padding-inline: 32px;
height: 52px;
font-size: inherit;
font-weight: 600;
}
/* X. Footer /* X. Footer
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
@ -2015,7 +2153,7 @@ figcaption a {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-block: 100px; padding-block: 80px 100px;
} }
.gh-footer-signup-header { .gh-footer-signup-header {

View File

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

View File

@ -133,13 +133,13 @@
"header_style": { "header_style": {
"type": "select", "type": "select",
"options": [ "options": [
"Magazine",
"Highlight", "Highlight",
"Magazine",
"Landing", "Landing",
"Search", "Search",
"Off" "Off"
], ],
"default": "Magazine", "default": "Highlight",
"group": "homepage" "group": "homepage"
}, },
"use_publication_cover_as_background": { "use_publication_cover_as_background": {

View File

@ -0,0 +1,12 @@
<section class="gh-cta gh-outer">
<div class="gh-cta-inner gh-inner">
<div class="gh-cta-content">
<h2 class="gh-cta-title is-title">{{@custom.footer_signup_header}}</h2>
<p class="gh-cta-description is-body">{{@custom.footer_signup_subhead}}</p>
</div>
<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>
</div>
</section>

View File

@ -1,5 +1,5 @@
{{#if showFeatured}} {{#if showFeatured}}
{{#get "posts" filter="featured:true" include="authors" limit="4" as |featured|}} {{#get "posts" filter="featured:true" include="authors" limit=limit as |featured|}}
{{#if featured}} {{#if featured}}
<section class="gh-featured gh-outer"> <section class="gh-featured gh-outer">
<div class="gh-featured-inner gh-inner"> <div class="gh-featured-inner gh-inner">

View File

@ -35,9 +35,20 @@
{{!-- Highlight layout --}} {{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}} {{#match headerStyle "Highlight"}}
{{#foreach posts limit="4"}} {{#if @custom.show_featured}}
{{> "loop"}} <div class="gh-header-left">
{{/foreach}} {{#foreach posts limit="4"}}
{{> "loop"}}
{{/foreach}}
</div>
<div class="gh-header-right">
{{> "components/featured" showFeatured=@custom.show_featured limit=6}}
</div>
{{else}}
{{#foreach posts limit="4"}}
{{> "loop"}}
{{/foreach}}
{{/if}}
{{/match}} {{/match}}
{{!-- Landing layout --}} {{!-- Landing layout --}}