TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 05:37:34 +03:00
Code Issues Projects Releases Wiki Activity

Added a first version of the header card frontend rendering

Browse Source 
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
This commit is contained in:
Thibaut Patel 2021-12-15 14:46:00 +01:00
parent a21a436f98
commit 49170e7ff2
3 changed files with 132 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
core/frontend/src/cards/css/header.css Normal file
View File

@ -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);
}

2
package.json
View File

@ -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",

8
yarn.lock
View File

@ -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"