valentin_le_moign/lamine_wp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

footer

Browse Source
This commit is contained in:
Kevin Tessier 2020-06-28 15:06:55 +02:00
parent af6780d3db
commit 55b454b9ff
7 changed files with 357 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

435
web/app/themes/la_mine/asset/dist/style.css vendored
View File

@ -43,10 +43,6 @@ a, a:hover{
text-decoration: none; text-decoration: none;
} }
/* START HEADER */ /* START HEADER */
header{ header{
width: 100%; 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;
}
/* .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 */ /* START PAGE HOME */
.section_accueil { .section_accueil {
position: relative; 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 */ /* END PAGE HOME */
/* START KEVIN */
/* END KEVIN */
.menu-item { .menu-item {
font-family: Millimetre, sans-serif; font-family: Millimetre, sans-serif;
text-transform: uppercase; text-transform: uppercase;
@ -208,9 +358,9 @@ header > .nav-wrapper{
object-fit: cover; object-fit: cover;
} }
.thumbnails .icone_cat{ .thumbnails .icone_cat{
width: 50px; width: 40px;
height: 50px; height: 40px;
border-radius: 50px; border-radius: 40px;
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-position: center; /* Center the image */ 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-size: cover; /* Resize the background image to cover the entire container */
background-color: black; background-color: black;
} }
.atelier_bois{ .thumbnails .atelier_bois{
background-image: url("../images/atelier_couture.png"); background-image: url("../images/atelier_couture.png");
} }
.atelier_couture{ .thumbnails .atelier_couture{
background-image: url("../images/atelier_couture.png"); background-image: url("../images/atelier_couture.png");
} }
.atelier_tricot_solidaire{ .thumbnails .atelier_tricot_solidaire{
background-image: url("../images/atelier_tricot.png"); background-image: url("../images/atelier_tricot.png");
} }
.bal_rock{ .thumbnails .bal_rock{
background-image: url("../images/bal_rock.png"); background-image: url("../images/bal_rock.png");
} }
.chiner_concert{ .thumbnails .chiner_concert{
background-image: url("../images/chiner_concert.png"); background-image: url("../images/chiner_concert.png");
} }
.fab_lab{ .thumbnails .fab_lab{
background-image: url("../images/fab_lab.png"); background-image: url("../images/fab_lab.png");
} }
.festival_lamine_numerique{ .thumbnails .festival_lamine_numerique{
background-image: url("../images/fab_lab.png"); background-image: url("../images/fab_lab.png");
} }
.gouter_melanie{ .thumbnails .gouter_melanie{
background-image: url("../images/gouter.png"); background-image: url("../images/gouter.png");
} }
.danse_orientale{ .thumbnails .danse_orientale{
background-image: url('../images/bal_rock.png'); background-image: url('../images/bal_rock.png');
} }
.hatha_yoga{ .thumbnails .hatha_yoga{
background-image: url("../images/hatha_yoga.png"); background-image: url("../images/hatha_yoga.png");
} }
.mineside_jazz{ .thumbnails .mineside_jazz{
background-image: url("../images/mineside_jazz.png"); background-image: url("../images/mineside_jazz.png");
} }
.non_programmation{ .thumbnails .non_programmation{
background-image: url("../images/non_prog.png"); background-image: url("../images/non_prog.png");
} }
.soiree_mine{ .thumbnails .soiree_mine{
background-image: url("../images/soiree_mine.png"); background-image: url("../images/soiree_mine.png");
} }
.zero_dechet{ .thumbnails .zero_dechet{
background-image: url("../images/zero_dechet.png"); background-image: url("../images/zero_dechet.png");
} }
@ -278,7 +428,7 @@ header > .nav-wrapper{
.content_asso { .content_asso {
width: 70%; width: 70%;
position: relative; position: relative;
padding: 10px; padding: 20px 10px;
background-color: white; background-color: white;
border: 8px solid yellow; border: 8px solid yellow;
} }
@ -303,9 +453,9 @@ header > .nav-wrapper{
/* END KEVIN */ /* END KEVIN */
.item { /* .item {
margin-top: 50px; margin-top: 50px;
} } */
.wrap__content_proch { .wrap__content_proch {
position: relative; position: relative;
@ -355,7 +505,7 @@ header > .nav-wrapper{
position: relative; position: relative;
width: 80%; width: 80%;
padding: 10px; padding: 10px;
margin: -50px auto -20px auto; margin: -50px auto;
align-items: center; align-items: center;
text-align: center; text-align: center;
background-color: white; background-color: white;
@ -363,9 +513,8 @@ header > .nav-wrapper{
} }
.video iframe { .video iframe {
margin: 40px auto 0 auto; margin: 0 auto 0 auto;
width:100%; width:100%;
} }
/*fin sections page accueil*/ /*fin sections page accueil*/
@ -504,95 +653,6 @@ header > .nav-wrapper{
/*fin privatiser l'espace*/ /*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*/ /*gestion des dots*/
.flickity-page-dots { .flickity-page-dots {
bottom: 0px; bottom: 0px;
@ -613,53 +673,7 @@ header > .nav-wrapper{
bottom: 30px; bottom: 30px;
} }
/*fin gestion des dots*/ /*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 */ /* START KEVIN */
.hero{ .hero{
@ -729,10 +743,13 @@ footer .insta {
object-fit: cover; object-fit: cover;
} }
/* END KEVIN */ /* END KEVIN */
/*START MEDIA QUERIES*/ /*START MEDIA QUERIES*/
@media screen and (min-width: 200px) and (max-width: 1088px) { @media screen and (min-width: 200px) and (max-width: 1088px) {
.titre_page, .titre { .titre_page, .titre {
left: 5px; top: -150px;
left: 50%;
transform: rotate(-10deg) translateX(-50%);
} }
} }
@media screen and (min-width: 200px) and (max-width: 640px) { @media screen and (min-width: 200px) and (max-width: 640px) {
@ -743,10 +760,6 @@ footer .insta {
.content_asso { .content_asso {
width: 100%; width: 100%;
} }
.logoLamine {
width : 50px;
height: 50px;
}
} }
@media screen and (min-width: 200px) and (max-width: 755px) { @media screen and (min-width: 200px) and (max-width: 755px) {
.__chapeau, .titre_event{ .__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*/ /*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 */

11
web/app/themes/la_mine/templates/accueil.twig
View File

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

2
web/app/themes/la_mine/templates/base.twig
View File

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

2
web/app/themes/la_mine/templates/components/thumbnails/thumbnails.twig
View File

@ -1,6 +1,6 @@
{% set cat = item.categories|last %} {% 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}}"> <a href="{{site.url}}/{{item.post_name}}">
<div class="__images"> <div class="__images">

129
web/app/themes/la_mine/templates/footer.twig
View File

@ -1,62 +1,83 @@
<section class="information col-12 col-lg-6 p-0">
<section class="information"> <div class="d-flex justify-content-around">
<div class="row"> <div class="logo_lamine">
<div class="logo_lamine col-2"> <a href="{{site.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-md-4 col-lg">
{{options.texte_horaire }}
</div>
<div class="adresse col-md-4 col-lg">
{{options.texte_adresse }}
</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>
</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>
<div class="partenaires row col"> <div class="horaires">
<div class="_titre col-2">{{options.titre}}</div> {{options.texte_horaire }}
<div class="logo_partenaires col"> </div>
<div class="container_slide">
<ul> <div class="adresse">
{% for partner in options.partenaire %} {{options.texte_adresse }}
<li> </div>
<a target="_blank" href="{{partner.lien_site_partenaire}}">
<img src="{{ Image(partner.logo).src }}" /> <div class="">
</a> <div class="collecte">
</li> {{options.texte_collecte }}
{% endfor %} </div>
</ul>
<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> </div>
</div> </div>
</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 class="add_asso">
<div id="bouton_asso">
<a href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
</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>
</div> <!--fin row-->
</section> </section>

20
web/app/themes/la_mine/templates/partial/section_projets.twig
View File

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

16
web/app/themes/la_mine/templates/partial/section_tpsF.twig
View File

@ -2,12 +2,12 @@
<h3 class="titre">Les temps forts</h3> <h3 class="titre">Les temps forts</h3>
</div> </div>
<div class="__body"> <div class="__body">
<div class="wrapper__content row"> <div class="wrapper__content row justify-content-center">
{% for item in tpsF %} {% 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="item tpsF_thumbnails">
<div class="__img"> <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>
<div class="_content_tpsF"> <div class="_content_tpsF">
<div class="title"> <div class="title">
@ -19,16 +19,14 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content">
{{item.text}} {{item.text|truncate(20)}}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div>
<div class="btn tout_voir"> <div class="btn tout_voir">
<a href="/les-temps-forts">Tout voir</a> <a href="/les-temps-forts">Tout voir</a>
</div>
</div> </div>
</div> </div>