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

rs header

Browse Source
This commit is contained in:
Kevin Tessier 2020-09-08 17:41:38 +02:00
parent 52cc7bdf74
commit d496228b31
4 changed files with 82 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/app/themes/la_mine/dist/assets/css/index.css vendored
View File

File diff suppressed because one or more lines are too long

2
web/app/themes/la_mine/dist/assets/css/index.min.css vendored
View File

File diff suppressed because one or more lines are too long

89
web/app/themes/la_mine/src/assets/scss/components/_header.scss
View File

@ -1,50 +1,65 @@
header{ header{
section{ section{
position: relative; &.logo{
figure{ position: relative;
a{ figure{
position: relative; a{
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; position: relative;
}
span{
display: block; display: block;
} width: max-content;
#lumiR_logo{ height: calc( #{$heightLogo} / 2 ) ;
@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; transition: 0.5s all ease;
@media screen and (min-width: 576px) {
height: $heightLogo;
}
img{
z-index: 3;
position: relative;
}
span{
display: block;
}
#lumiR_logo{ #lumiR_logo{
@include logoLamineHover(calc(#{$heightLogoHover} - 75px), calc(#{$heightLogoHover} - 75px), 45px, 60px); @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{ #fond_logo{
@include logoLamineHover(calc(#{$heightLogoHover} + 75px), calc(#{$heightLogoHover} + 75px), -50%, 50%); @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%);
}
}
} }
} }
} }
&.nav-main{
justify-content: end;
figure{
& > div{
width: 30px;
height: 100%;
&:first-child{
margin-right: 0.5rem;
}
}
}
nav{
display: none;
}
}
} }
} }

16
web/app/themes/la_mine/templates/components/header.twig
View File

@ -8,20 +8,20 @@
</figure> </figure>
</section> </section>
<section class="nav-main row"> <section class="nav-main col-6 d-flex">
<div class="rs col"> <figure class="rs row">
<figure id="facebook"> <div id="facebook">
<a rel="noreferrer" target="_blank" href="{{options.facebook.lien_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"/> <img src="{{theme.link}}/dist//assets/images/fb.svg" alt="logo_facebook" title="Le logo de facebook"/>
</a> </a>
</figure> </div>
<figure id="insta"> <div id="insta">
<a rel="noreferrer" target="_blank" href="{{options.instagram.lien_instagram}}"> <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"/> <img src="{{theme.link}}/dist//assets/images/inst.svg" alt="logo_instagram" title="Le logo d'instagram"/>
</a> </a>
</figure> </div>
</div> </figure>
<div class="burger col"> <div class="burger col-1">
<div class="fond_burger"> <div class="fond_burger">
<button class="hamburger hamburger--slider" type="button"> <button class="hamburger hamburger--slider" type="button">
<span class="hamburger-box"> <span class="hamburger-box">