responsive home

web/app/themes/la_mine/asset/dist/style.css

@@ -10,6 +10,9 @@
 *{
   box-sizing: border-box;
 }
+html{
+  overflow-x: hidden;
+}
 /*START PARALAX*/
 .paralax{
   z-index: -1;
@@ -21,43 +24,39 @@
   left: -20%;
 }
 .section_accueil .paralax{
-  left: 980px;
-  top: 1000px;
+  /* left: 50%; */
 }
+
+#section_projets .paralax{
+  left: 50%;
+}
+
+#section_asso .paralax{
+  left: 30%;
+}
+
 .agenda .paralax{
   z-index: -1;
   width: 100%;
-  top: 340px;
-  left: 315px;
 }
 .les-projets .paralax{
   z-index: -1;
-  top: 420px;
-  left: 940px;
 }
 .la-collecte .paralax{
   z-index: -1;
   width: 80%;
-  top: -230px;
-  left: 580px;
 }
 .la-benevole-zone .paralax{
   z-index: -1;
   width: 80%;
-  top: -685px;
-  left: 580px;
 }
 .privatiser-lespace .paralax{
   z-index: -1;
   width: 80%;
-  top: -1018px;
-  left: 580px;
 }
 .privacy-policy .paralax{
   z-index: -1;
   width: 70%;
-  top: 255px;
-  left: 515px;
 }
 /*END PARALAX*/
 body {
@@ -187,7 +186,6 @@ header > .nav-wrapper{
 
   /* START BURGER */
   .burger{
-    /* padding-top: 10px; */
     height: fit-content;
     pointer-events: auto;
   }
@@ -196,25 +194,30 @@ header > .nav-wrapper{
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: contain;
-    transform: rotate(0deg);
   }
-  .fond_burger:hover{
-    transform: rotate(10deg);
-  }
-  .nav-main{
+  #nav-main{
     display: none;
     position: fixed;
+    top: 0;
     right: 0;
-    top: 120px;
-    width: 280px;
-    height: 300px;
+    width: calc(100% / 4);
+    height: 100vh;
     background: white;
-    border: 4px solid black;
-    transition: all 0.2s ease;
+    z-index: -1;
   }
-  .nav-main.is-active{
-    display: block;
+  #nav-main.is-active{
+    display: flex;
     pointer-events: auto;
+    align-items: center;
+  }
+  .nav-main > ul{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+  .nav-main > ul > li{
+    text-align: center;
   }
   #fl_menu{
     position:absolute;
@@ -227,39 +230,45 @@ header > .nav-wrapper{
   .menu-item {
     font-family: Millimetre, sans-serif;
     text-transform: uppercase;
-    text-align: left;
+    text-align: center;
     pointer-events: auto;
-    border-bottom: 4px solid black;
   }
+
   .menu-item a {
-    background-color: pink;
     width: 100%;
     display: block;
+    padding: 1rem;
+  }
+
+  #nav-main > ul > li > ul{
+    display: none;
+    text-transform: lowercase;
+    border-bottom: none;
+  }
+
+  #nav-main > ul > li > a:hover > ul {
+    display: block;
+  }
+
+  #nav-main > ul > .menu-item{
+    /* border: 4px solid black; */
   }
 
-  #nav-main > ul > li > ul {display: none;text-transform: lowercase; border-bottom: none;}
   #nav-main > ul > li:first-child > a::after{
     content: "";
     background-image: url('../images/fleche_menu.svg');
     background-repeat: no-repeat;
     background-position: center;
-
     display: inline-block;
     width: 20px;
     height: 15px;
     margin-left: 10px;
   }
-  #nav-main > ul > li:first-child:hover > ul {display: block; background-color: #BDBDBD;transition: all 0.2s ease;}
-  #nav-main > ul > li:first-child:hover{background-color: #424242; color:white;border-bottom: none;}
 
-.menu-item a:hover {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: black;
-  color: white;
-  transition: all 0.2s ease;
+  #nav-main > ul > li:first-child:hover > ul {
+    display: block;
   }
+
   /* END BURGER */
 /* END HEADER */
 
@@ -282,13 +291,25 @@ body > .content-wrapper{
   display: block;
   cursor: default!important;
   margin: auto;
-  transform: scale(1) rotate(0deg);
-  transition: transform 0.3s ease;
 }
+
 #bouton_contact {
   margin-top: 20px;
 }
-.btn:hover, #bouton_asso:hover, #bouton_contact:hover{
+
+.btn a,
+#bouton_asso a,
+#bouton_contact a{
+  display: block;
+  width: max-content;
+  margin: auto;
+  transform: scale(1) rotate(0deg);
+  transition: transform 0.3s ease;
+}
+
+.btn a:hover,
+#bouton_asso a:hover,
+#bouton_contact a:hover{
   transform: scale(1.05) rotate(-5deg);
   transition: all 0.3s ease;
 }
@@ -337,15 +358,8 @@ footer .flickity-prev-next-button{
   width: 50px;
   height: 50px;
 }
-footer .flickity-button-icon {
-  fill: grey;
-  left: 158%!important;
-}
-
 /* END BUTTON */
 
-
-
 /* START PAGE HOME */
   .section_accueil {
     position: relative;
@@ -378,8 +392,11 @@ footer .flickity-button-icon {
     z-index: 9999;
     width: 200px;
     height: auto;
+    cursor: grab;
+  }
+  .ui-draggable-dragging{
+    cursor: grabbing;
   }
-
     #drag_1 {
       position:absolute;
       top:175px;
@@ -425,6 +442,11 @@ footer .flickity-button-icon {
       top:515px;
       left: 40px;
     }
+    @media screen and (max-width: 576px) {
+      .group_drag{
+        display: none;
+      }
+    }
 
 /*fin ajout chloe drag*/
 
@@ -1190,17 +1212,23 @@ footer > section{
   margin-bottom: 20px;
 }
 footer .logo_lamine {
-  max-width: 150px;
+  /* max-width: 150px; */
   height: auto;
-  margin: 10px;
+  max-height: 150px;
+  /* margin: 10px; */
 }
 
 footer .logo_lamine a{
   display: block;
+  height: 100%;
+  width: auto;
 }
 footer .logo_lamine img{
   object-fit: contain;
 }
+footer > .information > div > div {
+  margin-bottom: 20px;
+}
 
 footer .reseaux_sociaux > div a > img{
   display: block;
@@ -1266,3 +1294,18 @@ footer .reseaux_sociaux img {
   }
   /* END SLIDE */
 /* END FOOTER */
+@media screen and (max-width: 576px) {
+  footer p,
+  footer a{
+    text-align: center;
+  }
+  footer a.d-flex{
+    justify-content: center;
+  }
+  #Btn_asso a{
+    display: block;
+  }
+  .send_actu input{
+    text-align: center;
+  }
+}