From e5406a35a60a8cb199a3cb79b8289101bc3f170c Mon Sep 17 00:00:00 2001
From: Kevin <kevin@figureslibres.io>
Date: Wed, 1 Jul 2020 17:57:35 +0200
Subject: [PATCH] responsive home

---
 web/app/themes/la_mine/asset/dist/style.css   | 151 +++++++++++-------
 web/app/themes/la_mine/asset/images/fb.svg    |  61 ++++---
 web/app/themes/la_mine/templates/accueil.twig |   2 -
 web/app/themes/la_mine/templates/base.twig    |   8 +-
 web/app/themes/la_mine/templates/footer.twig  |  50 +++---
 5 files changed, 161 insertions(+), 111 deletions(-)

diff --git a/web/app/themes/la_mine/asset/dist/style.css b/web/app/themes/la_mine/asset/dist/style.css
index 4f6e8c29..5d7d1d4d 100644
--- a/web/app/themes/la_mine/asset/dist/style.css
+++ b/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;
+  }
+}
diff --git a/web/app/themes/la_mine/asset/images/fb.svg b/web/app/themes/la_mine/asset/images/fb.svg
index 6938624a..5abc3c27 100644
--- a/web/app/themes/la_mine/asset/images/fb.svg
+++ b/web/app/themes/la_mine/asset/images/fb.svg
@@ -8,10 +8,12 @@
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="34.837036"
-   width="34.837414"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
+   sodipodi:docname="fb.svg"
+   version="1.1"
    id="svg6590"
-   version="1.1">
+   width="34.837414"
+   height="34.837036">
   <metadata
      id="metadata6596">
     <rdf:RDF>
@@ -26,37 +28,46 @@
   <defs
      id="defs6594">
     <linearGradient
-       id="linearGradient1406"
+       gradientTransform="matrix(0,0,0,0,4893.3971,-592.71445)"
        osb:paint="solid"
-       gradientTransform="matrix(0,0,0,0,4870.6657,-589.95471)">
+       id="linearGradient1406">
       <stop
-         style="stop-color:#000000;stop-opacity:1;"
+         id="stop1404"
          offset="0"
-         id="stop1404" />
+         style="stop-color:#000000;stop-opacity:1;" />
     </linearGradient>
   </defs>
   <sodipodi:namedview
-     id="namedview6592"
-     inkscape:window-height="480"
-     inkscape:window-width="640"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0"
-     guidetolerance="10"
-     gridtolerance="10"
-     objecttolerance="10"
-     borderopacity="1"
+     inkscape:current-layer="svg6590"
+     inkscape:window-maximized="1"
+     inkscape:window-y="22"
+     inkscape:window-x="0"
+     inkscape:cy="18.189105"
+     inkscape:cx="17.52747"
+     inkscape:zoom="17.516793"
+     showgrid="false"
+     inkscape:document-rotation="0"
+     pagecolor="#ffffff"
      bordercolor="#666666"
-     pagecolor="#ffffff" />
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1029"
+     id="namedview6592" />
   <inkscape:clipboard
-     max="3695.1542,3459.565"
+     style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient1406);fill-opacity:1;stroke:none;stroke-width:0.00920708;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
      min="3660.3168,3424.728"
-     style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient1406);fill-opacity:1;stroke:none;stroke-width:0.00920708;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1" />
+     max="3695.1542,3459.565" />
   <path
-     inkscape:export-ydpi="150"
-     inkscape:export-xdpi="150"
-     inkscape:export-filename="/home/maud/Documents/LE CAMPUS BIOVALLEE/3_SITE_WEB/TAF/GABARITS/export4/0_accueil.png"
-     inkscape:connector-curvature="0"
+     style="fill:url(#linearGradient1406);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.0092501;enable-background:new"
+     d="M 17.499999,0 C 7.8346931,0 0,7.8343983 0,17.500189 0,27.164841 7.8346931,35 17.499999,35 27.164547,35 35,27.164841 35,17.500189 35,7.8343983 27.164547,0 17.499999,0 Z m 4.652668,7.1129289 c 0.167076,-0.00152 0.216439,0.060755 0.216439,0.2240352 0,1.0339797 0,2.0675795 3.8e-4,3.1011799 0,0.186062 -0.05695,0.24302 -0.239222,0.235426 -0.580587,0 -1.161552,-0.0026 -1.742139,-0.0026 -0.773104,0.0026 -1.235598,0.400985 -1.284202,1.165362 -0.03797,0.61325 0,1.230295 -0.03797,1.845823 0,0.220237 0.125306,0.205049 0.269598,0.205049 0.882841,-7.59e-4 1.765682,0 2.648144,0 0.258207,0 0.345542,0.05316 0.315165,0.32656 -0.110118,1.026766 -0.205047,2.055808 -0.296179,3.084852 -0.03797,0.231629 -0.125306,0.277196 -0.33415,0.273399 -0.696022,0 -1.393181,0 -2.089961,0 -0.500467,0 -0.452243,-0.07214 -0.452243,0.437437 0,3.205603 0,6.411206 0,9.616808 0,0.337952 -0.08733,0.423768 -0.420346,0.414654 -1.196108,-0.04556 -2.392595,-0.04556 -3.588702,7.6e-4 -0.337948,0 -0.392627,-0.110118 -0.389589,-0.410477 0,-1.614194 0,-3.228766 0,-4.843339 0,-1.637735 0,-3.27547 0,-4.912826 0,-0.277197 -0.07594,-0.360735 -0.353136,-0.349344 -0.51034,0.04556 -1.022197,0 -1.533297,0 -0.208844,0.003 -0.284787,-0.04936 -0.28099,-0.273399 0,-1.021828 0,-2.044036 0,-3.066245 0,-0.197454 0.05696,-0.262007 0.254411,-0.254412 0.52249,0 1.046119,0 1.56785,0 0.303773,0 0.364527,-0.09114 0.356933,-0.372127 0,-0.777668 -0.03798,-1.556475 0,-2.334143 0.03797,-0.950062 0.277194,-1.8367095 0.841452,-2.6094413 0.715766,-0.9781605 1.733787,-1.4247121 2.908249,-1.4771136 1.20636,-0.053161 2.415379,-0.045566 3.622877,-0.045566 z"
      id="path4629"
