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

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

@ -38,53 +38,7 @@
--ifm-navbar-item-padding-vertical: 0rem;
--ifm-navbar-item-padding-horizontal: 0rem;
--ifm-code-border-radius: 1rem;
}
/* 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;
}
--ifm-navbar-sidebar-width: 20rem;
}
.card {
@ -95,6 +49,7 @@
}
}
.dropdown__menu {
padding: 0.5rem 0 !important;
box-shadow: var(--drop-shadow-one);
@ -154,21 +109,76 @@
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 */
@media screen and (max-width: 768px) {
@media screen and (max-width: 996px) {
.navbar-sidebar__item {
padding: 1rem;
}
.navbar-sidebar {
border-radius: 0 24px 24px 0;
width: 20rem !important;
}
.menu__list-item {
margin-top: 0.5rem !important;
}
.menu__list-item-collapsible:hover {
background-color: var(--grey-one);
}
.menu__list{
margin-top: 1.5rem;
}
@ -187,6 +197,7 @@
background: var(--ifm-menu-link-sublist-icon) 50% 50% / 1.5rem 1.5rem no-repeat;
}
/* custom hamburger menu */
.navbar-sidebar .navbar__logo {
display: none;
@ -226,7 +237,7 @@
width: 24px;
height: 2px;
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,
@ -243,18 +254,22 @@
transform: translateY(6.5px);
}
/* ANIMATION */
.menu-btn.open .menu-btn__burger {
/* hamburger animation */
[aria-expanded="true"].navbar__toggle {
transform: translateX(-10px);
background: transparent;
}
[aria-expanded="true"].navbar__toggle svg {
transform: translateX(-10px);
background-color: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
[aria-expanded="true"].navbar__toggle::before {
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);
}
}