rs dans header, logo header, menu deroulant, pb engagement

web/app/themes/la_mine/asset/dist/index.js

@@ -1,34 +1,42 @@
 var Home = document.querySelector('.hero .slide');
-var flkty = new Flickity( Home, {
+if (Home != 'null') {
+  var flkty = new Flickity( Home, {
     // options
     cellAlign: 'left',
     autoPlay: true,
     prevNextButtons: false
-});
+  });
-
+}
 var prive = document.querySelector('.prive .__slide');
-var flkty = new Flickity( prive, {
+if (prive != 'null') {
+  var flkty = new Flickity( prive, {
     // options
     cellAlign: 'left',
     autoPlay: true,
-})
+  })
+}
 
 var slide_tpsF = document.querySelectorAll('.tpsF .slide');
-for (var i = 0; i < slide_tpsF.length; i++) {
+if (slide_tpsF != 'null') {
+  for (var i = 0; i < slide_tpsF.length; i++) {
     var flkty = new Flickity( slide_tpsF[i], {
       // options
       cellAlign: 'left',
       autoPlay: true,
       pageDots: false
     });
+  }
 }
 
-var Partenaires = document.querySelector('.container_slide .row');
+var Partenaires = document.querySelector('.container_slide ul');
-var flkty = new Flickity( Partenaires, {
+// if (Partenaires != 'null') {
-  // options
+  var flkty = new Flickity( Partenaires, {
-  groupCells: true,
+    cellAlign: 'left',
     pageDots: false
-});
+    // groupCells: true,
+    // carousel-cell: true,
+  });
+// }
 
 var msnry = new Masonry( '.tableau_engagements.row', {
   columnWidth: '.engagement',

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

@@ -40,8 +40,9 @@ a, a:hover{
   color: black;
   text-decoration: none;
 }
-section{
+.section_accueil {
   position: relative;
+  background-color: pink;
 }
 
 /* START KEVIN */
@@ -62,23 +63,44 @@ section{
     display: block
   }
 /* END KEVIN */
-
+.logoLamine {
+  position: fixed;
+  margin:0 10px 10px 10px;
+  width : 200px;
+  height: 200px;
+}
+.rs {
+  position: fixed;
+  top: 0;
+  right: 0;
+  margin-right: 80px;
+}
+.rs img {
+  width : 40px;
+  height: 40px;
+  margin-top: 10px;
+  opacity: 1;
+}
+.facebook {
+  margin-right: 30px;
+}
+.rs img:hover {
+  opacity: 0.6;
+}
 .menu-item {
   font-family: Millimetre, sans-serif;
   text-transform: uppercase;
   padding: 15px;
 }
 
-  /*.nav-main li:first-child {display: none;}
+#nav-main > ul > li > ul {display: none;}
-  .nav-main li:first-child:hover .menu-item ul {display:block;}*/
+#nav-main > ul > li:first-child:hover > ul {display: block;}
-
 
 .menu-item a:hover {
   background-color: black;
   color: white;
 }
-
+.titre_page, .titre{
-.titre_page, .titre {
   position: absolute;
   top: -100px;
   left: -70px;
@@ -172,15 +194,7 @@ section{
     background-color: white;
     border: 8px solid yellow;
   }
-  @media screen and (min-width: 200px) and (max-width: 640px) {
+
-      .image_sectionasso {
-        display: none;
-        width: 100%;
-    }
-    .content_asso {
-      width: 100%;
-    }
-}
   /* responsive iframe */
   #section_MineVideo .wrapper__content {
     position: relative;
@@ -195,7 +209,6 @@ section{
     height: 100%;
   }
 
-
 /* END KEVIN */
 
 .item {
@@ -218,7 +231,7 @@ section{
 }
 
 .colonne_section{
-  margin-top: 4%;
+  margin-top: 10px;
 }
 .colonne_section .wrap_content {
   border: 8px solid blue;
@@ -230,18 +243,6 @@ section{
   text-align: center;
 }
 
-/* .image_sectionasso {
-  position: absolute;
-  width: 500px;
-}
-.content_asso {
-  position: relative;
-  margin: 150px auto auto 200px;
-  padding: 10px;
-  background-color: white;
-  border: 8px solid yellow;
-} */
-
 .projet .colonne_section .header{
   height: 80px;
   display: flex;
@@ -275,8 +276,8 @@ section{
 
 }
 /*fin sections page accueil*/
-/*page collecte avec formulaire*/
 
+/*page collecte avec formulaire*/
 /*trouver comment styliser les champs du formulaire*/
 /*.af-input acf-input{
   background-color: pink;
@@ -393,18 +394,7 @@ section{
 /*fin privatiser l'espace*/
 
 /*BOUTONS*/
-.__bouttons div {
+
-  position: relative;
-  text-align : center;
-  margin-top: 20px;
-  border: 4px solid blue;
-  border-radius: 0%;
-  padding: 5px;
-  /*background-color: white;*/
-}
-.tout_voir a {
-/*penser à mettre le lien sur toute la surface du bouton*/
-}
 .telechargement_plaquette, .redirection_page, .tout_voir {
   position: relative;
   margin: 50px auto 10px auto;
@@ -416,14 +406,39 @@ section{
   transform: scale(1) rotate(0deg);
   transition: transform 0.3s ease;
 }
-.__bouttons #bouton_asso {
+.telechargement_plaquette a, .redirection_page a, .tout_voir a {
   position: relative;
+  display:flex;
+  margin: -5px;
+  padding: 5px;
+}
+.__bouttons div {
+  position: relative;
+  text-align : center;
+  margin-top: 20px;
+  border: 4px solid blue;
+  border-radius: 0%;
+  padding: 5px;
+}
+.__bouttons #bouton_asso {
   top: 100px;
 }
-.__bouttons #bouton_contact {
+.__bouttons #bouton_asso a{
   position: relative;
+  display:flex;
+  margin: -5px;
+  padding: 5px;
+}
+.__bouttons #bouton_contact {
   top: -30px;
 }
+.__bouttons #bouton_contact a {
+  position: relative;
+  display:flex;
+  margin: -5px;
+  padding: 5px;
+}
+
 .__bouttons div:hover, .telechargement_plaquette:hover, .bouton_asso:hover, .redirection_page:hover, .tout_voir:hover {
   transform: scale(1.1) rotate(-10deg);
   transition: all 0.3s ease;
@@ -488,34 +503,47 @@ footer{
   margin-top: 10%;
 }
 footer div{
-  margin-right: 20px;
+  margin: 0 20px 0 10px;
 }
-footer img {
+footer .logo_lamine {
+  width: 200px;
+  height: auto;
+  margin: 20px;
+}
+footer .reseaux_sociaux img {
   width: 50px;
   height: auto;
-}
-._rs{
-  margin-left: 5%;
-}
-.container_slide .row {
-  width: 100%;
- height: 200px;
   margin-right: 10px;
- background: #333;
 }
-.container_slide .row .flickity-prev-next-button{
+footer .insta {
-  width: 50px;
+  margin-top: 10px;
-  height: 50px;
 }
-.container_slide .row li {
+
+/* START SLIDE PARTENAIRE */
+.send_actu{
+  height: 100px;
+  background: red;
+}
+.add_asso{
+  height: 100px;
+  background: blue;
+}
+.partenaires{
   width: 100%;
-   height: 200px;
-   margin-right: 10px;
-   background: #8C8;
-   border-radius: 5px;
-   counter-increment: carousel-cell;
 }
 
+.container_slide li{
+  width: 200px;
+  height: 200px;
+}
+
+.partenaires  img{
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+/* END SLIDE PARTENAIRE */
+
 /* START KEVIN */
   header{
     z-index: 9999;
@@ -558,8 +586,7 @@ footer img {
   }
 
   .wrapper  section{
-    margin: 150px 0;
+    margin-top: 200px;
-    padding: 100px 0;
   }
   .wrapper section > div {
     position: relative;
@@ -582,10 +609,6 @@ footer img {
     object-fit: cover;
   }
 
-  .tableau_engagements .engagement{
-    width: 50%;
-  }
-
   .prive .images{
     width: 100%;
     height: 600px;
@@ -595,6 +618,35 @@ footer img {
     height: 100%;
     object-fit: cover;
   }
-
-
 /* END KEVIN */
+/*START MEDIA QUERIES*/
+@media screen and (min-width: 200px) and (max-width: 1088px) {
+    .titre_page, .titre {
+      left: 5px;
+    }
+  }
+@media screen and (min-width: 200px) and (max-width: 640px) {
+    .image_sectionasso {
+      display: none;
+      width: 100%;
+  }
+  .content_asso {
+    width: 100%;
+  }
+ .logoLamine {
+   width : 50px;
+   height: 50px;
+  }
+}
+@media screen and (min-width: 200px) and (max-width: 755px) {
+  .__chapeau{
+    margin-top: 20px;
+  }
+}
+@media screen and (min-width: 641px) and (max-width: 1690px) {
+ .logoLamine {
+   width: 100px;
+   height: 100px;
+  }
+}
+/*END MEDIA QUERIES*/

web/app/themes/la_mine/templates/accueil.twig

@@ -1,7 +1,7 @@
 {% extends "base.twig" %}
 
 {% block content %}
-<section>
+<section class="section_accueil" id="section_proch">
 	<div class="">
 		<div class="header">
 			<h3 class="titre">Prochainement</h3>
@@ -21,25 +21,25 @@
 	</div>
 </section>
 
-<section id="section_asso">
+<section class="section_accueil" id="section_asso">
 	<div class="association">
 		{% include 'partial/section_asso.twig' %}
 	</div>
 </section>
 
-<section id="section_projets">
+<section class="section_accueil" id="section_projets">
 	<div class="projet">
 		{% include 'partial/section_projets.twig' %}
 	</div>
 </section>
 
-<section id="section_tpsF">
+<section class="section_accueil" id="section_tpsF">
 	<div class="temps_forts">
 	{% include 'partial/section_tpsF.twig' %}
 </section>
 
 
-<section id="section_MineVideo">
+<section class="section_accueil" id="section_MineVideo">
 	<div class="video">
 		<div class="__header">
 			<h3 class="titre">La Mine en vidéo</h3>

web/app/themes/la_mine/templates/agenda.twig

@@ -1,11 +1,7 @@
 {% extends "base.twig" %}
-
 {% block content %}
+{% include 'components/title_page.twig'  %}
 	<section>
-		<div class="title_page">
-		 	<h2 class="titre_page">{{post.title}}</h2>
-		 </div>
-
 		<ul class="cat-list d-flex flex-wrap button-group filter-button-group">
 		  {% for cat in terms %}
 			<li>|
@@ -17,10 +13,11 @@
 		|</ul>
 
 		<div class="row align-items-start grid">
+			<div class="col-md">
 			{% for item in posts %}
 				{% include 'components/thumbnails/thumbnails.twig'%}
 			{% endfor %}
 			</div>
-
+		</div>
 	</section>
 {% endblock %}

web/app/themes/la_mine/templates/association.twig

@@ -32,7 +32,7 @@
 
 				<div class="tableau_engagements row align-items-start">
 					{% for item in post.meta('type_engagement') %}
-						<div class="engagement col-sm"> <!--semble pas marcher (à cause de massonery ?)-->
+						<div class="engagement col-md-12 col-lg-6"> <!--semble pas marcher (à cause de massonery ?)-->
 							<div class="__head">
 								<h4>{{item.titre_engagement}}</h4>
 							</div>

web/app/themes/la_mine/templates/base.twig

@@ -5,18 +5,23 @@
 	{% endblock %}
 	</head>
 {% endblock %}
-
+	<body class="container-fluid {{post.slug}}" data-template="base.twig">
-	<body class="container-fluid" data-template="base.twig">
 		<header class="header d-flex justify-content-between">
 			{% block header %}
 				<div class="logoLamine">
-					<h1 class="hdr-logo" role="banner">
+						<a class="hdr-logo-link" href="{{site.url}}"><img src="app/themes/la_mine/asset/images/logo_lamine_vect.svg"/></a>
-						<a class="hdr-logo-link" href="{{site.url}}" rel="home">{{site.name}}</a>
+				</div>
-					</h1>
+				<div class="rs row align-items">
+			    <div class="facebook">
+			      <a target="_blank" href="{{options.facebook.lien_facebook}}">
+			        <img src="{{ Image(options.facebook.logo_facebook).src }}" />
+			      </a>
+			    </div>
+			    <div class="insta">
+			      <a target="_blank" href="{{options.instagram.lien_instagram}}">
+			        <img src="{{ Image(options.instagram.logo_instagram).src }}" />
+			      </a>
 			    </div>
-				<div class="rs">
-					<img src="" alt="">
-					<img src="" alt="">
 			  </div>
 
 				<div class="burger">

web/app/themes/la_mine/templates/components/buttons/bouton_asso.html.twig

@@ -1,4 +1,3 @@
   <div id="bouton_asso">
     <a href="{{post.meta('bouton_asso').lien_hello_asso}}">{{post.meta('bouton_asso').texte_bouton}}</a>
-    <!-- <a href="{{group.url}}">{{group.txt}}</a> -->
   </div>

web/app/themes/la_mine/templates/footer.twig

@@ -1,19 +1,19 @@
 
 <section class="information">
 <div class="row">
-  <div class="logo_lamine col-1">
+  <div class="logo_lamine col-2">
-    <a href="{{options.lien_page_accueil.url}}"><img src="{{ Image(options.lamine_footer.image_logo).src }}" /></a>
+    <a href="{{site.url}}"><img src="{{ Image(options.lamine_footer.image_logo).src }}" /></a>
   </div>
 
-  <div class="horaires col-">
+  <div class="horaires col-md-4 col-lg">
     {{options.texte_horaire }}
   </div>
 
-  <div class="adresse col-">
+  <div class="adresse col-md-4 col-lg">
     {{options.texte_adresse }}
   </div>
 
-  <div class="col-">
+  <div class="col-md-4 col-lg">
   <div class="collecte">
     {{options.texte_collecte }}
   </div>
@@ -32,19 +32,31 @@
     </div>
   </div>
 </div>
+  <div class="col-md-7 col-lg">
+    <div class="send_actu">
+      <!-- <iframe src="" width="" height=""></iframe> -->
+    </div>
+    <div class="add_asso">
+        {% include '/components/buttons/bouton_asso.html.twig' %}
+    </div>
 
-  <div class="partenaires row-">
+    <div class="partenaires row col">
-    <div class="_titre">{{options.titre}}</div>
+      <div class="_titre col-2">{{options.titre}}</div>
-    <div class="logo_partenaires">
+      <div class="logo_partenaires col">
-      <div class="container_slide d-flex">
+        <div class="container_slide">
-        <div class="row justify-content align-items">
+            <ul>
               {% for partner in options.partenaire %}
-              <ul><li><a href="{{partner.lien_site_partenaire}}"><img src="{{ Image(partner.logo).src }}" /></li></ul></a>
+                <li>
+                  <a target="_blank" href="{{partner.lien_site_partenaire}}">
+                    <img src="{{ Image(partner.logo).src }}" />
+                  </a>
+                </li>
               {% endfor %}
+              </ul>
         </div>
       </div>
     </div>
-  </div>
+</div>
 
 </div> <!--fin row-->
 </section>