Fix several CSS bugs

This commit is contained in:
Matt Ickstadt 2018-07-25 16:02:31 -05:00
parent cc745d04f2
commit 3119a7e4bf
2 changed files with 6 additions and 6 deletions

View File

@ -23,7 +23,7 @@ a > .hljs {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 101; z-index: 101;
margin: auto (- var(--page-padding)); margin: auto calc(0px - var(--page-padding));
} }
#menu-bar > #menu-bar-sticky-container { #menu-bar > #menu-bar-sticky-container {
display: flex; display: flex;
@ -36,7 +36,7 @@ a > .hljs {
.js #menu-bar > #menu-bar-sticky-container { .js #menu-bar > #menu-bar-sticky-container {
transition: transform 0.3s; transition: transform 0.3s;
} }
.menu-bar.bordered > #menu-bar-sticky-container { #menu-bar.bordered > #menu-bar-sticky-container {
border-bottom-color: var(--table-border-color); border-bottom-color: var(--table-border-color);
} }
#menu-bar i, #menu-bar .icon-button { #menu-bar i, #menu-bar .icon-button {
@ -160,7 +160,7 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
.nav-wrapper { display: block; } .nav-wrapper { display: block; }
} }
@media only screen and (max-width: var(--page-plus-sidebar-width) + var(--sidebar-width)) { @media only screen and (max-width: calc(var(--page-plus-sidebar-width) + var(--sidebar-width))) {
.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; }
} }
@ -309,7 +309,7 @@ ul#searchresults span.teaser em {
line-height: 2em; line-height: 2em;
} }
.sidebar-hidden .sidebar { .sidebar-hidden .sidebar {
transform: translateX(- var(--sidebar-width)); transform: translateX(calc(0px - var(--sidebar-width)));
} }
.sidebar::-webkit-scrollbar { .sidebar::-webkit-scrollbar {
background: var(--sidebar-bg); background: var(--sidebar-bg);

View File

@ -6,8 +6,8 @@
--page-padding: 15px; --page-padding: 15px;
--content-max-width: 750px; --content-max-width: 750px;
--content-min-width: 320px; --content-min-width: 320px;
--page-plus-sidebar-width: var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2; --page-plus-sidebar-width: calc(var(--content-max-width) + var(--sidebar-width) + var(--page-padding) * 2);
--sidebar-reflow-width: var(--sidebar-width) + var(--content-min-width); --sidebar-reflow-width: calc(var(--sidebar-width) + var(--content-min-width));
--narrow-device-max-width: 420px; --narrow-device-max-width: 420px;
} }