From 3490047a36eb27ec4bd65c3b41e2ae948a3b6eb4 Mon Sep 17 00:00:00 2001 From: James Morris Date: Thu, 16 Dec 2021 16:37:02 +0000 Subject: [PATCH] Updated frontend with header style tweaks refs https://github.com/TryGhost/Team/issues/1253 --- core/frontend/src/cards/css/header.css | 143 +++++++++++++++++-------- 1 file changed, 99 insertions(+), 44 deletions(-) diff --git a/core/frontend/src/cards/css/header.css b/core/frontend/src/cards/css/header.css index 9adcf1640b..7ec0a79ad7 100644 --- a/core/frontend/src/cards/css/header.css +++ b/core/frontend/src/cards/css/header.css @@ -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; } }