From 37a8e28793018090b939845ceb348f1b90c193cb Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Wed, 3 Jun 2020 14:16:29 +0200
Subject: [PATCH] update: header - responsive ok

---
 src/index.pug               |  2 +-
 src/styles/base/header.scss | 41 ++++++++++++++++++++++++++++---------
 2 files changed, 32 insertions(+), 11 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index cb3b7c4..80f8b66 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -17,7 +17,7 @@ html(lang="en")
 
     .wrapper
 
-      header#header.header(role='banner')
+      header#header.header.is-spaced(role='banner')
         include header.pug
 
       nav#main__menu.left-menu.jsLeftMenu
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index ba22326..c2f706f 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -1,6 +1,6 @@
 #header {
-  max-height: 83px;
-  height: 83px;
+  max-height: 51px;
+  height: 51px;
   display: flex;
   align-items: center;
   background-color: var(--color-header-background);
@@ -10,11 +10,24 @@
   position: relative;
   z-index: 1;
 
-  &.is-spaced {
-    padding: 0 2.5rem;
+  @include breakpoint(lg) {
+    max-height: 83px;
+    height: 83px;
+  }
 
-    @include breakpoint(sm) {
-      padding: 0 0.6rem;
+  &.is-spaced {
+    padding: 0 0.8rem;
+
+    @include breakpoint(lg) {
+      padding: 0 2.5rem;
+    }
+  }
+
+  >*:not(:first-child) {
+    margin-left: 2rem;
+
+    @include breakpoint(lg) {
+      margin-left: 0;
     }
   }
 
@@ -22,15 +35,20 @@
     flex: 1 0 0;
     align-items: stretch;
   }
+
+  /* To remove the place taken by this element */
+  sib-widget[name='hubl-user-avatar'] {
+    display: contents;
+  }
 }
   
 /* General styling for both notification and user's panel */
 details {
-  margin-right: 2.5rem;
+  margin-right: 0;
   position: relative;
 
-  @include breakpoint(sm) {
-    margin-right: 0;
+  @include breakpoint(lg) {
+    margin-right: 2.5rem;
   }
 
   summary {
@@ -92,10 +110,13 @@ sib-notifications {
   user-select: none;
 
   summary {
-    padding: 18px;
     cursor: pointer;
     display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
 
+    @include breakpoint(lg) {
+      padding: 18px;
+    }
+    
     &:focus {
       background-color: var(--color-user-panel-header-background-open);
       color: var(--color-user-panel-header-text-open);