chore: update about us page

.vscode/settings.json

@@ -36,6 +36,7 @@
   ],
   "cSpell.language": "fr,en",
   "cSpell.words": [
+    "accessibilite",
     "Annuary",
     "carto",
     "categorie",

src/app/page/enum/page.enum.ts

-export enum PageEnum {
-  quiSommesNous = 'qui-sommes-nous',
-  accessibilite = 'accessibilite',
-}

src/app/page/page.component.html

-<div fxLayout="column" class="content-container full-screen">
+<div class="content-container full-screen">
   <div class="section-container">
-    <div *ngIf="page" class="postContainer" fxLayout="column" fxLayoutGap="16px">
+    <div *ngIf="page" class="postContainer pageContainer">
       <div class="gh-canvas">
-        <div fxLayout="column" fxLayoutAlign="center none">
-          <div fxLayout="row" class="title">{{ page.title }}</div>
-        </div>
-        <div *ngIf="page.feature_image" fxLayout="row" class="article-image">
-          <img class="image" alt="image about the news" [src]="page.feature_image" />
-        </div>
+        <h1 class="title">{{ page.title }}</h1>
+
         <div class="description">
           <div [innerHtml]="page.safeHtml"></div>
         </div>
-        <p *ngIf="version" class="version" fxLayoutAlign="center center">Version : {{ version }}</p>
+        <p *ngIf="version" class="version">Version : {{ version }}</p>
       </div>
     </div>
   </div>

src/app/page/page.component.scss

@@ -2,10 +2,16 @@
 @import 'color';
 @import 'ghost';
 
+.pageContainer {
+  max-width: 720px;
+  margin: auto;
+}
+
 .version {
   padding-top: 80px;
   font-size: $font-size-xxsmall;
   color: $grey-3;
+  text-align: center;
 }
 
 .articleContainer {

src/app/page/page.component.ts

@@ -2,10 +2,14 @@ import { Component, ElementRef, OnInit, Renderer2, ViewEncapsulation } from '@an
 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';
 
+enum PageEnum {
+  quiSommesNous = 'qui-sommes-nous',
+  accessibilite = 'accessibilite',
+}
+
 @Component({
   selector: 'app-page',
   templateUrl: './page.component.html',

src/app/page/services/page.service.ts

@@ -2,7 +2,7 @@ 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 { catchError, map } from 'rxjs/operators';
 import { Page } from '../models/page.model';
 
 @Injectable({
@@ -17,7 +17,7 @@ export class PageService {
 
   public getPage(slugPage: string): Observable<Page> {
     return this.http.get<Page>(`${this.baseUrl}` + slugPage).pipe(
-      map((item: Page) => {
+      map((item) => {
         return new Page(item);
       }),
       catchError(() => {

src/app/post/components/post-card/post-card.component.html

@@ -15,7 +15,7 @@
     />
   </div>
   <div class="informations">
-    <div *ngIf="post.tags.length" class="inline">
+    <div class="inline linePlaceholder">
       <app-tag-item *ngFor="let tag of post.tags" [label]="tag.name" [color]="'red'" [size]="'small'" />
     </div>
     <h2 class="title">{{ post.title }}</h2>

src/app/post/components/post-card/post-card.component.scss

@@ -36,8 +36,13 @@
   .informations {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     gap: 8px;
 
+    .linePlaceholder {
+      height: 20px;
+    }
+
     .title {
       @include font-bold-20;
       @media #{$large-phone} {

src/app/post/components/post-details/post-details.component.html

@@ -2,6 +2,7 @@
   <app-button
     [label]="'Retour'"
     [variant]="'tertiary'"
+    [size]="'large'"
     [iconFolder]="'ico'"
     [iconName]="'arrowBack'"
     (action)="backToPosts()"

src/app/post/components/post-details/post-details.component.scss

@@ -13,10 +13,9 @@ h1 {
   flex-direction: column;
   gap: 32px;
   padding-block: 32px;
-
-  max-width: 1080px;
+  max-width: 720px;
   margin: auto;
-  width: 80%;
+  padding-inline: 16px;
 }
 
 .gh-canvas {
@@ -57,6 +56,7 @@ h1 {
     max-width: 100%;
     width: auto;
     height: auto;
+    border-radius: 8px;
   }
   div {
     height: fit-content;

src/app/post/components/post-publish/post-publish.component.html

@@ -4,6 +4,7 @@
       <app-button
         [label]="'Retour'"
         [variant]="'tertiary'"
+        [size]="'large'"
         [iconFolder]="'ico'"
         [iconName]="'arrowBack'"
         (action)="backToPosts()"

src/assets/scss/_ghost.scss

@@ -2,18 +2,11 @@
 @import 'layout';
 @import 'breakpoint';
 
-$margin-post: 20px;
-
 :root {
   --ghost-accent-color: #{$red};
 }
 
 .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 font-bold-30;
     color: $grey-1;
@@ -21,7 +14,7 @@ $margin-post: 20px;
   }
   .description {
     div {
-      max-width: 860px;
+      max-width: 720px;
       line-height: 180%;
     }
     > div > * + * {
@@ -31,24 +24,8 @@ $margin-post: 20px;
       margin: 1em 0 0 0;
     }
   }
-  .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%;
-    }
+
+  .kg-file-card-icon {
+    height: auto;
   }
 }