host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve accessibility features

Browse source
This commit is contained in:
Paul Nicoué 2022-06-14 16:08:23 +02:00
parent b138a0df21
commit d5d951c8df
8 changed files with 112 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/css/partials/_animations.scss
View file

@ -2,6 +2,24 @@
// ANIMATIONS
// ----------------------------------------------------------------------------
@-webkit-keyframes expand-outline {
from {
outline-offset: 0;
}
to {
outline-offset: 2px;
}
}
@keyframes expand-outline {
from {
outline-offset: 0;
}
to {
outline-offset: 2px;
}
}
@-webkit-keyframes wave-up {
0% {
top: 0;

4
assets/css/partials/_variables.scss
View file

@ -46,6 +46,7 @@
--black: #000;
--transparent-black: rgba(0, 0, 0, 0.8);
--jet: #333333;
--transparent-jet: rgba(51, 51, 51, 0.8);
--granite-gray: #666666;
--spanish-gray: #999999;
--light-gray: #cccccc;
@ -54,7 +55,8 @@
// Plyr (audio player)
--plyr-color-main: var(--transparent-black);
--plyr-color-main: var(--transparent-jet);
--plyr-tab-focus-color: var(--white);
}
// Media queries

2
assets/css/style.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
assets/css/style.min.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"CAIA,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,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBACH,+CACA,0CACA,uCACA,8BACG,0BACH,sBAEA,yBACC,6BACA,yBACA,qBAIF,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,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,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,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,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,sDACF,oCAEM,sHAEI,kBAGV,4DACC,kBACA,mBAGD,kEACC,mBAGD,0EACC,YACA,kBACA,MACA,OAKH,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":"CAIA,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,yCACA,wBACA,wBACA,sBACA,cACA,8CAIA,0CACA,qCAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,oCACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCCpFR,kCACI,KACF,iBAED,GACC,oBAIF,0BACC,KACC,iBAED,GACC,oBAIF,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,UCvDF,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,0BACH,kBACG,2CACA,sCACA,mCAEA,yBAGI,mBAGP,gBACC,gCACA,mBACA,gDACG,2CAML,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,uFACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBACH,+CACA,0CACA,uCACA,8BACG,0BACH,sBAEA,yBACC,6BACA,yBACA,qBAIF,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,6BACC,eACA,mCACA,+BACA,2BACA,+CACA,0CACA,uCAEA,iEAEC,wBAGD,+BACC,qBAEA,gHAGC,mBAGD,6CACC,gCAMJ,oDACC,wBAEA,sDACC,mBAIF,+BACC,oCACA,gCACA,4BAKE,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,+CACA,0CACA,uCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,2DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAND,4DACC,gCACA,4BACA,wBACA,gDACA,2CACA,wCAOL,yBACC,eACA,UACA,MACA,OACA,YACA,aACA,8BACA,UACA,oBACA,oBACA,6CACA,wCACA,qCAEA,kCACC,WACA,oBACA,eAIF,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,sDACF,oCAEM,sHAEI,kBAGV,4DACC,kBACA,mBAGD,kEACC,kBAGD,0EACC,YACA,kBACA,MACA,OAKH,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,6BACI,sBACA,oBACA,wBACA,mCACA,kBACA,oCAIR,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,qFAGC,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"}

45
assets/css/style.scss
View file