-     d="M 17.418707,0 C 7.7982987,0 0,7.7979207 0,17.418707 c 0,9.619653 7.7982987,17.41833 17.418707,17.41833 9.619653,0 17.418708,-7.798677 17.418708,-17.41833 C 34.837415,7.7979207 27.03836,0 17.418707,0 Z m 4.631055,7.0798105 c 0.166299,-0.00151 0.215433,0.060473 0.215433,0.2229921 0,1.0291653 0,2.0579527 3.78e-4,3.0867404 0,0.185196 -0.05669,0.241889 -0.23811,0.23433 -0.57789,0 -1.156157,-0.0026 -1.734047,-0.0026 -0.769512,0.0026 -1.229858,0.399118 -1.278236,1.159937 -0.03779,0.610393 0,1.224566 -0.03779,1.837228 0,0.219212 0.124724,0.204094 0.268346,0.204094 0.87874,-7.56e-4 1.75748,0 2.635842,0 0.257008,0 0.343937,0.05291 0.313701,0.32504 -0.109606,1.021984 -0.204094,2.046236 -0.294803,3.070488 -0.03779,0.230551 -0.124724,0.275905 -0.332598,0.272126 -0.692788,0 -1.386709,0 -2.080252,0 -0.498142,0 -0.450142,-0.07181 -0.450142,0.435401 0,3.190677 0,6.381354 0,9.572031 0,0.336378 -0.08693,0.421795 -0.418394,0.412724 -1.190551,-0.04535 -2.38148,-0.04535 -3.572031,7.56e-4 -0.336378,0 -0.390803,-0.109606 -0.387779,-0.408567 0,-1.606677 0,-3.213732 0,-4.820787 0,-1.63011 0,-3.26022 0,-4.889952 0,-0.275906 -0.07559,-0.359055 -0.351496,-0.347717 -0.507969,0.04535 -1.017449,0 -1.526174,0 -0.207874,0.003 -0.283464,-0.04913 -0.279685,-0.272126 0,-1.01707 0,-2.034519 0,-3.051968 0,-0.196535 0.05669,-0.260787 0.253229,-0.253228 0.520063,0 1.04126,0 1.560567,0 0.302362,0 0.362834,-0.09071 0.355275,-0.370394 0,-0.774047 -0.0378,-1.549228 0,-2.323275 0.03779,-0.945638 0.275906,-1.8281578 0.837543,-2.5972916 0.712441,-0.9736062 1.725733,-1.4180786 2.89474,-1.4702361 1.200756,-0.052913 2.404158,-0.045354 3.606047,-0.045354 z"
-     style="fill:url(#linearGradient1406);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.00920708;enable-background:new" />
+     inkscape:connector-curvature="0"
+     inkscape:export-filename="/home/maud/Documents/LE CAMPUS BIOVALLEE/3_SITE_WEB/TAF/GABARITS/export4/0_accueil.png"
+     inkscape:export-xdpi="150"
+     inkscape:export-ydpi="150" />
 </svg>
diff --git a/web/app/themes/la_mine/templates/accueil.twig b/web/app/themes/la_mine/templates/accueil.twig
index 20271525..4a5b87d3 100644
--- a/web/app/themes/la_mine/templates/accueil.twig
+++ b/web/app/themes/la_mine/templates/accueil.twig
@@ -32,7 +32,6 @@
 		<div class="paralax" data-rellax-speed="3">
 			<img src="{{theme.link}}/asset/images/objet_2.svg" alt="objet 2">
 		</div>
