New mobile menu.

This commit is contained in:
Mike Cao 2022-02-28 18:39:37 -08:00
parent 18efd4d101
commit 34ad1d9c39
14 changed files with 189 additions and 153 deletions

View file

@ -1,17 +1,6 @@
.navbar {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.burger {
display: none;
}
.header {
display: flex;
align-items: center;
min-height: 100px;
width: 100%;
}
@ -27,16 +16,8 @@
margin-right: 12px;
}
.nav {
display: flex;
align-items: center;
font-size: var(--font-size-normal);
font-weight: 600;
width: 100%;
justify-content: space-between;
}
.items {
.links {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
@ -44,7 +25,7 @@
font-weight: 600;
}
.nav a + a {
.links a + a {
margin-left: 40px;
}
@ -55,13 +36,13 @@
}
@media only screen and (max-width: 992px) {
.nav {
font-size: var(--font-size-large);
justify-content: space-between;
margin: 20px 0;
.header .buttons {
flex: 1;
}
.items {
flex-wrap: wrap;
.links {
order: 2;
margin: 20px 0;
min-width: 100%;
}
}
@ -70,47 +51,14 @@
padding: 0 15px;
}
.title {
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.nav {
font-size: var(--font-size-normal);
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
position: relative;
}
.items {
display: flex;
justify-content: unset;
font-size: var(--font-size-normal);
font-weight: 600;
}
.items > div {
.buttons,
.links {
display: none;
}
.header .active {
display: inherit;
width: 100%;
}
.items a {
width: 100%;
}
.burger {
display: block;
background: none;
border: 1px solid var(--gray900);
border-radius: 4px;
cursor: pointer;
position: absolute;
top: 0;
right: 0;
.title {
flex: 1;
padding: 0.5rem;
margin-bottom: 0.5rem;
}
}