correction

web/app/themes/la_mine/agenda.php

@@ -9,7 +9,7 @@ $args = array(
     'post_type' => 'post',
     'post_status'=>'publish',
 );
-
+$context['post'] = Timber::get_post();
 $context['posts'] = Timber::get_posts( $args );
 $context['terms'] = Timber::get_terms(array( 'taxonomy'=> 'category',  'hide_empty' => true, 'parent' => 0));
 

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

@@ -1,3 +1,5 @@
+
+
 var Home = document.querySelector('.hero .slide');
 var flkty = new Flickity( Home, {
   // options
@@ -28,3 +30,27 @@ var msnry = new Masonry( '.tableau_engagements.row', {
   itemSelector: '.engagement',
   percentPosition: true
 });
+
+
+var hamburgers = document.querySelector(".hamburger");
+var nav = document.querySelector(".nav-main");
+hamburgers.addEventListener("click", function() {
+  this.classList.toggle("is-active");
+  nav.classList.toggle("is-active");
+});
+
+
+var elem = document.querySelector('.grid');
+
+var iso = new Isotope( elem, {
+  itemSelector: '.item',
+  layoutMode: 'fitRows'
+});
+
+var filtersElem = document.querySelector('.filter-button-group');
+filtersElem.addEventListener( 'click', function( event ) {
+
+  var filterValue = event.target.getAttribute('data-filter');
+  iso.arrange({ filter: filterValue });
+
+});

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

@@ -8,11 +8,16 @@
         url('../fonts/Millimetre.woff') format('woff');
 }
 
+*{
+  box-sizing: border-box;
+}
+
 body {
   width: 300px;
   margin: 0 auto;
   font-size: 16px;
   font-family: Universalis ADF Std, sans-serif;
+  padding: 0!important;
 }
 
 h1, h2, h3, h5{
@@ -39,6 +44,21 @@ a, a:hover{
 section{
   position: relative;
 }
+
+/* START KEVIN */
+  .nav-main{
+    display: none;
+    position: absolute;
+    right: 0;
+    top: 70px;
+    background: white;
+    padding: 30px;
+  }
+  .nav-main.is-active{
+    display: block
+  }
+/* END KEVIN */
+
 .titre_page, .titre {
   position: absolute;
   top: -100px;
@@ -79,19 +99,95 @@ section{
 }
 
 /*sections page accueil*/
+
+/* START KEVIN */
+  .coming_soon{
+    width: 100%;
+  }
+  .coming_soon .thumbnails, .other-posts .thumbnails{
+    transform: scale(1);
+    transition: transform 0.3s ease;
+  }
+  .coming_soon .thumbnails:hover, .other-posts .thumbnails:hover{
+    transform: scale(1.05);
+    transition: all 0.3s ease;
+  }
+
+  /* ALL thumbnails */
+  .thumbnails .__img{
+    height: 300px;
+  }
+  .thumbnails .__img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .thumbnails .icone_cat{
+    width: 50px;
+    height: 50px;
+    content: "Picto";
+    position: absolute;
+    transform: translate(-50%, -50%);
+    background: grey;
+    border-radius: 50px;
+  }
+
+/* SECTION ASSO */
+  #section_asso .association .__body{
+    position: relative;
+    justify-content: flex-end;
+    margin-top: 50px;
+  }
+
+  .image_sectionasso {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: 100px;
+    width: 70%;
+  }
+  .content_asso {
+    width: 70%;
+    position: relative;
+    padding: 10px;
+    background-color: white;
+    border: 8px solid yellow;
+  }
+
+  /* responsive iframe */
+  #section_MineVideo .wrapper__content {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+  }
+  #section_MineVideo .wrapper__content iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+
+/* END KEVIN */
+
 .item {
   margin-top: 50px;
 }
 
 .wrap__content_proch {
   position: relative;
-  width: 80%;
+  width: calc(100% - 40px);
+  margin: -4rem auto 0 auto;
   padding: 10px;
-  margin: -50px auto -20px auto;
+  min-height: 160px;
   align-items: center;
   text-align: center;
   background-color: white;
   border: 4px solid black;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .colonne_section{
@@ -106,7 +202,8 @@ section{
   text-transform: uppercase;
   text-align: center;
 }
-.image_sectionasso {
+
+/* .image_sectionasso {
   position: absolute;
   width: 500px;
 }
@@ -116,8 +213,7 @@ section{
   padding: 10px;
   background-color: white;
   border: 8px solid yellow;
-
+} */
-}
 
 .projet .colonne_section .header{
   height: 80px;
@@ -129,16 +225,12 @@ section{
   width: 100%;
 }
 
-.item .__img{
-  width: 100%;
-  height: 300px;
-}
-
 .item img{
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
+
 ._content_tpsF {
   position: relative;
   width: 80%;
@@ -222,9 +314,12 @@ section{
 .cat-list{
   align-items: baseline;
 }
-.cat_name{
+.cat-list li{
-  margin: 0 4% 0 4%;
+  margin-right: 20px;
 }
+/* .cat_name{
+  margin: 0 4% 0 4%;
+} */
 
 /*fin page les projets*/
 

web/app/themes/la_mine/functions.php

@@ -24,6 +24,10 @@
 	get_template_directory_uri() . '/asset/dist/js/masonry.pkgd.min.js',
 	array() );
 
+	wp_enqueue_script( 'isotope',
+	get_template_directory_uri() . '/asset/dist/js/isotope.pkgd.min.js',
+	array() );
+
 	wp_enqueue_script( 'script',
 	get_template_directory_uri() . '/asset/dist/index.js',
 	array() );

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

@@ -2,15 +2,21 @@
 
 {% block content %}
 	<section>
-		<ul class="cat-list d-flex flex-wrap">
+		<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 %}
-			<p>|<a data-filter=".{{cat.slug}}" href="#">
+			<li>|
-		      <li class="cat_name">{{cat.name}}</li>
+				<a class="cat_name" data-filter=".{{cat.slug}}" href="#">
-		    </a></p>
+	      	{{cat.name}}
+				</a>
+			</li>
 		  {% endfor %}
 		|</ul>
 
-		<div class="row align-items-start">
+		<div class="row align-items-start grid">
 			{% for item in posts %}
 				{% include 'components/thumbnails/thumbnails.twig'%}
 			{% endfor %}

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

@@ -18,7 +18,15 @@
 					<img src="" alt="">
 					<img src="" alt="">
 				</div>
-				<div class="burger"></div>
+
+				<div class="burger">
+					<button class="hamburger hamburger--slider" type="button">
+					  <span class="hamburger-box">
+					    <span class="hamburger-inner"></span>
+					  </span>
+					</button>
+				</div>
+
 				<nav id="nav-main" class="nav-main" role="navigation">
 					{% include "menu.twig" with {'items': menu.get_items} %}
 				</nav>

web/app/themes/la_mine/templates/html-header.twig

@@ -16,6 +16,7 @@
     {# BOOTSTRAP #}
     <link href="{{ site.theme.link }}/asset/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="{{ site.theme.link }}/asset/dist/css/flickity.css" rel="stylesheet">
+    <link href="{{ site.theme.link }}/asset/dist/hamburgers.min.css" rel="stylesheet">
     <link href="{{ site.theme.link }}/asset/dist/style.css" rel="stylesheet">
 
     {{function('wp_head')}}

web/app/themes/la_mine/templates/partial/section_tpsF.twig

@@ -5,7 +5,7 @@
 	<div class="wrapper__content row">
 		{% for item in tpsF %}
 		<div class="colonne_section col-md-6 col-lg-4">
-			<div class="item">
+			<div class="item thumbnails">
 				<div class="__img">
 	        <img src="{{item.thumbnail.src}}" alt="{{item.thumbnail.title}}">
 	      </div>

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

@@ -4,7 +4,7 @@
 {% include 'components/title_page.twig'  %}
 
 <section>
-	<div class="wrapper__content">
+	<div class="wrapper__content prive">
 
 		<div class="wrap__content">
 
@@ -18,7 +18,7 @@
 
 		</div>
 
-		<div class="wrap__content __slide">
+		<div class="wrap__content privatiser __slide">
 			{% for item in post.meta('slide_image') %}
 				<div class="images">
 					<div class="img">