Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Updated signup card frontend styles for contained split layout (#17078)

Browse source 
Refs https://github.com/TryGhost/Team/issues/3459
This commit is contained in:
Sanne de Vries 2023-06-22 12:41:45 +02:00 committed by GitHub
parent e723365cd5
commit 64518d2ad4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 59 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
ghost/core/core/frontend/src/cards/css/signup.css
View file

@ -8,12 +8,16 @@
color: currentColor;
}
.kg-signup-card.kg-layout-split {
.kg-signup-card.kg-style-accent {
background-color: var(--ghost-accent-color);
}
.kg-layout-split .kg-signup-card-content {
display: grid;
grid-template-columns: 1fr 1fr;
}
.kg-signup-card-container {
.kg-signup-card-text {
position: relative;
display: flex;
flex-direction: column;
@ -26,31 +30,35 @@
text-align: left;
}
.kg-width-wide .kg-signup-card-container {
.kg-width-wide .kg-signup-card-text {
padding: 6.4vmax;
}
.kg-width-full .kg-signup-card-container {
padding: 9.6vmax 7.2vmax;
.kg-width-full .kg-signup-card-text {
padding: 9.6vmax 0;
}
.kg-layout-split .kg-signup-card-container {
.kg-layout-split .kg-signup-card-text {
padding: 9.6vmax 4vmax;
}
.kg-signup-card-container.align-center {
.kg-layout-split.kg-content-wide .kg-signup-card-text {
padding: 9.6vmax 0 9.6vmax 4vmax;
}
.kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text {
padding: 9.6vmax 4vmax 9.6vmax 0;
}
.kg-swapped .kg-signup-card-text {
grid-row: 1;
}
.kg-signup-card-text.kg-align-center {
align-items: center;
text-align: center;
}
.kg-signup-card-container.kg-style-accent {
background-color: var(--ghost-accent-color);
}
.kg-signup-card.kg-swapped .kg-signup-card-container {
grid-row: 1;
}
.kg-signup-card.kg-style-image h2.kg-signup-card-heading,
.kg-signup-card.kg-style-image h3.kg-signup-card-subheading,
.kg-signup-card.kg-style-image .kg-signup-card-button {
@ -69,38 +77,36 @@
object-position: center;
}
.kg-background-size-contain .kg-signup-card-image {
.kg-content-wide .kg-signup-card-image {
height: 100%;
padding: 8rem 0;
object-fit: contain;
}
.kg-signup-card-image.kg-style-accent {
background-color: var(--ghost-accent-color);
}
/* Heading */
.kg-signup-card h2.kg-signup-card-heading {
margin: 0;
font-size: 4.8vmin;
font-size: clamp(2.8rem, 4vw, 4rem);
font-weight: 700;
line-height: 1em;
letter-spacing: -0.01em;
}
.kg-signup-card h2.kg-signup-card-heading strong {
font-weight: 800;
}
.kg-signup-card.kg-width-wide h2.kg-signup-card-heading {
font-size: 5.6vmin;
font-size: clamp(2.8rem, 5vw, 5.2rem);
}
.kg-signup-card.kg-width-full h2.kg-signup-card-heading {
font-size: 7.4vmin;
font-size: clamp(3.6rem, 5.6vw, 6.4rem);
}
.kg-signup-card.kg-width-full.kg-layout-split h2.kg-signup-card-heading {
font-size: 6.4vmin;
font-size: clamp(3.2rem, 4vw, 5.6rem);
}
.kg-signup-card.kg-width-full.kg-layout-split.kg-content-wide h2.kg-signup-card-heading {
font-size: clamp(2.8rem, 4vw, 5.2rem);
}
/* Subheading */
@ -112,13 +118,13 @@
.kg-signup-card h3.kg-signup-card-subheading {
max-width: 40em;
margin: 0;
font-size: 1.25em;
font-size: clamp(1.05em, 2vw, 2rem);
font-weight: 500;
line-height: 1.4em;
}
.kg-signup-card h2 + h3.kg-signup-card-subheading {
margin: 0.35em 0 0;
margin: 0.6em 0 0;
}
.kg-signup-card h3.kg-signup-card-subheading strong {
@ -126,16 +132,16 @@
}
.kg-signup-card.kg-width-wide h3.kg-signup-card-subheading {
font-size: 1.5em;
font-size: clamp(1.05em, 2vw, 2.4rem);
}
.kg-signup-card.kg-width-full h3.kg-signup-card-subheading:not(.kg-layout-split h3.kg-signup-card-subheading) {
max-width: 65vmax;
font-size: 1.75em;
font-size: clamp(1.05em, 2vw, 2.8rem);
}
.kg-signup-card.kg-width-full.kg-layout-split h3.kg-signup-card-subheading {
font-size: 1.5em;
font-size: clamp(1.05em, 2vw, 2.4rem);
}
/* Subscribe form */
@ -147,7 +153,7 @@
width: 100%;
}
.align-center .kg-signup-card-form {
.kg-align-center .kg-signup-card-form {
justify-content: center;
}
@ -309,24 +315,37 @@
/* Responsive styles */
@media (max-width: 640px) {
.kg-signup-card.kg-layout-split {
.kg-layout-split .kg-signup-card-content {
grid-template-columns: 1fr;
}
.kg-width-wide .kg-signup-card-container {
.kg-width-wide .kg-signup-card-text {
padding: 6.4vmax 4vmax;
}
.kg-width-full .kg-signup-card-container {
padding: 9.6vmax 4vmax;
.kg-layout-split.kg-content-wide .kg-signup-card-text,
.kg-layout-split.kg-content-wide.kg-swapped .kg-signup-card-text {
padding: 9.6vmax 0;
}
.kg-signup-card-image {
.kg-signup-card.kg-width-full h3.kg-signup-card-subheading:not(.kg-layout-split h3.kg-signup-card-subheading) {
max-width: unset;
}
.kg-signup-card-image:not(.kg-content-wide .kg-signup-card-image) {
height: auto;
min-height: unset;
aspect-ratio: 1 / 1;
}
.kg-content-wide .kg-signup-card-image {
padding: 2.4rem 0 0;
}
.kg-content-wide.kg-swapped .kg-signup-card-image {
padding: 0 0 2.4rem;
}
.kg-signup-card-input {
height: 4.2rem;
padding: 6px 12px;
@ -341,11 +360,4 @@
.kg-signup-card.kg-width-full .kg-signup-card-button {
font-size: 1em;
}
.kg-signup-card h3.kg-signup-card-subheading,
.kg-signup-card.kg-width-wide h3.kg-signup-card-subheading,
.kg-signup-card.kg-width-full.kg-layout-split h3.kg-signup-card-subheading,
.kg-signup-card.kg-width-full h3.kg-signup-card-subheading:not(.kg-layout-split h3.kg-signup-card-subheading) {
font-size: 1em;
}
}