From 93ae2091b6d4d10813d3daa0204f591984aeca37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Wed, 22 May 2024 23:00:52 +0200
Subject: [PATCH] feat: fix & improve news style

---
 src/lib/css/typo.scss     |  1 +
 src/pages/index/news.html |  4 +--
 src/pages/index/news.scss | 56 +++++++++++++++++++++++++--------------
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/lib/css/typo.scss b/src/lib/css/typo.scss
index 81e4c52..a649f53 100644
--- a/src/lib/css/typo.scss
+++ b/src/lib/css/typo.scss
@@ -23,6 +23,7 @@
 
 body {
     font-family: "Montserrat", sans-serif;
+    font-size: var(--fz-4);
     color: var(--color-text);
 }
 
diff --git a/src/pages/index/news.html b/src/pages/index/news.html
index b078c24..4fef5d4 100644
--- a/src/pages/index/news.html
+++ b/src/pages/index/news.html
@@ -8,11 +8,11 @@
   ) %}
   {% for news in glob("news/*.md") | map('markdown') %}
     <div class="news">
-      <div class="news--title">
-        <h3>{{ news.meta.title }}</h3>
+      <div class="news--header">
         {% with creation_date = news | git_creation_date %}
           <div class="news--date">{{ creation_date.strftime('%d/%m/%Y') }}</div>
         {% endwith %}
+        <h3 class="news--title">{{ news.meta.title }}</h3>
       </div>
         <div class="news--content">
           {{ news }}
diff --git a/src/pages/index/news.scss b/src/pages/index/news.scss
index 01e7803..4fcc3c9 100644
--- a/src/pages/index/news.scss
+++ b/src/pages/index/news.scss
@@ -1,33 +1,49 @@
 .news {
+    @extend %card;
+    background: var(--color-on-dark);
+    padding: 0;
+
     display: flex;
     flex-direction: column;
     margin-bottom: var(--space-medium);
+    
+    &--header {
+        display: flex;
+        color: var(--color-on-dark);
+        background: var(--color-dark);
+        padding: var(--space-small) var(--space-medium);
+        align-items: center;
+        gap: var(--space-small);
 
-    &::after {
-        content: "";
-        background: center / cover no-repeat url("/img/game-footer.png");
-        height: 13px;
+        @media($mobile-breakpoint) {
+            flex-direction: column;
+        }
+    }
+
+    &--date {
+        border-right: 2px solid var(--color-on-dark);
+        padding-right: var(--space-small);
+        font-weight: bold;
+
+        @media($mobile-breakpoint) {
+            border-right: 0;
+            border-bottom: 2px solid var(--color-on-dark);
+
+            padding-right: 0;
+            padding-bottom: var(--space-small);
+        }
     }
 
     &--title {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        background: var(--dark);
-        color: white;
-        padding: var(--space-small) var(--space-medium);
-        @media ($mobile-breakpoint) {
-            grid-template-columns: auto;
-            grid-template-rows: auto auto;
-        }
-
+        flex-grow: 1;
+        margin: 0;
     }
 
     &--content {
-        padding: var(--space-large);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        background: var(--primary);
-        color: var(--dark);
+        padding: var(--space-large) var(--space-xlarge);
+
+        @media($mobile-breakpoint) {
+            padding: var(--space-medium) var(--space-medium);
+        }
     }
 }