Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Updated frontend styles for signup card

Browse source 
Refs https://github.com/TryGhost/Team/issues/3246
This commit is contained in:
Sanne de Vries 2023-05-25 12:21:41 +02:00
parent f768639102
commit fca78b2bae
1 changed files with 87 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,18 +3,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.kg-signup-card {
min-height: 40vh;
}
.kg-signup-card.kg-width-wide {
min-height: 60vh;
}
.kg-signup-card.kg-width-full {
min-height: 80vh;
}
.kg-signup-card a, .kg-signup-card a,
.kg-signup-card a span { .kg-signup-card a span {
color: currentColor; color: currentColor;
@ -32,12 +20,24 @@
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
padding: 12vmin 6em; padding: 4vmax;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
text-align: left; text-align: left;
} }
.kg-width-wide .kg-signup-card-container {
padding: 6.4vmax;
}
.kg-width-full .kg-signup-card-container {
padding: 9.6vmax 7.2vmax;
}
.kg-layout-split .kg-signup-card-container {
padding: 9.6vmax 4vmax;
}
.kg-signup-card-container.align-center { .kg-signup-card-container.align-center {
align-items: center; align-items: center;
text-align: center; text-align: center;
@ -76,7 +76,7 @@
/* Heading */ /* Heading */
.kg-signup-card h2.kg-signup-card-heading { .kg-signup-card h2.kg-signup-card-heading {
font-size: 4em; font-size: 4.8vmin;
font-weight: 700; font-weight: 700;
line-height: 1em; line-height: 1em;
letter-spacing: -0.01em; letter-spacing: -0.01em;
@ -88,13 +88,16 @@
} }
.kg-signup-card.kg-width-wide h2.kg-signup-card-heading { .kg-signup-card.kg-width-wide h2.kg-signup-card-heading {
font-size: 5em; font-size: 6vmin;
} }
.kg-signup-card.kg-width-full h2.kg-signup-card-heading { .kg-signup-card.kg-width-full h2.kg-signup-card-heading {
font-size: 6em; font-size: 8vmin;
} }
.kg-signup-card.kg-width-full.kg-layout-split h2.kg-signup-card-heading {
font-size: 6.4vmin;
}
/* Subheading */ /* Subheading */
@ -126,33 +129,52 @@
font-size: 1.75em; font-size: 1.75em;
} }
.kg-signup-card.kg-width-full.kg-layout-split h3.kg-signup-card-subheading {
font-size: 1.5em;
}
/* Subscribe form */ /* Subscribe form */
.kg-signup-card-form { .kg-signup-card-form {
position: relative; position: relative;
margin: 2.8em 0 0; width: 100%;
} }
.kg-width-regular .kg-signup-card-form { .kg-signup-card-heading + .kg-signup-card-form,
margin: 2em 0 0; .kg-signup-card-subheading + .kg-signup-card-form {
margin: 2.4vmax 0 0;
} }
.kg-width-full .kg-signup-card-form { .kg-width-wide .kg-signup-card-heading + .kg-signup-card-form,
margin: 4em 0 0; .kg-width-wide .kg-signup-card-subheading + .kg-signup-card-form {
margin: 3.2vmax 0 0;
}
.kg-width-full .kg-signup-card-heading + .kg-signup-card-form,
.kg-width-full .kg-signup-card-subheading + .kg-signup-card-form {
margin: 4vmax 0 0;
} }
.kg-signup-card-fields { .kg-signup-card-fields {
display: flex; display: flex;
} }
.align-center .kg-signup-card-fields {
justify-content: center;
}
.kg-signup-card-input { .kg-signup-card-input {
min-width: 300px; width: 100%;
border: solid 1px; border: solid 1px;
padding: 12px 16px; padding: 12px 16px;
font-size: 1.1em; font-size: 1.1em;
} }
.kg-width-wide .kg-signup-card-input,
.kg-width-full .kg-signup-card-input:not(.kg-layout-split .kg-signup-card-input) {
max-width: 400px;
}
.kg-signup-card-input.kg-style-accent { .kg-signup-card-input.kg-style-accent {
border-color: var(--ghost-accent-color); border-color: var(--ghost-accent-color);
} }
@ -219,7 +241,8 @@
} }
.kg-signup-card-form.success .kg-signup-card-success { .kg-signup-card-form.success .kg-signup-card-success {
display: block; display: flex;
align-items: center;
height: 3em; height: 3em;
font-size: 1.25em; font-size: 1.25em;
font-weight: 500; font-weight: 500;
@ -229,6 +252,7 @@
.kg-signup-card-form.error .kg-signup-card-error { .kg-signup-card-form.error .kg-signup-card-error {
display: block; display: block;
position: absolute; position: absolute;
top: -32px;
} }
.kg-signup-card-button-loading { .kg-signup-card-button-loading {
@ -246,10 +270,47 @@
/* Disclaimer */ /* Disclaimer */
.kg-signup-card-disclaimer { .kg-signup-card-disclaimer {
margin: .8em 0 0; margin: 1rem 0 0;
} }
.kg-signup-card-form.success + .kg-signup-card-disclaimer, .kg-signup-card-form.success + .kg-signup-card-disclaimer {
.kg-signup-card-form.error + .kg-signup-card-disclaimer {
visibility: hidden; visibility: hidden;
} }
/* Responsive styles */
@media (max-width: 640px) {
.kg-signup-card.kg-layout-split {
grid-template-columns: 1fr;
}
.kg-width-wide .kg-signup-card-container {
padding: 6.4vmax 4vmax;
}
.kg-width-full .kg-signup-card-container {
padding: 9.6vmax 4vmax;
}
.kg-signup-card-image {
height: auto;
min-height: unset;
aspect-ratio: 1 / 1;
}
.kg-signup-card-input {
font-size: inherit;
}
.kg-signup-card.kg-width-wide .kg-signup-card-button,
.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 h3.kg-signup-card-subheading,
.kg-signup-card.kg-width-full.kg-layout-split h3.kg-signup-card-subheading {
font-size: 1.1em;
}
}