Edit home navigation
This commit is contained in:
Paul Nicoué
parent
586763f249
commit
d149a90c80
7 changed files with 96 additions and 305 deletions
2
assets/css/style.min.css
vendored
2
assets/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
||||||
{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"AAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,0FACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,eACA,cAaJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCC7ER,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCrCF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACA,2CACA,sCACA,mCAEA,yBAGI,mBAOR,KACI,iBACA,kBACA,iBACA,aACA,KACI,2CAMR,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACI,mCACA,gCACA,YACA,gFAGJ,kBACI,kBAGJ,uBACI,qBASJ,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,cACA,sBAGJ,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,cACA,sBAGJ,sCACI,eACA,sBACA,iCACA,6BACA,yBAGJ,sCACI,gBACA,wBACA,gCACA,4BACA,wBAGJ,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,eACA,sBACA,iCACA,6BACA,yBAGJ,sCACI,gBACA,wBACA,gCACA,4BACA,wBAGJ,sCACI,iBACA,wBAMJ,sCACI,cACA,sBAGJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,eACA,sBACA,iCACA,6BACA,yBAGJ,sCACI,gBACA,wBACA,gCACA,4BACA,wBAGJ,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,eACA,sBACA,iCACA,6BACA,yBAGJ,sCACI,gBACA,wBACA,gCACA,4BACA,wBAGJ,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAIR,sCACI,iBACA,wBAMJ,sCACI,cACA,sBAGJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,eACA,sBACA,iCACA,6BACA,yBAGJ,sCACI,gBACA,wBACA,gCACA,4BACA,wBAGJ,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAIR,sCACI,iBACA,wBAIR,gBACI,mBACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,gCAEI,mCACA,YACA,0FAGJ,8BAEI,kBAGJ,4CAEI,gCACA,YAEA,4EACI,kBAKA,0GAEI,kBAIR,kDACI,uBAEA,8GAEI,kBAGJ,8DACI,mBAKZ,kBACI,cACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBACA,YAGJ,kCACI,2BAGJ,kCACI,8EAEA,+CACI,cACA,mBAKR,6BACI,sBACA,oBACA,wBACA,mCACA,kBAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACI,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACA,uBACA,wBAEA,wBACI,kBAGJ,0BACI,gBACA,WACA,YACA,0CACA,qCACA,kCAOA,iGACA,kBAMZ,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"}
|
{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"AAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,0FACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,eACA,cAaJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCC7ER,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCrCF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACA,2CACA,sCACA,mCAEA,yBAGI,mBAOR,KACI,iBACA,kBACA,iBACA,aACA,KACI,2CAMR,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBAGJ,kBACI,kBAGJ,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,8BACA,WACA,YACA,cACA,YACA,eACA,oBACA,oBACA,aACA,4BACA,6BACG,0BACH,sBACA,yBACA,sBACA,8BAEA,qKAGC,WACA,WACA,mBACA,4BAUF,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAOR,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAKZ,gBACI,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,gCAEI,mCACA,YACA,0FAGJ,8BAEI,kBAGJ,4CAEI,gCACA,YAEA,4EACI,kBAKA,0GAEI,kBAIR,kDACI,uBAEA,8GAEI,kBAGJ,8DACI,mBAKZ,kBACI,cACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBACA,YAGJ,kCACI,2BAGJ,kCACI,8EAEA,+CACI,cACA,mBAKR,6BACI,sBACA,oBACA,wBACA,mCACA,kBAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACI,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACA,uBACA,wBAEA,wBACI,kBAGJ,0BACI,gBACA,WACA,YACA,0CACA,qCACA,kCAOA,iGACA,kBAMZ,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"}
|
||||||
|
|
@ -110,6 +110,15 @@ footer {
|
||||||
height: var(--header-bar-height);
|
height: var(--header-bar-height);
|
||||||
margin: auto;
|
margin: auto;
|
||||||
padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
|
padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-bar__logo {
|
.header-bar__logo {
|
||||||
|
|
@ -120,6 +129,39 @@ footer {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header-bar__nav {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-bar__nav-button {
|
||||||
|
background-color: var(--white);
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
padding: 5px 0;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.header-bar__nav-button-line-1,
|
||||||
|
.header-bar__nav-button-line-2,
|
||||||
|
.header-bar__nav-button-line-3 {
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
border-radius: 50px;
|
||||||
|
background-color: var(--jet);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
// MAIN
|
// MAIN
|
||||||
// ----------------------------------------------------------------------------
|
// ----------------------------------------------------------------------------
|
||||||
|
|
@ -170,13 +212,31 @@ footer {
|
||||||
.home__nav--2-items {
|
.home__nav--2-items {
|
||||||
|
|
||||||
.home__nav-item-1 {
|
.home__nav-item-1 {
|
||||||
grid-area: top;
|
grid-area: top-left;
|
||||||
place-self: end center;
|
place-self: end end;
|
||||||
|
-webkit-transform:
|
||||||
|
rotate(-45deg)
|
||||||
|
translateY(var(--home-nav-item-translation));
|
||||||
|
-ms-transform:
|
||||||
|
rotate(-45deg)
|
||||||
|
translateY(var(--home-nav-item-translation));
|
||||||
|
transform:
|
||||||
|
rotate(-45deg)
|
||||||
|
translateY(var(--home-nav-item-translation));
|
||||||
}
|
}
|
||||||
|
|
||||||
.home__nav-item-2 {
|
.home__nav-item-2 {
|
||||||
grid-area: bottom;
|
grid-area: top-right;
|
||||||
place-self: start center;
|
place-self: end start;
|
||||||
|
-webkit-transform:
|
||||||
|
rotate(45deg)
|
||||||
|
translateY(var(--home-nav-item-translation));
|
||||||
|
-ms-transform:
|
||||||
|
rotate(45deg)
|
||||||
|
translateY(var(--home-nav-item-translation));
|
||||||
|
transform:
|
||||||
|
rotate(45deg)
|
||||||
|
translateY(var(--home-nav-item-translation));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -218,35 +278,6 @@ footer {
|
||||||
|
|
||||||
.home__nav--4-items {
|
.home__nav--4-items {
|
||||||
|
|
||||||
.home__nav-item-1 {
|
|
||||||
grid-area: top;
|
|
||||||
place-self: end center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-2 {
|
|
||||||
grid-area: left;
|
|
||||||
place-self: center end;
|
|
||||||
-webkit-transform: rotate(-90deg);
|
|
||||||
-ms-transform: rotate(-90deg);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-3 {
|
|
||||||
grid-area: right;
|
|
||||||
place-self: center start;
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
-ms-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-4 {
|
|
||||||
grid-area: bottom;
|
|
||||||
place-self: start center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav--5-items {
|
|
||||||
|
|
||||||
.home__nav-item-1 {
|
.home__nav-item-1 {
|
||||||
grid-area: top-left;
|
grid-area: top-left;
|
||||||
place-self: end end;
|
place-self: end end;
|
||||||
|
|
@ -276,131 +307,6 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.home__nav-item-3 {
|
.home__nav-item-3 {
|
||||||
grid-area: left;
|
|
||||||
place-self: center end;
|
|
||||||
-webkit-transform: rotate(-90deg);
|
|
||||||
-ms-transform: rotate(-90deg);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-4 {
|
|
||||||
grid-area: right;
|
|
||||||
place-self: center start;
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
-ms-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-5 {
|
|
||||||
grid-area: bottom;
|
|
||||||
place-self: start center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav--6-items {
|
|
||||||
|
|
||||||
.home__nav-item-1 {
|
|
||||||
grid-area: top;
|
|
||||||
place-self: end center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-2 {
|
|
||||||
grid-area: top-left;
|
|
||||||
place-self: end end;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-3 {
|
|
||||||
grid-area: top-right;
|
|
||||||
place-self: end start;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-4 {
|
|
||||||
grid-area: left;
|
|
||||||
place-self: center end;
|
|
||||||
-webkit-transform: rotate(-90deg);
|
|
||||||
-ms-transform: rotate(-90deg);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-5 {
|
|
||||||
grid-area: right;
|
|
||||||
place-self: center start;
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
-ms-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-6 {
|
|
||||||
grid-area: bottom;
|
|
||||||
place-self: start center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav--7-items {
|
|
||||||
|
|
||||||
.home__nav-item-1 {
|
|
||||||
grid-area: top-left;
|
|
||||||
place-self: end end;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-2 {
|
|
||||||
grid-area: top-right;
|
|
||||||
place-self: end start;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-3 {
|
|
||||||
grid-area: left;
|
|
||||||
place-self: center end;
|
|
||||||
-webkit-transform: rotate(-90deg);
|
|
||||||
-ms-transform: rotate(-90deg);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-4 {
|
|
||||||
grid-area: right;
|
|
||||||
place-self: center start;
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
-ms-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-5 {
|
|
||||||
grid-area: bottom-left;
|
grid-area: bottom-left;
|
||||||
place-self: start end;
|
place-self: start end;
|
||||||
-webkit-transform:
|
-webkit-transform:
|
||||||
|
|
@ -414,92 +320,7 @@ footer {
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
translateY(calc(var(--home-nav-item-translation) * -1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.home__nav-item-6 {
|
|
||||||
grid-area: bottom-right;
|
|
||||||
place-self: start start;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
|
||||||
transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-7 {
|
|
||||||
grid-area: bottom;
|
|
||||||
place-self: start center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav--8-items {
|
|
||||||
|
|
||||||
.home__nav-item-1 {
|
|
||||||
grid-area: top;
|
|
||||||
place-self: end center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-2 {
|
|
||||||
grid-area: top-left;
|
|
||||||
place-self: end end;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
transform:
|
|
||||||
rotate(-45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-3 {
|
|
||||||
grid-area: top-right;
|
|
||||||
place-self: end start;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(var(--home-nav-item-translation));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-4 {
|
.home__nav-item-4 {
|
||||||
grid-area: left;
|
|
||||||
place-self: center end;
|
|
||||||
-webkit-transform: rotate(-90deg);
|
|
||||||
-ms-transform: rotate(-90deg);
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-5 {
|
|
||||||
grid-area: right;
|
|
||||||
place-self: center start;
|
|
||||||
-webkit-transform: rotate(90deg);
|
|
||||||
-ms-transform: rotate(90deg);
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-6 {
|
|
||||||
grid-area: bottom-left;
|
|
||||||
place-self: start end;
|
|
||||||
-webkit-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
|
||||||
-ms-transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
|
||||||
transform:
|
|
||||||
rotate(45deg)
|
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.home__nav-item-7 {
|
|
||||||
grid-area: bottom-right;
|
grid-area: bottom-right;
|
||||||
place-self: start start;
|
place-self: start start;
|
||||||
-webkit-transform:
|
-webkit-transform:
|
||||||
|
|
@ -512,15 +333,11 @@ footer {
|
||||||
rotate(-45deg)
|
rotate(-45deg)
|
||||||
translateY(calc(var(--home-nav-item-translation) * -1));
|
translateY(calc(var(--home-nav-item-translation) * -1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.home__nav-item-8 {
|
|
||||||
grid-area: bottom;
|
|
||||||
place-self: start center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home__nav-link {
|
.home__nav-link {
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
|
font-size: var(--h3-font-size);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transition: opacity 600ms ease-in-out;
|
-webkit-transition: opacity 600ms ease-in-out;
|
||||||
|
|
|
||||||
|
|
@ -55,26 +55,14 @@ function calculateNavGridInnerDiagonal() {
|
||||||
// Create new instance of CircleType for each navigation link, set radius and direction
|
// Create new instance of CircleType for each navigation link, set radius and direction
|
||||||
function curveNavLinks() {
|
function curveNavLinks() {
|
||||||
if (navLinks.length !== 0 && circleTypes) {
|
if (navLinks.length !== 0 && circleTypes) {
|
||||||
if (navLinks.length < 7) {
|
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||||
for (let i = 0; i < (navLinks.length - 1); i++) {
|
circleTypes[i] = new CircleType(navLinks[i]);
|
||||||
circleTypes[i] = new CircleType(navLinks[i]);
|
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
}
|
||||||
}
|
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||||
for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
|
circleTypes[i] = new CircleType(navLinks[i]);
|
||||||
circleTypes[i] = new CircleType(navLinks[i]);
|
circleTypes[i].dir(-1);
|
||||||
circleTypes[i].dir(-1);
|
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
||||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < (navLinks.length - 3); i++) {
|
|
||||||
circleTypes[i] = new CircleType(navLinks[i]);
|
|
||||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
|
||||||
}
|
|
||||||
for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
|
|
||||||
circleTypes[i] = new CircleType(navLinks[i]);
|
|
||||||
circleTypes[i].dir(-1);
|
|
||||||
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -96,14 +84,6 @@ function setNavGridDisplay() {
|
||||||
navEl.classList.add('home__nav--3-items');
|
navEl.classList.add('home__nav--3-items');
|
||||||
} else if (navLinks.length === 4) {
|
} else if (navLinks.length === 4) {
|
||||||
navEl.classList.add('home__nav--4-items');
|
navEl.classList.add('home__nav--4-items');
|
||||||
} else if (navLinks.length === 5) {
|
|
||||||
navEl.classList.add('home__nav--5-items');
|
|
||||||
} else if (navLinks.length === 6) {
|
|
||||||
navEl.classList.add('home__nav--6-items');
|
|
||||||
} else if (navLinks.length === 7) {
|
|
||||||
navEl.classList.add('home__nav--7-items');
|
|
||||||
} else if (navLinks.length === 8) {
|
|
||||||
navEl.classList.add('home__nav--8-items');
|
|
||||||
}
|
}
|
||||||
for (let i = 0; i < navLinks.length; i++) {
|
for (let i = 0; i < navLinks.length; i++) {
|
||||||
navLinks[i].classList.add('home__nav-link--visible');
|
navLinks[i].classList.add('home__nav-link--visible');
|
||||||
|
|
@ -162,28 +142,15 @@ function waveNavLinkDown(navLink) {
|
||||||
// Add wave (up or down) animation to every letters of each link on mouseover event
|
// Add wave (up or down) animation to every letters of each link on mouseover event
|
||||||
function waveNavLinksOnHover() {
|
function waveNavLinksOnHover() {
|
||||||
if (navLinks.length !== 0) {
|
if (navLinks.length !== 0) {
|
||||||
if (navLinks.length < 7) {
|
for (let i = 0; i < (navLinks.length - 2); i++) {
|
||||||
for (let i = 0; i < (navLinks.length - 1); i++) {
|
navLinks[i].addEventListener('mouseover', function(e) {
|
||||||
navLinks[i].addEventListener('mouseover', function(e) {
|
waveNavLinkUp(navLinks[i]);
|
||||||
waveNavLinkUp(navLinks[i]);
|
});
|
||||||
});
|
}
|
||||||
}
|
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
|
||||||
for (let i = (navLinks.length - 1); i < navLinks.length; i++) {
|
navLinks[i].addEventListener('mouseover', function(e) {
|
||||||
navLinks[i].addEventListener('mouseover', function(e) {
|
waveNavLinkDown(navLinks[i]);
|
||||||
waveNavLinkDown(navLinks[i]);
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
for (let i = 0; i < (navLinks.length - 3); i++) {
|
|
||||||
navLinks[i].addEventListener('mouseover', function(e) {
|
|
||||||
waveNavLinkUp(navLinks[i]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
for (let i = (navLinks.length - 3); i < navLinks.length; i++) {
|
|
||||||
navLinks[i].addEventListener('mouseover', function(e) {
|
|
||||||
waveNavLinkDown(navLinks[i]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,8 +3,8 @@ headline:
|
||||||
fr: Galeries
|
fr: Galeries
|
||||||
type: pages
|
type: pages
|
||||||
template: gallery
|
template: gallery
|
||||||
min: 1
|
min: 2
|
||||||
max: 7
|
max: 4
|
||||||
layout: cards
|
layout: cards
|
||||||
size: small
|
size: small
|
||||||
image:
|
image:
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,16 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<nav class="header-bar__nav" aria-label="Menu">
|
||||||
|
<button class="header-bar__nav-button" tabindex="-1" aria-hidden="true">
|
||||||
|
<div class="header-bar__nav-button-line-1"></div>
|
||||||
|
<div class="header-bar__nav-button-line-2"></div>
|
||||||
|
<div class="header-bar__nav-button-line-3"></div>
|
||||||
|
</button>
|
||||||
|
<ul class="header-bar__nav-menu">
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</header>
|
</header>
|
||||||
|
|
|
||||||
|
|
@ -18,9 +18,6 @@
|
||||||
</div>
|
</div>
|
||||||
{% set navItemNo = navItemNo + 1 %}
|
{% set navItemNo = navItemNo + 1 %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<div class="home__nav-item-{{ navItemNo }}">
|
|
||||||
<a href="{{ page('a-propos').url }}" target="_self" class="home__nav-link">{{ page('a-propos').title }}</a>
|
|
||||||
</div>
|
|
||||||
<div class="home__nav-image" aria-hidden="true">
|
<div class="home__nav-image" aria-hidden="true">
|
||||||
<img src="{{ page.image.url }}" srcset="{{ page.image.srcset() }}" alt="{{ page.image.alt_text }}">
|
<img src="{{ page.image.url }}" srcset="{{ page.image.srcset() }}" alt="{{ page.image.alt_text }}">
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue