Introduce a --menu-bar-height CSS variable

This commit is contained in:
Matthew Woodcraft 2019-10-26 13:21:26 +01:00
parent 1dc482b00d
commit 86a368b726
3 changed files with 6 additions and 5 deletions

View file

@ -45,7 +45,7 @@ a > .hljs {
position: relative;
padding: 0 8px;
z-index: 10;
line-height: 50px;
line-height: var(--menu-bar-height);
cursor: pointer;
transition: color 0.5s;
}
@ -73,7 +73,7 @@ a > .hljs {
}
html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-container {
transform: translateY(-60px);
transform: translateY(calc(-10px - var(--menu-bar-height)));
}
.left-buttons {
@ -88,7 +88,7 @@ html:not(.sidebar-visible) #menu-bar:not(:hover).folded > #menu-bar-sticky-conta
display: inline-block;
font-weight: 200;
font-size: 20px;
line-height: 50px;
line-height: var(--menu-bar-height);
text-align: center;
margin: 0;
flex: 1;
@ -446,7 +446,7 @@ ul#searchresults span.teaser em {
.theme-popup {
position: absolute;
left: 10px;
top: 50px;
top: var(--menu-bar-height);
z-index: 1000;
border-radius: 4px;
font-size: 0.7em;

View file

@ -49,7 +49,7 @@ h1 a.header:target,
h2 a.header:target,
h3 a.header:target,
h4 a.header:target {
scroll-margin-top: 62px;
scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
}
.page {

View file

@ -5,6 +5,7 @@
--sidebar-width: 300px;
--page-padding: 15px;
--content-max-width: 750px;
--menu-bar-height: 50px;
}
/* Themes */