diff --git a/core/frontend/apps/amp/lib/views/amp.hbs b/core/frontend/apps/amp/lib/views/amp.hbs index 9a21b6282f..89d4a6945e 100644 --- a/core/frontend/apps/amp/lib/views/amp.hbs +++ b/core/frontend/apps/amp/lib/views/amp.hbs @@ -674,6 +674,140 @@ font-size: 1.25em; } + .kg-header-card { + padding: 6em 3em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + } + + .kg-header-card.kg-size-small { + padding-top: 4em; + padding-bottom: 4em; + } + + .kg-header-card.kg-size-large { + padding-top: 12em; + padding-bottom: 12em; + } + + .kg-header-card.kg-width-full { + padding-left: 4em; + padding-right: 4em; + } + + .kg-header-card.kg-align-left { + text-align: left; + align-items: flex-start; + } + + .kg-header-card.kg-style-invert { + background: #15171a; + color: #ffffff; + } + + .kg-header-card.kg-style-clear { + color: #15171a; + border: 1px solid rgba(124, 139, 154, 0.25); + border-width: 1px 0; + } + + .kg-header-card.kg-style-accent { + background-color: var(--ghost-accent-color); + } + + .kg-header-card.kg-style-image { + background-color: #e7e7eb; + background-size: cover; + background-position: center center; + } + + .kg-header-card h2 { + font-size: 4em; + font-weight: 700; + line-height: 1.1em; + margin: 0; + } + + .kg-header-card h2 strong { + font-weight: 800; + } + + .kg-header-card.kg-size-small h2 { + font-size: 3em; + } + + .kg-header-card.kg-size-large h2 { + font-size: 5em; + } + + .kg-header-card h3 { + font-size: 1.25em; + font-weight: 500; + line-height: 1.3em; + margin: 0; + } + + .kg-header-card h3 strong { + font-weight: 600; + } + + .kg-header-card.kg-size-small h3 { + font-size: 1em; + } + + .kg-header-card.kg-size-large h3 { + font-size: 1.5em; + } + + .kg-header-card:not(.kg-style-clear) h2, + .kg-header-card:not(.kg-style-clear) h3 { + color: #ffffff; + } + + .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; + text-decoration: none !important; + border-radius: 5px; + transition: opacity 0.2s ease-in-out; + background-color: var(--ghost-accent-color); + color: #ffffff !important; + margin: 1.75em 0 0; + } + + .kg-header-card a.kg-header-card-button:hover { + opacity: 0.85; + } + + .kg-header-card.kg-size-large a.kg-header-card-button { + margin-top: 2em; + } + + .kg-header-card.kg-size-small a.kg-header-card-button { + margin-top: 1.5em; + } + + .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; + } + + .kg-header-card.kg-style-accent a.kg-header-card-button { + background: #ffffff; + color: var(--ghost-accent-color) !important; + } + .kg-audio-card { display: flex; width: 100%; diff --git a/core/frontend/src/cards/css/header.css b/core/frontend/src/cards/css/header.css index aeb0e8c6e7..9adcf1640b 100644 --- a/core/frontend/src/cards/css/header.css +++ b/core/frontend/src/cards/css/header.css @@ -1,75 +1,28 @@ .kg-header-card { - padding-left: 4em; - padding-right: 4em; + padding: 6em 3em; + min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; - color: #ffffff; - transition: background-color var(--animation-speed-fast) ease-in-out; -} - -.kg-header-card h2, -.kg-header-card h3 { - color: #ffffff; - margin: 0; -} - -.kg-header-card h2 { - font-size: 5em; - font-weight: 700; - line-height: 1.1em; - margin: 0 0 0.125em; -} - -.kg-header-card h3 { - line-height: 1.3em; + text-align: center; } .kg-header-card.kg-size-small { padding-top: 4em; padding-bottom: 4em; - height: 40vh; - min-height: auto; -} - -.kg-header-card.kg-size-medium { - padding-top: 6em; - padding-bottom: 6em; - height: 60vh; - min-height: auto; + min-height: 40vh; } .kg-header-card.kg-size-large { padding-top: 12em; padding-bottom: 12em; - height: 80vh; - min-height: auto; + min-height: 80vh; } -.kg-header-card.kg-size-large h2 { - font-size: 6em; -} - -.kg-header-card.kg-size-small h2 { - font-size: 4em; -} - -.kg-header-card h2 strong { - font-weight: 800; -} - -.kg-header-card h3 { - font-size: 1.5em; - font-weight: 500; -} - -.kg-header-card.kg-size-large h3 { - font-size: 1.75em; -} - -.kg-header-card.kg-size-small h3 { - font-size: 1.25em; +.kg-header-card.kg-width-full { + padding-left: 4em; + padding-right: 4em; } .kg-header-card.kg-align-left { @@ -77,11 +30,6 @@ align-items: flex-start; } -.kg-header-card.kg-align-center { - text-align: center; - align-items: center; -} - .kg-header-card.kg-style-invert { background: #15171a; color: #ffffff; @@ -89,13 +37,8 @@ .kg-header-card.kg-style-clear { color: #15171a; - border-top: 1px solid rgba(124, 139, 154, 0.25); - border-bottom: 1px solid rgba(124, 139, 154, 0.25); -} - -.kg-header-card.kg-style-clear h2, -.kg-header-card.kg-style-clear h3 { - color: #15171a; + border: 1px solid rgba(124, 139, 154, 0.25); + border-width: 1px 0; } .kg-header-card.kg-style-accent { @@ -108,7 +51,50 @@ background-position: center center; } -.gh-content a.kg-header-card-button { +.kg-header-card h2 { + font-size: 5em; + font-weight: 700; + line-height: 1.1em; + margin: 0; +} + +.kg-header-card h2 strong { + font-weight: 800; +} + +.kg-header-card.kg-size-small h2 { + font-size: 4em; +} + +.kg-header-card.kg-size-large h2 { + font-size: 6em; +} + +.kg-header-card h3 { + font-size: 1.5em; + font-weight: 500; + line-height: 1.3em; + margin: 0; +} + +.kg-header-card h3 strong { + font-weight: 600; +} + +.kg-header-card.kg-size-small h3 { + font-size: 1.25em; +} + +.kg-header-card.kg-size-large h3 { + font-size: 1.75em; +} + +.kg-header-card:not(.kg-style-clear) h2, +.kg-header-card:not(.kg-style-clear) h3 { + color: #ffffff; +} + +.kg-header-card a.kg-header-card-button { display: flex; position: static; align-items: center; @@ -126,25 +112,25 @@ margin: 1.75em 0 0; } -.gh-content a.kg-header-card-button:hover { +.kg-header-card a.kg-header-card-button:hover { opacity: 0.85; } -.gh-content .kg-size-large a.kg-header-card-button { +.kg-header-card.kg-size-large a.kg-header-card-button { margin-top: 2em; } -.gh-content .kg-size-small a.kg-header-card-button { +.kg-header-card.kg-size-small a.kg-header-card-button { margin-top: 1.5em; } -.gh-content .kg-style-image a.kg-header-card-button, -.gh-content .kg-style-invert a.kg-header-card-button { +.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; } -.gh-content .kg-style-accent a.kg-header-card-button { +.kg-header-card.kg-style-accent a.kg-header-card-button { background: #ffffff; color: var(--ghost-accent-color) !important; } diff --git a/core/server/services/mega/template.js b/core/server/services/mega/template.js index deee58447f..11b7061196 100644 --- a/core/server/services/mega/template.js +++ b/core/server/services/mega/template.js @@ -640,18 +640,18 @@ figure blockquote p { .kg-header-card { margin: 0 0 1.5em 0; - padding: 6em 2em; + padding: 110px 35px 110px 35px; text-align: center; } .kg-header-card.kg-size-small { - padding-top: 4em; - padding-bottom: 4em; + padding-top: 75px; + padding-bottom: 75px; } .kg-header-card.kg-size-large { - padding-top: 8em; - padding-bottom: 8em; + padding-top: 140px; + padding-bottom: 140px; } .kg-header-card.kg-align-left { @@ -681,7 +681,7 @@ figure blockquote p { } .kg-header-card h2 { - font-size: 5em; + font-size: 3em; font-weight: 700; line-height: 1.1em; margin: 0 0 0.125em; @@ -692,15 +692,15 @@ figure blockquote p { } .kg-header-card.kg-size-small h2 { - font-size: 4em; + font-size: 2.5em; } .kg-header-card.kg-size-large h2 { - font-size: 6em; + font-size: 3.5em; } .kg-header-card h3 { - font-size: 1.5em; + font-size: 1.125em; font-weight: 500; line-height: 1.3em; margin: 0; @@ -711,16 +711,15 @@ figure blockquote p { } .kg-header-card.kg-size-large h3 { - font-size: 1.75em; + font-size: 1.25em; } .kg-header-card.kg-size-small h3 { - font-size: 1.25em; + font-size: 1em; } .kg-header-card-button { margin-top: 1.75em; - overflow-wrap: anywhere; background: ${templateSettings.accentColor || '#15212A'}; border: solid 1px ${templateSettings.accentColor || '#15212A'}; border-radius: 5px;