update: default avatar

- .svg file is used
- new styles added

src/styles/base/header.scss

@@ -112,7 +112,7 @@
     user-select: none;
 
     summary {
-      padding: 16px;
+      padding: 18px;
       cursor: pointer;
       &:focus {
         background-color: $color-233-18-29;
@@ -129,14 +129,29 @@
         > * {
           vertical-align: middle;
         }
-      
-        img {
-          border-radius: 100%;
+
+        hd-user-avatar {
+          align-items: center;
+          background-color: $color-213-20-91;
+          border-radius: 50%;
+          display: flex;
           height: 4.8rem;
+          justify-content: center;
           margin-right: 2rem;
+          overflow: hidden;
+          width: 4.8rem;
+        }
+
+        img {
+          height: 100%;
           object-fit: cover;
           object-position: center;
-          width: 4.8rem;
+          width: 100%;
+        }
+
+        object {
+          height: 45%;
+          width: 45%;
         }
   
         sib-display-value[name='first_name'] {
@@ -218,5 +233,5 @@
       }
     }
   }
-  
-}
+}
+

src/styles/layout/job-offers/job-offers.scss

@@ -70,7 +70,7 @@ sib-job-board {
             display: flex;
             margin: -0.25em;
 
-            >* {
+            >*:not(sib-action) {
               margin: 0.25em;
             }
 
@@ -92,21 +92,27 @@ sib-job-board {
             }
 
             author-avatar {
-              background-color: $color-0-0-100;
+              align-items: center;
+              background-color: $color-213-20-91;
               border-radius: 50%;
+              display: flex;
               height: 4.25rem;
+              justify-content: center;
+              margin-right: 2rem;
               overflow: hidden;
-              position: relative;
               width: 4.25rem;
-
+              
               img {
                 height: 100%;
-                left: 0;
                 object-fit: cover;
-                position: absolute;
-                top: 0;
+                object-position: center;
                 width: 100%;
               }
+
+              object {
+                height: 45%;
+                width: 45%;
+              }
             }
           }
 
@@ -186,3 +192,14 @@ sib-job-board {
     }
   }
 }
+
+sib-action[name='edit'] {
+  margin-left: auto;
+  color: $color-215-6-63;
+
+  &>sib-link {
+    @include icon('pencil');
+    font-size: 2rem;
+  }
+}
+

src/styles/layout/members/member-profile.scss

@@ -22,8 +22,29 @@
 
         div[name='member-img'] {
           grid-area: avatar;
-          overflow: hidden;
-          position: relative;
+          
+          member-picture {
+            align-items: center;
+            background-color: $color-213-20-91;
+            border-radius: 50%;
+            display: flex;
+            height: 28vh;
+            justify-content: center;
+            overflow: hidden;
+            width: 28vh;
+
+            img {
+              height: 255px;
+              object-fit: cover;
+              object-position: center;
+              width: 255px;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
+          }
 
           img {
             border-radius: 50%;

src/styles/layout/members/members.scss

@@ -159,22 +159,27 @@ member-info-groups {
           }
 
           member-picture {
-            background-color: $color-0-0-100;
+            align-items: center;
+            background-color: $color-213-20-91;
             border-radius: 50%;
+            display: flex;
             height: 28vh;
+            justify-content: center;
             margin: 1.7rem auto;
             overflow: hidden;
-            position: relative;
             width: 28vh;
 
             img {
               height: 100%;
-              left: 0;
               object-fit: cover;
-              position: absolute;
-              top: 0;
+              object-position: center;
               width: 100%;
             }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
           }
 
           [name='name'] {

src/templates/hd-user-avatar.pug

@@ -1,3 +1,2 @@
 sib-widget(name='hd-user-avatar')
-  template
-    img(name="${name}",src="\${value || '/images/alien.jpg'}",style="max-width:100%; max-height: 100%;")
+  template ${value ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg")></object>`}