update: classes for avatar, logo and flex added + css for elements from main header are outside the styles for that header

src/header.pug

@@ -1,4 +1,4 @@
-#logo
+.logo
   sib-link(next='members')
     img(src=`${clientLogo || '/images/logo.png'}` style=`height:${clientLogoHeight || '32px'}`)
 
@@ -13,6 +13,8 @@ details#user-controls.notLoggedIn
   summary(tabindex='0' role='button')
     sib-display#user-controls__profile(
       fields='first_name, account.picture'
+      class-first_name='flex'
+      class-account.picture='avatar'
       widget-account.picture='hubl-user-avatar'
       bind-user
     )

src/index.pug

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

src/styles/base/header.scss

@@ -5,7 +5,6 @@
   background-color: var(--color-header-background);
   color: var(--color-black);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
-  display: flex;
   flex-shrink: 0;
   position: relative;
   z-index: 1;
@@ -14,13 +13,14 @@
     padding: 0 2.5rem;
   }
 
-  #logo {
+  .logo {
     flex: 1 0 0;
     align-items: stretch;
   }
+}
   
-  /* General styling for both notification and user's panel */
+/* General styling for both notification and user's panel */
-  details {
+details {
   margin-right: 2.5rem;
   position: relative;
 
@@ -38,10 +38,10 @@
       display: none;
     }
   }
-  }
+}
-  /* End */
+/* End */
 
-  sib-notifications {
+sib-notifications {
   color: var(--color-bell);
 
   @include breakpoint(sm) {
@@ -76,9 +76,9 @@
       top: 5.6rem;
     }
   }
-  }
+}
 
-  #user-controls {
+#user-controls {
   padding: 0;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -108,14 +108,8 @@
       }
 
       hubl-user-avatar {
-          align-items: center;
-          background-color: var(--color-avatar-background);
-          border-radius: 50%;
-          display: flex;
         height: 4.8rem;
-          justify-content: center;
         margin-right: 2rem;
-          overflow: hidden;
         width: 4.8rem;
 
         @include breakpoint(sm) {
@@ -123,23 +117,9 @@
         }
       }
       
-        img {
-          background-color: white;
-          height: 100%;
-          object-fit: cover;
-          object-position: center;
-          width: 100%;
-        }
-
-        object {
-          height: 45%;
-          width: 45%;
-        }
-  
       sib-display-value[name='first_name'] {
         @include icon('arrow-down');
         align-items: center;
-          display: flex;
         flex-direction: row-reverse;
         font-size: 1.8rem;
         font-weight: 600;
@@ -184,6 +164,7 @@
             border-bottom: 1px solid var(--color-user-panel-list-border);
             margin-right: 0;
             padding: 1.6rem 1.3rem;
+
             &:hover {
               color: var(--color-user-panel-list-text-hover);
             }
@@ -196,6 +177,10 @@
         padding: 1.6rem 1.3rem;
         text-align: left;
         width: 100%;
+
+        &:hover {
+          color: var(--color-user-panel-list-text-hover);
+        }
       }
     }
   }
@@ -218,9 +203,9 @@
       }
     }
   }
-  }
+}
 
-  .mobile-menu-icon {
+.mobile-menu-icon {
   display: none;
 
   @include breakpoint(sm) {
@@ -228,6 +213,5 @@
     padding-left: 0;
     font-size: 26px;
   }
-  }
 }
 

src/styles/base/main.scss

@@ -162,6 +162,32 @@ h5 {
   padding: 3.2rem;
 }
 
