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

CTA

Browse Source
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
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

172
assets/css/screen.css
View File

@ -195,14 +195,6 @@ a:hover {
border-radius: 100px;
}
.has-slab-title .gh-button {
border-radius: 8px;
}
.has-serif-title .gh-button {
border-radius: 0;
}
.gh-button:hover {
opacity: 0.95;
}
@ -830,7 +822,7 @@ Search LOGO Login Subscribe
.gh-header {
position: relative;
margin-top: 20px;
margin-top: 40px;
}
.gh-header-image {
@ -940,11 +932,12 @@ Search LOGO Login Subscribe
.gh-header.is-highlight .gh-header-inner {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-columns: repeat(16, 1fr);
gap: var(--grid-gap);
}
.gh-header.is-highlight .gh-card:first-child {
grid-column: span 8;
grid-row: span 3;
}
@ -957,7 +950,7 @@ Search LOGO Login Subscribe
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;
font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
font-weight: 750;
@ -965,12 +958,12 @@ Search LOGO Login Subscribe
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;
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;
}
@ -978,7 +971,47 @@ Search LOGO Login Subscribe
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;
top: 0;
right: calc(var(--grid-gap) / -2);
@ -988,7 +1021,7 @@ Search LOGO Login Subscribe
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;
top: calc(var(--grid-gap) / -2);
left: 0;
@ -998,6 +1031,15 @@ Search LOGO Login Subscribe
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 */
.gh-header.is-classic {
@ -1117,7 +1159,8 @@ Search LOGO Login Subscribe
}
.gh-featured-feed .gh-card-title {
font-size: 1.8rem;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.011em;
}
@ -1930,12 +1973,107 @@ figcaption a {
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 */
.has-light-text .gh-header.is-classic .gh-header-form:hover {
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
/* ---------------------------------------------------------- */
@ -2015,7 +2153,7 @@ figcaption a {
display: flex;
flex-direction: column;
align-items: center;
padding-block: 100px;
padding-block: 80px 100px;
}
.gh-footer-signup-header {

8
index.hbs
View File

@ -2,5 +2,11 @@
{{!-- The tag above means: insert everything in this file into the body of the default.hbs template --}}
{{> "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}}

4
package.json
View File

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

12
partials/components/cta.hbs Normal file
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>

2
partials/components/featured.hbs
View File

@ -1,5 +1,5 @@
{{#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}}
<section class="gh-featured gh-outer">
<div class="gh-featured-inner gh-inner">

17
partials/components/header.hbs
View File

@ -35,9 +35,20 @@
{{!-- Highlight layout --}}
{{#match headerStyle "Highlight"}}
{{#foreach posts limit="4"}}
{{> "loop"}}
{{/foreach}}
{{#if @custom.show_featured}}
<div class="gh-header-left">
{{#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}}
{{!-- Landing layout --}}