TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Updated what's new styles for header card

Browse Source
This commit is contained in:
Peter Zimon 2021-12-17 09:43:57 +01:00
parent d9fa12a329
commit a8822a4a50
1 changed files with 201 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
ghost/admin/app/styles/layouts/whatsnew.css
View File

@ -1803,4 +1803,205 @@
.gh-whats-new .kg-file-card + .kg-file-card {
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;
}