studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

start nav mobile

Browse source
This commit is contained in:
isUnknown 2024-09-06 18:15:43 +02:00
parent e3680dcefb
commit a23a5ba06b
6 changed files with 95 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

73
assets/css/src/nav.css
View file

@ -41,14 +41,15 @@
position: fixed;
width: 100%;
box-sizing: border-box;
top: -34rem;
top: -50rem;
z-index: 11;
background-color: var(--color-brown-light);
display: grid;
grid-template-columns: 2fr 8fr 1fr;
transition: top 0.4s var(--curve-quick-slow);
padding: 3rem var(--space-m) 3rem 1rem;
border-bottom: var(--border);
transition: top 0.6s var(--curve-quick-slow);
}
.expanded-nav.open {
top: 0rem;
@ -167,3 +168,71 @@
.main-nav .logo:hover {
scale: 1.035;
}
@media screen and (max-width: 800px) {
.main-nav__featured-pages {
display: none;
}
.expanded-nav {
width: 100vw;
height: 100vh;
top: -100vh;
display: block;
overflow: scroll;
}
.expanded-nav .close-btn {
position: absolute !important;
top: 3rem;
right: var(--space-m);
}
.expanded-nav__columns {
display: block;
margin-top: 3rem;
}
.expanded-nav__category .toggle {
transform: rotate(0deg);
transition: transform 0.2s ease-in-out;
}
.expanded-nav__category .toggle.open {
transform: rotate(90deg);
}
.expanded-nav__subcategories {
padding-left: 2.8ch;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s var(--curve-quick-slow);
}
.expanded-nav__subcategories.open {
max-height: 13rem;
}
.expanded-nav__subcategories > li:last-child {
margin-bottom: 1rem;
}
.expanded-nav__columns > li:not(.expanded-nav__links) {
border-bottom: var(--border);
margin-bottom: 1rem;
}
.expanded-nav__ticketing {
font-size: var(--font-size-h4);
padding-bottom: 1rem;
border-bottom: var(--border);
}
.expanded-nav__category {
width: 100%;
display: flex;
justify-content: space-between;
}
.expanded-nav__socials {
position: absolute;
bottom: 3rem;
}
}