fix bug and autoprefixer

This commit is contained in:
Kevin Tessier 2020-07-06 23:17:05 +02:00
parent 8a3625dfab
commit d6138f87fa
7 changed files with 396 additions and 188 deletions

View File

@ -1,3 +1,4 @@
function slides() {
var Home = document.querySelector('.hero .slide');
if (Home != null) {
var flkty = new Flickity( Home, {
@ -38,7 +39,9 @@ if (Partenaires != null) {
// carousel-cell: true,
});
}
}
function masonry() {
var arrayEnga = document.querySelector('.tableau_engagements.row');
if (arrayEnga != null) {
@ -51,24 +54,32 @@ if (arrayEnga != null) {
});
}
}
function burger() {
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");
});
}
function paralax() {
var rellax = new Rellax('.paralax', {
center:true
}); }
});
}
function isotope() {
var $grid = $('.grid').isotope({
itemSelector: '.item'
percentPosition: true,
masonry: {
columnWidth: '.item'
},
itemSelector: '.item',
stagger: 30
});
$('.filter-button-group li').on( 'click', function(evt) {
@ -84,8 +95,18 @@ function drag(){
});
}
function click_nav() {
$('#nav-main > ul > li:first-child > a').click(function(e) {
e.preventDefault();
})
}
$( document ).ready(function() {
slides();
masonry();
burger();
paralax();
isotope();
drag();
click_nav();
});

View File

@ -8,6 +8,7 @@
}
*{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html{
@ -103,6 +104,8 @@ header{
pointer-events: none;
}
header > .nav-wrapper{
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
/* START LOGO */
@ -118,6 +121,7 @@ header > .nav-wrapper{
height: 100%;
}
.logoLamine img{
-o-object-fit: cover;
object-fit: cover;
}
@ -160,11 +164,19 @@ header > .nav-wrapper{
height: 200px;
background-color: white;
border-radius: 200px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.logoLamine:hover #fond_logo{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* END LOGO */
@ -172,12 +184,15 @@ header > .nav-wrapper{
/* START RS */
.rs{
/* padding-top: 10px; */
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
pointer-events: auto;
}
.rs > div {
width: 30px;
height: 30px;
-o-object-fit: cover;
object-fit: cover;
margin-right: 15px;
}
@ -188,6 +203,8 @@ header > .nav-wrapper{
/* START BURGER */
.burger{
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
pointer-events: auto;
}
@ -200,27 +217,74 @@ header > .nav-wrapper{
#nav-main{
display: none;
position: fixed;
top: 0;
right: 0;
top: 70px;
right: 1rem;
width: calc(100% / 4);
height: 100vh;
max-width : 200px;
background: white;
z-index: -1;
border: 4px solid black;
}
@media screen and (max-width: 576px) {
#nav-main{
width: 100%;
max-width : 100%;
right: 0;
top: 0;
height: 100vh;
border: none;
}
.nav-main > ul > li{
border-bottom: 4px solid black;
}
.nav-main > ul > li:first-child{
border-top: 4px solid black;
}
}
#nav-main.is-active{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
pointer-events: auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.nav-main > ul{
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 0rem;
}
.nav-main > ul > li{
text-align: center;
}
.nav-main > ul > li a{
background: white;
color: black;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-main > ul > li a:hover{
background: black;
color: white;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-main > ul > li:not(:last-child){
border-bottom: 4px solid black;
}
#fl_menu{
position:absolute;
z-index: 9999;
@ -303,16 +367,28 @@ body > .content-wrapper{
#bouton_asso a,
#bouton_contact a{
display: block;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin: auto;
-webkit-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
-o-transition: transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.btn a:hover,
#bouton_asso a:hover,
#bouton_contact a:hover{
-webkit-transform: scale(1.05) rotate(-5deg);
-ms-transform: scale(1.05) rotate(-5deg);
transform: scale(1.05) rotate(-5deg);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.btn a{
@ -394,9 +470,11 @@ footer .flickity-prev-next-button{
z-index: 9999;
width: 200px;
height: auto;
cursor: -webkit-grab;
cursor: grab;
}
.ui-draggable-dragging{
cursor: -webkit-grabbing;
cursor: grabbing;
}
#drag_1 {
@ -487,14 +565,22 @@ footer .flickity-prev-next-button{
border: 4px solid black;
background-color: white;
height: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.agenda .cat-list li:hover{
background: black;
color: white;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
@ -586,6 +672,7 @@ article .__img_event img{
top: 0;
width:100%;
height:100%;
-o-object-fit:cover;
object-fit:cover;
}
@ -596,6 +683,8 @@ article .__img_event img{
.other .header_other{
position: absolute;
top: 0;
-webkit-transform: translate(-50% ,-150%);
-ms-transform: translate(-50% ,-150%);
transform: translate(-50% ,-150%);
left: 0;
}
@ -605,6 +694,8 @@ article .__img_event img{
font-weight: bold;
background-color: white;
border: 8px solid #ffcc00ff;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
padding: 0.5rem;
}
@ -669,6 +760,8 @@ body.la-collecte .__header h3{
}
.la-benevole-zone .__bouttons{
text-align: center;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin: 30px auto 0 auto;
@ -721,6 +814,8 @@ body.la-collecte .__header h3{
}
.association .__bouttons{
text-align: center;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin: 30px auto 0 auto;
}
@ -774,13 +869,21 @@ body.la-collecte .__header h3{
}
.privatiser.__slide .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;
}
.privatiser.__slide .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;
}
@ -805,8 +908,12 @@ body.la-collecte .__header h3{
text-transform: uppercase;
font-weight: bold;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 8px solid #00FFFF;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
padding: 0.5rem;
background-color: white;
@ -822,6 +929,8 @@ body.la-collecte .__header h3{
margin-top: 300px;
}
.privacy-policy .article-body {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
/*END PRIVACY-POLICY*/
@ -833,9 +942,13 @@ body.la-collecte .__header h3{
text-transform: uppercase;
font-weight: bold;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 8px solid blue;
background-color: white;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
padding: 0.5rem;
background-color: white;
@ -865,11 +978,21 @@ body.la-collecte .__header h3{
}
.coming_soon .thumbnails, .other-posts .thumbnails, .item.thumbnails {
margin-top: 30px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
-o-transition: transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.coming_soon .thumbnails:hover, .other-posts .thumbnails:hover, .item.thumbnails:hover {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@ -880,6 +1003,7 @@ body.la-collecte .__header h3{
.thumbnails .__img img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.thumbnails .icone_cat{
@ -887,6 +1011,8 @@ body.la-collecte .__header h3{
height: 40px;
border-radius: 40px;
position: absolute;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
@ -941,6 +1067,8 @@ body.la-collecte .__header h3{
/* SECTION ASSO */
#section_asso .association .__body{
position: relative;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
margin-top: 50px;
}
@ -992,12 +1120,21 @@ body.la-collecte .__header h3{
margin: -4rem auto 0 auto;
padding: 10px;
min-height: 160px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
background-color: white;
border: 4px solid black;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@ -1016,7 +1153,11 @@ body.la-collecte .__header h3{
.projet .colonne_section .header{
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end ;
}
.projet .colonne_section .header h3{
@ -1027,6 +1168,7 @@ body.la-collecte .__header h3{
.item img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@ -1035,6 +1177,8 @@ body.la-collecte .__header h3{
width: 80%;
padding: 10px;
margin: -50px auto;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
background-color: white;
@ -1048,16 +1192,28 @@ body.la-collecte .__header h3{
.af-submit-button{
position: relative;
margin: 50px auto 10px auto;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
border: 4px solid black;
border-radius: 0%;
text-align: center;
padding: 5px;
-webkit-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
-o-transition: transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.af-submit-button:hover{
-webkit-transform: scale(1.1) rotate(-10deg);
-ms-transform: scale(1.1) rotate(-10deg);
transform: scale(1.1) rotate(-10deg);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*fin collecte et form*/
@ -1103,6 +1259,7 @@ body.la-collecte .__header h3{
.hero .slide img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@ -1124,6 +1281,7 @@ body.la-collecte .__header h3{
.tpsF .img img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
body.les-temps-forts section{
@ -1142,6 +1300,7 @@ body.les-temps-forts .titre_page {
.projet .img img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@ -1152,6 +1311,7 @@ body.les-temps-forts .titre_page {
.prive .img img{
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
/* END KEVIN */
@ -1162,14 +1322,20 @@ body.les-temps-forts .titre_page {
.titre{
top: -150px;
left: 50%;
-webkit-transform: rotate(-10deg) translateX(-50%);
-ms-transform: rotate(-10deg) translateX(-50%);
transform: rotate(-10deg) translateX(-50%);
}
.privacy-policy .article-h1{
top: 100px;
left: 50%;
-webkit-transform: rotate(-10deg) translateX(-50%);
-ms-transform: rotate(-10deg) translateX(-50%);
transform: rotate(-10deg) translateX(-50%);
}
.privacy-policy .article-body {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.other .header_other {
@ -1243,6 +1409,7 @@ footer .logo_lamine a{
width: auto;
}
footer .logo_lamine img{
-o-object-fit: contain;
object-fit: contain;
}
footer > .information > div > div {
@ -1258,6 +1425,7 @@ footer .reseaux_sociaux > div a > img{
footer .reseaux_sociaux img {
vertical-align: baseline;
-o-object-fit: contain;
object-fit: contain;
}
/* START Mailchimp */
@ -1309,6 +1477,7 @@ footer .reseaux_sociaux img {
}
footer .partenaires img{
-o-object-fit: contain;
object-fit: contain;
}
/* END SLIDE */
@ -1319,6 +1488,8 @@ footer .reseaux_sociaux img {
text-align: center;
}
footer a.d-flex{
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#Btn_asso a{

View File

@ -56,13 +56,13 @@ Timber::$autoescape = false;
// REMOVE EDITOR
function remove_editor() {
remove_post_type_support(
'page', 'editor'
);
remove_post_type_support(
'post', 'editor'
);
remove_post_type_support('page', 'editor');
remove_post_type_support('page', 'comments');
remove_post_type_support('post', 'editor');
remove_post_type_support('post', 'comments');
remove_post_type_support('post', 'author');
remove_post_type_support('post', 'excerpt');
remove_post_type_support('post', 'revisions');
};
add_action('admin_init', 'remove_editor');
@ -141,18 +141,18 @@ class StarterSite extends Timber\Site {
*
* See: https://codex.wordpress.org/Post_Formats
*/
add_theme_support(
'post-formats',
array(
'aside',
'image',
'video',
'quote',
'link',
'gallery',
'audio',
)
);
// add_theme_support(
// 'post-formats',
// array(
// 'aside',
// 'image',
// 'video',
// 'quote',
// 'link',
// 'gallery',
// 'audio',
// )
// );
add_theme_support( 'menus' );
}

View File

@ -3,6 +3,9 @@
{% include 'components/title_page.twig' %}
<section>
<ul class="cat-list d-flex flex-wrap button-group filter-button-group">
<li data-filter="*" >
Tous
</li>
{% for cat in terms %}
<li data-filter=".{{cat.slug}}" >
{{cat.name}}

View File

@ -1,10 +1,11 @@
{% set cat = item.categories|last %}
{% set term = item.categories|first %}
<div class="item thumbnails col-12 col-sm-6 col-lg-4 mb-5 {{cat.slug}}">
<a href="{{site.url}}/{{item.post_name}}">
<div class="__images">
<div class="icone_cat {{cat.slug}}">
<div class="icone_cat {{term.slug}}">
</div>
<div class="__img">
@ -13,7 +14,7 @@
</div>
<div class="wrap__content_proch">
<div class="__title"><h5>{{item.titre}}</h5></div>
<div class="__title"><h5>{{item.title}}</h5></div>
<div class="__content">
<div class="__date">
<div class="__day">

View File

@ -20,17 +20,19 @@
<div class="wrap_content col-md-8">
<div class="slide">
{% for media in item.meta('slide') %}
{% if Image(media.image).src %}
{% for add in media %}
{% if add.acf_fc_layout == 'images' %}
<div class="img">
<img src="{{ Image(media.image).src }}" alt="{{ Image(media.image).title }}">
<img src="{{ Image(add.image).src }}" alt="{{ Image(add.image).title }}">
</div>
{% endif %}
{% if media.video %}
{% if add.acf_fc_layout == 'video' %}
<div class="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/{{ media.video }}" frameborder="0" allowfullscreen></iframe>
{{ add.video }}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
</section>

View File

@ -1,5 +1,7 @@
{% extends "base.twig" %}
{% block content %}
{% set group = post.meta('informations') %}
<div class="content-wrapper">
<div class="Btn retour">
<a href="/agenda">Retour</a>
@ -8,7 +10,8 @@
<article class="row">
<div class="header mobile col-12 d-lg-none d-block">
<h3 class="titre_event">{{post.titre}}</h3>
<h3 class="titre_event">{{ post.title }}</h3>
</div>
<div class="__img_event col-lg-6 col-12">
@ -17,7 +20,7 @@
<div class="article-content col-lg-6 col-12 my-3 my-lg-0">
<div class="header d-none d-lg-block">
<h3 class="titre_event">{{post.titre}}</h3>
<h3 class="titre_event">{{ post.title }}</h3>
</div>
<div class="cat {{post.category.slug}}">
@ -27,53 +30,60 @@
<div class="data">
<div class="__date">
<div class="__day">
{% set start = item.debut_event|date("Ydj") %}
{% set end = item.fin_event|date("Ydj") %}
{% set start = group.debut_event|date("Ydj") %}
{% set end = group.fin_event|date("Ydj") %}
{% if start == end %}
<span class="start">
Le <time>{{item.debut_event|date("l j F Y") }}</time>
<br>de <time>{{item.debut_event|date("G:i")}}</time>
Le <time>{{group.debut_event|date("j F Y") }}</time>
de <time>{{group.debut_event|date("G:i")}}</time>
</span>
<span class="end">
à <time>{{item.fin_event|date("G:i")}}</time></br>
à <time>{{group.fin_event|date("G:i")}}</time>
</span>
{% else %}
<span class="start">
Du <time>{{item.debut_event|date("l j F Y") }}</time>
à <time>{{item.debut_event|date("G:i")}}</time>
Du <time>{{group.debut_event|date("j F Y") }}</time>
à <time>{{group.debut_event|date("G:i")}}</time>
</span>
<span class="end">
<br>Au <time>{{item.fin_event|date("j l F Y") }}</time></br>
à <time>{{item.fin_event|date("G:i")}}</time>
<br>Au <time>{{group.fin_event|date("j F Y") }}</time>
à <time>{{group.fin_event|date("G:i")}}</time></br>
</span>
{% endif %}
</div>
</div>
<div class="lieu">{{post.lieu}}</div>
<div class="lieu">{{group.lieu}}</div>
</div>
<div class="wrapper__content">
{{ post.meta('description') }}
</div>
<div class="tarif">
<h3>{{post.titre_tarif}}</h3>
<p>{{post.type_tarif}}</p>
<h3>Tarif</h3>
<p>{{group.type_tarif}}</p>
</div>
<div class="inscription">
{% if post.meta('inscription') %}
<h3>{{post.titre_inscription}}</h3>
{% for Items in post.meta('inscription') %}
{% for detail in Items.choose %}
{% if detail.acf_fc_layout == 'texte' %}
{% if group.inscription %}
<h3>Inscription</h3>
{% for Items in group.inscription %}
{% for detail in Items %}
{% if detail.acf_fc_layout == 'en_libre_acces' %}
<p class="texte_details">{{ detail.texte }}</p>
{% endif %}
{% if detail.acf_fc_layout == 'lien' %}
{% if detail.acf_fc_layout == 'lien_dinscription' %}
<div class="Btn group_link">
<a href="{{detail.lien.lien_hello_asso}}">{{detail.lien.texte_lien_hello_asso}}</a>
<a target="_blank" href="{{detail.url}}">{{detail.texte}}</a>
</div>
{% endif %}
{% endfor %}
{% for detail in Items.type_dinscription %}
{% endfor %}
{% endfor %}
{% endif %}
</div>
@ -82,7 +92,7 @@
</div>
<div class="partager">
<h3>{{post.titre_partage}}</h3>
<h3>Partager</h3>
<div class="d-flex">
<a href="https://www.facebook.com/sharer/sharer.php?u={{post.link}}">
<img src="{{ Image(post.meta('liens_reseaux_sociaux').logo_facebook).src }}" />