93 lines
1.7 KiB
SCSS
93 lines
1.7 KiB
SCSS
@use "@styles/var";
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
|
|
$panel-width: "100vw - var(--button-width) - 2 * #{var.$block-spacing}";
|
|
$panel-width-max: $panel-width;
|
|
$panel-actual-width: $panel-width;
|
|
|
|
:root {
|
|
--button-width: 51px;
|
|
}
|
|
|
|
.desktop {
|
|
display: none !important;
|
|
}
|
|
|
|
.projects {
|
|
.panel-control-elem {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.panel {
|
|
width: calc(#{$panel-width});
|
|
max-width: calc(#{$panel-width});
|
|
}
|
|
|
|
#settings #title {
|
|
left: calc(100% + var(--button-width) + 2 * var.$block-spacing);
|
|
max-width: calc(100vw - (var(--button-width) + 2 * var.$block-spacing) * 2);
|
|
text-align: center;
|
|
width: 100%;
|
|
transition: none;
|
|
}
|
|
|
|
#settings #settings-panel .settings-header {
|
|
padding: var.$block-spacing;
|
|
|
|
img.logo-title {
|
|
margin-top: var.$elem-spacing;
|
|
}
|
|
}
|
|
|
|
&.with-right-panel, &.with-left-panel {
|
|
#title {
|
|
max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
|
|
}
|
|
|
|
#submap {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
&.with-right-panel {
|
|
.panel.panel-left {
|
|
transform: translateX(-200vw);
|
|
}
|
|
|
|
.panel.panel-right {
|
|
transform: translateX(calc(var(--button-width) + var.$block-spacing * 2));
|
|
}
|
|
}
|
|
|
|
&.with-left-panel {
|
|
.panel.panel-left {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.panel.panel-right {
|
|
transform: translateX(200vw);
|
|
}
|
|
}
|
|
}
|
|
|
|
.lightbox .lb-outerContainer .lb-container .lb-nav {
|
|
a.lb-prev, a.lb-next {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
a.lb-prev::before {
|
|
left: 1em;
|
|
}
|
|
|
|
a.lb-next::before {
|
|
right: 1em;
|
|
}
|
|
}
|
|
|
|
#map .maplibregl-ctrl-bottom-right {
|
|
display: none;
|
|
}
|
|
}
|