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

responsive home

Browse Source
This commit is contained in:
Kevin Tessier 2020-07-01 17:57:35 +02:00
parent de9456a9ac
commit e5406a35a6
5 changed files with 161 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,6 +10,9 @@
*{ *{
box-sizing: border-box; box-sizing: border-box;
} }
html{
overflow-x: hidden;
}
/*START PARALAX*/ /*START PARALAX*/
.paralax{ .paralax{
z-index: -1; z-index: -1;
@ -21,43 +24,39 @@
left: -20%; left: -20%;
} }
.section_accueil .paralax{ .section_accueil .paralax{
left: 980px; /* left: 50%; */
top: 1000px;
} }
#section_projets .paralax{
left: 50%;
}
#section_asso .paralax{
left: 30%;
}
.agenda .paralax{ .agenda .paralax{
z-index: -1; z-index: -1;
width: 100%; width: 100%;
top: 340px;
left: 315px;
} }
.les-projets .paralax{ .les-projets .paralax{
z-index: -1; z-index: -1;
top: 420px;
left: 940px;
} }
.la-collecte .paralax{ .la-collecte .paralax{
z-index: -1; z-index: -1;
width: 80%; width: 80%;
top: -230px;
left: 580px;
} }
.la-benevole-zone .paralax{ .la-benevole-zone .paralax{
z-index: -1; z-index: -1;
width: 80%; width: 80%;
top: -685px;
left: 580px;
} }
.privatiser-lespace .paralax{ .privatiser-lespace .paralax{
z-index: -1; z-index: -1;
width: 80%; width: 80%;
top: -1018px;
left: 580px;
} }
.privacy-policy .paralax{ .privacy-policy .paralax{
z-index: -1; z-index: -1;
width: 70%; width: 70%;
top: 255px;
left: 515px;
} }
/*END PARALAX*/ /*END PARALAX*/
body { body {
@ -187,7 +186,6 @@ header > .nav-wrapper{
/* START BURGER */ /* START BURGER */
.burger{ .burger{
/* padding-top: 10px; */
height: fit-content; height: fit-content;
pointer-events: auto; pointer-events: auto;
} }
@ -196,25 +194,30 @@ header > .nav-wrapper{
background-position: center; /* Center the image */ background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */ background-repeat: no-repeat; /* Do not repeat the image */
background-size: contain; background-size: contain;
transform: rotate(0deg);
} }
.fond_burger:hover{ #nav-main{
transform: rotate(10deg);
}
.nav-main{
display: none; display: none;
position: fixed; position: fixed;
top: 0;
right: 0; right: 0;
top: 120px; width: calc(100% / 4);
width: 280px; height: 100vh;
height: 300px;
background: white; background: white;
border: 4px solid black; z-index: -1;
transition: all 0.2s ease;
} }
.nav-main.is-active{ #nav-main.is-active{
display: block; display: flex;
pointer-events: auto; pointer-events: auto;
align-items: center;
}
.nav-main > ul{
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
}
.nav-main > ul > li{
text-align: center;
} }
#fl_menu{ #fl_menu{
position:absolute; position:absolute;
@ -227,39 +230,45 @@ header > .nav-wrapper{
.menu-item { .menu-item {
font-family: Millimetre, sans-serif; font-family: Millimetre, sans-serif;
text-transform: uppercase; text-transform: uppercase;
text-align: left; text-align: center;
pointer-events: auto; pointer-events: auto;
border-bottom: 4px solid black;
} }
.menu-item a { .menu-item a {
background-color: pink;
width: 100%; width: 100%;
display: block; display: block;
padding: 1rem;
}
#nav-main > ul > li > ul{
display: none;
text-transform: lowercase;
border-bottom: none;
}
#nav-main > ul > li > a:hover > ul {
display: block;
}
#nav-main > ul > .menu-item{
/* border: 4px solid black; */
} }
#nav-main > ul > li > ul {display: none;text-transform: lowercase; border-bottom: none;}
#nav-main > ul > li:first-child > a::after{ #nav-main > ul > li:first-child > a::after{
content: ""; content: "";
background-image: url('../images/fleche_menu.svg'); background-image: url('../images/fleche_menu.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 15px; height: 15px;
margin-left: 10px; margin-left: 10px;
} }
#nav-main > ul > li:first-child:hover > ul {display: block; background-color: #BDBDBD;transition: all 0.2s ease;}
#nav-main > ul > li:first-child:hover{background-color: #424242; color:white;border-bottom: none;}
.menu-item a:hover { #nav-main > ul > li:first-child:hover > ul {
display: block; display: block;
width: 100%;
height: 100%;
background-color: black;
color: white;
transition: all 0.2s ease;
} }
/* END BURGER */ /* END BURGER */
/* END HEADER */ /* END HEADER */
@ -282,13 +291,25 @@ body > .content-wrapper{
display: block; display: block;
cursor: default!important; cursor: default!important;
margin: auto; margin: auto;
transform: scale(1) rotate(0deg);
transition: transform 0.3s ease;
} }
#bouton_contact { #bouton_contact {
margin-top: 20px; margin-top: 20px;
} }
.btn:hover, #bouton_asso:hover, #bouton_contact:hover{
.btn a,
#bouton_asso a,
#bouton_contact a{
display: block;
width: max-content;
margin: auto;
transform: scale(1) rotate(0deg);
transition: transform 0.3s ease;
}
.btn a:hover,
#bouton_asso a:hover,
#bouton_contact a:hover{
transform: scale(1.05) rotate(-5deg); transform: scale(1.05) rotate(-5deg);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@ -337,15 +358,8 @@ footer .flickity-prev-next-button{
width: 50px; width: 50px;
height: 50px; height: 50px;
} }
footer .flickity-button-icon {
fill: grey;
left: 158%!important;
}
/* END BUTTON */ /* END BUTTON */
/* START PAGE HOME */ /* START PAGE HOME */
.section_accueil { .section_accueil {
position: relative; position: relative;
@ -378,8 +392,11 @@ footer .flickity-button-icon {
z-index: 9999; z-index: 9999;
width: 200px; width: 200px;
height: auto; height: auto;
cursor: grab;
}
.ui-draggable-dragging{
cursor: grabbing;
} }
#drag_1 { #drag_1 {
position:absolute; position:absolute;
top:175px; top:175px;
@ -425,6 +442,11 @@ footer .flickity-button-icon {
top:515px; top:515px;
left: 40px; left: 40px;
} }
@media screen and (max-width: 576px) {
.group_drag{
display: none;
}
}
/*fin ajout chloe drag*/ /*fin ajout chloe drag*/
@ -1190,17 +1212,23 @@ footer > section{
margin-bottom: 20px; margin-bottom: 20px;
} }
footer .logo_lamine { footer .logo_lamine {
max-width: 150px; /* max-width: 150px; */
height: auto; height: auto;
margin: 10px; max-height: 150px;
/* margin: 10px; */
} }
footer .logo_lamine a{ footer .logo_lamine a{
display: block; display: block;
height: 100%;
width: auto;
} }
footer .logo_lamine img{ footer .logo_lamine img{
object-fit: contain; object-fit: contain;
} }
footer > .information > div > div {
margin-bottom: 20px;
}
footer .reseaux_sociaux > div a > img{ footer .reseaux_sociaux > div a > img{
display: block; display: block;
@ -1266,3 +1294,18 @@ footer .reseaux_sociaux img {
} }
/* END SLIDE */ /* END SLIDE */
/* END FOOTER */ /* END FOOTER */
@media screen and (max-width: 576px) {
footer p,
footer a{
text-align: center;
}
footer a.d-flex{
justify-content: center;
}
#Btn_asso a{
display: block;
}
.send_actu input{
text-align: center;
}
}

