Don't use CSS variables in media queries
since they don't work :'(
This commit is contained in:
parent
4c87a0b5f0
commit
e88970d172
|
@ -47,7 +47,7 @@ a > .hljs {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.5s;
|
transition: color 0.5s;
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: var(--narrow-device-max-width)) {
|
@media only screen and (max-width: 420px) {
|
||||||
#menu-bar i, #menu-bar .icon-button {
|
#menu-bar i, #menu-bar .icon-button {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
|
@ -155,12 +155,12 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
|
||||||
right: var(--page-padding);
|
right: var(--page-padding);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: var(--page-plus-sidebar-width)) {
|
@media only screen and (max-width: 1080px) {
|
||||||
.nav-wide-wrapper { display: none; }
|
.nav-wide-wrapper { display: none; }
|
||||||
.nav-wrapper { display: block; }
|
.nav-wrapper { display: block; }
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: calc(var(--page-plus-sidebar-width) + var(--sidebar-width))) {
|
@media only screen and (max-width: 1380px) {
|
||||||
.sidebar-visible .nav-wide-wrapper { display: none; }
|
.sidebar-visible .nav-wide-wrapper { display: none; }
|
||||||
.sidebar-visible .nav-wrapper { display: block; }
|
.sidebar-visible .nav-wrapper { display: block; }
|
||||||
}
|
}
|
||||||
|
@ -321,7 +321,7 @@ ul#searchresults span.teaser em {
|
||||||
.sidebar-visible .page-wrapper {
|
.sidebar-visible .page-wrapper {
|
||||||
transform: translateX(var(--sidebar-width));
|
transform: translateX(var(--sidebar-width));
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: var(--sidebar-reflow-width)) {
|
@media only screen and (min-width: 620px) {
|
||||||
.sidebar-visible .page-wrapper {
|
.sidebar-visible .page-wrapper {
|
||||||
transform: none;
|
transform: none;
|
||||||
margin-left: var(--sidebar-width);
|
margin-left: var(--sidebar-width);
|
||||||
|
|
|
@ -5,10 +5,6 @@
|
||||||
--sidebar-width: 300px;
|
--sidebar-width: 300px;
|
||||||
--page-padding: 15px;
|
--page-padding: 15px;
|
||||||
--content-max-width: 750px;
|
--content-max-width: 750px;
|
||||||
--content-min-width: 320px;
|
|
||||||
--page-plus-sidebar-width: calc(var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2);
|
|
||||||
--sidebar-reflow-width: calc(var(--sidebar-width) + var(--content-min-width));
|
|
||||||
--narrow-device-max-width: 420px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Themes */
|
/* Themes */
|
||||||
|
|
Loading…
Reference in New Issue