refactor: use a variable for the menu bar height

rust-lang · Jul 20, 2019 · c9f5426 · c9f5426
1 parent fe815a0
commit c9f5426
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/theme/css/chrome.css b/src/theme/css/chrome.css
@@ -46,7 +46,7 @@ html.sidebar-visible.js #menu-bar-sticky-container {
     position: relative;
     padding: 0 8px;
     z-index: 10;
-    line-height: 50px;
+    line-height: var(--menu-bar-height);
     cursor: pointer;
     transition: color 0.5s;
 }
@@ -85,7 +85,7 @@ html.sidebar-visible.js #menu-bar-sticky-container {
     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;
@@ -123,7 +123,7 @@ html.sidebar-visible.js #menu-bar-sticky-container {
     text-decoration: none;
 
     position: fixed;
-    top: 50px; /* Height of menu-bar */
+    top: var(--menu-bar-height);
     bottom: 0;
     margin: 0;
     max-width: 150px;
@@ -412,7 +412,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;

diff --git a/src/theme/css/variables.css b/src/theme/css/variables.css
@@ -5,6 +5,7 @@
     --sidebar-width: 300px;
     --page-padding: 15px;
     --content-max-width: 750px;
+    --menu-bar-height: 50px;
 }
 
 /* Themes */