anime logo

This commit is contained in:
Kevin Tessier 2020-09-08 17:20:47 +02:00
parent e0fc506ae1
commit 52cc7bdf74
13 changed files with 272 additions and 93 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -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%);
}
}
}
}
}
}

View File

@ -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{}
}
}

View File

@ -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;
}

View File

@ -0,0 +1,7 @@
// color
$colorWhite: white;
$colorYellow:#ffcc00;
$heightLogo: 115px;
$heightLogoHover: 100px;

View File

@ -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";

View File

@ -0,0 +1,3 @@
&.accueil{
}

View File

@ -0,0 +1 @@
@import "home.scss";

View File

@ -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') }}

View File

@ -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&amp;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&amp;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>
</figure>
</div> </div>
</div>
</div>
</section> </section>

View 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>