anime logo
This commit is contained in:
parent
e0fc506ae1
commit
52cc7bdf74
30
web/app/themes/la_mine/dist/assets/css/index.css
vendored
30
web/app/themes/la_mine/dist/assets/css/index.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
BIN
web/app/themes/la_mine/src/assets/images/logo-lamine.png
Normal file
BIN
web/app/themes/la_mine/src/assets/images/logo-lamine.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@ -0,0 +1,50 @@
|
|||||||
|
header{
|
||||||
|
section{
|
||||||
|
position: relative;
|
||||||
|
figure{
|
||||||
|
a{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: max-content;
|
||||||
|
height: calc( #{$heightLogo} / 2 ) ;
|
||||||
|
transition: 0.5s all ease;
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
height: $heightLogo;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
z-index: 3;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
#lumiR_logo{
|
||||||
|
@include logoLamine(1, calc(#{$heightLogo} / 5 ), calc(#{$heightLogo} / 5), $colorYellow, 25px, 35px);
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
@include logoLamine(1, calc(#{$heightLogo} / 3), calc(#{$heightLogo} / 3), $colorYellow, 50px, 70px);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
#fond_logo{
|
||||||
|
@include logoLamine(0, calc(#{$heightLogo}), calc(#{$heightLogo}), $colorWhite, -70%, 30%);
|
||||||
|
|
||||||
|
@media screen and (min-width: 576px) {
|
||||||
|
@include logoLamine(0, calc(#{$heightLogo} * 2 ), calc(#{$heightLogo} * 2 ), $colorWhite, -70%, 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
height: $heightLogoHover;
|
||||||
|
transition: 0.5s all ease;
|
||||||
|
#lumiR_logo{
|
||||||
|
@include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px);
|
||||||
|
}
|
||||||
|
#fond_logo{
|
||||||
|
@include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -7,3 +7,70 @@ body{
|
|||||||
justify-items: center;
|
justify-items: center;
|
||||||
background: $color;
|
background: $color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// GLOBAL
|
||||||
|
@mixin vertical-align{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin reset-list{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin horizontal-list {
|
||||||
|
& > li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: {
|
||||||
|
left: -2px;
|
||||||
|
right: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin position_fixed{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin hidden_border{
|
||||||
|
padding: 0;
|
||||||
|
border: none!important;
|
||||||
|
background: none!important;
|
||||||
|
outline: none!important;
|
||||||
|
&:focus {
|
||||||
|
outline: none!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin wysiwyg{
|
||||||
|
h1{}
|
||||||
|
h2{}
|
||||||
|
h3{}
|
||||||
|
h4{}
|
||||||
|
h5{}
|
||||||
|
h6{}
|
||||||
|
strong{}
|
||||||
|
b{}
|
||||||
|
em{}
|
||||||
|
i{}
|
||||||
|
a{}
|
||||||
|
u{}
|
||||||
|
sup{}
|
||||||
|
p{
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.5rem;
|
||||||
|
strong{}
|
||||||
|
sup{}
|
||||||
|
u{}
|
||||||
|
a{}
|
||||||
|
b{}
|
||||||
|
i{}
|
||||||
|
em{}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,20 @@
|
|||||||
|
@mixin logoLamine($Z, $width, $height, $color, $top, $left) {
|
||||||
|
z-index: $Z;
|
||||||
|
background-color: $color;
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
position: absolute;
|
||||||
|
top: $top;
|
||||||
|
left: $left;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: 0.5s all ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin logoLamineHover($width, $height, $top, $left) {
|
||||||
|
width: $width;
|
||||||
|
height: $height;
|
||||||
|
top: $top;
|
||||||
|
left: $left;
|
||||||
|
transition: 0.5s all ease;
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
// color
|
||||||
|
$colorWhite: white;
|
||||||
|
$colorYellow:#ffcc00;
|
||||||
|
|
||||||
|
$heightLogo: 115px;
|
||||||
|
|
||||||
|
$heightLogoHover: 100px;
|
||||||
@ -1,3 +1,8 @@
|
|||||||
|
// config
|
||||||
|
@import "configs/variables.scss";
|
||||||
|
@import "configs/mixinsLamine.scss";
|
||||||
|
@import "configs/mixins.scss";
|
||||||
|
|
||||||
// bootstrap
|
// bootstrap
|
||||||
@import "bootstraps/bootstrap.scss";
|
@import "bootstraps/bootstrap.scss";
|
||||||
@import "bootstraps/bootstrap-reboot.scss";
|
@import "bootstraps/bootstrap-reboot.scss";
|
||||||
@ -19,6 +24,14 @@ figure{
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
body{
|
||||||
|
@import "pages/index.scss";
|
||||||
|
}
|
||||||
|
|
||||||
|
li,ul,ol{
|
||||||
|
@include reset-list;
|
||||||
|
}
|
||||||
|
|
||||||
// @import "bootstrap/scss/bootstrap-grid.scss";
|
// @import "bootstrap/scss/bootstrap-grid.scss";
|
||||||
// @import "normalize.css/normalize.css";
|
// @import "normalize.css/normalize.css";
|
||||||
|
|
||||||
|
|||||||
3
web/app/themes/la_mine/src/assets/scss/pages/_home.scss
Normal file
3
web/app/themes/la_mine/src/assets/scss/pages/_home.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
&.accueil{
|
||||||
|
|
||||||
|
}
|
||||||
1
web/app/themes/la_mine/src/assets/scss/pages/_index.scss
Normal file
1
web/app/themes/la_mine/src/assets/scss/pages/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import "home.scss";
|
||||||
@ -7,42 +7,7 @@
|
|||||||
<body class="container-fluid {{post.slug}} {{post.post_type}}">
|
<body class="container-fluid {{post.slug}} {{post.post_type}}">
|
||||||
<header class="fixed-top d-flex">
|
<header class="fixed-top d-flex">
|
||||||
{% block header %}
|
{% block header %}
|
||||||
<section class="logo col">
|
{% include "components/header.twig" %}
|
||||||
<figure>
|
|
||||||
<a href="{{site.url}}" rel="noreferrer">
|
|
||||||
<img src="{{theme.link}}/dist//assets/images/logo_lamine_vect.svg" alt="logo_Lamine" title="Le logo de La mine"/>
|
|
||||||
<span id="lumiR_logo"></span>
|
|
||||||
<span id="fond_logo"></span>
|
|
||||||
</a>
|
|
||||||
</figure>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="nav-main col row">
|
|
||||||
<div class="rs col">
|
|
||||||
<figure id="facebook">
|
|
||||||
<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
|
|
||||||
<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
|
|
||||||
</a>
|
|
||||||
</figure>
|
|
||||||
<figure id="insta">
|
|
||||||
<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
|
|
||||||
<img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
|
|
||||||
</a>
|
|
||||||
</figure>
|
|
||||||
</div>
|
|
||||||
<div class="burger col">
|
|
||||||
<div class="fond_burger">
|
|
||||||
<button class="hamburger hamburger--slider" type="button">
|
|
||||||
<span class="hamburger-box">
|
|
||||||
<span class="hamburger-inner"></span>
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<nav class="col" role="navigation">
|
|
||||||
{% include "components/menu.twig" with {'items': menu.get_items} %}
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@ -71,7 +36,7 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
{% block footer %}
|
{% block footer %}
|
||||||
<footer>
|
<footer class="row">
|
||||||
{% include 'components/footer.twig' %}
|
{% include 'components/footer.twig' %}
|
||||||
</footer>
|
</footer>
|
||||||
{{ function('wp_footer') }}
|
{{ function('wp_footer') }}
|
||||||
|
|||||||
@ -1,34 +1,34 @@
|
|||||||
<section class="information col-12 col-xl-7 col-lg-12 p-0">
|
<section class="col">
|
||||||
<div class="d-flex justify-content-around flex-wrap">
|
<div class="row">
|
||||||
<div class="logo_lamine col-lg-3 col-sm-6">
|
<figure class="col">
|
||||||
<a href="{{site.url}}"><img src="{{ Image(options.lamine_footer.image_logo).src }}" /></a>
|
<a rel="noreferrer" href="{{site.url}}"><img src="{{theme.link}}/src/assets/images/logo-lamine.png" /></a>
|
||||||
</div>
|
</figure>
|
||||||
|
|
||||||
<div class="horaires col-lg-3 col-sm-6">
|
<div class="col">
|
||||||
{{options.texte_horaire }}
|
{{options.texte_horaire }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="adresse col-lg-3 col-sm-6">
|
<div class="col">
|
||||||
{{options.texte_adresse }}
|
{{options.texte_adresse }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-3 col-sm-6">
|
<div class="col">
|
||||||
<div class="collecte">
|
<div class="">
|
||||||
{{options.texte_collecte }}
|
{{options.texte_collecte }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="reseaux_sociaux align-items">
|
<div class="">
|
||||||
<div class="facebook">
|
<figure class="">
|
||||||
<a class="d-flex" target="_blank" href="{{options.facebook.lien_facebook}}">
|
<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
|
||||||
<img src="{{ Image(options.facebook.logo_facebook).src }}" />
|
<img src="{{ Image(options.facebook.logo_facebook).src }}" />
|
||||||
<span>{{options.facebook.texte_facebook}}</span>
|
<figcaption>{{options.facebook.texte_facebook}}</figcaption>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</figure>
|
||||||
<div class="insta">
|
<div class="insta">
|
||||||
<a class="d-flex" target="_blank" href="{{options.instagram.lien_instagram}}">
|
<figure rel="noreferrer" class="d-flex" target="_blank" href="{{options.instagram.lien_instagram}}">
|
||||||
<img src="{{ Image(options.instagram.logo_instagram).src }}" />
|
<img src="{{ Image(options.instagram.logo_instagram).src }}" />
|
||||||
<span>{{options.instagram.texte_instagram}}</span>
|
<figcaption>{{options.instagram.texte_instagram}}</figcaption>
|
||||||
</a>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -36,11 +36,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="join-us col-12 col-xl-5 col-lg-12 p-0">
|
<section class="col">
|
||||||
<div>
|
|
||||||
<div class="send_actu">
|
<div id="mc_embed_signup" class="row">
|
||||||
<!-- Begin Mailchimp Signup Form -->
|
|
||||||
<div id="mc_embed_signup">
|
|
||||||
<form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&id=364a0fe850" 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&id=364a0fe850" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
||||||
<div class="d-flex" id="mc_embed_signup_scroll">
|
<div class="d-flex" id="mc_embed_signup_scroll">
|
||||||
<div><p>Recevoir l'actualité de La Mine</p></div>
|
<div><p>Recevoir l'actualité de La Mine</p></div>
|
||||||
@ -50,31 +48,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<!--End mc_embed_signup-->
|
|
||||||
</div>
|
<div class="row">
|
||||||
<div class="add_asso">
|
<a class="btn" target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
|
||||||
<div id="Btn_asso">
|
|
||||||
<a target="_blank" href="{{post.meta('bouton_asso').lien_hello_asso}}">adhérer à l'association</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
<div class="row">
|
||||||
|
<h3>{{options.titre}}</h3>
|
||||||
<div class="partenaires d-block d-sm-flex align-items-center col-lg-12">
|
<figure class="col px-0">
|
||||||
<div class="_titre text-center mb-3">{{options.titre}}</div>
|
<div class="main-carousel">
|
||||||
<div class="logo_partenaires w-100">
|
|
||||||
<div class="container_slide">
|
|
||||||
<ul>
|
|
||||||
{% for partner in options.partenaire %}
|
{% for partner in options.partenaire %}
|
||||||
<li>
|
<a rel="noreferrer" target="_blank" href="{{partner.lien_site_partenaire}}">
|
||||||
<a target="_blank" href="{{partner.lien_site_partenaire}}">
|
|
||||||
<img src="{{ Image(partner.logo).src }}" />
|
<img src="{{ Image(partner.logo).src }}" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
36
web/app/themes/la_mine/templates/components/header.twig
Normal file
36
web/app/themes/la_mine/templates/components/header.twig
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<section class="logo col-6">
|
||||||
|
<figure>
|
||||||
|
<a href="{{site.url}}" rel="noreferrer">
|
||||||
|
<img src="{{theme.link}}/dist//assets/images/logo_lamine_vect.svg" alt="logo_Lamine" title="Le logo de La mine"/>
|
||||||
|
<span id="lumiR_logo"></span>
|
||||||
|
<span id="fond_logo"></span>
|
||||||
|
</a>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="nav-main row">
|
||||||
|
<div class="rs col">
|
||||||
|
<figure id="facebook">
|
||||||
|
<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_facebook}}">
|
||||||
|
<img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
|
||||||
|
</a>
|
||||||
|
</figure>
|
||||||
|
<figure id="insta">
|
||||||
|
<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}">
|
||||||
|
<img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
|
||||||
|
</a>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="burger col">
|
||||||
|
<div class="fond_burger">
|
||||||
|
<button class="hamburger hamburger--slider" type="button">
|
||||||
|
<span class="hamburger-box">
|
||||||
|
<span class="hamburger-inner"></span>
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav class="col" role="navigation">
|
||||||
|
{% include "components/menu.twig" with {'items': menu.get_items} %}
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
Loading…
x
Reference in New Issue
Block a user