Vincent Mahnke
945820ec5b
- Add local Lucide icon system (5 optimized icons) - Create Apple-style bottom navigation bar (fixed at bottom on mobile) - Add language toggle (replaces dropdown selector) - Improve theme support with proper light/dark mode colors - Add comprehensive ARIA labels and semantic HTML - Hide main menu on mobile (≤666px) when bottom nav is active - Add hreflang attributes for language switching Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
94 lines
1.7 KiB
CSS
94 lines
1.7 KiB
CSS
/* The mobile navigation stylesheet for this theme. */
|
|
|
|
@layer mobilemenu {
|
|
.mobile-bottom-nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
background-color: var(--color-mobile-menu);
|
|
border-top: 1px solid var(--color-border);
|
|
z-index: 20;
|
|
font-family: var(--ff-headings);
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 666px) {
|
|
.mobile-bottom-nav {
|
|
display: block;
|
|
}
|
|
|
|
body {
|
|
padding-bottom: 5rem;
|
|
}
|
|
}
|
|
|
|
.mobile-bottom-nav__list {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 5rem;
|
|
list-style: none;
|
|
}
|
|
|
|
.mobile-bottom-nav__item {
|
|
list-style: none;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.mobile-bottom-nav__link {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.25rem;
|
|
padding: 0.5rem;
|
|
color: light-dark(var(--color-black), var(--color-grey-300));
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
transition: color 150ms ease;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.icon {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
flex-shrink: 0;
|
|
display: block;
|
|
color: inherit;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
color: light-dark(var(--color-black), var(--color-white));
|
|
outline: none;
|
|
}
|
|
|
|
&[aria-current="page"] {
|
|
color: var(--color-link);
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
.mobile-bottom-nav__label {
|
|
display: block;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|