From 5c8156899782ca8af0d7722b97f848b56841c607 Mon Sep 17 00:00:00 2001
From: gribse <achille.toupin@gadz.org>
Date: Tue, 22 Apr 2025 21:04:18 +0200
Subject: [PATCH] =?UTF-8?q?mettre=20les=20d=C3=A9filantes=20colonnes=20adj?=
 =?UTF-8?q?ecentes=20au=20principal=20div?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/home.html | 41 +++++++++++++++++++++--------------------
 readMe.md         |  2 +-
 2 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/layouts/home.html b/layouts/home.html
index 2c6eab3..c7aeb88 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -19,34 +19,35 @@
     <link rel="stylesheet" href="{{ $core.RelPermalink }}">
     
     <style>
+      body {
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center; /* Center the main-screen horizontally */
+        align-items: stretch; /* Ensure full height */
+        min-height: 100vh; /* Ensure the body takes up the full viewport height */
+      }
+
       .main-screen {
-        box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
         display: flex;
         flex-direction: row;
-        justify-content: space-between;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        width: 100%;
-        max-width: 100%;
-        padding: 0px 10px;
-        gap: 2rem;
+        justify-content: space-between; /* Ensure side-screens are adjacent to main-content */
+        width: auto; /* Allow the width to adjust based on content */
+        max-width: 100%; /* Prevent overflow */
+        gap: 0;
+        text-align: justify;
       }
 
       .side-screen {
         height: 100vh;
-        overflow-y: hidden;
-        width: 400px;
-        min-width: 400px;
+        overflow-y: auto; /* Allow scrolling if content overflows */
+        flex: 0 0 400px; /* Fixed width of 400px */
       }
 
       .main-content {
-        position: relative;
-        flex-grow: 2;
-        width: 100%;
-        max-width: 750px;
+        flex-grow: 1; /* Take up the remaining space between side-screens */
+        max-width: 750px; /* Optional: Limit max width */
+        margin: 0 25px;
       }
 
       .site-title {
@@ -71,11 +72,11 @@
 
       @media (max-width: 1380px) {
         .side-screen {
-          display: none;
+          display: none; /* Hide side-screens on smaller screens */
         }
 
         .main-screen {
-          justify-content: center;
+          justify-content: center; /* Center main-content when side-screens are hidden */
         }
       }
     </style>
diff --git a/readMe.md b/readMe.md
index c527da9..378ec4c 100644
--- a/readMe.md
+++ b/readMe.md
@@ -8,7 +8,7 @@
 - [x] Optimiser les images de la page d'accueil
 - [x] sur la page principale, ne load que les X derniers articles dans les bandes défilantes 
 - [ ] make the gradient of scrolling posts on homepage responsive to theme by swithing them
-- [ ] mettre les défilantes colonnes adjecentes au principal div
+- [x] mettre les défilantes colonnes adjecentes au principal div
 - [ ] corriger le bout gris qui dépasse dans les radius des scrolling-list-item
 
 ### Collection