update: header ok

src/header.pug

@@ -2,11 +2,6 @@
   sib-link(next='members')
     img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`)
 
-//- #search-bar
-//-   input#search-input(type='search')
-//-   i#search-icon.icon-magnifier(aria-hidden='true')
-//-   i#close-search-icon.icon-close(aria-hidden='true')
-
 sib-notifications.notLoggedIn(
   nested-field="inbox"
   bind-user

src/images/alien.svg

@@ -1,4 +1,4 @@
-<svg class="alien" fill="#AAA9B9" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<svg class="alien" fill="#A59D9D" width="135.47mm" height="135.51mm" version="1.1" viewBox="0 0 135.47 135.51" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
  <metadata>
   <rdf:RDF>
    <cc:Work rdf:about="">

src/index.pug

@@ -14,7 +14,7 @@ html(lang="en")
     if clientCSS
       link(rel='stylesheet', href=`${clientCSS}`)
   body
-    header#header(role='banner')
+    header#header.is-spaced(role='banner')
       include header.pug
 
     main.notLoggedIn

src/styles/abstracts/_variables.scss

@@ -34,7 +34,7 @@
   --color-highlight-primary: var(--color-primary);
   --color-user-panel: var(--color-black);
   --color-bell: var(--color-secondary);
-  --color-avatar-background: var(--color-grey-11);
+  --color-avatar-background: var(--color-grey-10);
   --color-title: var(--color-secondary);
   --color-h1: var(--color-secondary);
   --color-h2: var(--color-secondary);

src/styles/base/header.scss

@@ -7,63 +7,19 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
   flex-shrink: 0;
-  // padding: 1.6rem 0.64rem;
-  padding: 0 2.5rem;
   position: relative;
   z-index: 1;
 
+  &.is-spaced {
+    padding: 0 2.5rem;
+  }
+
   #logo {
-    flex: 1 1 0;
+    flex: 1 0 0;
-  }
+    align-items: stretch;
-  
-  #search-bar {
-    position: relative;
-    
-    #search-input {
-      border-radius: 10em;
-      padding: 0.64rem 1.28rem;
-      border: 1px solid var(--color-grey-10);
-      height: 3.8rem;
-      width: 28rem;
-      -webkit-appearance: textfield;
-    
-      & ~ #close-search-icon,
-      & ~ #search-icon {
-        color: var(--color-grey-10);
-        display: block;
-        font-size: 1.7rem;
-        margin: auto;
-        position: absolute;
-        right: 3.7rem;
-        top: 50%;
-        transform: translateY(-50%);
-        -webkit-text-stroke: 1px var(--color-grey-10);
-      }
-    
-      & ~ #close-search-icon {
-        opacity: 0;
-      }
-    
-      &:focus {
-        & ~ #close-search-icon {
-          opacity: 1;
-        }
-    
-        & ~ #search-icon {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-
-  sib-notifications {
-    color: var(--color-bell);
-
-    @include breakpoint(sm) {
-      padding: 0;
-    }
   }
   
+  /* General styling for both notification and user's panel */
   details {
     margin-right: 2.5rem;
     position: relative;
@@ -83,33 +39,42 @@
       }
     }
   }
+  /* End */
   
-  .sib-notifications__container {
+  sib-notifications {
-    position: relative;
+    color: var(--color-bell);
-  
+
-    .sib-notifications__button {
+    @include breakpoint(sm) {
-      @include icon('bell');
+      padding: 0;
-      font-size: 3rem;
-  
-      &::before {
-        margin-left: 0;
-      }
-  
-      img {
-        display: none;
-      }
-  
-      .sib-notifications__counter {
-        left: 2.1rem;
-        position: absolute;
-        top: -3px;
-      }
     }
   
-    .sib-notifications__list {
+    .sib-notifications__container {
-      position: absolute;
+      position: relative;
-      right: 0;
+    
-      top: 5.6rem;
+      .sib-notifications__button {
+        @include icon('bell');
+        font-size: 3rem;
+    
+        &::before {
+          margin-left: 0;
+        }
+    
+        img {
+          display: none;
+        }
+    
+        .sib-notifications__counter {
+          left: 2.1rem;
+          position: absolute;
+          top: -3px;
+        }
+      }
+    
+      .sib-notifications__list {
+        position: absolute;
+        right: 0;
+        top: 5.6rem;
+      }
     }
   }