jan/website/public/styles/navigation.css

49 lines
965 B
CSS

/* Navigation links for regular docs pages */
.custom-nav-links {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0 1rem;
}
.custom-nav-links .nav-link {
display: inline-flex;
align-items: center;
padding: 0.5rem 0.875rem;
border-radius: 0.375rem;
color: var(--sl-color-gray-2);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.2s ease;
white-space: nowrap;
}
.custom-nav-links .nav-link:hover {
color: var(--sl-color-text);
background: var(--sl-color-gray-6);
}
.custom-nav-links .nav-link[aria-current="page"] {
color: var(--sl-color-text);
background: var(--sl-color-gray-6);
}
/* Responsive design */
@media (max-width: 768px) {
.custom-nav-links {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.custom-nav-links {
margin: 0 0.5rem;
}
.custom-nav-links .nav-link {
padding: 0.375rem 0.625rem;
font-size: 0.8125rem;
}
}