From c00b3d515fbd6d94ef873b3e22c71f7bc21502ca Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mail@matthieubessat.fr>
Date: Fri, 14 Jul 2023 12:20:15 +0200
Subject: [PATCH] fix(adhesion): height flow

---
 assets/sass/adhesion.scss | 60 ++++++++++++++++++++++++++-------------
 assets/sass/main.scss     |  1 +
 2 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/assets/sass/adhesion.scss b/assets/sass/adhesion.scss
index 746a52d..ef91329 100644
--- a/assets/sass/adhesion.scss
+++ b/assets/sass/adhesion.scss
@@ -1,18 +1,27 @@
 
 .adhesion-body {
     overflow: hidden !important;
+    height: 100%;
 }
 
 .root {
-    min-height: 100%;
+    overflow: hidden;
+    height: 100%;
+
+    
+  display: flex;
+  flex-direction: column;
+
+
 }
 
 .adhesion-container {
     background-color: black;
-    height: 100%;
     width: 100%;
-    min-height: 100%;
-    height: 90vh;
+    flex-grow: 1;
+    // height: 100%;
+    // min-height: 100%;
+    // height: 90vh;
 
     .video-presentation {
         height: 100%;
@@ -29,11 +38,11 @@
 }
 
 .adhesion-footer {
-    background-color: $background;
     width: 100%;
-    height: 10vh;
+    height: auto;
     padding: 1rem 0;
 
+    background-color: $background;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -85,6 +94,10 @@
         width: 3rem;
         height: 3rem;
         margin-right: 1rem;
+
+        &:last-of-type {
+            margin-right: 0;
+        }
         a { 
             display: block;
             width: 100%;
@@ -103,21 +116,24 @@
     }
 }
 
-@media (max-width: $md-breakpoint) {
-    .adhesion-container {
-        height: 85vh;
-    }
-    .adhesion-footer {
-        height: 15vh;
-    }
-}
+// @media (min-height: 800px) and (max-height: 900px) {
+//     .body {
+//         display: none;
+//     }
+//     .adhesion-container {
+//         height: 76vh !important;
+//     }
+//     .adhesion-footer {
+//         height: 100% !important;
+//     }
+// }
+
+@media (max-width: $mobile-breakpoint) {
+    .adhesion-footer {
+        height: auto;
+    }
 
-@media (max-width: $xs-breakpoint) {
-    .adhesion-container {
-        height: 80vh;
-    }
     .adhesion-footer {
-        height: 20vh;
         .subscribe-button {
             margin-bottom: 1rem;
         }
@@ -129,3 +145,9 @@
         }
     }
 }
+
+// @media (max-width: $xs-breakpoint) {
+//     .adhesion-container {
+//         height: 80vh;
+//     }
+// }
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index e5f1c09..6b0f442 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -2,6 +2,7 @@ $xl-breakpoint: 1800px;
 $lg-breakpoint: 1600px;
 $md-breakpoint: 1100px;
 $sm-breakpoint: 900px;
+$mobile-breakpoint: 450px;
 $xs-breakpoint: 400px;