feat(post) : add design "appel à projet"

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

-<div class="section-container" fxLayout="row">
+<div class="section-container" fxLayout="row" fxLayoutGap="32px">
   <div fxLayout="column" class="list-container">
     <div fxLayout="column">
-      <div fxLayout="row" fxLayoutAlign="space-between center">
-        <h2>A la une</h2>
-        <button>Publier votre actu</button>
+      <div fxLayout="row" class="row-border" fxLayoutAlign="space-between center">
+        <h2>à la une</h2>
+        <app-button
+          [type]="'button'"
+          [style]="'buttonWithHash'"
+          [text]="'Publier votre actu'"
+          (action)="publishNews()"
+        ></app-button>
       </div>
     </div>
 
     <div fxLayout="column">
-      <div fxLayout="row">
-        <h2>Autres actualités</h2>
+      <div fxLayout="row" class="row-border">
+        <h2>autres actualités</h2>
+      </div>
+    </div>
+  </div>
+  <div fxLayout="column" fxLayoutAlign=" center" class="project-container">
+    <div class="background-project-container">
+      <div class="project-content" fxLayout="column">
+        <app-svg-icon [iconClass]="'icon-80'" [iconColor]="'inherit'" [type]="'post'" [icon]="'project'"></app-svg-icon>
+        <h2>appels à projets</h2>
       </div>
     </div>
   </div>
-  <div fxLayout="column" fxLayoutAlign=" center" class="project-container">Appels ap rojets</div>
 </div>

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

 @import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
 
 .section-container {
   background: $grey-6;
+  .row-border {
+    border-bottom: 1px dashed $grey-4;
+    margin: 16px 0;
+  }
+  h2 {
+    font-style: italic !important;
+    text-transform: uppercase;
+  }
 }
 
 .list-container {
   width: 80%;
+  h2 {
+    @include cn-bold-28;
+    color: $grey-2;
+  }
 }
 .project-container {
   width: 20%;
+  min-width: 306px;
+  @include background-hash($secondary-color);
+  border: 1px solid $secondary-color;
+  border-radius: 6px;
+  .background-project-container {
+    width: 100%;
+    height: 100%;
+    background: $white;
+    border-radius: 6px;
+    .project-content {
+      padding: 18px 32px 62px 36px;
+      fill: $secondary-color;
+      stroke: $secondary-color;
+      text-align: center;
+      h2 {
+        @include cn-bold-26;
+        color: $secondary-color;
+      }
+    }
+  }
 }

src/app/post/components/post-list/post-list.component.ts

@@ -3,13 +3,12 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-post-list',
   templateUrl: './post-list.component.html',
-  styleUrls: ['./post-list.component.scss']
+  styleUrls: ['./post-list.component.scss'],
 })
 export class PostListComponent implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
+  public publishNews(): void {}
 }

src/app/post/post.component.html

 <app-post-header></app-post-header>
 <app-post-list></app-post-list>
-<app-post-details></app-post-details>
-<p>posts works!</p>

src/app/shared/components/svg-icon/svg-icon.component.scss

@@ -9,6 +9,10 @@
   &.icon-75 {
     width: 4.688em;
   }
