From e7d8c2f9c51c8d2ca6f701bd113cfe0a7312c439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Fri, 7 Apr 2023 08:50:27 +0000
Subject: [PATCH] feat(posts&pages): apply ghost styling
---
angular.json | 4 +-
src/app/page/page.component.ts | 21 +-
.../post-details/post-details.component.ts | 13 +-
src/assets/ghost/cards.min.css | 1 +
src/assets/ghost/cards.min.js | 1 +
src/assets/scss/_ghost.scss | 211 +-----------------
6 files changed, 34 insertions(+), 217 deletions(-)
create mode 100644 src/assets/ghost/cards.min.css
create mode 100644 src/assets/ghost/cards.min.js
diff --git a/angular.json b/angular.json
index 5b36cae18..a4f73808c 100644
--- a/angular.json
+++ b/angular.json
@@ -84,8 +84,8 @@
},
{
"type": "anyComponentStyle",
- "maximumWarning": "10kb",
- "maximumError": "15kb"
+ "maximumWarning": "30kb",
+ "maximumError": "35kb"
}
],
"serviceWorker": true,
diff --git a/src/app/page/page.component.ts b/src/app/page/page.component.ts
index 7a4f4f7b5..990875565 100644
--- a/src/app/page/page.component.ts
+++ b/src/app/page/page.component.ts
@@ -1,30 +1,37 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
import { DomSanitizer, Meta } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
import packageJson from '../../../package.json';
+import { PageEnum } from './enum/page.enum';
import { Page } from './models/page.model';
import { PageService } from './services/page.service';
-import { PageEnum } from './enum/page.enum';
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
- styleUrls: ['./page.component.scss'],
+ styleUrls: ['./page.component.scss', '../../assets/ghost/cards.min.css'],
+ encapsulation: ViewEncapsulation.None,
})
export class PageComponent implements OnInit {
public page: Page;
public version: string;
private slugPage: string;
- private quiSommesNous = PageEnum.quiSommesNous;
constructor(
private sanitizer: DomSanitizer,
private route: ActivatedRoute,
private pageService: PageService,
- private meta: Meta
+ private meta: Meta,
+ private readonly elementRef: ElementRef,
+ private renderer: Renderer2
) {}
ngOnInit(): void {
+ // add ghost JS
+ const script = this.renderer.createElement('script');
+ script.src = '/assets/ghost/cards.min.js';
+ this.renderer.appendChild(this.elementRef.nativeElement, script);
+
this.route.params.subscribe((routeParams) => {
this.slugPage = routeParams.slugPage;
this.pageService.getPage(this.slugPage).subscribe((page) => {
@@ -36,7 +43,7 @@ export class PageComponent implements OnInit {
});
});
// Display version number in 'About' page only
- this.slugPage == this.quiSommesNous ? (this.version = packageJson.version) : (this.version = '');
+ this.version = this.slugPage == PageEnum.quiSommesNous ? packageJson.version : '';
});
}
}
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index f42eaa73b..9a5301245 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { RouterListenerService } from '../../../services/routerListener.service';
@@ -8,7 +8,8 @@ import { PostService } from '../../services/post.service';
@Component({
selector: 'app-post-details',
templateUrl: './post-details.component.html',
- styleUrls: ['./post-details.component.scss'],
+ styleUrls: ['./post-details.component.scss', '../../../../assets/ghost/cards.min.css'],
+ encapsulation: ViewEncapsulation.None,
})
export class PostDetailsComponent implements OnInit {
public post: Post;
@@ -17,7 +18,9 @@ export class PostDetailsComponent implements OnInit {
private activatedRoute: ActivatedRoute,
private postService: PostService,
private sanitizer: DomSanitizer,
- private routerListener: RouterListenerService
+ private routerListener: RouterListenerService,
+ private readonly elementRef: ElementRef,
+ private renderer: Renderer2
) {}
ngOnInit(): void {
@@ -31,6 +34,10 @@ export class PostDetailsComponent implements OnInit {
this.post.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.post.html);
});
}
+ // add ghost JS
+ const script = this.renderer.createElement('script');
+ script.src = '/assets/ghost/cards.min.js';
+ this.renderer.appendChild(this.elementRef.nativeElement, script);
}
public backToPosts(): void {
diff --git a/src/assets/ghost/cards.min.css b/src/assets/ghost/cards.min.css
new file mode 100644
index 000000000..6ab2823e0
--- /dev/null
+++ b/src/assets/ghost/cards.min.css
@@ -0,0 +1 @@
+.kg-audio-card,.kg-audio-card *{box-sizing:border-box}.kg-audio-card{display:flex;width:100%;min-height:96px;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(124,139,154,.25)}.kg-audio-card+.kg-audio-card{margin-top:1em}.kg-audio-thumbnail{display:flex;justify-content:center;align-items:center;width:80px;min-width:80px;margin:8px;background:0 0;object-fit:cover;aspect-ratio:1/1;border-radius:2px}.kg-audio-thumbnail.placeholder{background:var(--ghost-accent-color)}.kg-audio-thumbnail.placeholder svg{width:24px;height:24px;fill:#fff}.kg-audio-player-container{position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;--seek-before-width:0%;--volume-before-width:100%;--buffered-width:0%}.kg-audio-title{width:100%;margin:8px 0 0;padding:8px 12px;border:0;font-family:inherit;font-size:1.15em;font-weight:700;line-height:1.15em;background:0 0}.kg-audio-player{display:flex;flex-grow:1;align-items:center;padding:8px 12px}.kg-audio-current-time,.kg-audio-time{font-family:inherit;font-size:.85em;font-weight:500;line-height:1.4em;white-space:nowrap}.kg-audio-current-time{min-width:38px;padding:0 4px}.kg-audio-time{width:56px;color:#ababab}.kg-audio-duration{padding:0 4px}.kg-audio-pause-icon,.kg-audio-play-icon{position:relative;bottom:1px;padding:0 4px 0 0;font-size:0;background:0 0}.kg-audio-hide{display:none!important}.kg-audio-pause-icon svg,.kg-audio-play-icon svg{width:14px;height:14px;fill:currentColor}.kg-audio-seek-slider{flex-grow:1;margin:0 4px}@media (max-width:640px){.kg-audio-seek-slider{display:none}}.kg-audio-playback-rate{min-width:37px;padding:0 4px;font-family:inherit;font-size:.85em;font-weight:600;line-height:1.4em;text-align:left;background:0 0;white-space:nowrap}@media (max-width:640px){.kg-audio-playback-rate{padding-left:8px}}.kg-audio-mute-icon,.kg-audio-unmute-icon{position:relative;bottom:-1px;padding:0 4px;font-size:0;background:0 0}@media (max-width:640px){.kg-audio-mute-icon,.kg-audio-unmute-icon{margin-left:auto}}.kg-audio-mute-icon svg,.kg-audio-unmute-icon svg{width:16px;height:16px;fill:currentColor}.kg-audio-volume-slider{width:80px}@media (max-width:400px){.kg-audio-volume-slider{display:none}}.kg-audio-seek-slider::before,.kg-audio-volume-slider::before{content:"";position:absolute;left:0;width:var(--seek-before-width)!important;height:4px;cursor:pointer;background-color:currentColor;border-radius:2px}.kg-audio-volume-slider::before{width:var(--volume-before-width)!important}.kg-audio-player-container input[type=range]{position:relative;-webkit-appearance:none;background:0 0;height:auto;padding:0;border:0}.kg-audio-player-container input[type=range]:focus,.kg-video-card input[type=range]:focus{outline:0}.kg-audio-player-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.kg-audio-player-container button,.kg-video-card button{display:flex;align-items:center;border:0;cursor:pointer}.kg-audio-player-container input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:rgba(124,139,154,.25);border-radius:2px}.kg-audio-player-container input[type=range]::-webkit-slider-thumb{position:relative;box-sizing:content-box;width:13px;height:13px;margin:-5px 0 0;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-audio-player-container input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}.kg-audio-player-container input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;background:rgba(124,139,154,.25);border-radius:2px}.kg-audio-player-container input[type=range]::-moz-range-progress{background:currentColor;border-radius:2px}.kg-audio-player-container input[type=range]::-moz-range-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-audio-player-container input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}.kg-audio-player-container input[type=range]::-ms-track{width:100%;height:3px;border:solid transparent;color:transparent;cursor:pointer;background:0 0}.kg-audio-player-container input[type=range]::-ms-fill-lower{background:#fff}.kg-audio-player-container input[type=range]::-ms-fill-upper{background:currentColor}.kg-audio-player-container input[type=range]::-ms-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-audio-player-container input[type=range]:active::-ms-thumb{transform:scale(1.2)}.kg-before-after-card>div{position:relative;margin:0 auto}.kg-before-after-card-image-before{position:absolute;overflow:hidden;top:0;left:0;height:100%}.kg-before-after-card .kg-before-after-card-image-after img{width:100%}.kg-before-after-card .kg-before-after-card-image-before img{max-width:none;object-fit:cover}.kg-before-after-card input{position:absolute;top:0;-webkit-appearance:none;appearance:none;width:100%;height:100%;background:0 0;outline:0;margin:0}.kg-before-after-card input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:5px;height:100%;background:#fff;cursor:pointer}.kg-before-after-card input::-moz-range-thumb{width:5px;height:100%;background:#fff;cursor:pointer}.kg-before-after-card-slider-handle{pointer-events:none;position:absolute;width:30px;height:30px;border-radius:50%;background-color:#fff;left:calc(50% - 18px);top:calc(50% - 18px);display:flex;justify-content:center;align-items:center}.kg-before-after-card-slider-handle:after,.kg-before-after-card-slider-handle:before{transform:rotate(-45deg);content:'';padding:3px;display:inline-block;border:solid #5d5d5d;border-width:0 2px 2px 0}.kg-before-after-card-slider-handle:before{transform:rotate(135deg)}.kg-blockquote-alt{font-size:1.5em;font-style:italic;line-height:1.7em;text-align:center;padding:0 2.5em}@media (max-width:800px){.kg-blockquote-alt{font-size:1.4em;padding-left:2em;padding-right:2em}}@media (max-width:600px){.kg-blockquote-alt{font-size:1.2em;padding-left:1.75em;padding-right:1.75em}}.kg-bookmark-card,.kg-bookmark-card *{box-sizing:border-box}.kg-bookmark-card,.kg-bookmark-publisher{position:relative;width:100%}.kg-bookmark-card a.kg-bookmark-container,.kg-bookmark-card a.kg-bookmark-container:hover{display:flex;text-decoration:none;border-radius:3px;border:1px solid rgb(124 139 154/25%);overflow:hidden;color:inherit}.kg-bookmark-content{display:flex;flex-direction:column;flex-grow:1;flex-basis:100%;align-items:flex-start;justify-content:flex-start;padding:20px;overflow:hidden}.kg-bookmark-title{font-size:1.5rem;line-height:1.4em;font-weight:600}.kg-bookmark-description{display:-webkit-box;font-size:1.4rem;line-height:1.5em;margin-top:3px;font-weight:400;max-height:44px;overflow-y:hidden;opacity:.7;-webkit-line-clamp:2;-webkit-box-orient:vertical}.kg-bookmark-metadata{display:flex;align-items:center;margin-top:22px;width:100%;font-size:1.4rem;font-weight:500;white-space:nowrap}.kg-bookmark-metadata>:not(img){opacity:.7}.kg-bookmark-icon{width:20px;height:20px;margin-right:6px}.kg-bookmark-author{display:inline}.kg-bookmark-publisher{text-overflow:ellipsis;overflow:hidden;max-width:240px;white-space:nowrap;display:block;line-height:1.65em}.kg-bookmark-metadata>span:nth-of-type(2){font-weight:400}.kg-bookmark-metadata>span:nth-of-type(2):before{content:"•";margin:0 6px}.kg-bookmark-metadata>span:last-of-type{overflow:hidden;text-overflow:ellipsis}.kg-bookmark-thumbnail{position:relative;flex-grow:1;min-width:33%}.kg-bookmark-thumbnail img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;border-radius:0 2px 2px 0}.kg-button-card,.kg-button-card *{box-sizing:border-box}.kg-button-card,.kg-button-card a.kg-btn{display:flex;position:static;align-items:center}.kg-button-card{width:100%;justify-content:center}.kg-button-card.kg-align-left{justify-content:flex-start}.kg-button-card a.kg-btn{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:.95em;font-weight:600;text-decoration:none;border-radius:5px;transition:opacity .2s ease-in-out}.kg-button-card a.kg-btn:hover{opacity:.85}.kg-button-card a.kg-btn-accent{background-color:var(--ghost-accent-color);color:#fff}.kg-callout-card,.kg-callout-card *{box-sizing:border-box}.kg-callout-card{display:flex;padding:1.2em 1.6em;border-radius:3px}.kg-callout-card-grey{background:rgba(124,139,154,.13)}.kg-callout-card-white{background:0 0;box-shadow:inset 0 0 0 1px rgba(124,139,154,.25)}.kg-callout-card-blue{background:rgba(33,172,232,.12)}.kg-callout-card-green{background:rgba(52,183,67,.12)}.kg-callout-card-yellow{background:rgba(240,165,15,.13)}.kg-callout-card-red{background:rgba(209,46,46,.11)}.kg-callout-card-pink{background:rgba(225,71,174,.11)}.kg-callout-card-purple{background:rgba(135,85,236,.12)}.kg-callout-card-accent{background:var(--ghost-accent-color);color:#fff}.kg-callout-card.kg-callout-card-accent a{color:#fff;text-decoration:underline}.kg-callout-card div.kg-callout-emoji{padding-right:.8em;line-height:1.25em;font-size:1.15em}.kg-callout-card div.kg-callout-text{font-size:.95em;line-height:1.5em}.kg-callout-card+.kg-callout-card{margin-top:1em}.kg-file-card,.kg-file-card *{box-sizing:border-box}.kg-file-card{display:flex}.kg-file-card a.kg-file-card-container{display:flex;align-items:stretch;justify-content:space-between;color:inherit;padding:6px;min-height:92px;border:1px solid rgb(124 139 154/25%);border-radius:3px;transition:all ease-in-out .35s;text-decoration:none;width:100%}.kg-file-card a.kg-file-card-container:hover{border:1px solid rgb(124 139 154/35%)}.kg-file-card-contents{display:flex;flex-direction:column;justify-content:space-between;margin:4px 8px;width:100%}.kg-file-card-title{font-size:1.15em;font-weight:700;line-height:1.3em}.kg-file-card-caption{font-size:.95em;line-height:1.3em;opacity:.6}.kg-file-card-title+.kg-file-card-caption{margin-top:-3px}.kg-file-card-metadata{display:inline;font-size:.825em;line-height:1.3em;margin-top:2px}.kg-file-card-filename{display:inline;font-weight:500}.kg-file-card-filesize{display:inline-block;font-size:.925em;opacity:.6}.kg-file-card-filesize:before{display:inline-block;content:"\2022";margin-right:4px}.kg-file-card-icon{position:relative;display:flex;align-items:center;justify-content:center;width:80px;min-width:80px;height:100%}.kg-file-card-icon:before{position:absolute;display:block;content:"";top:0;left:0;right:0;bottom:0;background:currentColor;opacity:.06;transition:opacity ease-in-out .35s;border-radius:2px}.kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before{opacity:.08}.kg-file-card-icon svg{width:24px;height:24px;color:var(--ghost-accent-color)}.kg-file-card-medium a.kg-file-card-container{min-height:72px}.kg-file-card-medium .kg-file-card-caption{opacity:1;font-weight:500}.kg-file-card-small a.kg-file-card-container{align-items:center;min-height:52px}.kg-file-card-small .kg-file-card-metadata{font-size:1em;margin-top:0}.kg-file-card-small .kg-file-card-icon svg{width:20px;height:20px}.kg-file-card+.kg-file-card{margin-top:1em}.kg-gallery-card,.kg-gallery-card *{box-sizing:border-box}.kg-gallery-card,.kg-image-card{--gap:1.2rem}.kg-gallery-card:not(.kg-card-hascaption)+.kg-gallery-card,.kg-gallery-card:not(.kg-card-hascaption)+.kg-image-card,.kg-image-card:not(.kg-card-hascaption)+.kg-gallery-card,.kg-image-card:not(.kg-card-hascaption)+.kg-image-card{margin-top:var(--gap)}.kg-gallery-container{position:relative}.kg-gallery-row{display:flex;flex-direction:row;justify-content:center}.kg-gallery-image img{display:block;margin:0;width:100%;height:100%}.kg-gallery-row:not(:first-of-type){margin:var(--gap) 0 0}.kg-gallery-image:not(:first-of-type){margin:0 0 0 var(--gap)}@media (max-width:600px){.kg-gallery-card,.kg-image-card{--gap:0.6rem}}.kg-header-card,.kg-header-card *{box-sizing:border-box}.kg-header-card{padding:12vmin 4em;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.kg-header-card.kg-size-small{padding-top:14vmin;padding-bottom:14vmin;min-height:40vh}.kg-header-card.kg-size-large{padding-top:18vmin;padding-bottom:18vmin;min-height:80vh}.kg-header-card.kg-align-left{text-align:left;align-items:flex-start}.kg-header-card.kg-style-dark{background:#151515;color:#fff}.kg-header-card.kg-style-light{background-color:#fafafa}.kg-header-card.kg-style-accent{background-color:var(--ghost-accent-color)}.kg-header-card.kg-style-image{position:relative;background-color:#e7e7e7;background-size:cover;background-position:center}.kg-header-card.kg-style-image::before{position:absolute;display:block;content:"";top:0;right:0;bottom:0;left:0;background:linear-gradient(0deg,transparent,rgba(0,0,0,.2))}.kg-header-card h2.kg-header-card-header{font-size:5em;font-weight:700;line-height:1.1em;letter-spacing:-.01em;margin:0}.kg-header-card h2.kg-header-card-header strong{font-weight:800}.kg-header-card.kg-size-small h2.kg-header-card-header{font-size:4em}.kg-header-card.kg-size-large h2.kg-header-card-header{font-size:6em}.kg-header-card h3.kg-header-card-subheader{font-size:1.5em;font-weight:500;line-height:1.4em;margin:0;max-width:40em}.kg-header-card h2+h3.kg-header-card-subheader{margin:.35em 0 0}.kg-header-card h3.kg-header-card-subheader strong{font-weight:600}.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-subheader{font-size:1.75em}.kg-header-card:not(.kg-style-light) h2.kg-header-card-header,.kg-header-card:not(.kg-style-light) h3.kg-header-card-subheader{color:#fff}.kg-header-card.kg-style-accent h3.kg-header-card-subheader,.kg-header-card.kg-style-image h3.kg-header-card-subheader,.kg-product-card-rating-active.kg-product-card-rating-star svg{opacity:1}.kg-header-card.kg-style-image a.kg-header-card-button,.kg-header-card.kg-style-image h2.kg-header-card-header,.kg-header-card.kg-style-image h3.kg-header-card-subheader{z-index:999}.kg-header-card h2.kg-header-card-header a,.kg-header-card h3.kg-header-card-subheader a{color:var(--ghost-accent-color)}.kg-header-card.kg-style-accent h2.kg-header-card-header a,.kg-header-card.kg-style-accent h3.kg-header-card-subheader a,.kg-header-card.kg-style-image h2.kg-header-card-header a,.kg-header-card.kg-style-image h3.kg-header-card-subheader a{color:#fff}.kg-header-card a.kg-header-card-button{display:flex;position:static;align-items:center;fill:#fff;background:#fff;border-radius:3px;outline:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1.05em;font-weight:600;line-height:1em;text-align:center;text-decoration:none;letter-spacing:.2px;white-space:nowrap;text-overflow:ellipsis;color:#151515;height:2.7em;padding:0 1.2em;transition:opacity .2s ease}.kg-header-card h2+a.kg-header-card-button,.kg-header-card h3+a.kg-header-card-button{margin:1.75em 0 0}.kg-header-card a.kg-header-card-button:hover{opacity:.85}.kg-header-card.kg-size-large a.kg-header-card-button{font-size:1.1em;height:2.9em}.kg-header-card.kg-size-large h2+a.kg-header-card-button,.kg-header-card.kg-size-large h3+a.kg-header-card-button{margin-top:2em}.kg-header-card.kg-size-small a.kg-header-card-button{height:2.4em;font-size:1em}.kg-header-card.kg-size-small h2+a.kg-header-card-button,.kg-header-card.kg-size-small h3+a.kg-header-card-button{margin-top:1.5em}.kg-header-card.kg-style-dark a.kg-header-card-button,.kg-header-card.kg-style-image a.kg-header-card-button{background:#fff;color:#151515}.kg-header-card.kg-style-light a.kg-header-card-button{background:var(--ghost-accent-color);color:#fff}.kg-header-card.kg-style-accent a.kg-header-card-button{background:#fff;color:#151515}@media (max-width:640px){.kg-header-card{padding-left:1em;padding-right:1em}.kg-header-card h2.kg-header-card-header{font-size:3.5em}.kg-header-card.kg-size-large h2.kg-header-card-header{font-size:4em}.kg-header-card.kg-size-small h2.kg-header-card-header{font-size:3em}.kg-header-card h3.kg-header-card-subheader{font-size:1.25em}.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-subheader{font-size:1em}}.kg-nft-card,.kg-nft-card *{box-sizing:border-box}.kg-nft-card{display:flex;flex-direction:column;align-items:center;width:100%;margin-left:auto;margin-right:auto}.kg-nft-card a.kg-nft-card-container{position:static;display:flex;flex:auto;flex-direction:column;text-decoration:none;font-family:-apple-system,BlinkMacSystemFont,'avenir next',avenir,'helvetica neue',helvetica,ubuntu,roboto,noto,'segoe ui',arial,sans-serif;font-size:14px;font-weight:400;box-shadow:0 2px 6px -2px rgb(0 0 0/10%),0 0 1px rgb(0 0 0/40%);width:100%;max-width:512px;color:#222;background:#fff;border-radius:5px;transition:none}.kg-nft-card *{position:static}.kg-nft-metadata{padding:20px;width:100%}.kg-nft-image{border-radius:5px 5px 0 0;width:100%}.kg-nft-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.kg-nft-header h4.kg-nft-title{font-family:inherit;font-size:19px;font-weight:700;line-height:1.3em;min-width:unset;max-width:unset;margin:0;color:#222}.kg-nft-opensea-logo{margin-top:2px;width:100px;object-fit:scale-down}.kg-nft-card p.kg-nft-description,.kg-nft-creator{font-family:inherit;line-height:1.4em;margin:4px 0 0;color:#ababab}.kg-nft-creator span{font-weight:500;color:#222}.kg-nft-card p.kg-nft-description{font-size:14px;margin:20px 0 0;color:#222}.kg-product-card,.kg-product-card *{box-sizing:border-box}.kg-product-card{display:flex;align-items:center;flex-direction:column;width:100%}.kg-product-card-container{display:grid;grid-template-columns:auto min-content;align-items:center;grid-row-gap:16px;background:0 0;max-width:550px;padding:20px;width:100%;border-radius:5px;box-shadow:inset 0 0 0 1px rgb(124 139 154/25%)}.kg-product-card-image{grid-column:1/3;justify-self:center}.kg-product-card-title-container{grid-column:1/2}.kg-product-card h4.kg-product-card-title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;text-decoration:none;font-weight:700;font-size:1.4em;margin-top:0;margin-bottom:0;line-height:1.15em}.kg-product-card-description{grid-column:1/3}.kg-product-card .kg-product-card-description ol,.kg-product-card .kg-product-card-description p,.kg-product-card .kg-product-card-description ul{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:.95em;line-height:1.5em;opacity:.7;margin-bottom:0}.kg-product-card .kg-product-card-description p:first-of-type{margin-top:-4px}.kg-product-card .kg-product-card-description ol,.kg-product-card .kg-product-card-description p:not(:first-of-type),.kg-product-card .kg-product-card-description ul{margin-top:.95em}.kg-product-card .kg-product-card-description li+li,.kg-toggle-card li+li{margin-top:.5em}.kg-product-card-rating{display:flex;align-items:center;grid-column:2/3;align-self:start;justify-self:end;padding-left:16px}@media (max-width:400px){.kg-product-card-title-container{grid-column:1/3}.kg-product-card-rating{grid-column:1/3;justify-self:start;margin-top:-15px;padding-left:0}}.kg-product-card-rating-star{height:28px;width:20px}.kg-product-card-rating-star svg{width:16px;height:16px;fill:currentColor;opacity:.15}.kg-product-card a.kg-product-card-button{justify-content:center;grid-column:1/3;display:flex;position:static;align-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:.95em;font-weight:600;line-height:1em;text-decoration:none;width:100%;height:2.4em;border-radius:5px;padding:0 1.2em;transition:opacity .2s ease-in-out}.kg-product-card a.kg-product-card-btn-accent{background-color:var(--ghost-accent-color);color:#fff}.kg-toggle-card,.kg-toggle-card *{box-sizing:border-box}.kg-toggle-card{background:0 0;box-shadow:inset 0 0 0 1px rgba(124,139,154,.25);border-radius:4px;padding:1.2em}.kg-toggle-card[data-kg-toggle-state=close] .kg-toggle-content{height:0;overflow:hidden;transition:opacity .5s ease,top .35s ease;opacity:0;top:-.5em;position:relative}.kg-toggle-content{height:auto;opacity:1;transition:opacity 1s ease,top .35s ease;top:0;position:relative}.kg-toggle-card[data-kg-toggle-state=close] svg{transform:unset}.kg-toggle-heading{cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start}.kg-toggle-card h4.kg-toggle-heading-text{font-size:1.15em;font-weight:700;line-height:1.3em;margin-top:0;margin-bottom:0}.kg-toggle-content p:first-of-type{margin-top:.5em}.kg-toggle-card .kg-toggle-content ol,.kg-toggle-card .kg-toggle-content p,.kg-toggle-card .kg-toggle-content ul{font-size:.95em;line-height:1.5em;margin-top:.95em;margin-bottom:0}.kg-toggle-card-icon{height:24px;width:24px;display:flex;justify-content:center;align-items:center;margin-left:1em;background:0 0;border:0}.kg-toggle-heading svg{width:14px;color:rgba(124,139,154,.5);transition:all .3s;transform:rotate(-180deg)}.kg-toggle-heading path{fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;fill-rule:evenodd}.kg-toggle-card+.kg-toggle-card{margin-top:1em}.kg-video-card,.kg-video-card *{box-sizing:border-box}.kg-video-card{position:relative;--seek-before-width:0%;--volume-before-width:100%;--buffered-width:0%}.kg-video-card video{display:block;max-width:100%;height:auto}.kg-video-container{position:relative;display:flex;flex-direction:column;align-items:center}.kg-video-large-play-icon,.kg-video-overlay{display:flex;justify-content:center;align-items:center;transition:opacity .2s ease-in-out}.kg-video-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(180deg,rgba(0,0,0,.3) 0,transparent 70%,transparent 100%);z-index:999}.kg-video-large-play-icon{width:72px;height:72px;padding:0;background:rgba(0,0,0,.5);border-radius:50%}.kg-video-large-play-icon svg{width:20px;height:auto;margin-left:2px;fill:#fff}.kg-video-player-container{position:absolute;bottom:0;width:100%;height:80px;background:linear-gradient(transparent,rgba(0,0,0,.5));z-index:999;transition:opacity .2s ease-in-out}.kg-video-player{position:absolute;bottom:0;display:flex;align-items:center;width:100%;z-index:9999;padding:12px 16px}.kg-video-current-time,.kg-video-time{font-family:inherit;font-size:.85em;font-weight:500;line-height:1.4em;white-space:nowrap}.kg-video-current-time{min-width:38px;padding:0 4px;color:#fff}.kg-video-time{color:rgba(255,255,255,.6)}.kg-video-duration{padding:0 4px}.kg-video-pause-icon,.kg-video-play-icon{position:relative;padding:0 4px 0 0;font-size:0;background:0 0}.kg-video-hide{display:none!important}.kg-video-hide-animated{opacity:0!important;transition:opacity .2s ease-in-out;cursor:initial}.kg-video-pause-icon svg,.kg-video-play-icon svg{width:14px;height:14px;fill:#fff}.kg-video-seek-slider{flex-grow:1;margin:0 4px}@media (max-width:520px){.kg-video-seek-slider{display:none}}.kg-video-playback-rate{min-width:37px;padding:0 4px;color:#fff;font-family:inherit;font-size:.85em;font-weight:600;line-height:1.4em;text-align:left;background:0 0;white-space:nowrap}@media (max-width:520px){.kg-video-playback-rate{padding-left:8px}}.kg-video-mute-icon,.kg-video-unmute-icon{position:relative;bottom:-1px;padding:0 4px;font-size:0;background:0 0}@media (max-width:520px){.kg-video-mute-icon,.kg-video-unmute-icon{margin-left:auto}}.kg-video-mute-icon svg,.kg-video-unmute-icon svg{width:16px;height:16px;fill:#fff}.kg-video-volume-slider{width:80px}@media (max-width:300px){.kg-video-volume-slider{display:none}}.kg-video-seek-slider::before,.kg-video-volume-slider::before{content:"";position:absolute;left:0;width:var(--seek-before-width)!important;height:4px;cursor:pointer;background-color:#ebeef0;border-radius:2px}.kg-video-volume-slider::before{width:var(--volume-before-width)!important}.kg-video-card input[type=range]{position:relative;-webkit-appearance:none;background:0 0;height:auto;padding:0;border:0}.kg-video-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.kg-video-card input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:rgba(255,255,255,.2);border-radius:2px}.kg-video-card input[type=range]::-webkit-slider-thumb{position:relative;box-sizing:content-box;width:13px;height:13px;margin:-5px 0 0;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-video-card input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}.kg-video-card input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;background:rgba(255,255,255,.2);border-radius:2px}.kg-video-card input[type=range]::-moz-range-progress{background:#ebeef0;border-radius:2px}.kg-video-card input[type=range]::-moz-range-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-video-card input[type=range]:active::-moz-range-thumb{transform:scale(1.2)}.kg-video-card input[type=range]::-ms-track{width:100%;height:3px;border:solid transparent;color:transparent;cursor:pointer;background:0 0}.kg-video-card input[type=range]::-ms-fill-lower{background:#fff}.kg-video-card input[type=range]::-ms-fill-upper{background:#ebeef0}.kg-video-card input[type=range]::-ms-thumb{box-sizing:content-box;width:13px;height:13px;border:0;cursor:pointer;background:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.24)}.kg-video-card input[type=range]:active::-ms-thumb{transform:scale(1.2)}
\ No newline at end of file
diff --git a/src/assets/ghost/cards.min.js b/src/assets/ghost/cards.min.js
new file mode 100644
index 000000000..0c8615da2
--- /dev/null
+++ b/src/assets/ghost/cards.min.js
@@ -0,0 +1 @@
+!function(){const e=function(e){const t=e.querySelector(".kg-audio-player-container"),a=e.querySelector(".kg-audio-play-icon"),o=e.querySelector(".kg-audio-pause-icon"),i=e.querySelector(".kg-audio-seek-slider"),r=e.querySelector(".kg-audio-playback-rate"),d=e.querySelector(".kg-audio-mute-icon"),l=e.querySelector(".kg-audio-unmute-icon"),s=e.querySelector(".kg-audio-volume-slider"),n=e.querySelector("audio"),c=e.querySelector(".kg-audio-duration"),u=e.querySelector(".kg-audio-current-time");let g=[{rate:.75,label:"0.7×"},{rate:1,label:"1×"},{rate:1.25,label:"1.2×"},{rate:1.75,label:"1.7×"},{rate:2,label:"2×"}],v=null,m=1;const k=()=>{i.value=Math.floor(n.currentTime),u.textContent=h(i.value),t.style.setProperty("--seek-before-width",i.value/i.max*100+"%"),v=requestAnimationFrame(k)},y=e=>{e===i?t.style.setProperty("--seek-before-width",e.value/e.max*100+"%"):t.style.setProperty("--volume-before-width",e.value/e.max*100+"%")},h=e=>{const t=Math.floor(e/60),a=Math.floor(e%60);return`${t}:${a<10?`0${a}`:`${a}`}`},p=()=>{c.textContent=h(n.duration)},f=()=>{i.max=Math.floor(n.duration)},L=()=>{if(n.buffered.length>0){const e=Math.floor(n.buffered.end(n.buffered.length-1));t.style.setProperty("--buffered-width",e/i.max*100+"%")}};n.readyState>0?(p(),f(),L()):n.addEventListener("loadedmetadata",(()=>{p(),f(),L()})),a.addEventListener("click",(()=>{a.classList.add("kg-audio-hide"),o.classList.remove("kg-audio-hide"),n.play(),requestAnimationFrame(k)})),o.addEventListener("click",(()=>{o.classList.add("kg-audio-hide"),a.classList.remove("kg-audio-hide"),n.pause(),cancelAnimationFrame(v)})),d.addEventListener("click",(()=>{d.classList.add("kg-audio-hide"),l.classList.remove("kg-audio-hide"),n.muted=!1})),l.addEventListener("click",(()=>{l.classList.add("kg-audio-hide"),d.classList.remove("kg-audio-hide"),n.muted=!0})),r.addEventListener("click",(()=>{let e=g[(m+1)%5];m+=1,n.playbackRate=e.rate,r.textContent=e.label})),n.addEventListener("progress",L),i.addEventListener("input",(e=>{y(e.target),u.textContent=h(i.value),n.paused||cancelAnimationFrame(v)})),i.addEventListener("change",(()=>{n.currentTime=i.value,n.paused||requestAnimationFrame(k)})),s.addEventListener("input",(e=>{const t=e.target.value;y(e.target),n.volume=t/100}))},t=document.querySelectorAll(".kg-audio-card");for(let a=0;a<t.length;a++)e(t[a])}(),function(){const e=[...document.querySelectorAll(".kg-before-after-card")];for(let o of e){const e=o.querySelector("input"),i=o.querySelector(".kg-before-after-card-image-before"),r=o.querySelector(".kg-before-after-card-slider-button"),d=[...o.querySelectorAll("img")];function t(){i.setAttribute("style",`width: ${e.value}%`),r.setAttribute("style",`left: calc(${e.value}% - 18px`)}function a(){const e=getComputedStyle(d[0]).getPropertyValue("width");d[1].setAttribute("style",`width: ${e}`)}e.addEventListener("input",(function(){t()})),e.addEventListener("change",(function(){e.blur()})),window.addEventListener("resize",(function(){a()})),a(),t()}}(),document.querySelectorAll(".kg-gallery-image img").forEach((function(e){const t=e.closest(".kg-gallery-image"),a=e.attributes.width.value/e.attributes.height.value;t.style.flex=a+" 1 0%"})),function(){const e=document.getElementsByClassName("kg-toggle-heading"),t=function(e){const t=e.target.closest(".kg-toggle-card");"close"===t.getAttribute("data-kg-toggle-state")?t.setAttribute("data-kg-toggle-state","open"):t.setAttribute("data-kg-toggle-state","close")};for(let a=0;a<e.length;a++)e[a].addEventListener("click",t,!1)}(),function(){const e=function(e){const t=e.querySelector(".kg-video-player"),a=e.querySelector(".kg-video-player-container"),o=e.querySelector(".kg-video-play-icon"),i=e.querySelector(".kg-video-pause-icon"),r=e.querySelector(".kg-video-seek-slider"),d=e.querySelector(".kg-video-playback-rate"),l=e.querySelector(".kg-video-mute-icon"),s=e.querySelector(".kg-video-unmute-icon"),n=e.querySelector(".kg-video-volume-slider"),c=e.querySelector("video"),u=e.querySelector(".kg-video-duration"),g=e.querySelector(".kg-video-current-time"),v=e.querySelector(".kg-video-large-play-icon"),m=e.querySelector(".kg-video-overlay");let k=[{rate:.75,label:"0.7×"},{rate:1,label:"1×"},{rate:1.25,label:"1.2×"},{rate:1.75,label:"1.7×"},{rate:2,label:"2×"}],y=null,h=1;c.loop&&(v.classList.add("kg-video-hide-animated"),m.classList.add("kg-video-hide-animated"));const p=()=>{r.value=Math.floor(c.currentTime),g.textContent=L(r.value),t.style.setProperty("--seek-before-width",r.value/r.max*100+"%"),y=requestAnimationFrame(p)},f=e=>{e===r?t.style.setProperty("--seek-before-width",e.value/e.max*100+"%"):t.style.setProperty("--volume-before-width",e.value/e.max*100+"%")},L=e=>{const t=Math.floor(e/60),a=Math.floor(e%60);return`${t}:${a<10?`0${a}`:`${a}`}`},b=()=>{u.textContent=L(c.duration)},q=()=>{r.max=Math.floor(c.duration)},S=()=>{if(c.buffered.length>0){const e=Math.floor(c.buffered.end(c.buffered.length-1));t.style.setProperty("--buffered-width",e/r.max*100+"%")}};c.readyState>0?(b(),q(),S(),c.autoplay&&(y=requestAnimationFrame(p),o.classList.add("kg-video-hide"),i.classList.remove("kg-video-hide")),c.muted&&(s.classList.add("kg-video-hide"),l.classList.remove("kg-video-hide"))):c.addEventListener("loadedmetadata",(()=>{b(),q(),S(),c.autoplay&&(y=requestAnimationFrame(p),o.classList.add("kg-video-hide"),i.classList.remove("kg-video-hide")),c.muted&&(s.classList.add("kg-video-hide"),l.classList.remove("kg-video-hide"))})),e.onmouseover=()=>{c.loop||a.classList.remove("kg-video-hide-animated")},e.onmouseleave=()=>{!!(c.currentTime>0&&!c.paused&&!c.ended&&c.readyState>2)&&a.classList.add("kg-video-hide-animated")},e.addEventListener("click",(()=>{if(!c.loop){!!(c.currentTime>0&&!c.paused&&!c.ended&&c.readyState>2)?A():E()}})),c.onplay=()=>{v.classList.add("kg-video-hide-animated"),m.classList.add("kg-video-hide-animated"),o.classList.add("kg-video-hide"),i.classList.remove("kg-video-hide")};const E=()=>{v.classList.add("kg-video-hide-animated"),m.classList.add("kg-video-hide-animated"),o.classList.add("kg-video-hide"),i.classList.remove("kg-video-hide"),c.play(),y=requestAnimationFrame(p)},A=()=>{i.classList.add("kg-video-hide"),o.classList.remove("kg-video-hide"),c.pause(),cancelAnimationFrame(y)};v.addEventListener("click",(e=>{e.stopPropagation(),E()})),o.addEventListener("click",(e=>{e.stopPropagation(),E()})),i.addEventListener("click",(e=>{e.stopPropagation(),A()})),l.addEventListener("click",(e=>{e.stopPropagation(),l.classList.add("kg-video-hide"),s.classList.remove("kg-video-hide"),c.muted=!1})),s.addEventListener("click",(e=>{e.stopPropagation(),s.classList.add("kg-video-hide"),l.classList.remove("kg-video-hide"),c.muted=!0})),d.addEventListener("click",(e=>{e.stopPropagation();let t=k[(h+1)%5];h+=1,c.playbackRate=t.rate,d.textContent=t.label})),c.addEventListener("progress",S),r.addEventListener("input",(e=>{e.stopPropagation(),f(e.target),g.textContent=L(r.value),c.paused||cancelAnimationFrame(y)})),r.addEventListener("change",(e=>{e.stopPropagation(),c.currentTime=r.value,c.paused||requestAnimationFrame(p)})),n.addEventListener("click",(e=>{e.stopPropagation()})),r.addEventListener("click",(e=>{e.stopPropagation()})),n.addEventListener("input",(e=>{e.stopPropagation();const t=e.target.value;f(e.target),c.volume=t/100}))},t=document.querySelectorAll(".kg-video-card");for(let a=0;a<t.length;a++)e(t[a])}();
\ No newline at end of file
diff --git a/src/assets/scss/_ghost.scss b/src/assets/scss/_ghost.scss
index af49d8610..5f5290901 100644
--- a/src/assets/scss/_ghost.scss
+++ b/src/assets/scss/_ghost.scss
@@ -5,6 +5,10 @@
$margin-post: 20px;
+:root {
+ --ghost-accent-color: #{$primary-color};
+}
+
.postContainer {
max-width: 1200px;
margin: $margin-post 0;
@@ -17,214 +21,13 @@ $margin-post: 20px;
color: $grey-1;
margin-bottom: 8px;
}
-
.description {
div {
max-width: 860px;
line-height: 180%;
}
- ::ng-deep hr {
- display: block;
- margin: 3.2em 0;
- padding: 0;
- height: 1px;
- border: 0;
- border-top: 1px solid #dfe1e3;
- }
- ::ng-deep figure {
- margin: 0;
- figcaption {
- font-size: small;
- color: #626d79;
- }
- }
- ::ng-deep .kg-embed-card {
- position: relative;
- width: 110%;
- padding-top: 65%;
- iframe {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
- width: 100%;
- height: 100%;
- border: none;
- }
- }
- ::ng-deep a {
- @include hyperlink;
- padding: 0;
- }
- ::ng-deep p {
- @include lato-regular-20;
- line-height: 1.6em;
- }
- ::ng-deep li {
- @include lato-regular-20;
- line-height: 1.6em;
- margin-bottom: 10px;
- }
- ::ng-deep h2 {
- margin-top: 50px;
- }
- ::ng-deep blockquote {
- margin: 1.5em 0;
- padding: 0 1.6em;
- border-left: 3px solid $blue;
- }
- ::ng-deep .kg-image-card {
- margin: 0 auto;
- max-width: 100%;
- ::ng-deep .kg-image {
- max-width: 100%;
- margin-top: 10px;
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- }
- ::ng-deep .kg-file-card {
- margin-top: 6vmin;
- ::ng-deep .kg-file-card-container {
- display: flex;
- justify-content: space-between;
- color: inherit;
- padding: 6px;
- border: 1px solid rgb(124 139 154/25%);
- border-radius: 3px;
- text-decoration: none;
- ::ng-deep .kg-file-card-contents {
- margin: 4px 8px;
- ::ng-deep .kg-file-card-title + .kg-file-card-caption {
- margin-top: -3px;
- }
- ::ng-deep .kg-file-card-title {
- font-size: 1.15em;
- line-height: 1.3em;
- }
- ::ng-deep .kg-file-card-caption,
- .kg-file-card-filesize {
- font-weight: normal;
- font-size: 0.95em;
- opacity: 0.6;
- }
- ::ng-deep .kg-file-card-filesize {
- display: inline-block;
- }
- ::ng-deep .kg-file-card-metadata {
- font-size: 0.825em;
- margin-top: 4px;
- ::ng-deep .kg-file-card-filename {
- display: inline;
- font-weight: 500;
- }
- ::ng-deep .kg-file-card-filesize:before {
- display: inline-block;
- content: '\2022';
- margin-right: 4px;
- }
- }
- }
- ::ng-deep .kg-file-card-icon {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 80px;
- }
- ::ng-deep .kg-file-card-icon:before {
- position: absolute;
- display: block;
- content: '';
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: currentColor;
- opacity: 0.06;
- border-radius: 2px;
- }
- ::ng-deep .kg-file-card-icon svg {
- width: 24px;
- height: 24px;
- color: $red;
- }
- }
- }
- ::ng-deep .kg-bookmark-card {
- margin-top: 30px;
- font: inherit;
- vertical-align: baseline;
- ::ng-deep .kg-bookmark-container {
- display: flex;
- border-radius: 3px;
- color: var(--darkgrey);
- text-decoration: none;
- box-shadow: 0 2px 5px -1px rgb(0 0 0 / 15%), 0 0 1px rgb(0 0 0 / 9%);
- ::ng-deep .kg-bookmark-content {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: flex-start;
- padding: 20px;
- ::ng-deep .kg-bookmark-title {
- color: $grey-1;
- @include lato-regular-18;
- }
- ::ng-deep .kg-bookmark-description {
- display: -webkit-box;
- overflow-y: hidden;
- margin-top: 12px;
- max-height: 48px;
- color: $grey-2;
- line-height: 1.5em;
- font-weight: 400;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- ::ng-deep .kg-bookmark-metadata {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- margin-top: 14px;
- color: var(--darkgrey);
- font-weight: 500;
- ::ng-deep .kg-bookmark-icon {
- margin-right: 8px;
- width: 22px;
- height: 22px;
- display: block;
- }
- ::ng-deep .kg-bookmark-author {
- line-height: 1.5em;
- @include lato-regular-18;
- }
- ::ng-deep .kg-bookmark-publisher {
- overflow: hidden;
- line-height: 1.5em;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: $grey-2;
- }
- }
- }
- ::ng-deep .kg-bookmark-thumbnail {
- position: relative;
- min-width: 33%;
- max-height: 100%;
- img {
- position: absolute;
- width: 100%;
- height: 100%;
- border-radius: 0 3px 3px 0;
- -o-object-fit: cover;
- object-fit: cover;
- }
- }
- }
+ > div > * + * {
+ margin-top: 1em;
}
}
@@ -234,11 +37,9 @@ $margin-post: 20px;
[full-start] minmax(4vmin, auto) [wide-start] minmax(auto, 240px) [main-start] min(720px, calc(100% - 8vw))
[main-end] minmax(auto, 240px) [wide-end] minmax(4vmin, auto) [full-end];
}
-
.gh-canvas > * {
grid-column: main-start/main-end;
}
-
.gh-canvas .article-image {
grid-column: wide-start/wide-end;
width: 100%;
--
GitLab