tfw
6b88f6f8c1
Added consistent left padding to sub-navigation items and links to improve visual hierarchy. Overrode Material theme's media query to ensure primary navigation padding remains uniform across breakpoints.
164 lines
3.1 KiB
SCSS
164 lines
3.1 KiB
SCSS
// Navigation and tabs styling
|
|
|
|
// Tabs styling
|
|
.md-tabs {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.md-tabs__item {
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
|
|
&:after {
|
|
content: "";
|
|
background: #fff;
|
|
position: relative;
|
|
display: block;
|
|
height: 4px;
|
|
width: 22px;
|
|
margin-top: 6px;
|
|
margin-bottom: -0.2rem;
|
|
opacity: 0;
|
|
transition: .3s all ease;
|
|
}
|
|
|
|
&:hover {
|
|
transition: .3s all ease;
|
|
|
|
&:after {
|
|
opacity: .7;
|
|
transition: .3s all ease;
|
|
}
|
|
}
|
|
|
|
&.md-tabs__item--active {
|
|
&:after {
|
|
opacity: 1;
|
|
transition: .3s all ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
.md-tabs__list {
|
|
height: 4rem;
|
|
|
|
// Remove left margin/padding from the first tab item to align with content container
|
|
.md-tabs__item:first-child {
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.md-tabs__link {
|
|
opacity: 1;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
// Navigation styling
|
|
.md-nav__container > .md-nav__link:first-child {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.md-nav__title {
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
}
|
|
|
|
.md-nav__container>.md-nav__link {
|
|
text-transform: uppercase !important;
|
|
}
|
|
|
|
// Secondary navigation (TOC) styling - make all text 80% of the normal size
|
|
.md-nav.md-nav--secondary {
|
|
font-size: 80%; // Set font size to 80% of the parent element
|
|
|
|
// Ensure all child elements inherit the font size
|
|
* {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
|
|
// Footer navigation
|
|
.md-footer__title {
|
|
font-size: 100%;
|
|
}
|
|
|
|
.md-footer__direction {
|
|
font-size: 100%;
|
|
opacity: .7;
|
|
}
|
|
|
|
// Footer Navigation für zusätzliche Links
|
|
.md-footer-meta .md-footer-meta__inner {
|
|
.md-footer-copyright {
|
|
width: auto;
|
|
margin: auto 1rem 0.5rem 0;
|
|
}
|
|
}
|
|
|
|
.md-footer-meta.md-typeset a {
|
|
color: #fff !important;
|
|
}
|
|
|
|
// Füge zusätzliche Navigation im Footer hinzu
|
|
.md-footer-custom-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 0.5rem 0;
|
|
text-transform: uppercase;
|
|
|
|
a {
|
|
color: var(--md-footer-fg-color);
|
|
margin-right: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
|
|
&:hover {
|
|
color: var(--md-footer-fg-color--light);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide Impressum and Datenschutz from navigation (top tabs and sidebar)
|
|
.md-tabs__link[href^="/impressum/"],
|
|
.md-tabs__link[href^="/datenschutzerklaerung/"],
|
|
.md-nav__link[href^="/impressum/"],
|
|
.md-nav__link[href^="/datenschutzerklaerung/"] {
|
|
display: none;
|
|
}
|
|
|
|
// Content inner margin
|
|
.md-content__inner {
|
|
margin: 0 0 1.2rem;
|
|
padding-top: .6rem;
|
|
}
|
|
|
|
// Add a small left padding to sub-navigation items and lists
|
|
.md-nav__list .md-nav__list {
|
|
padding-left: 0.5rem;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.md-nav__list .md-nav__list .md-nav__item {
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
// Add a small left padding to sub-navigation links
|
|
.md-nav__list .md-nav__list .md-nav__link {
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
}
|
|
|
|
// Override Material theme's media query that adds padding to primary navigation
|
|
@media screen and (min-width: 76.25em) {
|
|
[dir=ltr] .md-nav--primary .md-nav__list {
|
|
padding-left: 0;
|
|
}
|
|
|
|
// Ensure sub-navigation has consistent padding
|
|
[dir=ltr] .md-nav--primary .md-nav__list .md-nav__list {
|
|
padding-left: 0.5rem;
|
|
}
|
|
}
|