+.avatar {
+  align-items: center;
+  background-color: var(--color-avatar-background);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+
+  img {
+    background-color: white;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    object-position: center;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  object {
+    height: 45%;
+    width: 45%;
+  }
+}
+
 .content-box {
   @include window-style-modal();
   display: flex;
@@ -243,7 +269,6 @@ h5 {
 
 .content-box__info {
   @extend %padding-block;
-  display: flex;
   flex-direction: column;
 }
 
@@ -272,7 +297,6 @@ h5 {
 
 .admin-header {
   align-items: center;
-  display: flex;
   justify-content: space-between;
   margin-bottom: 5rem;
 }
@@ -300,6 +324,10 @@ h5 {
   text-align: center;
 }
 
+.flex {
+  display: flex;
+}
+
 .space-between {
   display: flex;
   justify-content: space-between;

src/styles/base/user-thumb.scss

@@ -24,33 +24,11 @@
 
 /* Styles for elements of user-thumb*/
 .user-thumb__picture {
-  align-items: center;
   align-self: center;
-  background-color: var(--color-avatar-background);
-  border-radius: 50%;
-  display: flex;
   grid-column: 1 / span 1;
   grid-row: 1 / span 2;
   height: 7vh;
-  justify-content: center;
-  overflow: hidden;
-  position: relative;
   width: 7vh;
-
-  img {
-    background-color: white;
-    height: 100%;
-    left: 0;
-    object-fit: cover;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  object {
-    height: 45%;
-    width: 45%;
-  }
 }
 
 .user-thumb__name {

src/templates/hubl-captain.pug

@@ -6,7 +6,7 @@ sib-widget(name='hubl-captain')
       data-src="${await value}"
       fields='account.picture, sup(name), sub(profile.city, is_lead)'
 
-      class-account.picture='user-thumb__picture'
+      class-account.picture='avatar user-thumb__picture'
       class-name='user-thumb__name'
       class-profile.city='user-thumb__city'
       class-is_lead='user-thumb__lead'

src/templates/hubl-circle-team.pug

@@ -7,7 +7,7 @@ sib-widget(name='hubl-circle-team-template')
       fields='account.picture, sup(name, isadmin), sub(profile.city)'
       value-isadmin='${await value.is_admin}'
 
-      class-account.picture='user-thumb__picture'
+      class-account.picture='avatar user-thumb__picture'
       class-name='user-thumb__name'
       class-isadmin='user-thumb__admin'
       class-profile.city='user-thumb__city'

src/templates/hubl-project-team.pug

@@ -7,7 +7,7 @@ sib-widget(name='hubl-project-team')
       fields='user.account.picture, sup(user.name, isadmin), sub(user.profile.city, name)'
       value-isadmin='${await value.is_admin}'
 
-      class-user.account.picture='user-thumb__picture'
+      class-user.account.picture='avatar user-thumb__picture'
 
       class-user.name='user-thumb__name'
       class-isadmin='user-thumb__admin'

src/views/admin/page-admin-circles-create.pug

@@ -1,4 +1,4 @@
-div.content-box__info
+div.content-box__info.flex
   sib-link(class="backlink right", next='admin-circle-list') Retour
 
   h1.centered Créer un canal

src/views/admin/page-admin-circles.pug

@@ -18,7 +18,7 @@
           data-src='${await value}'
           fields='account.picture, sup(name), sub(username)'
 
-          class-account.picture='user-thumb__picture'
+          class-account.picture='avatar user-thumb__picture'
           class-name='user-thumb__name'
           class-username='user-thumb__username'
 
@@ -26,9 +26,9 @@
         )
 
 
-    div.content-box__info
+    div.content-box__info.flex
 
-      div.admin-header
+      div.admin-header.flex
 
         h3 Canaux
 

src/views/admin/page-admin-projects-create.pug

@@ -2,7 +2,7 @@ sib-widget(name='hubl-template-project-title')
   template
     p ${value}
 
-div.content-box__info
+div.content-box__info.flex
   sib-link(class="backlink right" next='admin-project-list') Retour
 
   sib-widget(name="hubl-admin-project-add-user")

src/views/admin/page-admin-projects.pug

@@ -13,8 +13,8 @@
   #admin-project-list(hidden)
     include ../../templates/hubl-user-avatar.pug
 
-    div.content-box__info
+    div.content-box__info.flex
-      div.admin-header
+      div.admin-header.flex
         h3 Projets
         sib-link(
           class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
@@ -42,7 +42,7 @@
               data-src='${await value}'
               fields='account.picture, sup(name), sub(username)'
 
-              class-account.picture='user-thumb__picture'
+              class-account.picture='avatar user-thumb__picture'
               class-name='user-thumb__name'
               class-username='user-thumb__username'
 

src/views/admin/page-admin-users-create.pug

@@ -1,4 +1,4 @@
-div.content-box__info
+div.content-box__info.flex
   sib-link(class='backlink right', next='admin-users-list') Retour
 
   h1.centered Ajouter un utilisateur à la plateforme

src/views/admin/page-admin-users-edit.pug

@@ -1,4 +1,4 @@
-div.content-box__info
+div.content-box__info.flex
   sib-link(class='backlink right', next='admin-users-list') Retour
 
   h1.centered 

src/views/admin/page-admin-users.pug

@@ -18,7 +18,7 @@
 
 
   #admin-users-list(hidden)
-    div.content-box__info
+    div.content-box__info.flex
       div.admin-header
         h3 Utilisateurs
         sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
@@ -37,7 +37,7 @@
           data-src=`${endpoints.users || endpoints.get.users}`
           fields='cell-1(user-thumb(account.picture, sup(name), sub(username))), actions'
 
-          class-account.picture='user-thumb__picture'
+          class-account.picture='avatar user-thumb__picture'
           class-name='user-thumb__name'
           class-username='user-thumb__username'
           class-profile.city='user-thumb__city'

src/views/circle/page-circle-edit.pug

@@ -1,4 +1,4 @@
-div.content-box__info
+div.content-box__info.flex
 
   include ../../templates/hubl-user-avatar.pug
 
@@ -9,7 +9,7 @@ div.content-box__info
         data-src='${await value.user}'
         fields='account.picture, sup(name), sub(profile.city)'
 
-        class-account.picture='user-thumb__picture'
+        class-account.picture='avatar user-thumb__picture'
         class-name='user-thumb__name'
         class-profile.city='user-thumb__city'
 

src/views/circle/page-circle-left.pug

@@ -1,5 +1,5 @@
 #circle-left(hidden)
-  div.content-box__info(style="padding: 15px")
+  div.content-box__info.flex(style="padding: 15px")
 
     p Tu as quitté ce canal.
     p Pour le rejoindre à nouveau, rends-toi dans le panneau <sib-link next="admin-circle-list">administration</sib-link> ou contacte un administrateur.

src/views/circle/page-circle-profile.pug

@@ -4,7 +4,7 @@ sib-router(default-route='circle-profile', hidden)
 
 #circle-profile(hidden)
   include ../../templates/hubl-circle-team.pug
-  .content-box__info
+  .content-box__info.flex
 
     .space-between
       sib-display(

src/views/project/page-project-edit.pug

@@ -1,4 +1,4 @@
-div.content-box__info
+div.content-box__info.flex
 
   include ../../templates/hubl-user-avatar.pug
 

src/views/project/page-project-left.pug

@@ -1,5 +1,5 @@
 #project-left
-  div.content-box__info(style="padding: 15px")
+  div.content-box__info.flex(style="padding: 15px")
 
     p Tu as quitté ce projet.
     p Ceci est un groupe privé. Pour le rejoindre, rends-toi dans le panneau <sib-link next="admin-project-list">administration</sib-link> et demande une invitation.

src/views/project/page-project-profile.pug

@@ -7,7 +7,7 @@ sib-router(default-route='project-profile', hidden)
   include ../../templates/hubl-circle-team.pug
   include ../../templates/hubl-project-team.pug
 
-  .content-box__info
+  .content-box__info.flex
 
     .space-between
       sib-display(