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

Edit home navigation

Browse source
This commit is contained in:
Paul Nicoué 2022-05-12 11:22:16 +02:00
parent 586763f249
commit d149a90c80
7 changed files with 96 additions and 305 deletions
Download patch file Download diff file Expand all files Collapse all files

313
assets/css/style.scss
View file

@ -110,6 +110,15 @@ footer {
height: var(--header-bar-height);
margin: auto;
padding: var(--header-bar-vertical-padding) var(--header-bar-horizontal-padding);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header-bar__logo {
@ -120,6 +129,39 @@ footer {
text-decoration: none;
}
.header-bar__nav {
position: relative;
z-index: 1;
}
.header-bar__nav-button {
background-color: var(--white);
width: 32px;
height: 32px;
padding: 5px 0;
border: none;
cursor: pointer;
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-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
.header-bar__nav-button-line-1,
.header-bar__nav-button-line-2,
.header-bar__nav-button-line-3 {
width: 100%;
height: 4px;
border-radius: 50px;
background-color: var(--jet);
}
}
// ----------------------------------------------------------------------------
// MAIN
// ----------------------------------------------------------------------------
@ -170,13 +212,31 @@ footer {
.home__nav--2-items {
.home__nav-item-1 {
grid-area: top;
place-self: end center;
grid-area: top-left;
place-self: end end;
-webkit-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
}
.home__nav-item-2 {
grid-area: bottom;
place-self: start center;
grid-area: top-right;
place-self: end start;
-webkit-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
}
}
@ -218,35 +278,6 @@ footer {
.home__nav--4-items {
.home__nav-item-1 {
grid-area: top;
place-self: end center;
}
.home__nav-item-2 {
grid-area: left;
place-self: center end;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.home__nav-item-3 {
grid-area: right;
place-self: center start;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.home__nav-item-4 {
grid-area: bottom;
place-self: start center;
}
}
.home__nav--5-items {
.home__nav-item-1 {
grid-area: top-left;
place-self: end end;
@ -276,131 +307,6 @@ footer {
}
.home__nav-item-3 {
grid-area: left;
place-self: center end;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.home__nav-item-4 {
grid-area: right;
place-self: center start;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.home__nav-item-5 {
grid-area: bottom;
place-self: start center;
}
}
.home__nav--6-items {
.home__nav-item-1 {
grid-area: top;
place-self: end center;
}
.home__nav-item-2 {
grid-area: top-left;
place-self: end end;
-webkit-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
}
.home__nav-item-3 {
grid-area: top-right;
place-self: end start;
-webkit-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
}
.home__nav-item-4 {
grid-area: left;
place-self: center end;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.home__nav-item-5 {
grid-area: right;
place-self: center start;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.home__nav-item-6 {
grid-area: bottom;
place-self: start center;
}
}
.home__nav--7-items {
.home__nav-item-1 {
grid-area: top-left;
place-self: end end;
-webkit-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
}
.home__nav-item-2 {
grid-area: top-right;
place-self: end start;
-webkit-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
}
.home__nav-item-3 {
grid-area: left;
place-self: center end;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.home__nav-item-4 {
grid-area: right;
place-self: center start;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.home__nav-item-5 {
grid-area: bottom-left;
place-self: start end;
-webkit-transform:
@ -414,92 +320,7 @@ footer {
translateY(calc(var(--home-nav-item-translation) * -1));
}
.home__nav-item-6 {
grid-area: bottom-right;
place-self: start start;
-webkit-transform:
rotate(-45deg)
translateY(calc(var(--home-nav-item-translation) * -1));
-ms-transform:
rotate(-45deg)
translateY(calc(var(--home-nav-item-translation) * -1));
transform:
rotate(-45deg)
translateY(calc(var(--home-nav-item-translation) * -1));
}
.home__nav-item-7 {
grid-area: bottom;
place-self: start center;
}
}
.home__nav--8-items {
.home__nav-item-1 {
grid-area: top;
place-self: end center;
}
.home__nav-item-2 {
grid-area: top-left;
place-self: end end;
-webkit-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(-45deg)
translateY(var(--home-nav-item-translation));
}
.home__nav-item-3 {
grid-area: top-right;
place-self: end start;
-webkit-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
-ms-transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
transform:
rotate(45deg)
translateY(var(--home-nav-item-translation));
}
.home__nav-item-4 {
grid-area: left;
place-self: center end;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.home__nav-item-5 {
grid-area: right;
place-self: center start;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.home__nav-item-6 {
grid-area: bottom-left;
place-self: start end;
-webkit-transform:
rotate(45deg)
translateY(calc(var(--home-nav-item-translation) * -1));
-ms-transform:
rotate(45deg)
translateY(calc(var(--home-nav-item-translation) * -1));
transform:
rotate(45deg)
translateY(calc(var(--home-nav-item-translation) * -1));
}
.home__nav-item-7 {
grid-area: bottom-right;
place-self: start start;
-webkit-transform:
@ -512,15 +333,11 @@ footer {
rotate(-45deg)
translateY(calc(var(--home-nav-item-translation) * -1));
}
.home__nav-item-8 {
grid-area: bottom;
place-self: start center;
}
}
.home__nav-link {
color: var(--black);
font-size: var(--h3-font-size);
text-decoration: none;
opacity: 0;
-webkit-transition: opacity 600ms ease-in-out;