Edit header navigation bar style

This commit is contained in:
Paul Nicoué 2022-06-10 16:07:48 +02:00
parent e90e57ff02
commit 64ad7b3a70
5 changed files with 31 additions and 16 deletions

View file

@ -25,9 +25,9 @@
--content-max-width: 140rem;
--text-max-width: 70rem;
--icon-size: 2.5rem;
--header-bar-vertical-padding: 2rem;
--header-bar-vertical-padding: 1rem;
--header-bar-horizontal-padding: 2rem;
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--h1-font-size));
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
--footer-bar-vertical-padding: 1rem;
--footer-bar-horizontal-padding: 2rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
@ -48,9 +48,13 @@
--jet: #333333;
--granite-gray: #666666;
--spanish-gray: #999999;
--light-gray: #D6D6D6;
--light-gray: #cccccc;
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.8);
// Plyr (audio player)
--plyr-color-main: var(--transparent-black);
}
// Media queries
@ -74,6 +78,7 @@ $desktop-media-query: 62rem;
// Dimensions
--icon-size: 3rem;
--header-bar-vertical-padding: 2rem;
--header-bar-horizontal-padding: 4rem;
--footer-bar-vertical-padding: 2rem;
--footer-bar-horizontal-padding: 4rem;

File diff suppressed because one or more lines are too long

View file

@ -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,wCACA,eACA,wBACA,wBACA,sBACA,cACA,8CAQJ,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,+DAMR,yBACC,kBAGD,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,mCACA,gCACA,YACA,gFACH,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mDACA,8CACA,2CAEA,mBACC,eACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBAGJ,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACM,mBACL,sDAEK,cACL,sDAEK,WACL,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGE,6DAEF,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACG,gCACA,4BAGJ,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,6DACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,yDAEC,cACA,eACA,wBACA,qBACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAGD,oGAGC,mBAIF,oDACC,gBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAME,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,qCAEC,sBACC,gBAIF,qCAEC,sBACC,gBAUF,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,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACI,uBAEA,sHAEI,kBAGJ,kEACI,mBAKZ,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,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,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,+CACA,0CACA,uCAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,yDAEC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,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,uFACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,wBACA,wBACA,sBACA,cACA,8CAIA,4CAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCClFR,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,+DAMR,yBACC,kBAGD,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,gCACA,YACH,iKACA,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mBACC,yDAED,cACC,yDAED,WACC,yDAGD,mBACC,eACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBAGJ,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACM,mBACL,sDAEK,cACL,sDAEK,WACL,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGE,6DAEF,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACG,gCACA,4BAGJ,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,gBACA,gBACA,aACA,8GACA,0CACA,mBACA,kBACA,gBACA,+CACA,0CACA,uCAIC,4BACC,yCAGD,4BACC,kBACA,yCAGD,yDAEC,cACA,eACA,wBACA,qBACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAGD,oGAGC,mBAIF,oDACC,gBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAME,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,qHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAPD,uHAEC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,qCAIE,mBACC,iFAIF,sBACC,gBAIF,qCAEC,sBACC,gBAUF,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,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACI,uBAEA,sHAEI,kBAGJ,kEACI,mBAKZ,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,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,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,+CACA,0CACA,uCAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,yDAEC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"}

View file

@ -111,10 +111,9 @@ footer {
.header-bar {
width: 100%;
max-width: var(--content-max-width);
height: var(--header-bar-height);
margin: auto;
padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
padding: var(--header-bar-vertical-padding) Max(var(--header-bar-horizontal-padding), calc((100vw - var(--content-max-width)) / 2 + var(--header-bar-horizontal-padding)));
background-color: var(--transparent-white);
border-bottom: 1px solid var(--transparent-white);
display: -webkit-box;
@ -127,9 +126,15 @@ footer {
-ms-flex-align: center;
align-items: center;
z-index: 1;
-webkit-transition: border-bottom 400ms ease-in-out;
-o-transition: border-bottom 400ms ease-in-out;
transition: border-bottom 400ms ease-in-out;
-webkit-transition:
height 400ms ease-in-out,
border-bottom 400ms ease-in-out;
-o-transition:
height 400ms ease-in-out,
border-bottom 400ms ease-in-out;
transition:
height 400ms ease-in-out,
border-bottom 400ms ease-in-out;
&--fixed {
position: fixed;
@ -247,7 +252,7 @@ footer {
min-width: 100vw;
max-width: 100vw;
height: 100vh;
padding: calc(var(--header-bar-height) + 4rem) 4rem 4rem 4rem;
padding: calc(var(--header-bar-height) + 4rem) Max(4rem, calc((100vw - var(--content-max-width)) / 2 + 4rem)) 4rem 4rem;
background-color: var(--transparent-black);
color: var(--white);
overflow-x: hidden;
@ -321,6 +326,13 @@ footer {
@media screen and (min-width: $tablet-media-query) {
.header-bar {
&--fixed {
--header-bar-height: calc(var(--header-bar-vertical-padding) + var(--icon-size));
}
}
.header-bar__nav-menu {
min-width: 50vw;
}

View file

@ -231,7 +231,7 @@ function toggleVideosFullScreen() {
// HEADER BAR ANIMATION //
// Toggle header bar depending on scroll
// Toggle header bar depending on scroll offset
function toggleHeaderBar() {
if (headerBar) {
let headerBarHeight = headerBar.getBoundingClientRect().height;
@ -280,10 +280,8 @@ function toggleHeaderNavOnClick() {
// Close header navigation on document click event
function closeHeaderNavOnClick() {
document.addEventListener('click', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible')) {
if (!headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
closeHeaderNav(e);
}
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
closeHeaderNav(e);
}
});
}