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

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);
}
}