From 8aaa4c7f14037d6996b63fe30176c623d7876227 Mon Sep 17 00:00:00 2001
From: Robin de Mourat <robin.demourat@gmail.com>
Date: Thu, 19 Mar 2020 15:29:29 +0100
Subject: [PATCH] first attempt (not fully functional) to solve #471

---
 site/assets/scss/pages/index/_index.scss | 50 +++++++++++++++---------
 site/components/home/Home.js             | 31 ++++++++-------
 2 files changed, 49 insertions(+), 32 deletions(-)

diff --git a/site/assets/scss/pages/index/_index.scss b/site/assets/scss/pages/index/_index.scss
index 13f721a2..210003e6 100644
--- a/site/assets/scss/pages/index/_index.scss
+++ b/site/assets/scss/pages/index/_index.scss
@@ -95,9 +95,10 @@ $hunit: 4vh;
 @include for-size(desktop) {
   .page-home {
     main {
-      max-width: $max-width-main + $margins-desktop * 2;
-      margin: 0 auto;
+      // max-width: $max-width-main + $margins-desktop * 2;
+      margin: 0;// auto;
       margin-top: $height-top-bar;
+      padding: 0;
     }
 
     #introduction {
@@ -124,9 +125,16 @@ $hunit: 4vh;
       position: fixed;
       top: $height-top-bar;
       height: calc(100vh - #{$height-top-bar});
+      
+      padding-left: auto;
       overflow-y: scroll;
+      padding-left: calc(100vw - 1760px);
+
       // padding-bottom: $height-footer;
     }
+    #home .container{
+      max-width: 950px;
+    }
     footer {
       display: none;
     }
@@ -160,17 +168,12 @@ $hunit: 4vh;
 @media screen and (min-width: 1200px) and (max-width: 1350px) {
   .page-home {
     #home {
-      width: 800px + $size-scrollbar;
-    }
-    #slideshow,
-    #introduction,
-    #now,
-    footer {
-      width: 800px;
+      width: 900px;// 800px + $size-scrollbar;
     }
 
+
     #flux {
-      margin-left: 800px + $margins-desktop;
+      margin-left: 900px + $margins-desktop;
     }
     .flux_selection_container {
       width: calc(100vw - 800px - #{$margins-desktop * 3});
@@ -181,17 +184,20 @@ $hunit: 4vh;
 @media screen and (min-width: 1350px) {
   .page-home {
     #home {
-      width: $max-width-article + $size-scrollbar;
-    }
-    #slideshow,
-    #introduction,
-    #now,
-    footer {
-      width: $max-width-article;
+      // width: $max-width-article + $size-scrollbar;
+      width: 940px;
+      padding-left: $margins-desktop;
     }
+    // #slideshow,
+    // #introduction,
+    // #now,
+    // footer {
+    //   width: $max-width-article;
+    // }
 
     #flux {
-      margin-left: $max-width-article + $margins-desktop;
+      margin-left: $max-width-article + $margins-desktop * 2;
+      width: calc(100vw - #{$max-width-article} - #{$margins-desktop * 3});
     }
     .flux_selection_container {
       width: calc(100vw - #{$max-width-article} - #{$margins-desktop * 3});
@@ -200,10 +206,18 @@ $hunit: 4vh;
 }
 
 @media screen and (min-width: 1650px) {
+  #home {
+    // width: $max-width-article + $size-scrollbar;
+    width: 1200px;
+  }
   .page-home {
     #flux,
     .flux_selection_container {
       width: $max-width-main - $max-width-article - $margins-desktop;
     }
+
+    #flux {
+      margin-left: $max-width-article + $margins-desktop * 7.5;
+    }
   }
 }
diff --git a/site/components/home/Home.js b/site/components/home/Home.js
index ae78cb2e..68b49062 100644
--- a/site/components/home/Home.js
+++ b/site/components/home/Home.js
@@ -40,20 +40,23 @@ export default function Home({lang, grid, slider, rdv, tweets, github}) {
         description={i18n[lang].description} />
       <main role="main" aria-label={i18n[lang].homepage}>
         <section id="home" aria-label={i18n[lang].content}>
-          <Slideshow slider={slider} lang={lang} />
-          <section id="introduction" aria-label={i18n[lang].presentation}>
-            <h1>Le médialab</h1>
-            <p>{i18n[lang].description}</p>
-            <p>
-              <Link
-                to={permalink[lang]}
-                aria-label={i18n[lang].goto}>
-                {i18n[lang].more}
-              </Link>
-            </p>
-          </section>
-          <Now now={grid} lang={lang} />
-          <Footer lang={lang} />
+          <div className="container">
+            <Slideshow slider={slider} lang={lang} />
+            <section id="introduction" aria-label={i18n[lang].presentation}>
+              <h1>Le médialab</h1>
+              <p>{i18n[lang].description}</p>
+              <p>
+                <Link
+                  to={permalink[lang]}
+                  aria-label={i18n[lang].goto}>
+                  {i18n[lang].more}
+                </Link>
+              </p>
+            </section>
+            <Now now={grid} lang={lang} />
+            <Footer lang={lang} />
+          </div>
+          
         </section>
         <Flux
           rdv={rdv} tweets={tweets} github={github}