From 80bdb83ca01ceaf8ea1f6ccb915433bf331a1cde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corentin=20S=C3=A9chet?= <corentin@ki-dour.org>
Date: Sun, 19 May 2024 17:50:27 +0200
Subject: [PATCH] feat: integrate news section

---
 css/content.css | 37 +++++++++++++++++++++++++++++++++++++
 index.html      | 18 ++++++++++--------
 2 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/css/content.css b/css/content.css
index ce18647..96d842c 100644
--- a/css/content.css
+++ b/css/content.css
@@ -109,3 +109,40 @@
 .game--more-button:hover {
     color: white;
 }
+
+/* News */
+.news {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--space-medium);
+}
+
+.news::after {
+    content: "";
+    background: center / cover no-repeat url("/img/game-footer.png");
+    height: 13px;
+}
+
+.news--title {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    background: var(--dark);
+    color: white;
+    padding: var(--space-small) var(--space-medium);
+}
+
+.news--content {
+    padding: var(--space-large);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--primary-color);
+    color: var(--dark);
+}
+
+@media (max-width: 768px) {
+    .news--title {
+        grid-template-columns: auto;
+        grid-template-rows: auto auto;
+    }
+}
diff --git a/index.html b/index.html
index 5d5b602..64a2035 100644
--- a/index.html
+++ b/index.html
@@ -153,11 +153,12 @@
                 </h2>
                 <div class="section--content">
                     <div class="news">
-                        <h3 class="news--title">News Title</h3>
-                        <div class="news--date">
-                            02/05/2024
+                        <div class="news--title">
+                            <h3>This is a long news title to test how it presents on little resolutions</h3>
+                            <div class="news--date">
+                                02/05/2024
+                            </div>
                         </div>
-
                         <div class="news--content">
                             Here we specialize in creating bite-sized adventures that anyone
                             can pick up and play, but only the true gaming aficionados can
@@ -173,11 +174,12 @@
                     </div>
 
                     <div class="news">
-                        <h3 class="news--title">News Title</div>
-                        <div class="news--date">
-                            02/05/2024
+                        <div class="news--title">
+                            <h3>This is a long news title to test how it presents on little resolutions</h3>
+                            <div class="news--date">
+                                02/05/2024
+                            </div>
                         </div>
-
                         <div class="news--content">
                             Here we specialize in creating bite-sized adventures that anyone
                             can pick up and play, but only the true gaming aficionados can