update

src/styles/content.scss

@@ -1,7 +1,6 @@
 // job offers
 #offers-list {
   > div {
-    display: none;
     > sib-display {
       display: block;
       margin: 1em 0;
@@ -11,15 +10,44 @@
       &:nth-child(odd) {
         background-color: $color-white;
       }
-      sib-display-div[name=title]{
+      sib-display-div[name='title'] {
         display: block;
-        @extend h1;
-        background-color: red;
+        @extend h2;
+      }
+      label {
+        display: none;
+      }
+      hdapp-author {
+        ul {
+          @include list-reset();
+        }
       }
     }
   }
 }
 
+// skills
+sib-display-lookuplist[name='skills'] {
+  ul,
+  li {
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 -0.25em;
+  }
+  li {
+    padding: 0.5em 1em;
+    border: 1px solid;
+    border-radius: 0.25em;
+    margin: 0.25em;
+  }
+}
+
 // chat
 
 .chat-view {
@@ -32,7 +60,6 @@
   }
 }
 
-
 .members-list-condensed {
   display: block;
   img {
@@ -53,10 +80,9 @@
   }
 }
 
-
 // member-profile && member
 sib-display#member-info,
-#profiles-list>div>sib-display{
+#profiles-list > div > sib-display {
   display: block;
   position: relative;
   background-color: $color-white;
@@ -92,4 +118,3 @@ sib-display#member-info,
     grid-gap: 1em;
   }
 }
-

src/styles/form.scss

@@ -0,0 +1,35 @@
+//button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime
+
+
+sib-form{
+  form{
+    margin: -.5em;
+    >*{
+      margin: .5em;
+    }
+  }
+
+  // text like
+  input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=file]):not([type=hidden]):not([type=image]):not([type=radio]):not([type=range]):not([type=reset]):not([type=submit]){
+    padding: 0.5em;
+    border: none;
+    @extend %shadow;
+  }
+  
+  // button like
+  button,
+  input[type=button],
+  input[type=color],
+  input[type=file],
+  input[type=reset],
+  input[type=submit]{
+    padding: 0.5em 1em;
+    border: none;
+    background-color: $color-yellow;
+    border-radius: 100em;
+  }
+
+  input[type="reset"]{
+    display: none;
+  }
+}

src/styles/index.scss

@@ -9,6 +9,6 @@
 @import 'form';
 @import 'content';
 
-@import 'members';
+// @import 'members';
 @import 'menu';
 

src/styles/members.scss

@@ -0,0 +1,222 @@
+
+// members
+%img-circle {
+  $width: 55%;
+  display: block;
+  position: relative;
+  width: $width;
+  padding-bottom: $width;
+  height: 0;
+  margin: 2em auto;
+  img {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    object-fit: cover;
+    object-position: center;
+  }
+}
+
+%member {
+  sib-display-img {
+    @extend %img-circle;
+  }
+  display: block;
+  position: relative;
+  background-color: $color-white;
+  @extend %shadow;
+  padding: 0.5em;
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: scale3d(0, 0, 1);
+    transition: transform 0.3s ease-out 0s;
+    background: #eac1;
+    content: '';
+    pointer-events: none;
+  }
+
+  &::before {
+    transform-origin: left top;
+  }
+
+  &::after {
+    transform-origin: right bottom;
+
+    background: #ace1;
+  }
+
+  &:hover,
+  &:focus {
+    &::before,
+    &::after {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+}
+
+#profiles-list {
+  display: block;
+  div[name='header'] {
+    border-top: 2em solid $color-grey-light;
+    border-bottom: 1px solid $color-grey-light;
+    padding-bottom: 1em;
+    margin: -0.5em;
+    padding: 0.5em;
+    margin-bottom: 1em;
+    text-align: center;
+  }
+
+  > div {
+    display: grid;
+    margin-top: 1em;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-gap: 1em;
+    label {
+      display: none;
+    }
+
+    > sib-display {
+      @extend %member;
+    }
+  }
+
+  hdapp-userinfo {
+    display: block;
+    color: $color-black;
+    font-size: 1.1em;
+    margin: 0.5em;
+    ul,
+    li {
+      display: block;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  }
+
+  div[name='pseudonym'] {
+    font-size: 0.8em;
+    div {
+      display: inline;
+    }
+  }
+}
+
+
+// member
+%detail-section {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+#member-chat {
+  #conversejs {
+    margin: none;
+  }
+}
+#member-info {
+  background-color: $color-white;
+  padding: 1em;
+  @extend %shadow;
+}
+
+#profiles-list,
+#member-info {
+  img {
+    display: block;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  div[name='name'] {
+    @extend %detail-section;
+    padding-top: 10px;
+  }
+
+  div[name='name'],
+  div[name='location'] {
+    display: flex;
+  }
+}
+
+#member-detail {
+  #member-info {
+    sib-display-mailto,
+    sib-display-tel {
+      display: block;
+    }
+
+    a[name='email'],
+    a[name='number'] {
+      &::before {
+        font-family: FontAwesome;
+        padding-right: 4px;
+        color: black;
+      }
+    }
+    a[name='email'] {
+      &::before {
+        content: '\f0e0';
+      }
+    }
+    a[name='number'] {
+      &::before {
+        content: '\f10b';
+        font-size: 22px;
+        padding-left: 3px;
+        padding-right: 7px;
+      }
+    }
+  }
+
+  .section {
+    position: relative;
+
+    h2 {
+      @extend %detail-section;
+      margin-top: 40px;
+    }
+  }
+
+  #member-skills {
+    display: flex;
+    flex-wrap: wrap;
+
+    sib-display {
+      display: block;
+      background-color: $color-black;
+      color: $color-white;
+      border-radius: 100px;
+      padding: 3px 10px;
+      margin-bottom: 5px;
+      margin-right: 5px;
+    }
+  }
+}
+
+@include media('width>phone') {
+  #member-detail {
+    #member-info {
+      sib-display-img {
+        display: block;
+        float: right;
+        width: 300px;
+      }
+    }
+  }
+}
+
+#member-info {
+  @extend %member;
+}