feat: fix & improve news style

src/lib/css/typo.scss

@@ -23,6 +23,7 @@
 
 body {
     font-family: "Montserrat", sans-serif;
+    font-size: var(--fz-4);
     color: var(--color-text);
 }
 

src/pages/index/news.html

@@ -8,11 +8,11 @@
   ) %}
   {% for news in glob("news/*.md") | map('markdown') %}
     <div class="news">
-      <div class="news--title">
+      <div class="news--header">
-        <h3>{{ news.meta.title }}</h3>
         {% 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 }}

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);
     
-    &::after {
+    &--header {
-        content: "";
+        display: flex;
-        background: center / cover no-repeat url("/img/game-footer.png");
+        color: var(--color-on-dark);
-        height: 13px;
+        background: var(--color-dark);
+        padding: var(--space-small) var(--space-medium);
+        align-items: center;
+        gap: var(--space-small);
+
+        @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;
+        flex-grow: 1;
-        grid-template-columns: 1fr auto;
+        margin: 0;
-        background: var(--dark);
-        color: white;
-        padding: var(--space-small) var(--space-medium);
-        @media ($mobile-breakpoint) {
-            grid-template-columns: auto;
-            grid-template-rows: auto auto;
-        }
-
     }
 
     &--content {
-        padding: var(--space-large);
+        padding: var(--space-large) var(--space-xlarge);
-        display: flex;
+
-        flex-direction: column;
+        @media($mobile-breakpoint) {
-        align-items: center;
+            padding: var(--space-medium) var(--space-medium);
-        background: var(--primary);
+        }
-        color: var(--dark);
     }
 }