Michael Schiemer
77abc65cd7
Some checks failed
Deploy Application / deploy (push) Has been cancelled
99 lines
2.4 KiB
CSS
99 lines
2.4 KiB
CSS
/**
|
|
* Navigation Components
|
|
*
|
|
* Styles for main navigation and footer navigation components
|
|
*/
|
|
|
|
/* Main Navigation */
|
|
nav[aria-label="Hauptnavigation"] {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
nav[aria-label="Hauptnavigation"] menu {
|
|
display: flex;
|
|
gap: var(--space-md, 1rem);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
align-items: center;
|
|
}
|
|
|
|
nav[aria-label="Hauptnavigation"] menu li {
|
|
margin: 0;
|
|
}
|
|
|
|
nav[aria-label="Hauptnavigation"] menu li a {
|
|
color: var(--text, currentColor);
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
|
|
border-radius: var(--radius-md, 0.375rem);
|
|
transition: all var(--duration-default, 0.2s) var(--easing-default, ease);
|
|
display: block;
|
|
}
|
|
|
|
nav[aria-label="Hauptnavigation"] menu li a:hover {
|
|
background: oklch(from var(--bg-alt, #f5f5f5) calc(l + 0.05) c h);
|
|
text-decoration: none;
|
|
}
|
|
|
|
nav[aria-label="Hauptnavigation"] menu li a[aria-current="page"] {
|
|
background: var(--accent, #007bff);
|
|
color: var(--bg, #ffffff);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Footer Navigation */
|
|
nav[aria-label="Footer Navigation"] {
|
|
margin-bottom: var(--space-md, 1rem);
|
|
}
|
|
|
|
nav[aria-label="Footer Navigation"] menu.footer-nav {
|
|
display: flex;
|
|
gap: var(--space-md, 1rem);
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
nav[aria-label="Footer Navigation"] menu.footer-nav li {
|
|
margin: 0;
|
|
}
|
|
|
|
nav[aria-label="Footer Navigation"] menu.footer-nav li a {
|
|
color: var(--muted, #6b7280);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
padding: var(--space-xs, 0.25rem) 0;
|
|
transition: color var(--duration-default, 0.2s) var(--easing-default, ease);
|
|
}
|
|
|
|
nav[aria-label="Footer Navigation"] menu.footer-nav li a:hover {
|
|
color: var(--text, currentColor);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
nav[aria-label="Footer Navigation"] menu.footer-nav li a[aria-current="page"] {
|
|
color: var(--text, currentColor);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
nav[aria-label="Hauptnavigation"] menu {
|
|
flex-direction: column;
|
|
gap: var(--space-sm, 0.5rem);
|
|
align-items: flex-start;
|
|
}
|
|
|
|
nav[aria-label="Footer Navigation"] menu.footer-nav {
|
|
flex-direction: column;
|
|
gap: var(--space-sm, 0.5rem);
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|