feat(client): extract header height to a CSS variable

client/src/components/Header/header.css

@@ -1,3 +1,7 @@
+:root {
+  --header-height: 38px;
+}
+
 header {
   top: 0;
   position: fixed;
@@ -7,7 +11,7 @@ header {
 
 #top-nav {
   background: #006400;
-  height: 38px;
+  height: var(--header-height);
   margin-bottom: 0;
   border-radius: 0;
   border: none;
@@ -39,7 +43,7 @@ header {
 
 #top-right-nav a,
 #top-right-nav img {
-  max-height: 38px;
+  max-height: var(--header-height);
 }
 
 #top-right-nav > li > a {
@@ -81,7 +85,7 @@ li.user-state-link > a:focus {
 }
 
 .user-state-spinner {
-  height: 38px;
+  height: var(--header-height);
   padding: 0 12px;
 }
 
@@ -165,7 +169,7 @@ li.user-state-link > a:focus {
   }
 
   .opened #top-right-nav {
-    top: 38px;
+    top: var(--header-height);
   }
 
   #top-right-nav {

client/src/components/layouts/guide.css

@@ -69,7 +69,7 @@
 .content,
 .sideNav {
   /* 100vh - (navbar height) - (spacer height) */
-  height: calc(100vh - 38px - 30px);
+  height: calc(100vh - var(--header-height) - 30px);
   overflow-y: auto;
 }
 
@@ -100,11 +100,6 @@
   transform: rotate(0deg);
 }
 
-.navItemTitle {
-  color: #006400;
-  cursor: pointer;
-}
-
 .navPanelUl {
   list-style: none;
   margin-bottom: 0;
@@ -144,30 +139,13 @@
   color: #006400;
 }
 
-.bodyContainer {
-  --h: 100vh;
-  margin-top: 55px;
-  height: calc(var(--h) - 55px);
-}
-
 @media (max-width: 992px) {
   .content {
     height: auto;
   }
 }
 
-.skip-link {
-  background-color: white;
-  left: 0;
-  padding: 5px 10px;
-  top: 0;
-  z-index: 9;
-}
-
-.skip-link:focus {
-  position: absolute;
-}
-
-.content {
+.content,
+.article {
   outline: 0;
 }

client/src/components/layouts/layout.css

@@ -621,5 +621,5 @@ pre tt:after {
   }
 }
 .default-layout {
-  margin-top: 38px;
+  margin-top: var(--header-height);
 }

client/src/templates/Challenges/classic/classic.css

@@ -3,7 +3,7 @@
 }
 
 .desktop-layout {
-  height: calc(100vh - 38px);
+  height: calc(100vh - var(--header-height));
 }
 
 .monaco-menu .action-label {
@@ -26,7 +26,7 @@
 }
 
 #challenge-page-tabs .tab-content {
-  height: calc(100vh - 107px);
+  height: calc(100vh - var(--header-height) - 69px);
   overflow-y: auto;
 }