actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Don't use CSS variables in media queries 

since they don't work :'(
This commit is contained in:
Matt Ickstadt 2018-07-26 14:26:34 -05:00
parent 4c87a0b5f0
commit e88970d172
2 changed files with 4 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/theme/css/chrome.css
View File

@ -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);

4
src/theme/css/variables.css
View File

@ -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 */