diff --git a/core/frontend/src/cards/css/header.css b/core/frontend/src/cards/css/header.css new file mode 100644 index 0000000000..7b268254db --- /dev/null +++ b/core/frontend/src/cards/css/header.css @@ -0,0 +1,127 @@ +.kg-header-card { + padding-left: 4em; + padding-right: 4em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: var(--white); + transition: background-color var(--animation-speed-fast) ease-in-out; +} + +.kg-header-card h2, +.kg-header-card h3 { + color: var(--white); + margin-top: 0 !important; +} + +.kg-header-card h2 { + font-size: 5em; + font-weight: 700; +} + +.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; +} + +.kg-header-card.kg-size-large { + padding-top: 12em; + padding-bottom: 12em; + height: 80vh; + min-height: auto; +} + +.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-align-left { + text-align: left; + align-items: flex-start; +} + +.kg-header-card.kg-align-center { + text-align: center; + align-items: center; +} + +.kg-header-card.kg-style-invert { + background: var(--black); + color: var(--white); +} + +.kg-header-card.kg-style-clear { + color: var(--black); + border: 1px solid var(--lightgrey); + border-width: 1px 0; +} + +.kg-header-card.kg-style-clear h2, +.kg-header-card.kg-style-clear h3 { + color: var(--black); +} + +.kg-header-card.kg-style-accent { + background-color: var(--accent-color); +} + +.kg-header-card.kg-style-image { + background-color: #e7e7eb; + background-size: cover; + background-position: center center; +} + +.kg-header-card-button { + margin-top: 1.75em; + font-weight: 700; +} + +.kg-size-large .kg-header-card-button { + margin-top: 2em; +} + +.kg-size-small .kg-header-card-button { + margin-top: 1.5em; +} + +.kg-style-invert .kg-header-card-button, +.kg-style-image .kg-header-card-button { + background: var(--white); + color: var(--black); +} + +.kg-style-accent .kg-header-card-button { + background: var(--white); + color: var(--accent-color); +} diff --git a/package.json b/package.json index ccfe1935ca..29a390b371 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@tryghost/job-manager": "0.8.17", "@tryghost/kg-card-factory": "3.1.0", "@tryghost/kg-default-atoms": "3.1.0", - "@tryghost/kg-default-cards": "5.14.8", + "@tryghost/kg-default-cards": "5.15.0", "@tryghost/kg-markdown-html-renderer": "5.1.0", "@tryghost/kg-mobiledoc-html-renderer": "5.3.1", "@tryghost/limit-service": "1.0.7", diff --git a/yarn.lock b/yarn.lock index 804d7a2f9f..846d5f6da8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1503,10 +1503,10 @@ resolved "https://registry.npmjs.org/@tryghost/kg-default-atoms/-/kg-default-atoms-3.1.0.tgz" integrity sha512-FfROzVgqJWqJ7cVdS9dcALz7rnzNfV8zcrymAJrDTHDsqzAdMfSLe1tNQRm8zas9pyZLsD8zBGmLxG9dr4WFSA== -"@tryghost/kg-default-cards@5.14.8": - version "5.14.8" - resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.14.8.tgz#cc930321545961ebc53bee07310bc119b4b54ef3" - integrity sha512-ZBfePGqSnhNkuwXsK2Agrz1OHEQg86rs67obkjpR+/9b/LYOnzR0WAzY/ayLqvpnbluTlHb+e/YsT6QxtDRajg== +"@tryghost/kg-default-cards@5.15.0": + version "5.15.0" + resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-5.15.0.tgz#7a85bfc121947babcfa2b9a13ab1eecaffe27349" + integrity sha512-MnDpRIwgJ+wI+OAR/hj4QBWK3HB5eYKHmlaYO8dBWAs1K2LhIKUadm+jAoM7hyOu0LtKeIcU/YLdVfJs2Bkj0w== dependencies: "@tryghost/kg-markdown-html-renderer" "^5.1.0" "@tryghost/url-utils" "^2.0.0"