mettre les défilantes colonnes adjecentes au principal div

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;
+        justify-content: space-between; /* Ensure side-screens are adjacent to main-content */
-        position: absolute;
+        width: auto; /* Allow the width to adjust based on content */
-        top: 0px;
+        max-width: 100%; /* Prevent overflow */
-        left: 0px;
+        gap: 0;
-        width: 100%;
+        text-align: justify;
-        max-width: 100%;
-        padding: 0px 10px;
-        gap: 2rem;
       }
 
       .side-screen {
         height: 100vh;
-        overflow-y: hidden;
+        overflow-y: auto; /* Allow scrolling if content overflows */
-        width: 400px;
+        flex: 0 0 400px; /* Fixed width of 400px */
-        min-width: 400px;
       }
 
       .main-content {
-        position: relative;
+        flex-grow: 1; /* Take up the remaining space between side-screens */
-        flex-grow: 2;
+        max-width: 750px; /* Optional: Limit max width */
-        width: 100%;
+        margin: 0 25px;
-        max-width: 750px;
       }
 
       .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>

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