Material Design Icons added + visual enhancement

src/dependencies.pug

@@ -19,11 +19,8 @@ script(src="/scripts/index.js")
 // Stylesheets
 link(rel='stylesheet', href='/lib/normalize.css')
 link(rel='stylesheet', href='/styles/index.css')
-link(
-  rel='stylesheet'
-  href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext'
-)
-link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet")
+link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext')
+link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
 
 // Web components
 

src/page-members.pug

@@ -7,8 +7,9 @@ div.grid-layer
       data-src=`${sdn}/members/`,
       data-fields='header, infos, groups',
       set-header='user.account.picture, user, pseudonym, bio, send',
-      set-infos='user.roles, user.email, phone, user.skills',
-      set-pseudonym='before-pseudo,pseudo',
+      set-infos='cell, user.groups.name, user.email, phone, user.skills',
+      set-user='user.first_name, user.last_name',
+      set-pseudonym='before-pseudo,user.username',
       value-before-pseudo='@',
       value-send='SEND A MESSAGE',
       template-send='chat-link',

src/styles/functions.scss

@@ -1 +0,0 @@
-//

src/styles/icons.scss

@@ -58,7 +58,16 @@
   // text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
 }
 
+%outline-person {
+  background-image: url(/images/svg/icon-outline-person.svg);
+  background-repeat: no-repeat;
+  background-position: left top;
+  padding-top: 20px;
+  margin-left: 1.35em;;
+}
+
 $icons: (
+  /* outline-person: '\f206', */
   user-female: '\e000',
   people: '\e001',
   user-follow: '\e002',

src/styles/index.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
-@import 'functions';
 @import '../../node_modules/include-media/dist/include-media';
+@import 'material-design-icons';
 @import 'icons';
 @import 'variables';
 @import 'mixins';

src/styles/material-design-icons.scss

@@ -0,0 +1,87 @@
+/* MaterialDesignIcons.com */
+
+$mdi-filename:         "material-design-icons";
+$mdi-font-name:        "material-design-icons";
+$mdi-font-family:      "material-design-icons";
+$mdi-font-weight:      "regular";
+$mdi-font-path:        "../fonts" !default;
+$mdi-css-prefix:       mdi !default;
+$mdi-version:          "3.3.92" !default;
+
+@font-face {
+  font-family: '#{$mdi-font-name}';
+  src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}');
+  src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
+    url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'),
+    url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'),
+    url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'),
+    url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+$mdi-icons: (
+  account-outline: '\F013',
+  atom: '\F767'
+);
+
+%mdi,
+[class^='mdi-']:before,
+[class*='mdi-']:before {
+  display: inline-block;
+  font-family: '#{$mdi-font-name}';
+  font-size: 25px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 0.5em;
+  margin-left: -0.15em;
+  text-align: center;
+  text-decoration: inherit;
+  width: 1em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+}
+
+@function char($character-code) {
+  @if function-exists("selector-append") {
+    @return unquote("\"\\#{$character-code}\"");
+  }
+
+  @if "\\#{'x'}" == "\\x" {
+    @return str-slice("\x", 1, 1) + $character-code;
+  }
+  @else {
+    @return #{"\"\\"}#{$character-code + "\""};
+  }
+}
+
+@function mdi($name) {
+  @if map-has-key($mdi-icons, $name) == false {
+    @warn "Icon #{$name} not found.";
+    @return "";
+  }
+  @return char(map-get($mdi-icons, $name));
+}
+
+@each $key, $value in $mdi-icons {
+  .#{$mdi-css-prefix}-#{$key}:before {
+    content: char($value);
+  }
+}
+
+@mixin mdi($value) {
+  &:before {
+    @extend %mdi;
+    @extend .#{$mdi-css-prefix}-#{$value};
+  }
+}
+
+
+.#{$mdi-css-prefix}-blank:before {
+  content: "\F68C";
+  visibility: hidden;
+}

src/styles/members.scss

@@ -50,7 +50,7 @@
       flex-flow: column wrap;
       margin-bottom: 2.5rem;
       @media(min-width: 56rem) {
-        height: 60rem;
+        height: 62rem;
         width: 32%;
       }
 
@@ -60,7 +60,7 @@
 
       div[name='header'] {
         border-bottom: 1px solid $color-grey-light;
-        padding: 0.5em 0 3em;
+        padding: 0.5em 0 2em;
         display: flex;
         flex-direction: column;
 
@@ -82,15 +82,20 @@
           }
         }
 
-        hdapp-userinfo {
+        div[name='user'] {
+          font-weight: bold;
           @extend h1;
-          
-          ul {
-            padding: 0;
-            margin: 0;
+
+          sib-display-div[name$='last_name'] {
+            margin-left: 6px;
           }
         }
 
+        div[name='pseudonym'] {
+          font-size: 15px;
+          margin-top: 8px;
+        }
+
         sib-display-div[name$='bio'] {
           display: flex;
           flex-basis: 3.5em;
@@ -134,11 +139,11 @@
         }
         
         [name$='cell'] * {
-          @include icon('chemistry');
+          @include mdi('atom');
         }
 
-        [name$='roles'] * {
-          @include icon('user');
+        [name*='groups'] * {
+          @include mdi('account-outline');
         }
 
         [name$='email'] * {