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

Add main navigation menu

Browse source
This commit is contained in:
Paul Nicoué 2022-06-07 16:50:09 +02:00
parent e80094dfd8
commit 9bda79a1d5
6 changed files with 145 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -44,8 +44,9 @@
// Colors
--black: #000;
--transparent-black: rgba(0, 0, 0, 0.8);
--jet: #333333;
--spanish-gray: #999999;
--light-gray: #d6d6d6;
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.8);
}

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":"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,wBACA,cACA,8CAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCC1ER,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,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,4CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBAGJ,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,uBACA,wBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACA,sDACA,iDACA,8CAEA,4BACC,kBACA,UACA,WACM,0CACA,qCACA,kCAGJ,2FAGF,8BAUF,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,sDACA,iDACA,8CAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,qFAGC,8BAMD,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,0FACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,sBACA,cACA,8CAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCC3ER,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,+DAUR,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,eACA,aACA,oBACA,oBACA,aACA,4BACA,6BACG,0BACA,sBACH,wBACA,sBACA,mBACA,gBACA,0CACA,6DACA,+CACA,0CACA,uCAEA,+BACC,oCACG,gCACA,4BAGJ,4BACC,kBAGD,wBACC,WAUF,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"}

123
assets/css/style.scss
View file

@ -87,6 +87,10 @@ body {
/ 1fr;
}
// .body--hidden-overflow-y {
// overflow-y: hidden;
// }
header {
grid-area: header;
}
@ -130,7 +134,7 @@ footer {
&--fixed {
position: fixed;
top: calc(-1 * var(--header-bar-height));
border-bottom: 1px solid var(--spanish-gray);
border-bottom: 1px solid var(--light-gray);
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
@ -157,8 +161,12 @@ footer {
}
.header-bar__nav-button {
position: relative;
z-index: 2;
width: var(--icon-size);
height: var(--icon-size);
padding: 0;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: var(--jet);
@ -166,30 +174,108 @@ footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
-webkit-transition:
transform 200ms ease-in-out,
background-color 400ms ease-in-out;
-o-transition:
transform 200ms ease-in-out,
background-color 400ms ease-in-out;
transition:
transform 200ms ease-in-out,
background-color 400ms ease-in-out;
svg {
width: 100%;
height: 100%;
padding: 10%;
flex-shrink: 0;
-webkit-transition:
opacity 400ms ease-in-out,
transform 400ms ease-in-out;
-o-transition:
opacity 400ms ease-in-out,
transform 400ms ease-in-out;
transition:
opacity 400ms ease-in-out,
transform 400ms ease-in-out;
}
svg:nth-child(1) {
fill: var(--white);
width: 90%;
height: 90%;
-webkit-transition: fill 200ms ease-in-out;
-o-transition: fill 200ms ease-in-out;
transition: fill 200ms ease-in-out;
opacity: 1;
}
svg:nth-child(2) {
fill: var(--black);
opacity: 0;
}
&:hover,
&:focus,
&:active {
background-color: var(--black);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
&--custom-focus {
background-color: var(--white);
svg {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
svg:nth-child(1) {
opacity: 0;
}
svg:nth-child(2) {
opacity: 1;
}
}
}
.header-bar__nav-menu {
position: fixed;
z-index: 1;
top: 0;
left: 100vw;
min-width: 25vw;
height: 100vh;
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-align: center;
-ms-flex-align: center;
align-items: center;
overflow-y: auto;
background-color: var(--transparent-black);
padding: calc(2rem + var(--header-bar-height)) 4rem 2rem 4rem;
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
&--visible {
-webkit-transform: translateX(calc(-1 * 100%));
-ms-transform: translateX(calc(-1 * 100%));
transform: translateX(calc(-1 * 100%));
}
li + li {
margin: 2rem 0 0 0;
}
a {
color: white;
}
}
// ----------------------------------------------------------------------------
@ -573,9 +659,9 @@ footer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
-webkit-transition: transform 200ms ease-in-out;
-o-transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
+ a {
margin: 0 0 0 1rem;
@ -590,9 +676,8 @@ footer {
&:hover,
&:focus,
&:active {
background-color: var(--black);
transform: scale(1.1);
}
}

22
assets/js/app.js
View file

@ -23,6 +23,11 @@ let videoPlayers = [];
const headerBar = document.querySelector('.header-bar');
let scrollOffset = 0;
// NAVIGATION MENU ANIMATION //
const mainNavBtn = document.querySelector('.header-bar__nav-button');
const mainNavMenu = document.querySelector('.header-bar__nav-menu');
// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
@ -243,6 +248,19 @@ function toggleHeaderBar() {
}
}
// NAVIGATION MENU ANIMATION //
// Show main navigation menu on button click event
function showMainNavMenu() {
if (mainNavBtn && mainNavMenu) {
mainNavBtn.addEventListener('click', function(e) {
mainNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
mainNavMenu.classList.toggle('header-bar__nav-menu--visible');
// document.body.classList.toggle('body--hidden-overflow-y');
});
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -270,3 +288,7 @@ toggleVideosFullScreen();
document.addEventListener('scroll', function() {
toggleHeaderBar();
});
// NAVIGATION MENU ANIMATION //
showMainNavMenu();

16
site/templates/base.twig
View file

@ -28,11 +28,25 @@
<nav class="header-bar__nav" aria-label="Menu">
<button class="header-bar__nav-button" tabindex="-1" aria-hidden="true">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
<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>
<svg viewBox="0 0 48 48" fill="currentColor">
<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">
<li class="header-bar__nav-item">
<a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
</li>
<li class="header-bar__nav-item">
<a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
</li>
{% for gallery in pages.template('gallery') %}
<li class="header-bar__nav-item">
<a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
</li>
{% endfor %}
</ul>
</nav>