fix title other single

web/app/themes/la_mine/src/assets/js/scripts.js

@@ -1,6 +1,6 @@
 function slides() {
   var Home = $('.accueil .hero .main-carousel');
-  $('.main-carousel').flickity({
+  $('body:not(.les-temps-forts) .main-carousel').flickity({
     cellAlign: 'left',
     autoPlay: true,
     prevNextButtons: false,
@@ -25,17 +25,16 @@ function slides() {
   //   })
   // }
 
-  // var slide_tpsF = document.querySelectorAll('.tpsF .slide');
+  var slide_tpsF = document.querySelectorAll('.tpsF .main-carousel');
-  // if (slide_tpsF != null) {
+  if (slide_tpsF != null) {
-  //   for (var i = 0; i < slide_tpsF.length; i++) {
+    for (var i = 0; i < slide_tpsF.length; i++) {
-  //     var flkty = new Flickity( slide_tpsF[i], {
+      var flkty = new Flickity( slide_tpsF[i], {
-  //       // options
+        cellAlign: 'left',
-  //       cellAlign: 'left',
+        autoPlay: true,
-  //       autoPlay: true,
+        pageDots: false
-  //       pageDots: false
+      });
-  //     });
+    }
-  //   }
+  }
-  // }
 
   // var Partenaires = document.querySelector('.container_slide ul');
   // if (Partenaires != null) {

web/app/themes/la_mine/src/assets/scss/components/_forms.scss

@@ -1,17 +1,17 @@
 .la-collecte{
     aside{
         form{
-            border: 5px solid black;
+            border: 5px solid $colorPink;
             padding: 1rem;
             .acf-form-submit{
                 text-align: center;
                 button {
                     padding: 0.5rem 1rem;
-                    border: 1px solid black;
+                    border: 5px solid $colorPink;
                     background: white;
                     &:hover{
                         color: white;
-                        background: black;
+                        background: $colorPink;
                         transition: all 0.3s ease;
                     }
                 }
@@ -20,8 +20,8 @@
                 display: none!important;
             }
             input{
-                border: 0px solid black!important;
+                border: 0px solid $colorPink!important;
-                border-bottom: 1px solid black!important;
+                border-bottom: 1px solid $colorPink!important;
             }
         }
     }

web/app/themes/la_mine/src/assets/scss/components/_header.scss

@@ -87,6 +87,12 @@ header{
                 overflow: auto;
                 & > ul{
                     padding-top: calc( #{$widthburger} + #{$padTopNav} + 1rem );
+                    & > li{
+                        font-size: 1rem;
+                        line-height: 1;
+                        font-family: 'millimetre-regular';
+                        text-transform: uppercase;
+                    }
                     li{
                         text-align: center;
                         a{

web/app/themes/la_mine/src/assets/scss/components/_hero.scss

@@ -26,8 +26,9 @@
             color: $colorWhite;
             h1{
                 text-transform: uppercase;
-                font-size: 2rem;
+                font-size: 3rem;
                 line-height: 1.2;
+                font-family: 'millimetre-regular';
             }
             h2{
                 font-size: 1.5rem;

web/app/themes/la_mine/src/assets/scss/components/_index.scss

@@ -2,3 +2,4 @@
 @import "thumbnails.scss";
 @import "hero.scss";
 @import "forms.scss";
+@import "_title-page.scss";

web/app/themes/la_mine/src/assets/scss/components/_thumbnails.scss

@@ -0,0 +1,38 @@
+.thumbnails{
+    a{
+        display: block;
+        text-decoration: none;
+    }
+    margin-bottom: 2rem;
+    .wrap_content{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: -6rem;
+        h5{
+            font-family: 'universalis-bold';
+            font-size: 1.25rem;
+            line-height: 1;
+            text-transform: uppercase;
+        }
+        .date{
+            & > * {
+                font-family: 'universalis-regular';
+                font-size: 1rem;
+                line-height: 1;
+            }
+        }
+        .places{
+            padding-top: 0.5rem;
+            font-family: 'universalis-regular';
+            font-size: 1rem;
+            line-height: 1;
+            text-transform: uppercase;
+        }
+    }
+    &:hover {
+        .wrap_content{
+            margin-top: -7rem;
+        }    
+    }
+}

web/app/themes/la_mine/src/assets/scss/components/_title-page.scss

@@ -0,0 +1,26 @@
+.title_page{
+    margin-bottom: 1rem;
+    h2{
+        width: max-content;
+        padding: 0.5rem;
+        text-transform: uppercase;
+        width: max-content;
+        display: inline-block;
+        padding: 0.5rem 1.5rem;
+        z-index: 999;
+        left: -0rem;
+        background: white;
+        position: relative;
+        margin-bottom: 2rem;
+        transform: translateX(0%) rotate(-15deg);
+        font-family: 'millimetre-bold';
+        font-size: 1.875rem;
+        line-height: 1;
+        @media screen and (min-width: 576px) {
+            transform: translateX(0%) rotate(-15deg);
+        }
+        @media screen and (min-width: 1200px) {
+            transform: translateX(-50%) rotate(-15deg);
+        }
+    }
+}

web/app/themes/la_mine/src/assets/scss/configs/_fonts.scss

@@ -0,0 +1,38 @@
+$millimetre-font-path: "../fonts/millimetre";
+
+@font-face {
+    font-family: 'millimetre-bold';
+    src: url('#{$millimetre-font-path}/millimetre-bold-webfont.woff2') format('woff2'),
+         url('#{$millimetre-font-path}/millimetre-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+  
+@font-face {
+    font-family: 'millimetre-regular';
+    src: url('#{$millimetre-font-path}/millimetre-regular-webfont.woff2') format('woff2'),
+         url('#{$millimetre-font-path}/millimetre-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+$universalis-font-path: "../fonts/universalis";
+
+@font-face {
+    font-family: 'universalis-bold';
+    src: url('#{$universalis-font-path}/universalisadfstd-bold-webfont.woff2') format('woff2'),
+         url('#{$universalis-font-path}/universalisadfstd-bold-webfont.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'universalis-regular';
+    src: url('#{$universalis-font-path}/UniversalisADFStd-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}

web/app/themes/la_mine/src/assets/scss/configs/_variables.scss

@@ -4,8 +4,10 @@ $colorYellow:#ffcc00;
 $colorBlack:black;
 $colorBlue:#009ee0ff;
 $colorRed:#f51212;
-
+$colorGreen: #26e800ff;
 $colorBlack:black;
+$colorPurple: #5353e1ff;
+$colorPink : #ff56ffff;
 $heightLogo: 115px;
 $heightLogoHover: 100px;
 

web/app/themes/la_mine/src/assets/scss/index.scss

@@ -2,17 +2,31 @@
 @import "configs/variables.scss";
 @import "configs/mixinsLamine.scss";
 @import "configs/mixins.scss";
-
+@import "configs/fonts.scss";
 // bootstrap
 @import "bootstraps/bootstrap.scss";
 @import "bootstraps/bootstrap-reboot.scss";
 
 // flickity
 @import "flickity/flickity.min.scss";
+
+.flickity-prev-next-button.previous{
+    left: 20px;
+}
+
+.flickity-prev-next-button.next{
+    right: 20px;
+}
+
 @import "hamburgers/hamburgers.scss";
 
 @import "components/index.scss";
 
+
+body,html{
+    font-size: 16px;
+    line-height: 1.5;
+}
 // reboot perso
 figure{
     max-width: 100%;
@@ -32,6 +46,16 @@ li,ul,ol{
     @include reset-list;
 }
 
+p{
+    font-family: 'universalis-regular';
+    font-size: 1rem;
+    line-height: 1.3;
+    strong{
+        font-family: 'universalis-bold';
+        font-size: initial;
+        line-height: initial;
+    }
+}
 
 #section_MineVideo{
     figure{

web/app/themes/la_mine/src/assets/scss/pages/_agenda.scss

@@ -31,9 +31,11 @@
                         margin-bottom: 1rem;
                         margin-left: 1rem;
                         cursor:pointer;
+                        text-transform: uppercase;
                         transition: background 0.3s ease, color 0.3s ease;
                         a{
                             color: black;
+                            text-transform: inherit;
                         }
                         &:hover{
                             background:black;
@@ -65,6 +67,7 @@
         .thumbnails{
             a{
                 display: block;
+                text-decoration: none;
             }
             margin-bottom: 2rem;
             .wrap_content{
@@ -73,6 +76,26 @@
                 justify-content: center;
                 margin-top: -6rem;
                 height: 150px;
+                h5{
+                    font-family: 'universalis-bold';
+                    font-size: 1.25rem;
+                    line-height: 1;
+                    text-transform: uppercase;
+                }
+                .date{
+                    & > * {
+                        font-family: 'universalis-regular';
+                        font-size: 1rem;
+                        line-height: 1;
+                    }
+                }
+                .places{
+                    padding-top: 0.5rem;
+                    font-family: 'universalis-regular';
+                    font-size: 1rem;
+                    line-height: 1;
+                    text-transform: uppercase;
+                }
             }
             &:hover {
                 .wrap_content{

web/app/themes/la_mine/src/assets/scss/pages/_association.scss

@@ -1,16 +1,53 @@
 &.association{
+    .title_page{
+      margin-bottom: 1rem;
+      h2{
+        border: 5px solid $colorYellow;
+        width: max-content;
+        padding: 0.5rem;
+        text-transform: uppercase;
+        width: max-content;
+        display: inline-block;
+        padding: 0.5rem 1.5rem;
+        z-index: 999;
+        left: -0rem;
+        background: white;
+        position: relative;
+        margin-bottom: 2rem;
+        transform: translateX(0%) rotate(-15deg);
+        @media screen and (min-width: 576px) {
+            transform: translateX(0%) rotate(-15deg);
+        }
+        @media screen and (min-width: 1200px) {
+            transform: translateX(-50%) rotate(-15deg);
+        }
+      }
+    }
     aside{
         height: 100%;
+        header{
+          h3{
+            font-size: 1rem;
+          }
+        }
         & > .wrapper{
           border:5px solid $colorYellow;
           padding: 1rem 2rem;
         }
+        .__content{
+          a{
+            color: $colorBlack;
+            text-decoration: none;
+          }
+        }
         #bouton_asso{
           margin: 2rem 0;
           text-align: center;
           a{
             padding: 0.5rem 1rem;
             border:5px solid $colorYellow;
+            color: $colorBlack;
+            text-decoration: none;
           }
         }
     }

web/app/themes/la_mine/src/assets/scss/pages/_benevole-zone.scss

@@ -1,9 +1,19 @@
 &.la-benevole-zone{
+    .title_page{
+        h2{
+            border: 5px solid $colorPurple;
+        }
+    }
     main{
         aside{
+            margin-bottom: 2rem;
             .__content{
                 padding: 1rem;
-                border: 5px solid black;
+                border: 5px solid $colorPurple;
+                text-align: center;
+                @media screen and (min-width: 768px) {
+                    text-align: left;
+                }
             }
             .__bouttons{
                 & > div{
@@ -14,18 +24,22 @@
                         width: max-content;
                         margin: auto;
                         padding: 0.5rem 1em;
-                        border: 2px solid black;
+                        border: 5px solid $colorPurple;
                         color: black;
                         background: white;
                         &:hover{
                             color: white;
-                            background: black;
+                            background: $colorPurple;
                             transition: all 0.3s ease;
                         }
-    
                     }
                 }
             }
         }
+        .__header{
+            h3{
+                text-align: center;
+            }
+        }
     }
 }

web/app/themes/la_mine/src/assets/scss/pages/_home.scss

@@ -23,6 +23,9 @@
                     position: relative;
                     margin-bottom: 2rem;
                     transform: translateX(0%) rotate(-15deg);
+                    font-family: 'millimetre-bold';
+                    font-size: 2rem;
+                    line-height: 1;
                     @media screen and (min-width: 576px) {
                         transform: translateX(0%) rotate(-15deg);
                     }
@@ -144,6 +147,8 @@
                         display: flex;
                         align-items: flex-end;
                         justify-content: center;
+                        font-family: 'millimetre-regular';
+                        font-size: 1.875rem;
                     }
                     & > div{
                         border:10px solid $colorRed;
@@ -152,7 +157,9 @@
                         h4{
                             font-size: 1rem;
                             line-height: 1.2;
-                            color: $colorRed;
+                            color: $colorBlack;
+                            font-family: 'universalis-bold';
+                            margin-bottom: 0;
                         }
                         & > div{
                             p{
@@ -162,9 +169,6 @@
                             }
                         }
                     }
-                    &:not(:last-of-type){
-                        // margin-bottom: 2rem;
-                    }
                 }
             }
             &#section_tpsF{
@@ -182,18 +186,26 @@
                         }
                     }
                 }
-                h3{
-                    color: $colorBlue;
-                    font-size: 1.5rem;
-                    line-height: 1.2;
-
-                }
                 article{
                     height: auto;
+                    h3{
+                        color: $colorBlue;
+                        font-size: 1.875rem;
+                        line-height: 1;
+                        font-family: 'millimetre-regular';
+                        text-transform: uppercase;
+                    }
+                }
+                .content{
+                    font-family: 'universalis-regular';
+                    color: $colorBlue;
+                    font-size: 1rem;
+                    line-height: 1.2;
                 }
                 .date{
                     margin: 1rem;
                     span{
+                        font-family: 'universalis-regular';
                         display: block;
                         color: $colorBlue;
                         font-size: 1rem;
@@ -213,7 +225,6 @@
                         }    
                     }
                 }
-
             }
             &#section_MineVideo{
                 .container-fluid{

web/app/themes/la_mine/src/assets/scss/pages/_index.scss

@@ -4,6 +4,7 @@
 @import "privatiser-lespace";
 @import "les-projets";
 @import "les-temps-forts";
+@import "la-collecte";
 @import "single";
 
 @import "association";

web/app/themes/la_mine/src/assets/scss/pages/_la-collecte.scss

@@ -0,0 +1,15 @@
+&.la-collecte{
+    .title_page{
+        h2{
+            border: 5px solid $colorPink;
+        }
+    }
+    aside{
+        margin-bottom: 3rem;
+        header{
+            h3{
+                text-align: center;
+            }
+        }
+    }
+}

web/app/themes/la_mine/src/assets/scss/pages/_les-projets.scss

@@ -1,4 +1,26 @@
 &.les-projets{
+    h2{
+        border: 5px solid $colorRed;
+        width: max-content;
+        padding: 0.5rem;
+        text-transform: uppercase;
+        width: max-content;
+        display: inline-block;
+        padding: 0.5rem 1.5rem;
+        z-index: 999;
+        left: -0rem;
+        background: white;
+        position: relative;
+        margin-bottom: 2rem;
+        transform: translateX(0%) rotate(-15deg);
+        @media screen and (min-width: 576px) {
+            transform: translateX(0%) rotate(-15deg);
+        }
+        @media screen and (min-width: 1200px) {
+            transform: translateX(-50%) rotate(-15deg);
+        }
+      }
+
     article{
         margin: 5rem 0;
         header{
@@ -6,10 +28,11 @@
             h3{
                 text-align: center;
                 text-transform: uppercase;
+                color: $colorRed;
             }
             & > div{
                 padding: 2.5rem 3rem;            
-                border:5px solid black;
+                border:5px solid $colorRed;
                 p{
                     margin: 0;
                 }

web/app/themes/la_mine/src/assets/scss/pages/_les-temps-forts.scss

@@ -1,4 +1,28 @@
 &.les-temps-forts{
+    .title_page{
+        margin-bottom: 1rem;
+        h2{
+            border: 5px solid $colorBlue;
+            width: max-content;
+            padding: 0.5rem;
+            text-transform: uppercase;
+            width: max-content;
+            display: inline-block;
+            padding: 0.5rem 1.5rem;
+            z-index: 999;
+            left: -0rem;
+            background: white;
+            position: relative;
+            margin-bottom: 2rem;
+            transform: translateX(0%) rotate(-15deg);
+            @media screen and (min-width: 576px) {
+                transform: translateX(0%) rotate(-15deg);
+            }
+            @media screen and (min-width: 1200px) {
+                transform: translateX(-50%) rotate(-15deg);
+            }
+          }
+        }
     .img{
         width: 100%;
         height: 400px;

web/app/themes/la_mine/src/assets/scss/pages/_privatiser-lespace.scss

@@ -1,20 +1,32 @@
 &.privatiser-lespace{
+    .title_page{
+        h2{
+            border: 5px solid $colorGreen;
+        }
+    }
+
     main{
         .main-carousel{
             @include full-width;
         }
+        .__organisation{
+            margin-top:5rem;
+        }
         article{
+            margin-bottom: 2rem;
             h5{
                 text-align: center;
+                text-transform: uppercase;
+                color: $colorGreen;
             }
             .__item{
-                border: 5px solid green;
+                border: 5px solid $colorGreen;
                 padding: 0.8rem;
             }
         }
         .btn{
-            margin-top: 2rem;
+            // margin-top: 2rem;
-            border: 1px solid black;
+            border: 5px solid black;
             padding: 0.5rem 1rem;
             border-radius: 0px;
             color: black;
@@ -40,10 +52,20 @@
                 height: 100%;
                 object-fit: cover;
             }
+            &.is-selected .legendes{
+                opacity: 1;
+                -webkit-transform: translateX(0px);
+                    -ms-transform: translateX(0px);
+                        transform: translateX(0px);
+                -webkit-transition: all 1.3s;
+                -o-transition: all 1.3s;
+                transition: all 1.3s;
+            }
+
             figcaption{
                 left: 50%;
                 transform: translateX(-50%);
-                border: 5px solid green;
+                border: 5px solid $colorGreen;
                 position: absolute;
                 bottom: 2rem;
                 background: white;
@@ -55,6 +77,16 @@
                 p:last-of-type{
                     margin-bottom: 0;
                 }
+
+                &.legendes{
+                    opacity: 0;
+                    -webkit-transform: translateX(50px);
+                        -ms-transform: translateX(50px);
+                            transform: translateX(50px);
+                    -webkit-transition: all 0.3s;
+                    -o-transition: all 0.3s;
+                    transition: all 0.3s;
+                }
             }
         }
     }

web/app/themes/la_mine/src/assets/scss/pages/_single.scss

@@ -3,8 +3,11 @@
         margin-bottom: 2rem;
         a{
             display: inline-block;
+            font-size: 1rem;
+            line-height: 1;
             transform: translateX(-50%);
             color: black;
+            font-family: 'universalis-bold';
         }
     }
     header{
@@ -12,12 +15,31 @@
             border: 5px solid $colorYellow;
             padding: 0.5rem;
             width: max-content;
+            font-size: 2rem;
+            line-height: 1;
+            font-family: 'millimetre-bold';
         }
     }
     .data{
         margin: 1rem 0rem;
+        background-color: white;
+        border: 5px solid $colorYellow;
+        padding: 1em;
+        text-transform: uppercase;
+        color: black;
+        & > * {
+            font-family: 'universalis-bold';
+            font-size: 1rem;
+            line-height: 1.2;
+        }
     }
     footer{
+        h3{
+            font-family: 'universalis-bold';
+            font-size: 1.5rem;
+            line-height: 1.2;
+            margin-bottom: 0;
+        }
         .partager{
             figure{
                 a{
@@ -56,6 +78,7 @@
             min-height: 450px;
             a{
                 display: block;
+                text-decoration: none;
             }
             margin-bottom: 2rem;
             .wrap_content{

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

@@ -5,15 +5,14 @@
 
 <section class="row">
 
-	<aside class="sidebar_left col-md-4 mr-2">
+	<aside class="sidebar_left col-12 col-md-12 col-lg-4">
 		<div class="wrapper">
 			{% include '/components/sider_left.twig' with { name__template : 'association' } %}
 		</div>
 		{% include '/components/buttons/bouton_asso.html.twig' %}
-
 	</aside>
 
-	<section class="wrapper__content col-md-7">
+	<section class="wrapper__content col-12 col-md-12 col-lg-8">
 		
 		<article class="wrap__content __asso">
 			<header>

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

@@ -1,7 +1,9 @@
 {% if name == 'other' %}
   {% set cat = post.categories|first.slug %}
+  {% set title = item.post_title %}
 {% else %}
   {% set cat = item.categories|first.slug %}
+  {% set title = item.title %}
 {% endif %}
 
 <article class="thumbnails col-12 col-md-6 col-lg-4 {{cat}}">
@@ -13,7 +15,7 @@
     </figure>
 
     <div class="wrap_content">
-      <h5>{{item.title}}</h5>
+      <h5>{{title}}</h5>
       <div class="content">
         <div class="date">
           {% set start = item.informations_debut_event|date("Ydj") %}

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

@@ -1,5 +1,3 @@
 <section class="title_page">
-	<div class="{{class}}">
+	<h2 class="titre_page">{{post.title}}</h2>
-		<h2 class="titre_page">{{post.title}}</h2>
-	</div>
 </section>

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

@@ -5,11 +5,11 @@
 
 <section class="row">
 
-	<aside class="sidebar_left col-12 col-md-12 col-lg-6 col-xl-4">
+	<aside class="sidebar_left col-12 col-md-6 col-lg-6 col-xl-4">
 		{% include 'components/sider_left.twig' with { name__template : 'benevole' } %}
 	</aside>
 
-	<article class="wrapper__content col-12 col-md-12 col-lg-6 col-xl-8">
+	<article class="wrapper__content col-12 col-md-6 col-lg-6 col-xl-8">
 
 		<div class="wrap__content">
 			<header>

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

@@ -13,7 +13,7 @@
 		{% include 'components/forms/form_lacollecte.twig' %}
 	</aside>
 
-	<article class="wrapper__content col-12 col-md-12 col-lg-6 col-xl-8">
+	<article class="wrapper__content col-12 col-md-6 col-lg-6 col-xl-8">
 		<div class="wrap__content">
 			<header class="__header">
 				<h2 class="__chapeau">{{ post.meta('texte_chapeau') }}</h2>

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

@@ -18,7 +18,7 @@
 			</aside>
 
 			<figure class="main-carousel col-md-8">
-			{% for media in item.meta('slide') %}
+				{% for media in item.meta('slide') %}
 					{% for add in media %}
 						{% if add.acf_fc_layout == 'images' %}
 							<div class="img">

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

@@ -37,7 +37,7 @@
 		<div class="wrap__content __organisation">
 			<div class="__body row">
 				{% for item in post.meta('type_organisation') %}
-				<article class="__content _orga col-lg-4">
+				<article class="__content _orga col-12 col-lg-6 col-xl-4">
 					<div class="title">
 						<h5>{{ item.titre_bloc}}</h5>
 					</div>

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

@@ -104,7 +104,6 @@
 					</figure>
 				</div>
 				</footer>
-
 			</div>
 		</article>
 	</section>