footer

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

@@ -43,10 +43,6 @@ a, a:hover{
   text-decoration: none;
 }
 
-
-
-
-
 /* START HEADER */
 header{
   width: 100%;
@@ -116,21 +112,175 @@ header > .nav-wrapper{
 
 
 
+/* START BUTTON */
+.section_accueil .redirection_page{
+  margin: 10px auto;
+  padding: 3px 10px;
+}
+.section_accueil .tout_voir{
+  margin: 30px auto;
+  padding: 3px 10px;
+}
 
+.btn{
+  display: block;
+  cursor: default!important;
+  margin: auto;
+  transform: scale(1) rotate(0deg);
+  transition: transform 0.3s ease;
+}
 
+.btn:hover{
+  transform: scale(1.05) rotate(-5deg);
+  transition: all 0.3s ease;
+}
+.btn a{
+  padding: 7px 10px;
+  border: 4px solid black;
+}
 
-
-/* START PAGE HOME */
-.section_accueil {
+/* .telechargement_plaquette, .redirection_page, .tout_voir {
+  position: relative;
+  margin: 50px auto 10px auto;
+  display:flex;
+  border-radius: 0%;
+  text-align: center;
+  padding: 5px;
+} */
+/* .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_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.05) rotate(-5deg);
+  transition: all 0.3s ease;
+}
+.Btn {
+  display: flex;
+  margin-top: 10px;
+  color: black;
+  text-decoration: underline;
+  border: none;
+}
+.Btn a:hover, .cat-list a:hover {
+  color: black;
+  background-color: grey;
+  text-decoration: underline;
+  border: none;
+}
+
+.flickity-button {
+  background: transparent;
+}
+.flickity-prev-next-button {
+  width: 100px;
+  height: 100px;
+}
+.flickity-button-icon {
+  fill: white;
+}
+.flickity-button-icon:hover {
+  fill: black;
+}
+.flickity-prev-next-button:hover {
+  background: transparent;
+}
+.flickity-button:disabled {
+  display: none;
+} */
+/* END BUTTON */
+
+
+
+/* START PAGE HOME */
+  .section_accueil {
+    position: relative;
+  }
+  .section_accueil .titre{
+    white-space: nowrap;
+  }
+  .section_accueil#section_proch .titre{
+    border-color: #ffcc00ff;
+  }
+  .section_accueil#section_asso .titre,
+  .section_accueil#section_asso .content_asso  {
+    border-color: #ffcc00ff;
+  }
+
+  .section_accueil#section_projets .titre,
+  .section_accueil#section_projets .wrap_content  {
+    border-color: #f51212ff;
+  }
+  .section_accueil#section_projets .wrapper__content h3{
+    color: #f51212ff;
+  }
+  .section_accueil#section_projets .wrap_content{
+    height: calc(100% - 80px);
+  }
+
+  .section_accueil#section_tpsF .titre,
+  .section_accueil#section_tpsF .content_asso  {
+    border-color: #009ee0ff;
+  }
+  .section_accueil#section_tpsF .wrapper__content h3{
+    color: #009ee0ff;
+  }
+  .section_accueil#section_tpsF .colonne_section{
+    margin-bottom: 50px;
+  }
+  .section_accueil#section_tpsF ._content_tpsF{
+    min-height: 280px;
+  }
+
+  .section_accueil#section_MineVideo .titre {
+    border-color: #009ee0ff;
+  }
 /* END PAGE HOME */
 
