davejansen/Ghost-Theme-Source
1
0
Fork 0
Code Issues Pull Requests Activity

Subscribe form logic

Browse Source
This commit is contained in:
Sodbileg Gansukh
2023-08-28 13:27:33 +08:00
parent 4b9039d2a3
commit ebfed886c1
6 changed files with 86 additions and 23 deletions
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

45
assets/css/screen.css
View File

@@ -242,8 +242,12 @@ a:hover {
transition: background-color 0.2s ease;
}
.gh-form.error {
box-shadow: 0 0 0 1px red;
}
.gh-form:hover {
background-color: rgb(0 0 0 / 0.05);
background-color: rgb(0 0 0 / 0.065);
}
.gh-footer.has-accent-color .gh-form:hover {
@@ -253,7 +257,7 @@ a:hover {
.gh-form-input {
position: absolute;
inset: 0;
padding-inline: 28px;
padding-inline: 26px;
width: 100%;
height: 100%;
font-size: inherit;
@@ -263,6 +267,14 @@ a:hover {
outline: none;
}
:is(.has-serif-title, .has-slab-title) .gh-form-input {
padding-inline: 20px;
}
.gh-footer.has-accent-color .gh-form-input {
color: #fff;
}
.gh-footer.has-accent-color .gh-form-input::placeholder {
color: rgb(255 255 255 / 0.55);
}
@@ -280,10 +292,9 @@ button.gh-form-input {
padding-inline: 32px;
height: 44px;
font-size: inherit;
font-weight: 600;
}
.gh-form svg {
.gh-form > svg {
position: relative;
left: 22px;
width: 24px;
@@ -291,6 +302,24 @@ button.gh-form-input {
color: var(--color-secondary-text);
}
.gh-form .gh-button svg {
display: none;
position: absolute;
margin-top: 1px;
}
.gh-form:is(.loading, .success) .gh-button span {
visibility: hidden;
}
.gh-form.loading .gh-button svg:first-of-type {
display: block;
}
.gh-form.success .gh-button svg:last-of-type {
display: block;
}
/* 5. Layout
/* ---------------------------------------------------------- */
@@ -1341,14 +1370,14 @@ Search LOGO Login Subscribe
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
padding: 80px 64px;
gap: 36px;
padding: 80px 64px 72px;
text-align: center;
background-color: var(--color-lighter-gray);
}
.gh-cta-content {
max-width: 560px;
max-width: 640px;
}
.gh-cta-title {
@@ -1359,7 +1388,7 @@ Search LOGO Login Subscribe
}
.gh-cta-description {
margin-top: 16px;
margin-top: 12px;
font-size: 1.8rem;
line-height: 1.4;
letter-spacing: -0.015em;