61
web/app/themes/la_mine/asset/images/fb.svg
View File

@ -8,10 +8,12 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="34.837036" inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
width="34.837414" sodipodi:docname="fb.svg"
version="1.1"
id="svg6590" id="svg6590"
version="1.1"> width="34.837414"
height="34.837036">
<metadata <metadata
id="metadata6596"> id="metadata6596">
<rdf:RDF> <rdf:RDF>
@ -26,37 +28,46 @@
<defs <defs
id="defs6594"> id="defs6594">
<linearGradient <linearGradient
id="linearGradient1406" gradientTransform="matrix(0,0,0,0,4893.3971,-592.71445)"
osb:paint="solid" osb:paint="solid"
gradientTransform="matrix(0,0,0,0,4870.6657,-589.95471)"> id="linearGradient1406">
<stop <stop
style="stop-color:#000000;stop-opacity:1;" id="stop1404"
offset="0" offset="0"
id="stop1404" /> style="stop-color:#000000;stop-opacity:1;" />
</linearGradient> </linearGradient>
</defs> </defs>
<sodipodi:namedview <sodipodi:namedview
id="namedview6592" inkscape:current-layer="svg6590"
inkscape:window-height="480" inkscape:window-maximized="1"
inkscape:window-width="640" inkscape:window-y="22"
inkscape:pageshadow="2" inkscape:window-x="0"
inkscape:pageopacity="0" inkscape:cy="18.189105"
guidetolerance="10" inkscape:cx="17.52747"
gridtolerance="10" inkscape:zoom="17.516793"
objecttolerance="10" showgrid="false"
borderopacity="1" inkscape:document-rotation="0"
pagecolor="#ffffff"
bordercolor="#666666" bordercolor="#666666"
pagecolor="#ffffff" /> borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1029"
id="namedview6592" />
<inkscape:clipboard <inkscape:clipboard
max="3695.1542,3459.565" style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient1406);fill-opacity:1;stroke:none;stroke-width:0.00920708;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1"
min="3660.3168,3424.728" min="3660.3168,3424.728"
style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:url(#linearGradient1406);fill-opacity:1;stroke:none;stroke-width:0.00920708;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;stop-color:#000000;stop-opacity:1" /> max="3695.1542,3459.565" />
<path <path
inkscape:export-ydpi="150" style="fill:url(#linearGradient1406);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.0092501;enable-background:new"
inkscape:export-xdpi="150" d="M 17.499999,0 C 7.8346931,0 0,7.8343983 0,17.500189 0,27.164841 7.8346931,35 17.499999,35 27.164547,35 35,27.164841 35,17.500189 35,7.8343983 27.164547,0 17.499999,0 Z m 4.652668,7.1129289 c 0.167076,-0.00152 0.216439,0.060755 0.216439,0.2240352 0,1.0339797 0,2.0675795 3.8e-4,3.1011799 0,0.186062 -0.05695,0.24302 -0.239222,0.235426 -0.580587,0 -1.161552,-0.0026 -1.742139,-0.0026 -0.773104,0.0026 -1.235598,0.400985 -1.284202,1.165362 -0.03797,0.61325 0,1.230295 -0.03797,1.845823 0,0.220237 0.125306,0.205049 0.269598,0.205049 0.882841,-7.59e-4 1.765682,0 2.648144,0 0.258207,0 0.345542,0.05316 0.315165,0.32656 -0.110118,1.026766 -0.205047,2.055808 -0.296179,3.084852 -0.03797,0.231629 -0.125306,0.277196 -0.33415,0.273399 -0.696022,0 -1.393181,0 -2.089961,0 -0.500467,0 -0.452243,-0.07214 -0.452243,0.437437 0,3.205603 0,6.411206 0,9.616808 0,0.337952 -0.08733,0.423768 -0.420346,0.414654 -1.196108,-0.04556 -2.392595,-0.04556 -3.588702,7.6e-4 -0.337948,0 -0.392627,-0.110118 -0.389589,-0.410477 0,-1.614194 0,-3.228766 0,-4.843339 0,-1.637735 0,-3.27547 0,-4.912826 0,-0.277197 -0.07594,-0.360735 -0.353136,-0.349344 -0.51034,0.04556 -1.022197,0 -1.533297,0 -0.208844,0.003 -0.284787,-0.04936 -0.28099,-0.273399 0,-1.021828 0,-2.044036 0,-3.066245 0,-0.197454 0.05696,-0.262007 0.254411,-0.254412 0.52249,0 1.046119,0 1.56785,0 0.303773,0 0.364527,-0.09114 0.356933,-0.372127 0,-0.777668 -0.03798,-1.556475 0,-2.334143 0.03797,-0.950062 0.277194,-1.8367095 0.841452,-2.6094413 0.715766,-0.9781605 1.733787,-1.4247121 2.908249,-1.4771136 1.20636,-0.053161 2.415379,-0.045566 3.622877,-0.045566 z"
inkscape:export-filename="/home/maud/Documents/LE CAMPUS BIOVALLEE/3_SITE_WEB/TAF/GABARITS/export4/0_accueil.png"
inkscape:connector-curvature="0"
id="path4629" id="path4629"
d="M 17.418707,0 C 7.7982987,0 0,7.7979207 0,17.418707 c 0,9.619653 7.7982987,17.41833 17.418707,17.41833 9.619653,0 17.418708,-7.798677 17.418708,-17.41833 C 34.837415,7.7979207 27.03836,0 17.418707,0 Z m 4.631055,7.0798105 c 0.166299,-0.00151 0.215433,0.060473 0.215433,0.2229921 0,1.0291653 0,2.0579527 3.78e-4,3.0867404 0,0.185196 -0.05669,0.241889 -0.23811,0.23433 -0.57789,0 -1.156157,-0.0026 -1.734047,-0.0026 -0.769512,0.0026 -1.229858,0.399118 -1.278236,1.159937 -0.03779,0.610393 0,1.224566 -0.03779,1.837228 0,0.219212 0.124724,0.204094 0.268346,0.204094 0.87874,-7.56e-4 1.75748,0 2.635842,0 0.257008,0 0.343937,0.05291 0.313701,0.32504 -0.109606,1.021984 -0.204094,2.046236 -0.294803,3.070488 -0.03779,0.230551 -0.124724,0.275905 -0.332598,0.272126 -0.692788,0 -1.386709,0 -2.080252,0 -0.498142,0 -0.450142,-0.07181 -0.450142,0.435401 0,3.190677 0,6.381354 0,9.572031 0,0.336378 -0.08693,0.421795 -0.418394,0.412724 -1.190551,-0.04535 -2.38148,-0.04535 -3.572031,7.56e-4 -0.336378,0 -0.390803,-0.109606 -0.387779,-0.408567 0,-1.606677 0,-3.213732 0,-4.820787 0,-1.63011 0,-3.26022 0,-4.889952 0,-0.275906 -0.07559,-0.359055 -0.351496,-0.347717 -0.507969,0.04535 -1.017449,0 -1.526174,0 -0.207874,0.003 -0.283464,-0.04913 -0.279685,-0.272126 0,-1.01707 0,-2.034519 0,-3.051968 0,-0.196535 0.05669,-0.260787 0.253229,-0.253228 0.520063,0 1.04126,0 1.560567,0 0.302362,0 0.362834,-0.09071 0.355275,-0.370394 0,-0.774047 -0.0378,-1.549228 0,-2.323275 0.03779,-0.945638 0.275906,-1.8281578 0.837543,-2.5972916 0.712441,-0.9736062 1.725733,-1.4180786 2.89474,-1.4702361 1.200756,-0.052913 2.404158,-0.045354 3.606047,-0.045354 z" inkscape:connector-curvature="0"
style="fill:url(#linearGradient1406);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.00920708;enable-background:new" /> inkscape:export-filename="/home/maud/Documents/LE CAMPUS BIOVALLEE/3_SITE_WEB/TAF/GABARITS/export4/0_accueil.png"
inkscape:export-xdpi="150"
inkscape:export-ydpi="150" />
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

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

@ -32,7 +32,6 @@
<div class="paralax" data-rellax-speed="3"> <div class="paralax" data-rellax-speed="3">
<img src="{{theme.link}}/asset/images/objet_2.svg" alt="objet 2"> <img src="{{theme.link}}/asset/images/objet_2.svg" alt="objet 2">
</div> </div>
</div> </div>
</section> </section>
@ -42,7 +41,6 @@
<div class="paralax" data-rellax-speed="-2" data-rellax-percentage="0.5"> <div class="paralax" data-rellax-speed="-2" data-rellax-percentage="0.5">
<img src="{{theme.link}}/asset/images/objet_3.svg" alt="objet 3"> <img src="{{theme.link}}/asset/images/objet_3.svg" alt="objet 3">
</div> </div>
</div> </div>
</section> </section>

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

@ -40,10 +40,8 @@
</div> </div>
</div> </div>
<nav id="nav-main" class="nav-main" role="navigation"> <nav id="nav-main" class="nav-main" role="navigation">
{% include "menu.twig" with {'items': menu.get_items} %} {% include "menu.twig" with {'items': menu.get_items} %}
<div class="fl_menu"><img src="{{theme.link}}/asset/images/fleche_menu.svg"></div>
</nav> </nav>
{% endblock %} {% endblock %}
</header> </header>

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

@ -1,18 +1,18 @@
<section class="information col-12 col-lg-6 p-0"> <section class="information col-12 col-xl-8 col-lg-12 p-0">
<div class="d-flex justify-content-right flex-wrap"> <div class="d-flex justify-content-around flex-wrap">
<div class="logo_lamine col-lg-3 col-md-6"> <div class="logo_lamine col-lg-3 col-sm-6">
<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>
<div class="horaires col-lg-3 col-md-6"> <div class="horaires col-lg-3 col-sm-6">
{{options.texte_horaire }} {{options.texte_horaire }}
</div> </div>
<div class="adresse col-lg-3 col-md-6"> <div class="adresse col-lg-3 col-sm-6">
{{options.texte_adresse }} {{options.texte_adresse }}
</div> </div>
<div class="col-lg-3 col-md-6"> <div class="col-lg-3 col-sm-6">
<div class="collecte"> <div class="collecte">
{{options.texte_collecte }} {{options.texte_collecte }}
</div> </div>
@ -36,20 +36,20 @@
</div> </div>
</section> </section>
<section class="join-us col-12 col-lg-6 p-0"> <section class="join-us col-12 col-xl-4 col-lg-12 p-0">
<div> <div>
<div class="send_actu"> <div class="send_actu">
<!-- Begin Mailchimp Signup Form --> <!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
</style>
<div id="mc_embed_signup"> <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> <form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=364a0fe850" 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"> <div id="mc_embed_signup_scroll">
<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>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="adresse email" required> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a98b763288f940083bf28857c_364a0fe850" tabindex="-1" value=""></div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
<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> </div>
</form> </form>
</div> </div>
@ -57,13 +57,13 @@
</div> </div>
<div class="add_asso"> <div class="add_asso">
<div id="Btn_asso"> <div id="Btn_asso">
<a target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">Adhérer à l'association</a> <a target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
</div> </div>
</div> </div>
<div class="partenaires d-flex align-items-center col-lg-6"> <div class="partenaires d-block d-sm-flex align-items-center col-lg-12">
<div class="_titre">{{options.titre}}</div> <div class="_titre text-center mb-3">{{options.titre}}</div>
<div class="logo_partenaires w-100"> <div class="logo_partenaires w-100">
<div class="container_slide"> <div class="container_slide">
<ul> <ul>