-/* START KEVIN */
 
 
-/* END KEVIN */
+
+
+
+
+
+
+
+
+
 .menu-item {
   font-family: Millimetre, sans-serif;
   text-transform: uppercase;
@@ -208,9 +358,9 @@ header > .nav-wrapper{
     object-fit: cover;
   }
   .thumbnails .icone_cat{
-    width: 50px;
-    height: 50px;
-    border-radius: 50px;
+    width: 40px;
+    height: 40px;
+    border-radius: 40px;
     position: absolute;
     transform: translate(-50%, -50%);
     background-position: center; /* Center the image */
@@ -218,46 +368,46 @@ header > .nav-wrapper{
     background-size: cover; /* Resize the background image to cover the entire container */
     background-color: black;
   }
-  .atelier_bois{
+  .thumbnails .atelier_bois{
     background-image: url("../images/atelier_couture.png");
   }
-  .atelier_couture{
+  .thumbnails .atelier_couture{
     background-image: url("../images/atelier_couture.png");
   }
-  .atelier_tricot_solidaire{
+  .thumbnails .atelier_tricot_solidaire{
     background-image: url("../images/atelier_tricot.png");
   }
-  .bal_rock{
+  .thumbnails .bal_rock{
     background-image: url("../images/bal_rock.png");
   }
-  .chiner_concert{
+  .thumbnails .chiner_concert{
     background-image: url("../images/chiner_concert.png");
   }
-  .fab_lab{
+  .thumbnails .fab_lab{
     background-image: url("../images/fab_lab.png");
   }
-  .festival_lamine_numerique{
+  .thumbnails .festival_lamine_numerique{
     background-image: url("../images/fab_lab.png");
   }
-  .gouter_melanie{
+  .thumbnails .gouter_melanie{
     background-image: url("../images/gouter.png");
   }
-  .danse_orientale{
+  .thumbnails .danse_orientale{
     background-image: url('../images/bal_rock.png');
   }
-  .hatha_yoga{
+  .thumbnails .hatha_yoga{
     background-image: url("../images/hatha_yoga.png");
   }
-  .mineside_jazz{
+  .thumbnails .mineside_jazz{
     background-image: url("../images/mineside_jazz.png");
   }
-  .non_programmation{
+  .thumbnails .non_programmation{
     background-image: url("../images/non_prog.png");
   }
-  .soiree_mine{
+  .thumbnails .soiree_mine{
     background-image: url("../images/soiree_mine.png");
   }
-  .zero_dechet{
+  .thumbnails .zero_dechet{
     background-image: url("../images/zero_dechet.png");
   }
 
@@ -278,7 +428,7 @@ header > .nav-wrapper{
   .content_asso {
     width: 70%;
     position: relative;
-    padding: 10px;
+    padding: 20px 10px;
     background-color: white;
     border: 8px solid yellow;
   }
@@ -303,9 +453,9 @@ header > .nav-wrapper{
 
 /* END KEVIN */
 
-.item {
+/* .item {
   margin-top: 50px;
-}
+} */
 
 .wrap__content_proch {
   position: relative;
@@ -355,7 +505,7 @@ header > .nav-wrapper{
   position: relative;
   width: 80%;
   padding: 10px;
-  margin: -50px auto -20px auto;
+  margin: -50px auto;
   align-items: center;
   text-align: center;
   background-color: white;
@@ -363,9 +513,8 @@ header > .nav-wrapper{
 }
 
 .video iframe {
-  margin: 40px auto 0 auto;
+  margin: 0 auto 0 auto;
   width:100%;
-
 }
 /*fin sections page accueil*/
 
@@ -504,95 +653,6 @@ header > .nav-wrapper{
 
 /*fin privatiser l'espace*/
 
-/*BOUTONS*/
-
-.telechargement_plaquette, .redirection_page, .tout_voir {
-  position: relative;
-  margin: 50px auto 10px auto;
-  display:flex;
-  border: 4px solid black;
-  border-radius: 0%;
-  text-align: center;
-  padding: 5px;
-  transform: scale(1) rotate(0deg);
-  transition: transform 0.3s ease;
-}
-.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_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;
-}
-.Btn {
-  display: flex;
-  margin-top: 2%;
-  /*width: 100%;*/
-  color: black;
-  text-decoration: underline;
-  border: none;
-  border-radius: 0%;
-}
-.Btn a:hover, .cat-list a:hover {
-  /* display: flex; */
-  color: black;
-  background-color: grey;
-  text-decoration: underline;
-  border: none;
-  border-radius: 0%;
-}
-
-.flickity-button {
-  background: transparent;
-}
-.flickity-prev-next-button {
-  width: 100px;
-  height: 100px;
-}
-.flickity-button-icon {
-  fill: white;
-}
-.flickity-button-icon:hover {
-  fill: black;
-}
-.flickity-prev-next-button:hover {
-  background: transparent;
-}
-.flickity-button:disabled {
-  display: none;
-}
-
-/*FIN BOUTON*/
 /*gestion des dots*/
 .flickity-page-dots {
   bottom: 0px;
@@ -613,53 +673,7 @@ header > .nav-wrapper{
   bottom: 30px;
 }
 /*fin gestion des dots*/
-footer{
-  background-color: rgba(240, 240, 240, 240);
-  width: 100%;
-  padding: 5%;
-  margin-top: 10%;
-}
-footer div{
-  margin: 0 20px 0 10px;
-}
-footer .logo_lamine {
-  width: 200px;
-  height: auto;
-  margin: 20px;
-}
-footer .reseaux_sociaux img {
-  width: 50px;
-  height: auto;
-  margin-right: 10px;
-}
-footer .insta {
-  margin-top: 10px;
-}
 
-/* START SLIDE PARTENAIRE */
-.send_actu{
-  height: 100px;
-  background: red;
-}
-.add_asso{
-  height: 100px;
-  background: blue;
-}
-.partenaires{
-  width: 100%;
-}
-
-.container_slide li{
-  width: 200px;
-  height: 200px;
-}
-
-.partenaires  img{
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-/* END SLIDE PARTENAIRE */
 
 /* START KEVIN */
   .hero{
@@ -729,10 +743,13 @@ footer .insta {
     object-fit: cover;
   }
 /* END KEVIN */
+
 /*START MEDIA QUERIES*/
 @media screen and (min-width: 200px) and (max-width: 1088px) {
     .titre_page, .titre {
-      left: 5px;
+      top: -150px;
+      left: 50%;
+      transform: rotate(-10deg) translateX(-50%);
     }
   }
 @media screen and (min-width: 200px) and (max-width: 640px) {
@@ -743,10 +760,6 @@ footer .insta {
   .content_asso {
     width: 100%;
   }
- .logoLamine {
-   width : 50px;
-   height: 50px;
-  }
 }
 @media screen and (min-width: 200px) and (max-width: 755px) {
   .__chapeau, .titre_event{
@@ -754,10 +767,76 @@ footer .insta {
   }
 
 }
-@media screen and (min-width: 641px) and (max-width: 1690px) {
- .logoLamine {
-   width: 100px;
-   height: 100px;
-  }
-}
 /*END MEDIA QUERIES*/
+
+
+/* START FOOTER */
+footer{
+  background-color: rgba(240, 240, 240, 240);
+  width: 100%;
+  padding: 50px 10px;
+}
+
+/* footer .information > div > div{
+  margin: 0 20px;
+} */
+footer > section{
+  margin-bottom: 20px;
+}
+footer .logo_lamine {
+  width: 100px;
+  height: 100px;
+}
+
+footer .logo_lamine a{
+  display: block;
+}
+footer .logo_lamine img{
+  object-fit: contain;
+}
+
+footer .reseaux_sociaux > div a > img{
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+}
+
+footer .reseaux_sociaux img {
+  vertical-align: baseline;
+  object-fit: contain;
+}
+  /* START Mailchimp */
+  footer #mc_embed_signup label{
+    margin: 0;
+    padding: 0;
+  }
+  footer #mc_embed_signup_scroll label{
+    margin-right: 10px;
+  }
+  footer #mc_embed_signup_scroll input{
+    width: 100%;
+  }
+  /* END MAILCHIMP */
+
+  /* START SLIDE  */
+  footer .partenaires ._titre{
+    white-space: nowrap;
+    margin-right: 10px;
+  }
+
+  footer .partenaires{
+    width: 100%;
+  }
+
+  footer .container_slide li{
+    width: 80px;
+    height: 80px;
+    margin: 0 10px;
+  }
+
+  footer .partenaires img{
+    object-fit: contain;
+  }
+  /* END SLIDE */
+/* END FOOTER */

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

@@ -7,16 +7,17 @@
 			<h3 class="titre">Prochainement</h3>
 		</div>
 		<div class="__body">
-			<div class="coming_soon row align-items-start">
 
-			{% for item in posts %}
-				{% include 'components/thumbnails/thumbnails.twig' %}
-			{% endfor %}
+			<div class="coming_soon row justify-content-center">
+				{% for item in posts %}
+					{% include 'components/thumbnails/thumbnails.twig' %}
+				{% endfor %}
+			</div>
 
 			<div class="btn tout_voir">
 				<a href="/agenda">Tout voir</a>
 			</div>
-		</div>
+
 		</div>
 	</div>
 </section>

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

@@ -60,7 +60,7 @@
 		</section>
 
 		{% block footer %}
-			<footer id="footer">
+			<footer id="footer" class="d-flex flex-wrap">
 				{% include 'footer.twig' %}
 			</footer>
 			{{ function('wp_footer') }}

web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig

@@ -1,6 +1,6 @@
 {% set cat = item.categories|last %}
 
-<div class="item thumbnails col-md-4 col-sm-6 {{cat.slug}}">
+<div class="item thumbnails col-12 col-sm-6 col-lg-4 mb-4 {{cat.slug}}">
   <a href="{{site.url}}/{{item.post_name}}">
 
     <div class="__images">

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

@@ -1,62 +1,83 @@
+<section class="information col-12 col-lg-6 p-0">
+  <div class="d-flex justify-content-around">
+    <div class="logo_lamine">
+      <a href="{{site.url}}"><img src="{{ Image(options.lamine_footer.image_logo).src }}" /></a>
+    </div>
 
-<section class="information">
-<div class="row">
-  <div class="logo_lamine col-2">
-    <a href="{{site.url}}"><img src="{{ Image(options.lamine_footer.image_logo).src }}" /></a>
-  </div>
+    <div class="horaires">
+      {{options.texte_horaire }}
+    </div>
 
-  <div class="horaires col-md-4 col-lg">
-    {{options.texte_horaire }}
-  </div>
+    <div class="adresse">
+      {{options.texte_adresse }}
+    </div>
 
-  <div class="adresse col-md-4 col-lg">
-    {{options.texte_adresse }}
-  </div>
+    <div class="">
+      <div class="collecte">
+        {{options.texte_collecte }}
+      </div>
+
+      <div class="reseaux_sociaux align-items">
+        <div class="facebook">
+          <a class="d-flex" href="{{options.facebook.lien_facebook}}">
+            <img src="{{ Image(options.facebook.logo_facebook).src }}" />
+            <span>{{options.facebook.texte_facebook}}</span>
+          </a>
+        </div>
+        <div class="insta">
+          <a class="d-flex" href="{{options.instagram.lien_instagram}}">
+            <img src="{{ Image(options.instagram.logo_instagram).src }}" />
+            <span>{{options.instagram.texte_instagram}}</span>
+          </a>
+        </div>
+      </div>
 
-  <div class="col-md-4 col-lg">
-  <div class="collecte">
-    {{options.texte_collecte }}
-  </div>
-  <div class="reseaux_sociaux align-items">
-    <div class="facebook d-flex">
-      <a href="{{options.facebook.lien_facebook}}">
-        <img src="{{ Image(options.facebook.logo_facebook).src }}" />
-      </a>
-      <p class="_rs">{{options.facebook.texte_facebook}}</p>
     </div>
-    <div class="insta d-flex">
-      <a href="{{options.instagram.lien_instagram}}">
-        <img src="{{ Image(options.instagram.logo_instagram).src }}" />
-      </a>
-      <p class="_rs">{{options.instagram.texte_instagram}}</p>
+  </div> <!--fin row-->
+</section>
+
+<section class="join-us col-12 col-lg-6 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="email address" 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-->
   </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 class="add_asso">
+    <div id="bouton_asso">
+      <a href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
     </div>
 
-    <div class="partenaires row col">
-      <div class="_titre col-2">{{options.titre}}</div>
-      <div class="logo_partenaires col">
-        <div class="container_slide">
-            <ul>
-              {% for partner in options.partenaire %}
-                <li>
-                  <a target="_blank" href="{{partner.lien_site_partenaire}}">
-                    <img src="{{ Image(partner.logo).src }}" />
-                  </a>
-                </li>
-              {% endfor %}
-              </ul>
-        </div>
+  </div>
+
+  <div class="partenaires d-flex align-items-center">
+    <div class="_titre">{{options.titre}}</div>
+    <div class="logo_partenaires  w-100">
+      <div class="container_slide">
+        <ul>
+          {% for partner in options.partenaire %}
+            <li>
+              <a target="_blank" href="{{partner.lien_site_partenaire}}">
+                <img src="{{ Image(partner.logo).src }}" />
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
       </div>
     </div>
+  </div>
 </div>
 
-</div> <!--fin row-->
 </section>

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

@@ -2,33 +2,33 @@
 	<h3 class="titre">Les Projets</h3>
 	<h2 class="texte_chapeau">{{ post.meta('texte_chapeau_projet') }}</h2>
 </div>
-
 <div class="__body">
-	<div class="wrapper__content row">
+	<div class="wrapper__content row justify-content-center">
 		{% for item in projet %}
 			<div class="colonne_section col-md-6 col-lg-4">
 				<div class="header">
 					<h3>{{item.title}}</h3>
 				</div>
-				<div class="wrap_content d-flex flex-wrap">
-				{{item.text}}
+				<div class="wrap_content">
+					{{item.meta('text')|truncate(30)}}
 					<div class="projet">
 						{% for projet in item.meta("projets") %}
-							<!--<div class="wrap__content">
+							<div class="wrap__content">
 									<div class="title_pjt">
 										<h4>{{projet.titre}}</h4>
 									</div>
 									<div class="content_pjt">
-										{{projet.text}}
+										{{projet.text|truncate(20)}}
 									</div>
-							</div>--> <!--les titres a utilisé pour faire les patch qui se drag-->
+							</div>
+							<!--les titres a utilisé pour faire les patch qui se drag-->
 						{% endfor %}
 					</div>
 				</div>
 			</div>
 		{% endfor %}
-		<div class="btn tout_voir">
-			<a href="/les-projets">Tout voir</a>
-		</div>
+	</div>
+	<div class="btn tout_voir">
+		<a href="/les-projets">Tout voir</a>
 	</div>
 </div>

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

@@ -2,12 +2,12 @@
 	<h3 class="titre">Les temps forts</h3>
 </div>
 <div class="__body">
-	<div class="wrapper__content row">
+	<div class="wrapper__content row justify-content-center">
 		{% for item in tpsF %}
-		<div class="colonne_section col-md-6 col-lg-4">
+		<div class="colonne_section col-12 col-sm-6 col-lg-4">
 			<div class="item tpsF_thumbnails">
 				<div class="__img">
-	        <img src="{{item.thumbnail.src}}" alt="{{item.thumbnail.title}}">
+	        <img src="{{item.thumbnail.src|resize(500, 500) }}" alt="{{item.thumbnail.title}}">
 	      </div>
 				<div class="_content_tpsF">
 					<div class="title">
@@ -19,16 +19,14 @@
 						</div>
 					</div>
 					<div class="content">
-						{{item.text}}
+						{{item.text|truncate(20)}}
 					</div>
 				</div>
 				</div>
 			</div>
 		{% endfor %}
-
-			<div class="btn tout_voir">
-			<a href="/les-temps-forts">Tout voir</a>
-		</div>
-
+	</div>
+	<div class="btn tout_voir">
+		<a href="/les-temps-forts">Tout voir</a>
 	</div>
 </div>