@ -61,6 +61,7 @@ em {
a {
color: var(--jet);
text-decoration: underline;
border-radius: 2px;
-webkit-transition: color 200ms ease-in-out;
-o-transition: color 200ms ease-in-out;
transition: color 200ms ease-in-out;
@ -70,8 +71,14 @@ a {
&:active {
color: var(--black);
}
}
&:focus-visible {
outline: 1px dashed var(--black);
outline-offset: 2px;
-webkit-animation: expand-outline 200ms ease-out;
animation: expand-outline 200ms ease-in-out;
}
}
// General grid layout
@ -286,24 +293,33 @@ footer {
border-top: 1px solid var(--granite-gray);
}
a,
span {
display: block;
div {
padding: 1rem 0;
color: var(--light-gray);
text-decoration: none;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
}
a:hover,
a:focus,
a:active {
color: var(--white);
a,
span {
color: var(--light-gray);
}
a {
text-decoration: none;
&:hover,
&:focus,
&:active {
color: var(--white);
}
&:focus-visible {
outline: 1px dashed var(--white);
}
}
}
}
@ -323,8 +339,7 @@ footer {
@for $i from 1 through 20 {
.header-bar__nav-item-#{$i} {
a,
span {
div {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
@ -626,7 +641,7 @@ footer {
}
li + li {
margin: 0.5rem 0 0 0;
margin: 1rem 0 0 0;
}
li:before {
@ -666,6 +681,7 @@ footer {
margin: 1rem auto 0 auto;
font-size: var(--caption-font-size);
font-style: italic;
line-height: var(--text-line-height);
}
}
@ -783,6 +799,7 @@ footer {
&:hover,
&:focus,
&:active {
transform: scale(1.1);
}

51
assets/js/app.js
View file

@ -21,13 +21,14 @@ let videoPlayers = [];
// HEADER BAR ANIMATION //
const headerBar = document.querySelector('.header-bar');
const headerLogo =document.querySelector('.header-bar__logo');
const headerLogo = document.querySelector('.header-bar__logo');
let scrollOffset = 0;
// NAVIGATION MENU ANIMATION //
const headerNavBtn = document.querySelector('.header-bar__nav-button');
const headerNavMenu = document.querySelector('.header-bar__nav-menu');
const headerNavMenuListEls = document.querySelectorAll('.header-bar__nav-menu li');
const headerNavOverlay = document.querySelector('.header-bar__nav-overlay');
const touchPosition = {
initialX: null,
@ -181,12 +182,8 @@ function setUpVideoPlayers() {
'duration',
'mute',
'volume',
'settings',
'fullscreen'
],
settings: [
'quality'
],
i18n: {
play: 'Lire',
pause: 'Mettre sur pause',
@ -198,20 +195,6 @@ function setUpVideoPlayers() {
unmute: 'Activer le son',
enterFullscreen: 'Activer le mode plein écran',
exitFullscreen: 'Quitter le mode plein écran'
},
tooltips: {
controls: true,
seek: true
},
quality: {
default: 720,
options: [
1080,
720,
480,
360,
240,
]
}
});
}
@ -268,6 +251,16 @@ function toggleHeaderNav() {
}
}
// Open header navigation
function openHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
headerNavMenu.classList.add('header-bar__nav-menu--visible');
headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
document.body.classList.add('body--hidden-overflow-y');
}
}
// Close header navigation
function closeHeaderNav() {
if (headerNavBtn && headerNavMenu) {
@ -295,6 +288,24 @@ function closeHeaderNavOnClick() {
});
}
// Open header navigation on menu list focusin event
function openHeaderNavBeforeFocus() {
if (headerNavMenuListEls) {
for (let i = 0; i < headerNavMenuListEls.length; i++) {
headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
}
}
}
// Close header navigation on menu list focusout event
function closeHeaderNavAfterFocus() {
if (headerNavMenuListEls) {
for (let i = 0; i < headerNavMenuListEls.length; i++) {
headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
}
}
}
// Close header navigation on touchstart and touchmove events (swipe right)
function closeHeaderNavOnSwipe() {
headerNavMenu.addEventListener('touchstart', function(e) {
@ -352,4 +363,6 @@ document.addEventListener('scroll', function() {
toggleHeaderNavOnClick();
closeHeaderNavOnClick();
openHeaderNavBeforeFocus();
closeHeaderNavAfterFocus();
closeHeaderNavOnSwipe();

34
site/templates/base.twig
View file

@ -21,13 +21,13 @@
<div class="header-bar">
<div class="header-bar__logo" aria-hidden="true">
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}">
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}" tabindex="-1">
<h1 class="header-bar__logo-title">{{ site.title }}</h1>
</a>
</div>
<nav class="header-bar__nav" aria-label="Menu">
<button class="header-bar__nav-button" tabindex="-1" aria-hidden="true">
<button class="header-bar__nav-button" aria-hidden="true" tabindex="-1">
<svg viewBox="0 0 48 48" fill="currentColor">
<path d="M7.5 36Q6.85 36 6.425 35.575Q6 35.15 6 34.5Q6 33.85 6.425 33.425Q6.85 33 7.5 33H30.5Q31.15 33 31.575 33.425Q32 33.85 32 34.5Q32 35.15 31.575 35.575Q31.15 36 30.5 36ZM7.5 25.4Q6.85 25.4 6.425 24.975Q6 24.55 6 23.9Q6 23.25 6.425 22.825Q6.85 22.4 7.5 22.4H24.5Q25.15 22.4 25.575 22.825Q26 23.25 26 23.9Q26 24.55 25.575 24.975Q25.15 25.4 24.5 25.4ZM7.5 15Q6.85 15 6.425 14.575Q6 14.15 6 13.5Q6 12.85 6.425 12.425Q6.85 12 7.5 12H30.5Q31.15 12 31.575 12.425Q32 12.85 32 13.5Q32 14.15 31.575 14.575Q31.15 15 30.5 15ZM34.75 23.95 41 30.2Q41.45 30.65 41.425 31.25Q41.4 31.85 40.95 32.3Q40.5 32.75 39.875 32.75Q39.25 32.75 38.8 32.3L31.5 25Q31.05 24.55 31.05 23.95Q31.05 23.35 31.5 22.9L38.8 15.6Q39.25 15.15 39.875 15.15Q40.5 15.15 40.95 15.6Q41.4 16.05 41.4 16.675Q41.4 17.3 40.95 17.75Z"/>
</svg>
@ -35,40 +35,54 @@
<path d="M24 26.1 13.5 36.6Q13.05 37.05 12.45 37.05Q11.85 37.05 11.4 36.6Q10.95 36.15 10.95 35.55Q10.95 34.95 11.4 34.5L21.9 24L11.4 13.5Q10.95 13.05 10.95 12.45Q10.95 11.85 11.4 11.4Q11.85 10.95 12.45 10.95Q13.05 10.95 13.5 11.4L24 21.9L34.5 11.4Q34.95 10.95 35.55 10.95Q36.15 10.95 36.6 11.4Q37.05 11.85 37.05 12.45Q37.05 13.05 36.6 13.5L26.1 24L36.6 34.5Q37.05 34.95 37.05 35.55Q37.05 36.15 36.6 36.6Q36.15 37.05 35.55 37.05Q34.95 37.05 34.5 36.6Z"/>
</svg>
</button>
<ul class="header-bar__nav-menu">
<ul class="header-bar__nav-menu" tabindex="-1">
{% set headerNavItemNo = 1 %}
{% if site.homePage.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
<div>
<a href="{{ site.homePage.url }}" target="_self" aria-current="page">{{ site.homePage.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
<div>
<a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
</div>
</li>
{% endif %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
{% if pages.template('biography').first.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
<div>
<a href="{{ pages.template('biography').first.url }}" target="_self" aria-current="page">{{ pages.template('biography').first.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
<div>
<a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
</div>
</li>
{% endif %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<span>Galeries</span>
<div>
<span>Galeries</span>
</div>
<ul>
{% for gallery in pages.template('gallery') %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
{% if gallery.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
<div>
<a href="{{ gallery.url }}" target="_self" aria-current="page">{{ gallery.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
<div>
<a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
</div>
</li>
{% endif %}
{% endfor %}

4
site/templates/home.twig
View file

@ -7,14 +7,14 @@
{% block main %}
<main>
<section class="home-section">
<section class="home-section" aria-hidden="true">
<div class="home">
<nav class="home__nav" aria-label="Menu">
{% set navItemNo = 1 %}
{% for gallery in pages.template('gallery') %}
<div class="home__nav-item-{{ navItemNo }}">
<a href="{{ gallery.url }}" target="_self" class="home__nav-link">{{ gallery.title }}</a>
<a href="{{ gallery.url }}" target="_self" class="home__nav-link" tabindex="-1">{{ gallery.title }}</a>
</div>
{% set navItemNo = navItemNo + 1 %}
{% endfor %}