ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-29 04:40:14 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve mobile nav consistency

Browse Source
This commit is contained in:
afn 2023-08-10 17:02:36 -04:00
parent 3e54c923c6
commit fbfdad192c
1 changed files with 71 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
docusaurus/src/css/custom.css
View File

@ -38,53 +38,7 @@
--ifm-navbar-item-padding-vertical: 0rem; --ifm-navbar-item-padding-vertical: 0rem;
--ifm-navbar-item-padding-horizontal: 0rem; --ifm-navbar-item-padding-horizontal: 0rem;
--ifm-code-border-radius: 1rem; --ifm-code-border-radius: 1rem;
} --ifm-navbar-sidebar-width: 20rem;
/* navigation */
.navbar {
height: 70px;
padding: 0 2.5rem;
}
.navbar__items {
gap: 1rem;
}
.navbar__item.dropdown .navbar__link {
background-color: #2a3645;
color: #9ed5ff;
padding: 10px 16px;
&:hover {
background-color: #2a3645;
color: #9ed5ff;
}
}
.navbar__link {
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.02rem;
color: #acc1d2;
border-radius: 10px;
padding: 10px 16px;
transition: 0.3s background-color var(--bezier-one);
&:hover {
border-color: hsl(221, 17%, 26%) !important;
background-color: #252b31;
color: #acc1d2;
}
}
.navbar__link--active {
background-color: #2a3645;
color: #9ed5ff;
&:hover {
background-color: #2a3645;
color: #9ed5ff;
}
} }
.card { .card {
@ -95,6 +49,7 @@
} }
} }
.dropdown__menu { .dropdown__menu {
padding: 0.5rem 0 !important; padding: 0.5rem 0 !important;
box-shadow: var(--drop-shadow-one); box-shadow: var(--drop-shadow-one);
@ -154,22 +109,77 @@
filter: brightness(125%); filter: brightness(125%);
} }
.menu__list-item-collapsible--active,
.menu__list-item-collapsible--active:hover {
background-color: var(--accent-low-opacity);
}
/* navigation */
.navbar {
height: 70px;
padding: 0 2.5rem;
}
.navbar__items {
gap: 1rem;
}
.navbar__item.dropdown .navbar__link {
background-color: #2a3645;
color: #9ed5ff;
padding: 10px 16px;
&:hover {
background-color: #2a3645;
color: #9ed5ff;
}
}
.navbar__link {
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.02rem;
color: #acc1d2;
border-radius: 10px;
padding: 10px 16px;
transition: 0.3s background-color var(--bezier-one);
&:hover {
border-color: hsl(221, 17%, 26%) !important;
background-color: #252b31;
color: #acc1d2;
}
}
.navbar__link--active {
background-color: #2a3645;
color: #9ed5ff;
&:hover {
background-color: #2a3645;
color: #9ed5ff;
}
}
/* mobile nav menu */ /* mobile nav menu */
@media screen and (max-width: 768px) { @media screen and (max-width: 996px) {
.navbar-sidebar__item { .navbar-sidebar__item {
padding: 1rem; padding: 1rem;
} }
.navbar-sidebar { .navbar-sidebar {
border-radius: 0 24px 24px 0; border-radius: 0 24px 24px 0;
width: 20rem !important;
} }
.menu__list-item { .menu__list-item {
margin-top: 0.5rem !important; margin-top: 0.5rem !important;
} }
.menu__list { .menu__list-item-collapsible:hover {
background-color: var(--grey-one);
}
.menu__list{
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -187,6 +197,7 @@
background: var(--ifm-menu-link-sublist-icon) 50% 50% / 1.5rem 1.5rem no-repeat; background: var(--ifm-menu-link-sublist-icon) 50% 50% / 1.5rem 1.5rem no-repeat;
} }
/* custom hamburger menu */ /* custom hamburger menu */
.navbar-sidebar .navbar__logo { .navbar-sidebar .navbar__logo {
display: none; display: none;
@ -226,7 +237,7 @@
width: 24px; width: 24px;
height: 2px; height: 2px;
background: var(--grey-five); background: var(--grey-five);
transition: all 0.3s var(--bezier-one); transition: transform 0.3s var(--bezier-one), background-color 0.3s var(--bezier-one);
} }
.navbar__toggle::before, .navbar__toggle::before,
@ -243,18 +254,22 @@
transform: translateY(6.5px); transform: translateY(6.5px);
} }
/* ANIMATION */ /* hamburger animation */
.menu-btn.open .menu-btn__burger { [aria-expanded="true"].navbar__toggle {
transform: translateX(-10px); transform: translateX(-10px);
background: transparent; }
[aria-expanded="true"].navbar__toggle svg {
transform: translateX(-10px);
background-color: transparent;
box-shadow: none; box-shadow: none;
} }
.menu-btn.open .menu-btn__burger::before { [aria-expanded="true"].navbar__toggle::before {
transform: rotate(45deg) translate(10px, -10px); transform: rotate(45deg) translate(10px, -10px);
} }
.menu-btn.open .menu-btn__burger::after { [aria-expanded="true"].navbar__toggle::after {
transform: rotate(-45deg) translate(10px, 10px); transform: rotate(-45deg) translate(10px, 10px);
} }
} }