fix(news): ui details

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