From 9c4d5a52ed65d18066b9f0e67cee775fe5f6c840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 25 Feb 2019 16:58:27 +0100
Subject: [PATCH] feature+ui(member-profile): Displaying available info of a
user
Display available data
Add styles + new icon
Refactoring
Bonus:
new widget for placeholder on sib-dropdwn + styles
---
src/dependencies.pug | 2 +-
src/index.pug | 2 +-
src/page-member-profile.pug | 47 +--
src/page-member.pug | 17 +-
src/page-members.pug | 9 +-
src/styles/content.scss | 119 +++-----
src/styles/filters.scss | 8 +-
src/styles/icons/material-design-icons.scss | 4 +-
src/styles/index.scss | 1 +
src/styles/main.scss | 4 +-
src/styles/member-profile.scss | 160 +++++++++++
src/styles/member.scss | 0
src/styles/members.scss | 301 +++++++++-----------
src/styles/variables.scss | 50 ++++
www/fonts/material-design-icons.svg | 8 +
15 files changed, 443 insertions(+), 289 deletions(-)
create mode 100644 src/styles/member-profile.scss
delete mode 100644 src/styles/member.scss
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 1ce9fc36..20b63eba 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -34,7 +34,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
//- cdn
//- don't forget to change version in hd-widgets.js
-script(type="module" src="https://unpkg.com/@startinblox/core@0.5")
+script(type="module" src="https://unpkg.com/@startinblox/core@0.5.24")
script(type="module" src="https://unpkg.com/@startinblox/router@latest")
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1")
diff --git a/src/index.pug b/src/index.pug
index db89f3f1..c3522236 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -22,7 +22,7 @@ html(lang="en")
#member-chat(hidden)
include page-member-chat.pug
#member(hidden)
- include page-member.pug
+ include page-member-profile.pug
#job-offers(hidden)
include page-job-offers.pug
#job-offer-create(hidden)
diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug
index 3095ec23..a701affa 100644
--- a/src/page-member-profile.pug
+++ b/src/page-member-profile.pug
@@ -1,21 +1,30 @@
+sib-link(next="members" class="backlink") Back to directory
+
template#chat-link
sib-link(next="member-chat") ${value}
-sib-display#member-info(
- data-fields='available, header, name, pseudonym, infos, user.skills',
- set-header='user.account.picture',
- set-infos='city, country, user.roles, user.email, send, phone, foaf:homepage, ',
- set-name='user.first_name, user.last_name',
- set-pseudonym='before-pseudo, pseudo',
- value-before-pseudo='@',
- value-send='SEND A MESSAGE',
- template-send='chat-link',
- widget-available='hdapp-available',
- widget-user.account.picture='sib-display-img',
- widget-user='hdapp-userinfo',
- widget-phone='sib-display-tel',
- widget-foaf:homepage='hdapp-hyperlink',
- widget-user.email='sib-display-mailto',
- widget-user.roles='sib-display-lookuplist',
- widget-user.skills='sib-display-lookuplist',
- bind-resources
-)
+
+template#member-status
+ div#member-status ${value == true ? '<span class="status-one">Available</span>' : '<span class="status-two">Busy</span>'}
+
+div#member-profile
+ sib-display(
+ data-fields='member-profile__bio, member-profile__skills, member-profile__xp',
+
+ set-member-profile__bio ='user.profile.available, member-img, member-profile, user.username, bio, infos, send',
+ set-member-profile__skills='user.skills',
+ set-member-profile__xp='',
+ set-member-img='user.account.picture',
+ set-member-profile='user.first_name, user.last_name, user.groups',
+ set-infos='city, user.groups, user.email, phone, foaf:homepage',
+
+ template-user.profile.available='member-status',
+ template-send='chat-link',
+
+ value-send='SEND A MESSAGE',
+
+ widget-user.account.picture='sib-display-img',
+ widget-user.groups='sib-display-lookuplist',
+ widget-user.skills='sib-display-lookuplist',
+
+ bind-resources
+ )
diff --git a/src/page-member.pug b/src/page-member.pug
index 0624ae8c..ee5f063e 100644
--- a/src/page-member.pug
+++ b/src/page-member.pug
@@ -1,14 +1,5 @@
-
-sib-router#member-router(default-route='member-profile')
- sib-route(name='member-profile')
- div Profile
- sib-ac-checker(permission='acl:Write' bind-resources)
- sib-route(name='member-edit')
- div Edit
-#member-views-container
- sib-link(next="members" class="back") Back to directory
- div
- #member-profile
+//-
+ #container-member
+ sib-link(next="members" class="back") Back to directory
+ div#member-profile
include page-member-profile.pug
- #member-edit
- include page-member-edit.pug
diff --git a/src/page-members.pug b/src/page-members.pug
index 057f1e54..1727c795 100644
--- a/src/page-members.pug
+++ b/src/page-members.pug
@@ -24,12 +24,17 @@ div.grid-layer
search-range-groups=`${sdn}/groups/`,
search-range-skills=`${sdn}/skills/`,
search-fields='name, groups, skills',
+
set-name='pseudo, user.first_name, user.last_name',
- search-label-name='Search by lastname, firstname...',
- search-widget-name='sib-form-placeholder-text',
+
search-label-groups='Filter by role',
+ search-label-name='Search by lastname, firstname...',
search-label-skills='Search by skills',
+
+ search-widget-groups='sib-form-placeholder-dropdown',
+ search-widget-name='sib-form-placeholder-text',
search-widget-skills='sib-form-placeholder-text',
+
next='member')
div.grid-layer-links.containerV
div.containerH.containerCenter.how-link
diff --git a/src/styles/content.scss b/src/styles/content.scss
index 3951c87a..720008b6 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -70,99 +70,56 @@
@include pos();
}
}
+// member-profile && members
-sib-display#member-info {
- display: flex;
- flex-direction: column;
- position: relative;
- @extend %frame;
- padding: 1.7rem;
+/*.members-list-condensed {
+ img {
+ width: 50px;
+ height: 100px;
+ border-radius: 100%;
+ object-fit: cover;
+ object-position: top;
+ }
label {
display: none;
}
- div[name='header'] {
- border-bottom: 1px solid $color-anti-flash-white;
- padding-bottom: 1.7rem;
- padding: 0.85rem;
- margin-bottom: 1.7rem;
- display: flex;
- flex-direction: column;
- >*{
- display: flex;
- justify-content: center;
- flex-basis: content;
+ > div > sib-display > div {
+ display: grid;
+ grid-template-columns: 0.5fr 2fr;
+ grid-template-rows: repeat(3, auto);
+ grid-column-gap: 3rem;
+ align-items: center;
+
+ div[name="teammate-img"] {
+ background: blue;
+ grid-row: 1 / -1;
}
- sib-display-img {
- flex-basis:150px;
- img {
- border-radius: 100%;
- width:150px;
- }
+
}
- }
- hdapp-userinfo {
- @extend h1;
- }
-
- /*
- [name=infos] {
- //margin: 2em 0;
- > * {
- // display: block;
- margin: 0.5em 0;
+ ul{
+ margin-top: 0px;
+ margin-bottom: 0px;
+ list-style-type: none;
+ }
+ >[name$="user"]{
+ color: $color-dark-lava;
+ }
+ >[name$="avatar"]{
+ grid-column-start: first;
+ grid-column-end: middle;
+ grid-row-start: first;
+ grid-row-end: end;
}
- }
- */
-
-
- ul[name$='roles'] * {
- @include icon('user');
- }
-
- ul[name$='cell'] * {
- @include icon('location-pin');
- }
- [name$='user'] {
- margin-bottom: 0em;
- }
- sib-display-div[name$='bio'] {
- margin-top: 1em;
- flex-basis : 5em;
- }
-
- a[href^='mailto'] {
- display: flex;
- border-radius: 25px;
- border-style: solid;
- border-color: $color-majorelle-blue;
- color: $color-majorelle-blue;
- margin: 1.7rem;
- padding: 1.7rem;
- text-decoration:none;
- }
-
- sib-display-tel {
- display: block;
- @include icon('phone');
- }
-
- hdapp-hyperlink {
- display: block;
- @include icon('link');
}
- sib-display-div[name$='foaf:homepage'] * {
- @include icon('link');
- }
- sib-display-div[name$='more']{
- display: flex;
- flex-direction: row-reverse;
- }
-}
+ // ul {
+ // padding-left: 1em;
+ // }
+}*/
hdapp-available {
display: block;
@@ -198,13 +155,11 @@ hdapp-available {
sib-link[next='member-chat'] {
border-style: solid;
- margin: 1.7rem;
display: flex;
border-radius: 25px;
border-style: solid;
border-color: $color-majorelle-blue;
color: $color-majorelle-blue;
- margin: 1.7rem;
padding: 1.7rem;
text-decoration:none;
}
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 8eee93c0..40436001 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -28,14 +28,20 @@
}
select {
- background: white;
+ background: $color-white;
background-image: url("/images/chevron-down.png");
background-position: 96% 60%;
background-repeat: no-repeat;
background-size: 14px 9px;
box-sizing: border-box;
+ color: $color-taupe-gray;
display: inline-block;
padding: 0.68rem;
+ width: 100%;
+
+ > option:not(:first-child) {
+ color: black;
+ }
}
sib-form-label-text {
diff --git a/src/styles/icons/material-design-icons.scss b/src/styles/icons/material-design-icons.scss
index 5a3bf2ee..2793d849 100644
--- a/src/styles/icons/material-design-icons.scss
+++ b/src/styles/icons/material-design-icons.scss
@@ -24,7 +24,9 @@ $mdi-icons: (
account-outline: '\F013',
atom: '\F767',
cellphone-iphone: '\F120',
- check: '\F12C'
+ check: '\F12C',
+ email-outline: '\F1F0',
+ link-variant: '\F339'
);
%mdi,
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 959ebffb..1f8608e9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -16,6 +16,7 @@
@import 'group-profile';
@import 'job-offers';
+@import 'member-profile';
@import 'members';
@import 'project-profile';
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e7bdea88..8ae3290b 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -118,7 +118,8 @@ button {
/* sub menu (right menu) */
#mainContainer {
display: flex;
- > div {
+ > div#project,
+ > div#circle {
flex-grow: 1;
display: flex;
flex-direction: row-reverse;
@@ -147,7 +148,6 @@ sib-link.back {
font-size: 2rem;
font-weight: bold;
text-align: right;
- @include icon('arrow-left-circle');
}
.containerH {
diff --git a/src/styles/member-profile.scss b/src/styles/member-profile.scss
new file mode 100644
index 00000000..1a09aae4
--- /dev/null
+++ b/src/styles/member-profile.scss
@@ -0,0 +1,160 @@
+#member {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+
+ .backlink {
+ font-size: 1.5rem;
+ margin: 2rem 0 0 2rem;
+ @extend %backlink;
+
+ &::before {
+ font-size: 2rem;
+ margin-right: 1rem;
+ }
+ }
+
+ #member-profile {
+ background-color: $color-white;
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
+ margin: 2rem 1rem 5rem 2rem;
+ min-height: 100vh;
+
+ div[name='member-profile__bio'] {
+ border-bottom: 1px solid $color-link-water;
+ display: grid;
+ grid-template-areas: "avatar name name name status"
+ "avatar pseudo pseudo pseudo status"
+ "avatar bio bio bio status"
+ "avatar list list list button"
+ "avatar list list list button";
+ padding: 4.5rem;
+
+ div[name='member-img'] {
+ background-color: $color-bombay;
+ border-radius: 50%;
+ grid-area: avatar;
+ height: 34vh;
+ overflow: hidden;
+ position: relative;
+ width: 34vh;
+
+ img {
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+ }
+
+ div[name='member-profile'] {
+ align-items: flex-start;
+ align-self: end;
+ display: flex;
+ grid-area: name;
+
+ > sib-display-div[name^='user.'] {
+ color: $color-dark-lava;
+ font-weight: bold;
+ @extend h1;
+ }
+
+ sib-display-lookuplist[name='user.groups'] {
+
+ label {
+ display: none;
+ }
+
+ > ul {
+ margin-block-end: 0;
+ margin-block-start: 0;
+ }
+ }
+ }
+
+ sib-display-div[name='user.username'] {
+ grid-area: pseudo;
+
+ div[name='user.username']::before {
+ content: '@';
+ }
+ }
+
+ sib-display-div[name='bio'] {
+ grid-area: bio;
+ }
+
+ div[name='infos'] {
+ grid-area: list;
+
+ @extend %member-info;
+ }
+
+ #member-status {
+ align-self: flex-end;
+ color: $color-majorelle-blue;
+ grid-area: status;
+ justify-self: flex-end;
+
+ > span {
+ align-items: center;
+ align-self: center;
+ display: flex;
+ flex-direction: column;
+ font-weight: 600;
+ line-height: 2;
+ }
+
+ > span.status-one {
+ @include ci('awareness');
+
+ &::before {
+ border-bottom: 2px solid $color-selective-yellow;
+ font-size: 7.3rem;
+ padding-bottom: 1.5rem;
+ }
+ }
+
+ > span.status-two {
+ @include ci('armor');
+
+ &::before {
+ border-bottom: 2px solid $color-selective-yellow;
+ font-size: 7.3rem;
+ padding-bottom: 1.5rem;
+ }
+ }
+ }
+
+ [next=member-chat] {
+ align-self: flex-end;
+ border: 1px solid $color-majorelle-blue;
+ border-radius: 2em;
+ color: $color-majorelle-blue;
+ font-size: 18px;
+ font-weight: bold;
+ grid-area: button;
+ justify-self: end;
+ padding: 0.6em 1.5em 0.4em;
+ @include icon('speech');
+
+ &::before {
+ font-size: 25px;
+ padding-right: 0.5em;
+ }
+ }
+ }
+
+ div[name='member-profile__skills'] {
+
+ sib-display-lookuplist {
+
+ label {
+ display: none;
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/member.scss b/src/styles/member.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 42850607..b44880c7 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -1,199 +1,166 @@
-#profiles-list {
- @extend .grid-layer;
-
- nav {
- align-items: center;
- display: flex;
- font-size: 2.4rem;
- justify-content: center;
-
- button {
- color: $color-anti-flash-white;
-
- &:before {
- color: $color-dark-lava;
- @include icon('arrow-left-circle');
- }
-
- &:disabled::before {
- color: $color-manatee;
- }
- }
-
- button:nth-of-type(2) {
- order: 1;
- transform: rotate(180deg);
- }
+#members {
- span {
- font-size: 2.6rem;
- }
- }
+ #profiles-list {
+ @extend .grid-layer;
- & > sib-form {
- grid-column-start: start;
- grid-column-end: middle;
- grid-row-start: start;
- grid-row-end: middle;
- }
+ nav {
+ align-items: center;
+ display: flex;
+ font-size: 2.4rem;
+ justify-content: center;
- & > div,
- & > nav {
- display: flex;
- flex-wrap: wrap;
- grid-column-start: start;
- grid-column-end: end;
- margin-bottom: 1.7rem;
- }
-
- & > div {
- justify-content: space-between;
+ button {
+ color: $color-anti-flash-white;
+
+ &:before {
+ color: $color-dark-lava;
+ @include icon('arrow-left-circle');
+ }
- &:first-of-type {
- color: $color-quartz;
- font-weight: bold;
- justify-content: center;
- margin-bottom: 3.75rem;
- white-space: nowrap;
-
- &::before, &::after {
- border-top: 1px solid $color-timberwolf;
- content: '';
- position: relative;
- top: 0.85rem;
- width: 35.2vw;
+ &:disabled::before {
+ color: $color-manatee;
+ }
}
- &::before {
- right: 5.1rem;
+ button:nth-of-type(2) {
+ order: 1;
+ transform: rotate(180deg);
}
- &::after {
- left: 5.1rem;
+ span {
+ font-size: 2.6rem;
}
}
- > sib-display {
- background-color: white;
- box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
- color: $color-rolling-stone;
- cursor: pointer;
+ & > sib-form {
+ grid-column-start: start;
+ grid-column-end: middle;
+ grid-row-start: start;
+ grid-row-end: middle;
+ }
+
+ & > div,
+ & > nav {
display: flex;
- flex-flow: column wrap;
- margin-bottom: 2.5rem;
- padding-bottom: 10rem;
- @media(min-width: 56rem) {
- height: 62rem;
- width: 32%;
- }
+ flex-wrap: wrap;
+ grid-column-start: start;
+ grid-column-end: end;
+ margin-bottom: 1.7rem;
+ }
+
+ & > div {
+ justify-content: space-between;
+
+ &:first-of-type {
+ color: $color-quartz;
+ font-weight: bold;
+ justify-content: center;
+ margin-bottom: 3.75rem;
+ white-space: nowrap;
+
+ &::before, &::after {
+ border-top: 1px solid $color-timberwolf;
+ content: '';
+ position: relative;
+ top: 0.85rem;
+ width: 35.2vw;
+ }
+
+ &::before {
+ right: 5.1rem;
+ }
- label {
- display: none;
+ &::after {
+ left: 5.1rem;
+ }
}
- div[name='header'] {
- border-bottom: 1px solid $color-anti-flash-white;
+ > sib-display {
+ background-color: white;
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
+ color: $color-rolling-stone;
+ cursor: pointer;
display: flex;
- flex-direction: column;
- padding: 0.85rem 0 3.4rem;
+ flex-flow: column wrap;
+ margin-bottom: 2.5rem;
+ padding-bottom: 10rem;
+ @media(min-width: 56rem) {
+ height: 62rem;
+ width: 32%;
+ }
- > *:not(sib-display-img) {
- display: flex;
- flex-basis: content;
- justify-content: center;
+ label {
+ display: none;
}
- sib-display-img {
- background-color: white;
- border-radius: 50%;
- height: 28vh;
- margin: 1.7rem auto;
- overflow: hidden;
- position: relative;
- width: 28vh;
+ div[name='header'] {
+ border-bottom: 1px solid $color-anti-flash-white;
+ display: flex;
+ flex-direction: column;
+ padding: 0.85rem 0 3.4rem;
+ > *:not(sib-display-img) {
+ display: flex;
+ flex-basis: content;
+ justify-content: center;
+ }
- img {
- height: 100%;
- left: 0;
- object-fit: cover;
- position: absolute;
- top: 0;
- width: 100%;
+ sib-display-img {
+ background-color: white;
+ border-radius: 50%;
+ height: 28vh;
+ margin: 1.7rem auto;
+ overflow: hidden;
+ position: relative;
+ width: 28vh;
+
+
+ img {
+ height: 100%;
+ left: 0;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
}
- }
- ul[name='user'] {
- font-weight: bold;
- margin: 0;
- @extend h1;
- }
+ ul[name='user'] {
+ font-weight: bold;
+ margin: 0;
+ @extend h1;
+ }
- sib-display-div[name$='bio'] {
- display: flex;
- flex-basis: 3.5em;
- line-height: 1.6;
- margin: 2.5rem 0;
- padding: 0 6.8rem;
- text-align: center;
- }
-
- [next=member-chat] {
- align-self: center;
- border: 1px solid $color-majorelle-blue;
- border-radius: 3.4rem;
- color: $color-majorelle-blue;
- font-size: 1.8rem;
- font-weight: bold;
- padding: 1rem 2.55rem 0.7rem;
- @include icon('speech');
-
- &::before {
- font-size: 2.5rem;
- padding-right: 0.85rem;
+ sib-display-div[name$='bio'] {
+ display: flex;
+ flex-basis: 3.5em;
+ line-height: 1.6;
+ margin: 2.5rem 0;
+ padding: 0 6.8rem;
+ text-align: center;
}
- }
- }
-
- div[name='infos'] {
-
- > sib-display-div > div,
- > sib-display-lookuplist > ul {
- margin-bottom: 0;
- margin-top: 1.7rem;
-
- &::before {
- color: $color-selective-yellow;
- font-size: 2rem;
- padding: 0 0.6em 0 1em;
+
+ [next=member-chat] {
+ align-self: center;
+ border: 1px solid $color-majorelle-blue;
+ border-radius: 3.4rem;
+ color: $color-majorelle-blue;
+ font-size: 1.8rem;
+ font-weight: bold;
+ padding: 1rem 2.55rem 0.7rem;
+ @include icon('speech');
+
+ &::before {
+ font-size: 2.5rem;
+ padding-right: 0.85rem;
+ }
}
}
- > sib-display-lookuplist[name$='groups'] > ul > li {
- border: none;
- font-size: inherit;
- margin-left: 0;
- padding: 0;
- }
-
- > sib-display-lookuplist[name$='skills'] > ul {
- margin-left: 1.7rem;
- }
-
- [name$='city'] * {
- @include mdi('atom');
- }
-
- ul[name*='groups'] {
- @include mdi('account-outline');
- }
-
- [name$='email'] * {
- @include icon('envelope');
- }
+ div[name='infos'] {
+ padding: 0 1.7rem;
- [name$='phone'] * {
- @include icon('phone');
+ @extend %member-info;
}
}
}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 021ce173..3b932904 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -24,6 +24,11 @@ $color-purple-dark: hsl(233, 18%, 29%);
$color-spun-pearl: hsl(244, 10%, 70%);
$color-majorelle-blue: hsl(244, 73%, 62%);
+%backlink {
+ color: #3d4057;
+ @include icon('arrow-left-circle');
+}
+
%button {
display: inline-block;
padding: 0.85rem 2.55rem;
@@ -41,6 +46,51 @@ $color-majorelle-blue: hsl(244, 73%, 62%);
background-color: $color-white;
}
+%member-info {
+
+ label {
+ display: none;
+ }
+
+ > sib-display-div > div,
+ > sib-display-lookuplist > ul {
+ margin-bottom: 0;
+ margin-top: 1.7rem;
+
+ &::before {
+ color: $color-selective-yellow;
+ padding: 0 0.6em 0 0;
+ }
+ }
+
+ > sib-display-lookuplist[name$='groups'] > ul > li {
+ border: none;
+ font-size: inherit;
+ margin-left: 0;
+ padding: 0;
+ }
+
+ [name$='city'] * {
+ @include mdi('atom');
+ }
+
+ ul[name*='groups'] {
+ @include mdi('account-outline');
+ }
+
+ [name$='email'] * {
+ @include mdi('email-outline');
+ }
+
+ [name$='phone'] * {
+ @include mdi('cellphone-iphone');
+ }
+
+ [name="foaf:homepage"] * {
+ @include mdi('link-variant');
+ }
+}
+
%label {
color: $color-spun-pearl;
font-weight: 600;
diff --git a/www/fonts/material-design-icons.svg b/www/fonts/material-design-icons.svg
index dba73988..f5cbbec7 100644
--- a/www/fonts/material-design-icons.svg
+++ b/www/fonts/material-design-icons.svg
@@ -23,6 +23,14 @@
<glyph glyph-name="check"
unicode=""
horiz-adv-x="512" d=" M448 298.6666666666667L192 42.6666666666667L74.6666666666667 160L104.7466666666667 190.0800000000001L192 103.04L417.92 328.7466666666667L448 298.6666666666667z" />
+
+ <glyph glyph-name="email-outline"
+ unicode=""
+ horiz-adv-x="512" d=" M85.3333333333333 362.6666666666667H426.6666666666667C450.1333333333334 362.6666666666667 469.3333333333333 343.4666666666667 469.3333333333333 320V64C469.3333333333333 40.5333333333333 450.1333333333334 21.3333333333334 426.6666666666667 21.3333333333334H85.3333333333333C61.6533333333333 21.3333333333334 42.6666666666667 40.5333333333333 42.6666666666667 64V320C42.6666666666667 343.68 61.6533333333333 362.6666666666667 85.3333333333333 362.6666666666667M256 213.3333333333334L426.6666666666667 320H85.3333333333333L256 213.3333333333334M85.3333333333333 64H426.6666666666667V269.4400000000001L256 162.9866666666667L85.3333333333333 269.4400000000001V64z" />
+
+ <glyph glyph-name="link-variant"
+ unicode=""
+ horiz-adv-x="512" d=" M225.92 161.92C234.6666666666667 153.6 234.6666666666667 139.9466666666667 225.92 131.6266666666667C217.6 123.3066666666667 203.9466666666667 123.3066666666667 195.6266666666667 131.6266666666667C154.0266666666667 173.2266666666667 154.0266666666667 240.8533333333333 195.6266666666667 282.4533333333334L271.1466666666667 357.9733333333334C312.7466666666667 399.5733333333333 380.3733333333334 399.5733333333333 421.9733333333334 357.9733333333334C463.5733333333333 316.3733333333334 463.5733333333333 248.7466666666667 421.9733333333334 207.1466666666667L390.1866666666667 175.36C390.4000000000001 192.8533333333334 387.6266666666667 210.3466666666667 381.6533333333334 226.9866666666667L391.6800000000001 237.2266666666667C416.8533333333334 262.1866666666667 416.8533333333334 302.7200000000001 391.6800000000001 327.6800000000001C366.7200000000001 352.8533333333334 326.1866666666667 352.8533333333334 301.2266666666667 327.6800000000001L225.9200000000001 252.3733333333334C200.7466666666667 227.4133333333334 200.7466666666667 186.8800000000001 225.9200000000001 161.9200000000001M286.0800000000001 252.3733333333334C294.4000000000001 260.6933333333334 308.0533333333334 260.6933333333334 316.3733333333334 252.3733333333334C357.9733333333334 210.7733333333334 357.9733333333334 143.1466666666667 316.3733333333334 101.5466666666667L240.8533333333334 26.0266666666668C199.2533333333334 -15.5733333333333 131.6266666666667 -15.5733333333333 90.0266666666667 26.0266666666668C48.4266666666667 67.6266666666667 48.4266666666667 135.2533333333335 90.0266666666667 176.8533333333334L121.8133333333334 208.6400000000001C121.6000000000001 191.1466666666668 124.3733333333334 173.6533333333334 130.3466666666667 156.8000000000001L120.3200000000001 146.7733333333334C95.1466666666667 121.8133333333334 95.1466666666667 81.2800000000001 120.3200000000001 56.3200000000001C145.2800000000001 31.1466666666667 185.8133333333334 31.1466666666667 210.7733333333334 56.3200000000001L286.0800000000001 131.6266666666667C311.2533333333334 156.5866666666667 311.2533333333334 197.12 286.0800000000001 222.08C277.3333333333334 230.4000000000001 277.3333333333334 244.0533333333334 286.0800000000001 252.3733333333334z" />
</font>
</defs>
</svg>
--
GitLab