mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-06 22:40:14 -05:00
Updated frontend with header style tweaks
refs https://github.com/TryGhost/Team/issues/1253
This commit is contained in:
James Morris
parent
a4783e1800
commit
3490047a36
1 changed files with 99 additions and 44 deletions
|
|
@ -1,5 +1,5 @@
|
|||
.kg-header-card {
|
||||
padding: 6em 3em;
|
||||
padding: 12vmin 8em;
|
||||
min-height: 60vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -9,14 +9,14 @@
|
|||
}
|
||||
|
||||
.kg-header-card.kg-size-small {
|
||||
padding-top: 4em;
|
||||
padding-bottom: 4em;
|
||||
padding-top: 14vmin;
|
||||
padding-bottom: 14vmin;
|
||||
min-height: 40vh;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-large {
|
||||
padding-top: 12em;
|
||||
padding-bottom: 12em;
|
||||
padding-top: 18vmin;
|
||||
padding-bottom: 18vmin;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
|
|
@ -36,9 +36,7 @@
|
|||
}
|
||||
|
||||
.kg-header-card.kg-style-clear {
|
||||
color: #15171a;
|
||||
border: 1px solid rgba(124, 139, 154, 0.25);
|
||||
border-width: 1px 0;
|
||||
background-color: #fafafb;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-accent {
|
||||
|
|
@ -46,70 +44,109 @@
|
|||
}
|
||||
|
||||
.kg-header-card.kg-style-image {
|
||||
position: relative;
|
||||
background-color: #e7e7eb;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.kg-header-card h2 {
|
||||
.kg-header-card.kg-style-image::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: "";
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.kg-header-card h2.kg-header-card-header {
|
||||
font-size: 5em;
|
||||
font-weight: 700;
|
||||
line-height: 1.1em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.kg-header-card h2 strong {
|
||||
.kg-header-card h2.kg-header-card-header strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-small h2 {
|
||||
.kg-header-card.kg-size-small h2.kg-header-card-header {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-large h2 {
|
||||
.kg-header-card.kg-size-large h2.kg-header-card-header {
|
||||
font-size: 6em;
|
||||
}
|
||||
|
||||
.kg-header-card h3 {
|
||||
.kg-header-card h3.kg-header-card-subheader {
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
line-height: 1.3em;
|
||||
margin: 0;
|
||||
line-height: 1.4em;
|
||||
margin: 0.35em 0 0 !important;
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
.kg-header-card h3 strong {
|
||||
.kg-header-card h3.kg-header-card-subheader strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-small h3 {
|
||||
.kg-header-card.kg-size-small h3.kg-header-card-subheader {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-large h3 {
|
||||
.kg-header-card.kg-size-large h3.kg-header-card-subheader {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
.kg-header-card:not(.kg-style-clear) h2,
|
||||
.kg-header-card:not(.kg-style-clear) h3 {
|
||||
.kg-header-card:not(.kg-style-clear) h2.kg-header-card-header,
|
||||
.kg-header-card:not(.kg-style-clear) h3.kg-header-card-subheader {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-accent h3.kg-header-card-subheader,
|
||||
.kg-header-card.kg-style-image h3.kg-header-card-subheader {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-image h2.kg-header-card-header,
|
||||
.kg-header-card.kg-style-image h3.kg-header-card-subheader,
|
||||
.kg-header-card.kg-style-image a.kg-header-card-button {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.kg-header-card a.kg-header-card-button {
|
||||
display: flex;
|
||||
position: static;
|
||||
align-items: center;
|
||||
padding: 0 1.2em;
|
||||
height: 2.4em;
|
||||
line-height: 1em;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 0.95em;
|
||||
font-weight: 600;
|
||||
display: inline-block;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
color: #15171a;
|
||||
text-decoration: none !important;
|
||||
border-radius: 5px;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
background-color: var(--ghost-accent-color);
|
||||
color: #ffffff !important;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
fill: #fff;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
margin: 1.75em 0 0;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
|
||||
.kg-header-card a.kg-header-card-button span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.55rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
letter-spacing: .2px;
|
||||
padding: 0 24px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.kg-header-card a.kg-header-card-button:hover {
|
||||
|
|
@ -120,19 +157,37 @@
|
|||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-large a.kg-header-card-button span {
|
||||
height: 52px;
|
||||
line-height: 52px;
|
||||
font-size: 1.65rem;
|
||||
padding: 0 28px;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-small a.kg-header-card-button {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-small a.kg-header-card-button span {
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-image a.kg-header-card-button,
|
||||
.kg-header-card.kg-style-invert a.kg-header-card-button {
|
||||
background: #ffffff;
|
||||
color: #15171a !important;
|
||||
background: #fff;
|
||||
color: #15171a;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-clear a.kg-header-card-button {
|
||||
background: var(--ghost-accent-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-style-accent a.kg-header-card-button {
|
||||
background: #ffffff;
|
||||
color: var(--ghost-accent-color) !important;
|
||||
background: #fff;
|
||||
color: #15171a;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
|
@ -141,27 +196,27 @@
|
|||
padding-right: 1em;
|
||||
}
|
||||
|
||||
.kg-header-card h2 {
|
||||
.kg-header-card h2.kg-header-card-header {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-large h2 {
|
||||
.kg-header-card.kg-size-large h2.kg-header-card-header {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-small h2 {
|
||||
.kg-header-card.kg-size-small h2.kg-header-card-header {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.kg-header-card h3 {
|
||||
.kg-header-card h3.kg-header-card-subheader {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-large h3 {
|
||||
.kg-header-card.kg-size-large h3.kg-header-card-subheader {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.kg-header-card.kg-size-small h3 {
|
||||
.kg-header-card.kg-size-small h3.kg-header-card-subheader {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue