From 55b454b9ffc712dbb6a4eb3a42a6c29a215dbbec Mon Sep 17 00:00:00 2001 From: Kevin Date: Sun, 28 Jun 2020 15:06:55 +0200 Subject: [PATCH] footer --- web/app/themes/la_mine/asset/dist/style.css | 435 +++++++++++------- web/app/themes/la_mine/templates/accueil.twig | 11 +- web/app/themes/la_mine/templates/base.twig | 2 +- .../components/thumbnails/thumbnails.twig | 2 +- web/app/themes/la_mine/templates/footer.twig | 129 +++--- .../templates/partial/section_projets.twig | 20 +- .../templates/partial/section_tpsF.twig | 16 +- 7 files changed, 357 insertions(+), 258 deletions(-) diff --git a/web/app/themes/la_mine/asset/dist/style.css b/web/app/themes/la_mine/asset/dist/style.css index 16669926..965b100e 100644 --- a/web/app/themes/la_mine/asset/dist/style.css +++ b/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; +} + +/* .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 { + 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 */ diff --git a/web/app/themes/la_mine/templates/accueil.twig b/web/app/themes/la_mine/templates/accueil.twig index 5e441c3d..69b3ca7a 100644 --- a/web/app/themes/la_mine/templates/accueil.twig +++ b/web/app/themes/la_mine/templates/accueil.twig @@ -7,16 +7,17 @@

Prochainement

-
- {% for item in posts %} - {% include 'components/thumbnails/thumbnails.twig' %} - {% endfor %} +
+ {% for item in posts %} + {% include 'components/thumbnails/thumbnails.twig' %} + {% endfor %} +
Tout voir
-
+
diff --git a/web/app/themes/la_mine/templates/base.twig b/web/app/themes/la_mine/templates/base.twig index 990783d5..258bb732 100644 --- a/web/app/themes/la_mine/templates/base.twig +++ b/web/app/themes/la_mine/templates/base.twig @@ -60,7 +60,7 @@ {% block footer %} -