From 35a49a240a6154a6455db03cb9b0a48098f9febf Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 16 Feb 2018 15:58:10 -0500
Subject: [PATCH] UX: Improving header scalability for large font themes

---
 .../stylesheets/common/base/header.scss       | 26 +++++++++++--------
 .../stylesheets/common/base/menu-panel.scss   |  9 +++----
 app/assets/stylesheets/desktop/header.scss    | 11 ++++----
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index b28652565ff..faf9ea31658 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -4,7 +4,7 @@
   top: 0;
   z-index: z("header");
   background-color: $header_background;
-  box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
 
   .docked & {
     position: fixed;
@@ -33,11 +33,11 @@
   .panel {
     float: right;
     position: relative;
+    display: flex;
+    align-items: center;
   }
 
   .login-button, button.sign-up-button {
-    float: left;
-    margin-top: 7px;
     padding: 6px 10px;
     .fa { margin-right: 3px; }
   }
@@ -62,14 +62,17 @@
   margin: 0 0 0 5px;
   list-style: none;
 
-
   > li {
     float: left;
   }
   .icon {
     position: relative;
-    display: block;
-    padding: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.2857em;
+    height: 2.2857em;
+    padding: .2143em;
     color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
     text-decoration: none;
     cursor: pointer;
@@ -77,11 +80,13 @@
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
     transition: all linear .15s;
-
-
+    img.avatar {
+      width: 2.2857em;
+      height: 2.2857em;
+    }
     &:hover {
       color: $primary;
-      background-color:  $primary-low;
+      background-color: $primary-low;
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
       border-right: 1px solid transparent;
@@ -119,8 +124,7 @@
   }
 
   .d-icon {
-    width: 32px;
-    height: 32px;
+    width: 100%;
     font-size: $font-up-4;
     line-height: $line-height-large;
     display: inline-block;
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index ad27956a56b..4953f8b3f0e 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -19,7 +19,7 @@
 
 .menu-panel {
   border: 1px solid $primary-low;
-  box-shadow: 0 2px 2px rgba(0,0,0, .25);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
   background-color: $secondary;
   z-index: z("header");
   padding: 0.5em;
@@ -44,7 +44,6 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
-
 }
 
 .menu-links.columned {
@@ -69,7 +68,6 @@
       margin-left: 0.5em;
       color: dark-light-choose($primary-medium, $secondary-medium);
     }
-
   }
 
   li.category-link {
@@ -77,7 +75,7 @@
     background-color: transparent;
     display: inline-flex;
     margin: 0.25em 0.5em;
-    width: 44%;
+    width: 43%;
     .badge-notification {
       color: dark-light-choose($primary-medium, $secondary-medium);
       background-color: transparent;
@@ -90,7 +88,6 @@
       overflow: hidden;
       text-overflow: ellipsis;
       display: inline-block;
-      max-width: 80%;
       &.bar, &.bullet {
         color: $primary;
       }
@@ -100,7 +97,7 @@
           padding-top: 2px;
         }
         span {
-          z-index: z("base") * -1;        
+          z-index: z("base") * -1;
         }
       }
     }
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index ad83f6d2c2e..4a6f4069832 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -5,9 +5,9 @@
 .d-header {
   left: 0;
   padding-top: 3px;
-  height: 60px;
+  height: 4.2857em;
   .d-icon-home {
-    padding:8px;
+    padding: 8px;
     font-size: $font-up-5;
   }
 
@@ -17,9 +17,10 @@
   }
 }
 
-@media all
-and (max-width : 570px) {
-  .extra-info-wrapper {display: none;}
+@media all and (max-width: 570px) {
+  .extra-info-wrapper {
+    display: none;
+  }
 }
 
 #main {