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

Edit header navigation (main navigation menu)

Browse source
This commit is contained in:
Paul Nicoué 2022-06-09 17:30:38 +02:00
parent 9bda79a1d5
commit e90e57ff02
6 changed files with 186 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

103
assets/css/style.scss
View file

@ -87,9 +87,9 @@ body {
/ 1fr;
}
// .body--hidden-overflow-y {
// overflow-y: hidden;
// }
.body--hidden-overflow-y {
overflow-y: hidden;
}
header {
grid-area: header;
@ -244,37 +244,92 @@ footer {
z-index: 1;
top: 0;
left: 100vw;
min-width: 25vw;
min-width: 100vw;
max-width: 100vw;
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;
padding: calc(var(--header-bar-height) + 4rem) 4rem 4rem 4rem;
background-color: var(--transparent-black);
padding: calc(2rem + var(--header-bar-height)) 4rem 2rem 4rem;
color: var(--white);
overflow-x: hidden;
overflow-y: auto;
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
> li {
+ li {
border-top: 1px solid var(--spanish-gray);
}
li {
margin: 0 0 0 2rem;
border-top: 1px solid var(--granite-gray);
}
a,
span {
display: block;
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);
}
}
.header-bar__nav-item--active {
list-style: disc;
a {
color: var(--white);
}
}
&--visible {
-webkit-transform: translateX(calc(-1 * 100%));
-ms-transform: translateX(calc(-1 * 100%));
transform: translateX(calc(-1 * 100%));
}
-ms-transform: translateX(calc(-1 * 100%));
transform: translateX(calc(-1 * 100%));
li + li {
margin: 2rem 0 0 0;
}
@for $i from 1 through 20 {
a {
color: white;
.header-bar__nav-item-#{$i} {
a,
span {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: transform calc(400ms + $i * 100ms) ease-in-out;
-o-transition: transform calc(400ms + $i * 100ms) ease-in-out;
transition: transform calc(400ms + $i * 100ms) ease-in-out;
}
}
}
}
}
@media screen and (min-width: $tablet-media-query) {
.header-bar__nav-menu {
min-width: 50vw;
}
}
@media screen and (min-width: $desktop-media-query) {
.header-bar__nav-menu {
min-width: 25vw;
}
}