From 64ce8ca54ea67210436a267242435c25d5987609 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Wed, 2 Feb 2022 14:18:51 +0000
Subject: [PATCH] feat(pages): display pages from ghost (eg. : about page and
accessibility page)
---
src/app/about/about.component.html | 38 ----
src/app/about/about.component.ts | 15 --
src/app/app-routing.module.ts | 6 +-
src/app/app.module.ts | 4 +-
src/app/footer/footer.component.html | 1 +
src/app/header/header.component.html | 4 +-
src/app/page/enum/page.enum.ts | 4 +
src/app/page/models/page.model.ts | 17 ++
src/app/page/page.component.html | 18 ++
.../page.component.scss} | 20 +-
.../page.component.spec.ts} | 15 +-
src/app/page/page.component.ts | 33 ++++
src/app/page/services/page.service.spec.ts | 16 ++
src/app/page/services/page.service.ts | 26 +++
.../post-details/post-details.component.scss | 178 +----------------
src/assets/scss/_ghost.scss | 184 ++++++++++++++++++
src/sitemap.xml | 4 +-
17 files changed, 326 insertions(+), 257 deletions(-)
delete mode 100644 src/app/about/about.component.html
delete mode 100644 src/app/about/about.component.ts
create mode 100644 src/app/page/enum/page.enum.ts
create mode 100644 src/app/page/models/page.model.ts
create mode 100644 src/app/page/page.component.html
rename src/app/{about/about.component.scss => page/page.component.scss} (54%)
rename src/app/{about/about.component.spec.ts => page/page.component.spec.ts} (52%)
create mode 100644 src/app/page/page.component.ts
create mode 100644 src/app/page/services/page.service.spec.ts
create mode 100644 src/app/page/services/page.service.ts
create mode 100644 src/assets/scss/_ghost.scss
diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
deleted file mode 100644
index 23034e3aa..000000000
--- a/src/app/about/about.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<div fxLayout="column" class="content-container full-screen">
- <div class="section-container">
- <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="left" fxLayoutGap="5%">
- <div class="about-container">
- <h1>Qui sommes-nous ?</h1>
- <p>
- La numérisation accélérée des différents services privés et publics ainsi que la crise sanitaire que nous
- traversons a renforcé une fracture numérique déjà forte pour un nombre important de citoyens.
- </p>
- <p>
- Au printemps 2019, la Métropole de Lyon s'est saisie des enjeux autour de l'inclusion numérique en initiant la
- structuration d'un réseau des acteurs de la médiation numérique sur son territoire. Son objectif est de mettre
- en relation les acteurs qui œuvrent au quotidien pour limiter cette fracture numérique, nombreux sur le
- territoire de la Métropole : associations, centres sociaux, structures informations jeunesses, grands
- opérateurs de services publics, collectivités...
- </p>
- <p>
- Des ateliers de travail ont été organisés en 2019 pour identifier les besoins de ces acteurs et 9 offres de
- services ont été identifiées :
- </p>
- <h2>Recenser et partager des ressources existantes (optimisation)</h2>
- <img src="/assets/img/about_illustration_1.jpg" width="640" height="114" alt="illustration des besoins" />
- <h2>Co-construire de nouvelles ressources (développement)</h2>
- <img src="/assets/img/about_illustration_2.jpg" width="640" height="149" alt="illustration des besoins" />
- <p>
- Cet espace vise à centraliser et mettre en commun les ressources développées dans le cadre du réseau par ses
- acteurs.
- </p>
- <p>N'hésitez pas à contribuer à cet espace en partageant vos ressources</p>
- <p class="version" fxLayoutAlign="center center">Version : {{ version }}</p>
- </div>
- <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px">
- <img src="/assets/logos/logo_europe.png" width="220" height="168" alt="logo de l'union européenne" />
- <img src="/assets/logos/logo_region.png" width="220" height="98" alt="logo de la région Auverge-Rhône-Alpes" />
- </div>
- </div>
- </div>
-</div>
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
deleted file mode 100644
index 1368672d6..000000000
--- a/src/app/about/about.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { version } from '../../../package.json';
-
-@Component({
- selector: 'app-about',
- templateUrl: './about.component.html',
- styleUrls: ['./about.component.scss'],
-})
-export class AboutComponent implements OnInit {
- public version: string = version;
-
- constructor() {}
-
- ngOnInit(): void {}
-}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 4aa08599e..8718c9630 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,6 +1,6 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
-import { AboutComponent } from './about/about.component';
+import { PageComponent } from './page/page.component';
import { ContactComponent } from './contact/contact.component';
import { FormComponent } from './form/structure-form/form.component';
import { AdminGuard } from './guards/admin.guard';
@@ -46,8 +46,8 @@ const routes: Routes = [
component: LegalNoticeComponent,
},
{
- path: 'about',
- component: AboutComponent,
+ path: 'page/:slugPage',
+ component: PageComponent,
},
{
path: 'contact',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f142abc82..a38225903 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,7 +20,7 @@ import { StructureDetailsComponent } from './structure-list/components/structure
import { StructureOpeningStatusComponent } from './structure-list/components/structure-opening-status/structure-opening-status.component';
import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
-import { AboutComponent } from './about/about.component';
+import { PageComponent } from './page/page.component';
import { ContactComponent } from './contact/contact.component';
import { FormComponent } from './form/structure-form/form.component';
import { UserVerificationComponent } from './user-verification/user-verification.component';
@@ -55,7 +55,7 @@ import { RoleGuard } from './guards/role.guard';
StructureDetailsComponent,
StructureOpeningStatusComponent,
LegalNoticeComponent,
- AboutComponent,
+ PageComponent,
ContactComponent,
UserVerificationComponent,
ResetEmailComponent,
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index e778892c8..b7720d4de 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -1,5 +1,6 @@
<div class="footer" fxLayout="row" fxLayoutAlign="center">
<div fxLayout="row">
+ <a class="clickable text-align-center" routerLink="/page/accessibilite" i18n>Accessibilité</a>
<a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
<a class="clickable text-align-center" routerLink="/newsletter" i18n>Newsletter</a>
<!-- <a class="clickable text-align-center" routerLink="/sitemap" i18n>Plan du site</a> -->
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index f763f292d..51dd7c81d 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -19,7 +19,7 @@
<a routerLink="/news" [routerLinkActive]="'active'" i18n>Actualités</a>
<a routerLink="/acteurs" [routerLinkActive]="'active'" i18n>Cartographie des acteurs</a>
<a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a>
- <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
+ <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
<a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
<button *ngIf="isLoggedIn" class="red" routerLink="/profile" [routerLinkActive]="'active'">
{{ displayName }}
@@ -39,7 +39,7 @@
<a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a>
<a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie de acteurs</a>
<a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a>
- <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
+ <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
<a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a>
</div>
</div>
diff --git a/src/app/page/enum/page.enum.ts b/src/app/page/enum/page.enum.ts
new file mode 100644
index 000000000..3f1bd8e7d
--- /dev/null
+++ b/src/app/page/enum/page.enum.ts
@@ -0,0 +1,4 @@
+export enum PageEnum {
+ quiSommesNous = 'qui-sommes-nous',
+ accessibilite = 'accessibilite',
+}
diff --git a/src/app/page/models/page.model.ts b/src/app/page/models/page.model.ts
new file mode 100644
index 000000000..3ee682538
--- /dev/null
+++ b/src/app/page/models/page.model.ts
@@ -0,0 +1,17 @@
+import { SafeHtml } from '@angular/platform-browser';
+
+export class Page {
+ pages: Page[];
+ id: number;
+ published_at: Date;
+ updated_at: Date;
+ title: string;
+ excerpt: string;
+ feature_image: string;
+ html: string;
+ safeHtml: SafeHtml;
+
+ constructor(obj?: any) {
+ Object.assign(this, obj);
+ }
+}
diff --git a/src/app/page/page.component.html b/src/app/page/page.component.html
new file mode 100644
index 000000000..b0470d320
--- /dev/null
+++ b/src/app/page/page.component.html
@@ -0,0 +1,18 @@
+<div fxLayout="column" class="content-container full-screen">
+ <div class="section-container">
+ <div class="postContainer" *ngIf="page" fxLayout="column" fxLayoutGap="16px">
+ <div class="gh-canvas">
+ <div fxLayout="column" fxLayoutAlign="center none">
+ <div fxLayout="row" class="title">{{ page.title }}</div>
+ </div>
+ <div fxLayout="row" class="article-image" *ngIf="page.feature_image">
+ <img class="image" alt="image about the news" [src]="page.feature_image" />
+ </div>
+ <div fxLayout="row" class="description">
+ <div [innerHtml]="page.safeHtml"></div>
+ </div>
+ <p *ngIf="version" class="version" fxLayoutAlign="center center">Version : {{ version }}</p>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/about/about.component.scss b/src/app/page/page.component.scss
similarity index 54%
rename from src/app/about/about.component.scss
rename to src/app/page/page.component.scss
index a5d775dd2..4a481e9e8 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/page/page.component.scss
@@ -1,21 +1,13 @@
-@import '../../assets/scss/color';
@import '../../assets/scss/typography';
-
-.content-container {
- overflow: auto;
-}
-
-h2 {
- @include cn-bold-16;
- color: $red-default;
-}
-
-.about-container {
- max-width: 760px;
-}
+@import '../../assets/scss/color';
+@import '../../assets/scss/ghost';
.version {
padding-top: 80px;
font-size: $font-size-xxsmall;
color: $grey-3;
}
+
+.articleContainer {
+ padding-top: 20px;
+}
diff --git a/src/app/about/about.component.spec.ts b/src/app/page/page.component.spec.ts
similarity index 52%
rename from src/app/about/about.component.spec.ts
rename to src/app/page/page.component.spec.ts
index 0e0d812f0..c3a36f388 100644
--- a/src/app/about/about.component.spec.ts
+++ b/src/app/page/page.component.spec.ts
@@ -1,20 +1,19 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AboutComponent } from './about.component';
+import { PageComponent } from './page.component';
-describe('AboutComponent', () => {
- let component: AboutComponent;
- let fixture: ComponentFixture<AboutComponent>;
+describe('PageComponent', () => {
+ let component: PageComponent;
+ let fixture: ComponentFixture<PageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [ AboutComponent ]
- })
- .compileComponents();
+ declarations: [PageComponent],
+ }).compileComponents();
});
beforeEach(() => {
- fixture = TestBed.createComponent(AboutComponent);
+ fixture = TestBed.createComponent(PageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/src/app/page/page.component.ts b/src/app/page/page.component.ts
new file mode 100644
index 000000000..2ce5875e0
--- /dev/null
+++ b/src/app/page/page.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
+import { version } from '../../../package.json';
+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'],
+})
+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) {}
+
+ ngOnInit(): void {
+ this.route.params.subscribe((routeParams) => {
+ this.slugPage = routeParams.slugPage;
+ this.pageService.getPage(this.slugPage).subscribe((page) => {
+ this.page = page.pages[0];
+ this.page.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.page.html);
+ });
+ // Display version number in 'About' page only
+ this.slugPage == this.quiSommesNous ? (this.version = version) : (this.version = '');
+ });
+ }
+}
diff --git a/src/app/page/services/page.service.spec.ts b/src/app/page/services/page.service.spec.ts
new file mode 100644
index 000000000..707828ba5
--- /dev/null
+++ b/src/app/page/services/page.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PageService } from './page.service';
+
+describe('PageService', () => {
+ let service: PageService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(PageService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/page/services/page.service.ts b/src/app/page/services/page.service.ts
new file mode 100644
index 000000000..6569447bc
--- /dev/null
+++ b/src/app/page/services/page.service.ts
@@ -0,0 +1,26 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { Page } from '../models/page.model';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class PageService {
+ private readonly baseUrl = 'api/pages/';
+ constructor(private http: HttpClient, private router: Router) {}
+
+ public getPage(slugPage: string): Observable<Page> {
+ return this.http.get<Page>(`${this.baseUrl}` + slugPage).pipe(
+ map((item: Page) => {
+ return new Page(item);
+ }),
+ catchError(() => {
+ this.router.navigate(['/']);
+ return new Observable<Page>();
+ })
+ );
+ }
+}
diff --git a/src/app/post/components/post-details/post-details.component.scss b/src/app/post/components/post-details/post-details.component.scss
index 59262dbe3..71b1f8516 100644
--- a/src/app/post/components/post-details/post-details.component.scss
+++ b/src/app/post/components/post-details/post-details.component.scss
@@ -3,15 +3,9 @@
@import '../../../../assets/scss/layout';
@import '../../../../assets/scss/breakpoint';
@import '../../../../assets/scss/hyperlink';
-
-$margin-post: 20px;
+@import '../../../../assets/scss/ghost';
.postContainer {
- max-width: 1200px;
- margin: $margin-post 0;
- min-height: calc(
- var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
- );
.chevronLeft {
height: 24px;
width: 24px;
@@ -19,6 +13,7 @@ $margin-post: 20px;
margin-right: 10px;
}
}
+
.tag {
@include cn-bold-16;
text-transform: uppercase;
@@ -26,11 +21,6 @@ $margin-post: 20px;
fill: $secondary-color;
stroke: $secondary-color;
}
-.title {
- @include cn-bold-30;
- color: $grey-1;
- margin-bottom: 8px;
-}
.informations {
@include cn-regular-16;
div:nth-child(2n) {
@@ -39,172 +29,14 @@ $margin-post: 20px;
}
.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 img {
+ width: 100%;
+ height: 100%;
}
::ng-deep figure {
- margin: 0;
figcaption {
margin-top: 1%;
- font-size: small;
text-align: center;
- color: #626d79;
- }
- }
- ::ng-deep img {
- width: 100%;
- height: 100%;
- }
- ::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 cn-regular-20;
- line-height: 1.6em;
- }
- ::ng-deep li {
- @include cn-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-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 cn-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 cn-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;
- }
- }
}
}
}
-
-.gh-canvas {
- display: grid;
- grid-template-columns:
- [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%;
- margin: 4vmin 0 0;
- img {
- display: block;
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- }
-}
diff --git a/src/assets/scss/_ghost.scss b/src/assets/scss/_ghost.scss
new file mode 100644
index 000000000..15de6a5c2
--- /dev/null
+++ b/src/assets/scss/_ghost.scss
@@ -0,0 +1,184 @@
+@import '../../assets/scss/color';
+@import '../../assets/scss/layout';
+@import '../../assets/scss/breakpoint';
+@import '../../assets/scss/hyperlink';
+
+$margin-post: 20px;
+
+.postContainer {
+ max-width: 1200px;
+ margin: $margin-post 0;
+ min-height: calc(
+ var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height} - #{$header-post-height} - #{$margin-post} * 3
+ );
+}
+.title {
+ @include cn-bold-30;
+ 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 cn-regular-20;
+ line-height: 1.6em;
+ }
+ ::ng-deep li {
+ @include cn-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-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 cn-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 cn-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;
+ }
+ }
+ }
+ }
+}
+
+.gh-canvas {
+ display: grid;
+ grid-template-columns:
+ [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%;
+ margin: 4vmin 0 0;
+ img {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+ }
+}
diff --git a/src/sitemap.xml b/src/sitemap.xml
index 951ad41ce..2b2ff2cc9 100644
--- a/src/sitemap.xml
+++ b/src/sitemap.xml
@@ -26,9 +26,9 @@
</url>
<url>
- <loc>https://resin.grandlyon.com/about</loc>
+ <loc>https://resin.grandlyon.com/page/qui-sommes-nous</loc>
<priority>0.64</priority>
- <lastmod>2021-05-04T13:28:32+00:00</lastmod>
+ <lastmod>2022-01-04T15:28:32+00:00</lastmod>
</url>
</urlset>
--
GitLab