-
 	</div>
 </section>
 
@@ -42,7 +41,6 @@
 		<div class="paralax" data-rellax-speed="-2" data-rellax-percentage="0.5">
 			<img src="{{theme.link}}/asset/images/objet_3.svg" alt="objet 3">
 		</div>
-
 	</div>
 </section>
 
diff --git a/web/app/themes/la_mine/templates/base.twig b/web/app/themes/la_mine/templates/base.twig
index 01a40364..49c1be4e 100644
--- a/web/app/themes/la_mine/templates/base.twig
+++ b/web/app/themes/la_mine/templates/base.twig
@@ -40,10 +40,8 @@
 					</div>
 				</div>
 
-
 				<nav id="nav-main" class="nav-main" role="navigation">
 					{% include "menu.twig" with {'items': menu.get_items} %}
-					<div class="fl_menu"><img src="{{theme.link}}/asset/images/fleche_menu.svg"></div>
 				</nav>
 			{% endblock %}
 		</header>
@@ -53,9 +51,9 @@
 		{% endif %}
 
 		{% if post.slug == "privacy-policy" %}
-		<div class="paralax" data-rellax-speed="5">
-			<img src="{{theme.link}}/asset/images/objet_8.svg" alt="objet 8">
-		</div>
+			<div class="paralax" data-rellax-speed="5">
+				<img src="{{theme.link}}/asset/images/objet_8.svg" alt="objet 8">
+			</div>
 		{% endif %}
 
 		<section id="content" role="main" class="content-wrapper container-md">
diff --git a/web/app/themes/la_mine/templates/footer.twig b/web/app/themes/la_mine/templates/footer.twig
index f2ada050..8a1dd6db 100644
--- a/web/app/themes/la_mine/templates/footer.twig
+++ b/web/app/themes/la_mine/templates/footer.twig
@@ -1,18 +1,18 @@
-<section class="information col-12 col-lg-6 p-0">
-  <div class="d-flex justify-content-right flex-wrap">
-    <div class="logo_lamine col-lg-3 col-md-6">
+<section class="information col-12 col-xl-8 col-lg-12 p-0">
+  <div class="d-flex justify-content-around flex-wrap">
+    <div class="logo_lamine col-lg-3 col-sm-6">
       <a href="{{site.url}}"><img src="{{ Image(options.lamine_footer.image_logo).src }}" /></a>
     </div>
 
-    <div class="horaires col-lg-3 col-md-6">
+    <div class="horaires col-lg-3 col-sm-6">
       {{options.texte_horaire }}
     </div>
 
-    <div class="adresse col-lg-3 col-md-6">
+    <div class="adresse col-lg-3 col-sm-6">
       {{options.texte_adresse }}
     </div>
 
-    <div class="col-lg-3 col-md-6">
+    <div class="col-lg-3 col-sm-6">
       <div class="collecte">
         {{options.texte_collecte }}
       </div>
@@ -36,34 +36,34 @@
   </div>
 </section>
 
-<section class="join-us col-12 col-lg-6 p-0">
+<section class="join-us col-12 col-xl-4 col-lg-12 p-0">
 <div>
   <div class="send_actu">
-    <!-- Begin Mailchimp Signup Form -->
-    <div id="mc_embed_signup">
-      <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=96d6b6e702" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
-          <div id="mc_embed_signup_scroll" class="d-flex align-items-baseline">
-          	<label for="mce-EMAIL">Recevoir l'actualité de la Mine</label>
-          	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="adresse email" required>
-              <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-            <div style="position: absolute; left: -5000px;" aria-hidden="true">
-              <input type="text" name="b_a98b763288f940083bf28857c_96d6b6e702" tabindex="-1" value="">
-            </div>
-            <div class="clear"><input type="submit" value="Ok" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
-          </div>
-      </form>
-    </div>
-    <!--End mc_embed_signup-->
+  <!-- Begin Mailchimp Signup Form -->
+  <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
+  <style type="text/css">
+  	#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
+  </style>
+  <div id="mc_embed_signup">
+    <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=364a0fe850" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
+      <div id="mc_embed_signup_scroll">
+    	  <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
+        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a98b763288f940083bf28857c_364a0fe850" tabindex="-1" value=""></div>
+        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
+      </div>
+    </form>
+  </div>
+  <!--End mc_embed_signup-->
   </div>
   <div class="add_asso">
     <div id="Btn_asso">
-      <a target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">Adhérer à l'association</a>
+      <a target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
     </div>
 
   </div>
 
-  <div class="partenaires d-flex align-items-center col-lg-6">
-    <div class="_titre">{{options.titre}}</div>
+  <div class="partenaires d-block d-sm-flex align-items-center col-lg-12">
+    <div class="_titre text-center mb-3">{{options.titre}}</div>
     <div class="logo_partenaires w-100">
       <div class="container_slide">
         <ul>