CTA update

This commit is contained in:
Sodbileg Gansukh 2023-07-27 14:59:33 +08:00
parent 1ee17823c2
commit 29eb718d8d
5 changed files with 29 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

@ -777,7 +777,7 @@ Search LOGO Login Subscribe
} }
.gh-card-title { .gh-card-title {
font-size: 2.2rem; font-size: 2.1rem;
font-weight: 800; font-weight: 800;
letter-spacing: -0.014em; letter-spacing: -0.014em;
} }
@ -1161,7 +1161,7 @@ Search LOGO Login Subscribe
.gh-featured-feed .gh-card-title { .gh-featured-feed .gh-card-title {
display: -webkit-box; display: -webkit-box;
overflow-y: hidden; overflow-y: hidden;
font-size: 1.6rem; font-size: 1.7rem;
font-weight: 725; font-weight: 725;
letter-spacing: -0.011em; letter-spacing: -0.011em;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
@ -1295,6 +1295,7 @@ Search LOGO Login Subscribe
.gh-container.is-grid .gh-feed { .gh-container.is-grid .gh-feed {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
row-gap: calc(var(--grid-gap) * 1.5);
overflow: hidden; overflow: hidden;
} }
@ -2000,33 +2001,24 @@ figcaption a {
} }
.gh-cta { .gh-cta {
margin-top: 64px; margin-top: calc(var(--grid-gap) / 2);
} }
.gh-cta-inner { .gh-cta-inner {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
align-items: center; align-items: center;
gap: 34px; gap: 24px;
padding-top: 40px; padding-top: 80px;
border-top: 1px solid var(--color-border); 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 { .gh-cta-title {
max-width: 720px; max-width: 720px;
font-size: 3.8rem; font-size: 4.4rem;
font-weight: 750; font-weight: 800;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.017em; letter-spacing: -0.026em;
} }
.gh-cta-description { .gh-cta-description {
@ -2034,7 +2026,7 @@ figcaption a {
font-size: 2rem; font-size: 2rem;
font-weight: 450; font-weight: 450;
line-height: 1.4; line-height: 1.4;
letter-spacing: -.015em; letter-spacing: -.017em;
color: var(--color-secondary-text); color: var(--color-secondary-text);
} }
@ -2043,7 +2035,7 @@ figcaption a {
align-items: center; align-items: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
max-width: 640px; max-width: 520px;
width: 100%; width: 100%;
height: 64px; height: 64px;
font-size: 1.8rem; font-size: 1.8rem;
@ -2061,7 +2053,7 @@ figcaption a {
.gh-cta .gh-header-input { .gh-cta .gh-header-input {
position: absolute; position: absolute;
inset: 0; inset: 0;
padding-inline: 28px; padding-inline: 26px;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: inherit; font-size: inherit;

View File

@ -1,8 +1,13 @@
<section class="gh-cta gh-outer"> <section class="gh-cta gh-outer">
<div class="gh-cta-inner gh-inner"> <div class="gh-cta-inner gh-inner">
<div class="gh-cta-content"> <div class="gh-cta-content">
<h2 class="gh-cta-title is-title">{{@custom.footer_signup_header}}</h2> <h2 class="gh-cta-title is-title">
<p class="gh-cta-description is-body">{{@custom.footer_signup_subhead}}</p> {{#if @custom.footer_signup_header}}
{{@custom.footer_signup_header}}
{{else}}
Subscribe to {{@site.title}}
{{/if}}
</h2>
</div> </div>
<form class="gh-header-form"> <form class="gh-header-form">
<input class="gh-header-input" type="email" placeholder="jamie@example.com"> <input class="gh-header-input" type="email" placeholder="jamie@example.com">

View File

@ -19,7 +19,13 @@
<section class="gh-footer-signup"> <section class="gh-footer-signup">
{{#if @custom.footer_signup_header}} {{#if @custom.footer_signup_header}}
<h2 class="gh-footer-signup-header is-title">{{@custom.footer_signup_header}}</h2> <h2 class="gh-footer-signup-header is-title">
{{#if @custom.footer_signup_header}}
{{@custom.footer_signup_header}}
{{else}}
Subscribe to {{@site.title}}
{{/if}}
</h2>
{{/if}} {{/if}}
{{#if @custom.footer_signup_subhead}} {{#if @custom.footer_signup_subhead}}
<p class="gh-footer-signup-subhead is-body">{{@custom.footer_signup_subhead}}</p> <p class="gh-footer-signup-subhead is-body">{{@custom.footer_signup_subhead}}</p>