tarion/tarion.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile navbar

Browse source
This commit is contained in:
Patrick Schwarzer 2025-05-12 19:04:58 +02:00
parent 6846632d42
commit 4187790a4b
3 changed files with 163 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

124
index.css
View file

@ -425,3 +425,127 @@ body.light-mode .contact-container h1 {
footer a {
transition: background-color 0.3s ease, transform 0.15s ease;
}
/* Mobile Compat */
.mobile-nav, .mobile-nav-toggle {
display: none;
}
@media (max-width: 768px) {
nav ul {
display: none;
}
.dark-mode-toggle {
display: none;
}
header {
z-index: 100;
}
.mobile-nav-toggle {
display: block;
margin-left: auto;
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
background: none;
border: none;
}
body.light-mode .mobile-nav-toggle {
color: rgb(28, 33, 37);
}
.mobile-nav {
display: block;
position: fixed;
right: -18rem;
width: 18rem;
height: 100vh;
background-color: rgb(34, 40, 44);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 50;
}
body.light-mode .mobile-nav {
background-color: #ffffff;
}
.mobile-nav.active {
right: 0;
}
.mobile-nav ul {
width: 100%;
margin-top: 2.5rem;
list-style: none;
display: flex;
flex-direction: column;
}
.mobile-nav li {
margin-left: 2rem;
}
.mobile-nav .links {
margin-left: auto;
margin-right: auto;
margin-top: 1.5rem;
}
.mobile-nav .links a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: rgb(44, 49, 54);
color: white;
font-size: 20px;
border: none;
border-radius: 50%;
text-decoration: none;
transition: color 0s;
transition: transform 0.15s ease;
}
.mobile-nav .links a:hover {
background-color: #5865f2;
transform: translateY(-3px);
}
body.light-mode .mobile-nav .links a {
background-color: #f7f7f7;
color: rgb(29, 29, 29);
}
body.light-mode .mobile-nav .links a:hover {
color: white;
background-color: #5865f2;
}
.dark-mode-toggle-mobile {
width: 48px;
height: 48px;
align-items: center;
justify-content: center;
background-color: rgb(40, 45, 48);
color: white;
font-size: 24px;
border: none;
border-radius: 50%;
}
.dark-mode-toggle-mobile:hover {
background-color: rgb(28, 33, 37);
}
body.light-mode .dark-mode-toggle-mobile {
color: #242424;
background-color: #f7f7f7;
}
body.light-mode .dark-mode-toggle-mobile:hover {
background-color: #e0e0e0;
}
}