mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Added styles for signup card frontend html
Refs https://github.com/TryGhost/Team/issues/3246
This commit is contained in:
Sanne de Vries
parent
9f84b6d9d4
commit
50f5aef902
1 changed files with 185 additions and 0 deletions
185
ghost/core/core/frontend/src/cards/css/signup.css
Normal file
185
ghost/core/core/frontend/src/cards/css/signup.css
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
.kg-signup-card,
|
||||
.kg-signup-card * {
|
||||
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 span {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.kg-signup-card-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 12vmin 4em;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.kg-signup-card-container.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-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 {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
|
||||
/* Heading */
|
||||
|
||||
.kg-signup-card h2.kg-signup-card-heading {
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
line-height: 1.1em;
|
||||
letter-spacing: -0.01em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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: 5em;
|
||||
}
|
||||
|
||||
.kg-signup-card.kg-width-full h2.kg-signup-card-heading {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
|
||||
/* Subheading */
|
||||
|
||||
.kg-signup-card-subheading {
|
||||
margin: 0 0 2em;
|
||||
}
|
||||
|
||||
.kg-signup-card h3.kg-signup-card-subheading {
|
||||
font-size: 1.25em;
|
||||
font-weight: 500;
|
||||
line-height: 1.4em;
|
||||
margin: 0;
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
.kg-signup-card h2 + h3.kg-signup-card-subheading {
|
||||
margin: 0.35em 0 0;
|
||||
}
|
||||
|
||||
.kg-signup-card h3.kg-signup-card-subheading strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kg-signup-card.kg-width-wide h3.kg-signup-card-subheading {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.kg-signup-card.kg-width-full h3.kg-signup-card-subheading {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
|
||||
/* Subscribe form */
|
||||
|
||||
.kg-signup-card-form {
|
||||
display: flex;
|
||||
margin: 2.8em 0 0;
|
||||
}
|
||||
|
||||
.kg-width-regular .kg-signup-card-form {
|
||||
margin: 2em 0 0;
|
||||
}
|
||||
|
||||
.kg-width-full .kg-signup-card-form {
|
||||
margin: 4em 0 0;
|
||||
}
|
||||
|
||||
.kg-signup-card-input {
|
||||
min-width: 300px;
|
||||
border: solid 1px;
|
||||
padding: 12px 16px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.kg-signup-card-button {
|
||||
display: flex;
|
||||
position: static;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1em;
|
||||
font-weight: 600;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
letter-spacing: .2px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
height: 2.4em;
|
||||
padding: 0 1.2em;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
.kg-signup-card-button.kg-style-accent {
|
||||
background-color: var(--ghost-accent-color);
|
||||
}
|
||||
|
||||
.kg-signup-card h2 + .kg-signup-card-button,
|
||||
.kg-signup-card h3 + .kg-signup-card-button {
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
.kg-signup-card .kg-signup-card-button:hover {
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.kg-signup-card.kg-width-wide .kg-signup-card-button {
|
||||
height: 2.7em;
|
||||
font-size: 1.05em;
|
||||
}
|
||||
|
||||
.kg-signup-card.kg-width-wide h2 + .kg-signup-card-button,
|
||||
.kg-signup-card.kg-width-wide h3 + .kg-signup-card-button {
|
||||
margin-top: 1.75em;
|
||||
}
|
||||
|
||||
.kg-signup-card.kg-width-full .kg-signup-card-button {
|
||||
font-size: 1.1em;
|
||||
height: 2.9em;
|
||||
}
|
||||
|
||||
.kg-signup-card.kg-width-full h2 + .kg-signup-card-button,
|
||||
.kg-signup-card.kg-width-full h3 + .kg-signup-card-button {
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
|
||||
/* Disclaimer */
|
||||
|
||||
.kg-signup-card-disclaimer {
|
||||
margin: .8em 0 0;
|
||||
}
|
||||
Loading…
Reference in a new issue