diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html index cf99e8d2109a7902dd06e9a4975a46f9e5718174..aeb808ddfe9ba665c71987bb14b2d0f4222cf056 100644 --- a/src/app/post/components/post-card/post-card.component.html +++ b/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> diff --git a/src/app/post/components/post-card/post-card.component.scss b/src/app/post/components/post-card/post-card.component.scss index 5e1fcacf02e407e638ec0b7070057905dd16bf63..8d318d76ab454ee8c319045ccabde246d3f426aa 100644 --- a/src/app/post/components/post-card/post-card.component.scss +++ b/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} { diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html index 598bdf4e4d0f44375157993c2c12a4c57e94fb2a..87192437f55c788fdab0dd85115b78f6bdac6ad9 100644 --- a/src/app/post/components/post-details/post-details.component.html +++ b/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()" 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 7a666d85c2ef16d29593df06e9ae3aa3f458108a..3c8671b56de64786be08b91bdfdf535584fab2ee 100644 --- a/src/app/post/components/post-details/post-details.component.scss +++ b/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; diff --git a/src/app/post/components/post-publish/post-publish.component.html b/src/app/post/components/post-publish/post-publish.component.html index d17fe0bd7c1f098d06b172eca74aae9c91e54d70..895815e83db937397fce75282412442586608383 100644 --- a/src/app/post/components/post-publish/post-publish.component.html +++ b/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()" diff --git a/src/assets/scss/_ghost.scss b/src/assets/scss/_ghost.scss index 32a51bbb8aa63e99a7346e4ff9bb2bf363f0a020..9b3e2694c91cc6bd20384bb7695d454c1fabd7e2 100644 --- a/src/assets/scss/_ghost.scss +++ b/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; } }