+  &.icon-80 {
+    height: 80px;
+    width: 80px;
+  }
   &.validation {
     height: 100%;
     width: 26px;

src/assets/post/sprite.svg

+<svg xmlns="http://www.w3.org/2000/svg">
+
+<symbol id="project" viewBox="0 0 80 60" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.66016 23.2006C4.67429 23.0597 8.52282 22.3132 12.7892 21.1547C17.5608 19.8591 22.9197 18.0302 28.3314 15.8906C38.369 11.9223 48.6614 6.85659 55.7703 2.08884V2.14843V2.22928V2.31051V2.39211V2.47407V2.5564V2.6391V2.72216V2.80559V2.88938V2.97352V3.05802V3.14288V3.2281V3.31367V3.39959V3.48586V3.57248V3.65944V3.74676V3.83441V3.92241V4.01075V4.09943V4.18845V4.27781V4.3675V4.45752V4.54788V4.63856V4.72958V4.82092V4.91259V5.00458V5.0969V5.18954V5.2825V5.37577V5.46937V5.56327V5.6575V5.75203V5.84688V5.94203V6.03749V6.13326V6.22933V6.32571V6.42239V6.51937V6.61664V6.71422V6.81209V6.91025V7.0087V7.10745V7.20649V7.30581V7.40542V7.50532V7.6055V7.70596V7.8067V7.90772V8.00901V8.11059V8.21243V8.31455V8.41694V8.5196V8.62253V8.72573V8.82918V8.93291V9.03689V9.14114V9.24565V9.35041V9.45543V9.5607V9.66622V9.772V9.87803V9.9843V10.0908V10.1976V10.3046V10.4119V10.5194V10.6271V10.7351V10.8433V10.9517V11.0604V11.1693V11.2784V11.3878V11.4974V11.6072V11.7172V11.8275V11.938V12.0487V12.1596V12.2708V12.3821V12.4937V12.6054V12.7174V12.8296V12.942V13.0546V13.1675V13.2805V13.3937V13.5071V13.6207V13.7345V13.8485V13.9628V14.0771V14.1917V14.3065V14.4215V14.5366V14.6519V14.7674V14.8831V14.999V15.1151V15.2313V15.3477V15.4643V15.581V15.6979V15.815V15.9323V16.0497V16.1673V16.2851V16.403V16.521V16.6393V16.7577V16.8762V16.9949V17.1137V17.2327V17.3519V17.4712V17.5906V17.7102V17.83V17.9498V18.0698V18.19V18.3103V18.4307V18.5513V18.672V18.7928V18.9137V19.0348V19.156V19.2774V19.3988V19.5204V19.6421V19.7639V19.8858V20.0079V20.1301V20.2523V20.3747V20.4972V20.6198V20.7425V20.8654V20.9883V21.1113V21.2344V21.3576V21.481V21.6044V21.7279V21.8515V21.9752V22.099V22.2229V22.3468V22.4709V22.595V22.7192V22.8435V22.9679V23.0923V23.2169V23.3415V23.4661V23.5909V23.7157V23.8406V23.9655V24.0905V24.2156V24.3408V24.466V24.5912V24.7166V24.8419V24.9674V25.0929V25.2184V25.344V25.4696V25.5953V25.7211V25.8468V25.9726V26.0985V26.2244V26.3503V26.4763V26.6023V26.7284V26.8544V26.9806V27.1067V27.2328V27.359V27.4852V27.6115V27.7377V27.864V27.9903V28.1166V28.243V28.3693V28.4956V28.622V28.7484V28.8748V29.0012V29.1275V29.2539V29.3803V29.5067V29.6331V29.7595V29.8859V30.0123V30.1387V30.265V30.3914V30.5177V30.6441V30.7704V30.8967V31.023V31.1492V31.2754V31.4017V31.5279V31.654V31.7802V31.9063V32.0323V32.1584V32.2844V32.4104V32.5363V32.6622V32.7881V32.9139V33.0397V33.1654V33.2911V33.4168V33.5424V33.6679V33.7934V33.9188V34.0442V34.1696V34.2948V34.42V34.5452V34.6703V34.7953V34.9203V35.0452V35.17V35.2947V35.4194V35.544V35.6686V35.793V35.9174V36.0417V36.1659V36.2901V36.4141V36.5381V36.662V36.7858V36.9095V37.0331V37.1566V37.2801V37.4034V37.5266V37.6498V37.7728V37.8957V38.0186V38.1413V38.2639V38.3864V38.5088V38.6311V38.7533V38.8754V38.9973V39.1191V39.2408V39.3624V39.4839V39.6053V39.7265V39.8476V39.9685V40.0894V40.2101V40.3307V40.4511V40.5714V40.6916V40.8116V40.9315V41.0512V41.1708V41.2903V41.4096V41.5288V41.6478V41.7667V41.8854V42.004V42.1224V42.2406V42.3587V42.4766V42.5944V42.712V42.8294V42.9467V43.0638V43.1808V43.2975V43.4141V43.5306V43.6468V43.7629V43.8788V43.9945V44.11V44.2254V44.3406V44.4555V44.5703V44.6849V44.7993V44.9136V45.0276V45.1414V45.2551V45.3685V45.4818V45.5948V45.7076V45.8203V45.9327V46.0449V46.1569V46.2687V46.3803V46.4917V46.6029V46.7138V46.8245V46.9351V47.0453V47.1554V47.2653V47.3749V47.4843V47.5934V47.7024V47.8111V47.9195V48.0278V48.1358V48.2435V48.3511V48.4583V48.5654V48.6722V48.7787V48.885V48.9911V49.0969V49.2024V49.3078V49.4128V49.5176V49.6221V49.7264V49.8304V49.9342V50.0377V50.1409V50.2439V50.3465V50.449V50.5511V50.653V50.7546V50.8559V50.957V51.0578V51.1582V51.2585V51.3584V51.458V51.5574V51.6565V51.7552V51.8537V51.9519V52.0498V52.1474V52.2448V52.3418V52.4385V52.5349V52.631V52.7268V52.8223V52.9175V53.0124V53.1069V53.2012V53.2952V53.3888V53.4821V53.5751V53.6678V53.7601V53.8521V53.9439V54.0352V54.1263V54.217V54.3074V54.3975V54.4872V54.5766V54.5932C48.6675 50.7584 38.3441 46.5962 28.2733 43.3173C18.0609 39.9923 7.95384 37.5244 1.66016 37.2769V23.2006Z" fill="none" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M56.7703 0.181641C42.7428 10.2013 12.6838 22.2249 0.660156 22.2249V38.2564C3.19182 38.2564 8.06936 39.0833 11.8822 39.8595L6.27117 53.4863C5.78047 56.4517 7.78661 59.2534 10.752 59.7441C13.7174 60.2349 16.5192 58.2287 17.0099 55.2633L19.8979 41.4627L19.6442 39.9086L19.5098 39.51L41.2658 9.45105H45.2737L21.5122 42.2809C34.1261 45.936 48.342 51.4756 56.7703 56.2918V28.5373L42.6898 47.8979H38.682L55.0188 25.106L56.7703 28.386V11.4099L32.9349 43.1831H28.9271L55.4659 7.44562L56.7703 10.1451V0.181641ZM25.4388 18.068H21.4309L12.6838 31.1271V37.1106L25.4388 18.068Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.9531 28.002C64.9531 29.1368 65.919 30.0566 67.1105 30.0566L77.178 30.0566C78.3695 30.0566 79.3353 29.1368 79.3353 28.002C79.3353 26.8673 78.3695 25.9474 77.178 25.9474L67.1105 25.9474C65.919 25.9474 64.9531 26.8673 64.9531 28.002Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6036 16.1736C64.0749 17.2789 65.353 17.7927 66.4582 17.3214L75.7969 13.3389C76.9021 12.8675 77.416 11.5895 76.9447 10.4843C76.4734 9.37908 75.1953 8.86521 74.0901 9.33653L64.7514 13.3191C63.6462 13.7904 63.1323 15.0684 63.6036 16.1736Z" stroke="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.6036 39.4919C64.0749 38.3867 65.353 37.8728 66.4582 38.3441L75.7969 42.3267C76.9021 42.798 77.416 44.076 76.9447 45.1812C76.4734 46.2864 75.1953 46.8003 74.0901 46.329L64.7514 42.3464C63.6462 41.8751 63.1323 40.5971 63.6036 39.4919Z" stroke="none"/>
+</symbol>
+
+</svg>

src/assets/scss/_typography.scss

@@ -11,6 +11,7 @@ $font-size-medium: 1.25em; // 20px
 $font-size-xmedium: 1.375em; // 22px
 
 $font-size-large: 1.625em; // 26px
+$font-size-xlarge: 1.75em; // 28px
 
 html,
 body,
@@ -43,6 +44,13 @@ h6,
   font-size: $font-size-small;
 }
 
+@mixin cn-bold-28 {
+  font-family: $title-font;
+  font-style: normal;
+  font-weight: bold;
+  font-size: $font-size-xlarge;
+}
+
 @mixin cn-bold-26 {
   font-family: $title-font;
   font-style: normal;