From 22cb0c355cfdd7dc1570da9510cf390b878eb5a5 Mon Sep 17 00:00:00 2001
From: Valeriy S <ValeraS@users.noreply.github.com>
Date: Tue, 29 Jan 2019 09:43:47 +0300
Subject: [PATCH] feat(client): extract header height to a CSS variable

---
 client/src/components/Header/header.css       | 12 +++++---
 client/src/components/layouts/guide.css       | 28 ++-----------------
 client/src/components/layouts/layout.css      |  2 +-
 .../templates/Challenges/classic/classic.css  |  4 +--
 4 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/client/src/components/Header/header.css b/client/src/components/Header/header.css
index 729d8e7f82..4b7223089c 100644
--- a/client/src/components/Header/header.css
+++ b/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 {
diff --git a/client/src/components/layouts/guide.css b/client/src/components/layouts/guide.css
index d9e1ebed93..88646c5a3a 100644
--- a/client/src/components/layouts/guide.css
+++ b/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;
 }
diff --git a/client/src/components/layouts/layout.css b/client/src/components/layouts/layout.css
index bf07981d58..abe0998152 100644
--- a/client/src/components/layouts/layout.css
+++ b/client/src/components/layouts/layout.css
@@ -621,5 +621,5 @@ pre tt:after {
   }
 }
 .default-layout {
-  margin-top: 38px;
+  margin-top: var(--header-height);
 }
diff --git a/client/src/templates/Challenges/classic/classic.css b/client/src/templates/Challenges/classic/classic.css
index 5f41b34970..11ea39d1a1 100644
--- a/client/src/templates/Challenges/classic/classic.css
+++ b/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;
 }