mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Updated what's new styles for header card
This commit is contained in:
Peter Zimon
parent
d9fa12a329
commit
a8822a4a50
@ -1803,4 +1803,205 @@
|
|||||||
|
|
||||||
.gh-whats-new .kg-file-card + .kg-file-card {
|
.gh-whats-new .kg-file-card + .kg-file-card {
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header card */
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card {
|
||||||
|
padding: 12vmin 4em;
|
||||||
|
min-height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-small {
|
||||||
|
padding-top: 8vmin;
|
||||||
|
padding-bottom: 8vmin;
|
||||||
|
min-height: 12vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-large {
|
||||||
|
padding-top: 12vmin;
|
||||||
|
padding-bottom: 12vmin;
|
||||||
|
min-height: 40vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-align-left {
|
||||||
|
text-align: left;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-dark {
|
||||||
|
background: #151515;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-light {
|
||||||
|
background-color: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-accent {
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image {
|
||||||
|
position: relative;
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .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));
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card h2.kg-header-card-header {
|
||||||
|
font-size: 5em;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.1em;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card h2.kg-header-card-header strong {
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-small h2.kg-header-card-header {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-large h2.kg-header-card-header {
|
||||||
|
font-size: 6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card h3.kg-header-card-subheader {
|
||||||
|
font-size: 1.5em;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.4em;
|
||||||
|
margin: 0;
|
||||||
|
max-width: 40em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card h2 + h3.kg-header-card-subheader {
|
||||||
|
margin: 0.35em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card h3.kg-header-card-subheader strong {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-small h3.kg-header-card-subheader {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-large h3.kg-header-card-subheader {
|
||||||
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card:not(.kg-style-light) h2.kg-header-card-header,
|
||||||
|
.gh-whats-new .kg-header-card:not(.kg-style-light) h3.kg-header-card-subheader {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-accent h3.kg-header-card-subheader,
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image h3.kg-header-card-subheader {
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image h2.kg-header-card-header,
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image h3.kg-header-card-subheader,
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image a.kg-header-card-button {
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card h2.kg-header-card-header a,
|
||||||
|
.gh-whats-new .kg-header-card h3.kg-header-card-subheader a {
|
||||||
|
color: var(--ghost-accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-accent h2.kg-header-card-header a,
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-accent h3.kg-header-card-subheader a,
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image h2.kg-header-card-header a,
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image h3.kg-header-card-subheader a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card a.kg-header-card-button {
|
||||||
|
display: flex;
|
||||||
|
position: static;
|
||||||
|
align-items: center;
|
||||||
|
fill: #fff;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 3px;
|
||||||
|
outline: none;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||||
|
font-size: 1.05em;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1em;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
letter-spacing: .2px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
color: #151515;
|
||||||
|
height: 2.7em;
|
||||||
|
padding: 0 1.2em;
|
||||||
|
transition: opacity .2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card h2 + a.kg-header-card-button,
|
||||||
|
.gh-whats-new .kg-header-card h3 + a.kg-header-card-button {
|
||||||
|
margin: 1.75em 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card a.kg-header-card-button:hover {
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-large a.kg-header-card-button {
|
||||||
|
font-size: 1.1em;
|
||||||
|
height: 2.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-large h2 + a.kg-header-card-button,
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-large h3 + a.kg-header-card-button {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-small a.kg-header-card-button {
|
||||||
|
height: 2.4em;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-small h2 + a.kg-header-card-button,
|
||||||
|
.gh-whats-new .kg-header-card.kg-size-small h3 + a.kg-header-card-button {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-image a.kg-header-card-button,
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-dark a.kg-header-card-button {
|
||||||
|
background: #fff;
|
||||||
|
color: #151515;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-light a.kg-header-card-button {
|
||||||
|
background: var(--ghost-accent-color);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gh-whats-new .kg-header-card.kg-style-accent a.kg-header-card-button {
|
||||||
|
background: #fff;
|
||||||
|
color: #151515;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user