From 49170e7ff26e15b7e796eda02189da663b004d24 Mon Sep 17 00:00:00 2001
From: Thibaut Patel <thibaut@ghost.org>
Date: Wed, 15 Dec 2021 14:46:00 +0100
Subject: [PATCH] Added a first version of the header card frontend rendering

refs https://github.com/TryGhost/Team/issues/1253

- Based on the editor card, the css isn't correct yet as it has undefined css variables
---
 core/frontend/src/cards/css/header.css | 127 +++++++++++++++++++++++++
 package.json                           |   2 +-
 yarn.lock                              |   8 +-
 3 files changed, 132 insertions(+), 5 deletions(-)
 create mode 100644 core/frontend/src/cards/css/header.css

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"