listing des articles un peu plus fournis

assets/sass/article.scss

@@ -0,0 +1,11 @@
+.article__date {
+    font-style: italic;
+}
+
+.article__featured-image {
+    max-width: 100%;
+
+    img {
+        max-width: 100%;
+    }
+}

assets/sass/general.scss

@@ -4,16 +4,26 @@ body {
     margin: 0;
 }
 
+* {
+    box-sizing: border-box;
+}
+
+article {
+    font-size: 1.1rem;
+}
+
 h1 {
     font-size: 1.75rem;
+    color: $secondary;
 }
 
 h2 {
     font-size: 1.4rem;
+    color: $primary;
 }
 
 a {
-    color: $secondary;
+    color: $primary;
 }
 a:hover {
     opacity: 0.8;

assets/sass/main.scss

@@ -5,7 +5,7 @@ $xs-breakpoint: 400px;
 
 
 $background: #4f607a;
-$primary: #ffb500;
+$primary: darken(#ffb500, 5%);
 $secondary: #f15a24;
 
 .pagination-nav {
@@ -17,6 +17,8 @@ $secondary: #f15a24;
 @import 'general.scss';
 @import 'page_container.scss';
 @import 'header.scss';
+@import 'news.scss';
+@import 'article.scss';
 @import 'gallery.scss';
 @import 'single_image.scss';
 @import 'footer.scss';

assets/sass/news.scss

@@ -0,0 +1,52 @@
+.news-list {
+    list-style-type: none;
+    padding: 0;
+}
+
+.news-item {
+    border-bottom: 1px solid $background;
+    padding: 1rem 0rem;
+    margin-bottom: 1rem;
+
+    display: grid;
+    grid-template-columns: 33% 1fr;
+    grid-column-gap: 2rem;
+}
+
+.news-item__image {
+    width: 100%;
+    
+    figure {
+        margin: 0;
+    }
+    img {
+        max-height: 12rem;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+.news-item__title {
+    margin-top: 0;
+}
+
+.news-item__date {
+    opacity: 0.8;
+    font-style: italic;
+}
+
+.news-item__summary {
+    font-size: .9rem;
+}
+
+@media (max-width: $md-breakpoint) {
+    .news-item {
+        display: flex;
+        flex-direction: column;
+        padding-top: 0;
+    }
+    .news-item__content {
+        margin-top: 1rem;
+    }
+}