158 lines
4.4 KiB
SCSS
158 lines
4.4 KiB
SCSS
@media (max-width: $maxWidth) {
|
|
.main-inner {
|
|
width: auto !important;
|
|
}
|
|
.anchor-link {
|
|
position: relative;
|
|
transform: none;
|
|
float: right;
|
|
}
|
|
@if (not $displayBackToTopOnMobile) {
|
|
#back-to-top {
|
|
display: none;
|
|
}
|
|
}
|
|
@if ($headerLayoutFlex) {
|
|
.header-inner {
|
|
width: 100%;
|
|
}
|
|
.site-brand {
|
|
margin-left: 1em;
|
|
}
|
|
@if ($enableNavToggle) {
|
|
.header-inner {
|
|
display: block;
|
|
margin: 0;
|
|
max-width: none;
|
|
}
|
|
.nav-toggle {
|
|
display: block;
|
|
}
|
|
.nav {
|
|
display: none;
|
|
text-align: center;
|
|
margin: 2em 0;
|
|
}
|
|
.menu {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
align-items: center;
|
|
}
|
|
.menu-item {
|
|
margin: 0;
|
|
padding: 1em;
|
|
.icon {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.menu-item-name {
|
|
display: block;
|
|
}
|
|
.header.open {
|
|
.nav {
|
|
display: block;
|
|
animation: appear $duration;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@keyframes appear {
|
|
0% {
|
|
opacity: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
transform: scaleY(0);
|
|
transform-origin: top;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
height: $navHeight;
|
|
margin: 2em 0;
|
|
transform: scaleY(1);
|
|
transform-origin: top;
|
|
}
|
|
}
|
|
.nav-curtain {
|
|
animation: appearCurtain $duration;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@keyframes appearCurtain {
|
|
0% {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.header.fade {
|
|
.nav {
|
|
display: block;
|
|
animation: fade $duration;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 1;
|
|
height: $navHeight;
|
|
margin: 2em 0;
|
|
transform: scaleY(1);
|
|
transform-origin: top;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
height: 0;
|
|
margin: 0;
|
|
transform: scaleY(0);
|
|
transform-origin: top;
|
|
}
|
|
}
|
|
.nav-curtain {
|
|
animation: fadeCurtain $duration;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@keyframes fadeCurtain {
|
|
0% {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
#langs li {
|
|
width: auto;
|
|
}
|
|
@if ($enableSearch) {
|
|
.search-item {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.search .search-input {
|
|
margin-left: 0.5em;
|
|
flex: 1;
|
|
}
|
|
}
|
|
} @else {
|
|
.nav {
|
|
margin-right: 1em;
|
|
}
|
|
}
|
|
} @else {
|
|
.menu {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
word-break: break-all;
|
|
}
|
|
.menu-item {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|