css: refactoring & fixing - day 1

2019-05-13 18:50:34 +02:00 · 2019-05-13 18:50:34 +02:00 · 6c1a28f604
commit 6c1a28f604
parent 5eff8ffcec
53 changed files with 842 additions and 1383 deletions
--- a/2
+++ b/2
@ -60,7 +60,7 @@ $(DIST_DIR)/index.staging.html: src/index.pug src/config.json $(wildcard src/*.p
 	node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@

 # sass
-$(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
+$(DIST_DIR)/styles/index.css: src/styles/_index.scss $(wildcard src/*.scss src/*/*.scss src/*/*/*.scss src/*/*/*/*.scss)
 	@echo sass: $< ➜ $@
 	@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@ 

--- a/server.js
+++ b/server.js
@ -21,6 +21,12 @@ bs.init({
  proxy: `http://localhost:${port}`,
  open: false,
  notify: false,
-  port: browserSyncPort
-  // tunnel: true,
+  port: browserSyncPort,
+  files: [
+    'www/styles/index.css',
+    'www/scripts/index.js',
+    'www/index.html',
+    'www/images/**',
+    'www/fonts/**'
+  ]
 });
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@ -1,28 +1,21 @@
-// Scripts
-//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
-//script(src="/lib/webcomponentsjs/webcomponents-loader.js")
-//- script(src="lib/html-imports.js")
-
 script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
-
 script(src="/scripts/index.js")

-// Stylesheets
+//- 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&amp;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
-
 //- local
-//script(type="module" src="/lib/sib-core/sib-display.js")
-//script(type="module" src="/lib/sib-router/sib-router.js")
-//script(type="module" src="/lib/sib-core/sib-form.js")
+//- script(type="module" src="/lib/sib-core/src/index.js")
+//- script(type="module" src="/lib/sib-router/src/index.js")
+//- script(type="module" src="/lib/sib-chat/sib-chat.js")
+//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
+//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
+//- script(type="module" src="/lib/sib-directory/sib-directory.js")

-//link(rel='import', href='/lib/sib-chat/sib-chat.html')
-
-//- cdn
+//- CDN
 script(type="module" src="https://unpkg.com/@startinblox/core@0.7.15")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
 script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
--- a/src/header.pug
+++ b/src/header.pug
@ -1,4 +1,3 @@
-#button-toggle
 #logo
  img(src="/images/logo.png" width=111 height=32)

--- a/src/index.pug
+++ b/src/index.pug
@ -9,33 +9,33 @@ html(lang="en")
    link(rel="icon" type="image/png" href="/images/favicon.png")
    include dependencies.pug
  body
-    div.layer
-      header#header.row(role='banner')
-        include header.pug
-      .content.row
-        include menu-left.pug
+    header#header.row(role='banner')
+      include header.pug
+    .content.row
+      include menu-left.pug
+      main#mainContainer

-        main#mainContainer
-          //- #dashboard(hidden)
-            include page-dashboard.pug
-          #members(hidden)
-            include page-members.pug
-          #member-chat(hidden)
-            include page-member-chat.pug
-          #job-offers(hidden)
-            include page-job-offers.pug
-          #job-offer-create(hidden)
-            include page-job-offer-create.pug
-          #project(hidden)
-            include page-project.pug
-          #user-profile(hidden)
-          #user-settings(hidden)
-          #user-admin(hidden)
-          //- #client-creation(hidden)
-            include page-client-creation.pug
-          //-#groups(hidden)
-            include page-groups.pug
-          #circle(hidden)
-            include page-group.pug
-          //- #search(hidden)
-            include page-search.pug
+        #members(hidden).padded-width
+          include page-members.pug
+
+        #job-offers(hidden).padded-width
+          include page-job-offers.pug
+
+        #job-offer-create(hidden).padded-width
+          sib-link(class="backlink", next="job-offers") Back
+          include page-job-offer-create.pug
+
+        #project(hidden)
+          include page-project.pug
+        
+        #circle(hidden)
+          include page-group.pug
+
+        #member-chat(hidden)
+          include page-member-chat.pug
+
+        #user-profile(hidden)
+
+        #user-settings(hidden)
+
+        #user-admin(hidden)
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@ -4,8 +4,7 @@ nav#navbar
      div.menu-notification
        sib-display(
        data-src=`${sdn}/members/`,
-        data-fields='-',
-        counter-template='${counter}'
+        data-fields='-'
        )
      div.menu-label Members
      div.menu-icon.icon-people
@ -14,8 +13,7 @@ nav#navbar
      div.menu-notification
        sib-display(
        data-src=`${sdn}/job-offers/`,
-        data-fields='-',
-        counter-template='${counter}'
+        data-fields='-'
        )
      div.menu-label Job offers
      div.menu-icon.icon-briefcase
--- a/src/page-group-create.pug
+++ b/src/page-group-create.pug
@ -1,4 +1,4 @@
-.frame-form
+.frame-form.full-wide
  h1 New group
  p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
  .form-view
--- a/src/page-group-edit.pug
+++ b/src/page-group-edit.pug
@ -1,4 +1,4 @@
-#circle-edit
+#circle-edit.frame-form
  h1 Edit group
  .form-view
    sib-form.block(
--- a/src/page-group.pug
+++ b/src/page-group.pug
@ -16,7 +16,7 @@ nav.jsRightMenu(role='navigation')
      sib-route(name='circle-create')
        li
          a Add new
-#views-container
+.views-container
  #circle-chat
    include page-group-chat.pug
  #circle-profile
--- a/src/page-job-offer-create.pug
+++ b/src/page-job-offer-create.pug
@ -1,4 +1,4 @@
-.frame-form
+.frame-form.frame
    
  sib-widget(name='title-text')
    template
@ -8,7 +8,6 @@
    template
      p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
  
-  sib-link(next='job-offers' class='back') Back
  h1 Post a new job offer
  p.form-goal This form allows you to share an offer to all members of the network.
  .form-view
--- a/src/page-job-offers.pug
+++ b/src/page-job-offers.pug
@ -5,7 +5,7 @@ div.grid-layer
  include templates/template-joboffers-filter.pug

  div.grid-layer-main.containerV
-    h2 New offers
+    h1 New offers
      span Here you can find and post offers
    sib-display#offers-list(
      data-src=`${sdn}/job-offers/`,
@ -38,7 +38,7 @@ div.grid-layer
  div.grid-layer-links.containerV
    template#groups-list-template
      p ${value}
-    sib-link(next="job-offer-create").containerH.containerCenter.action-link
+    sib-link(next="job-offer-create").plus-button
      div.icon-plus
      div Post a new offer
    //-sib-link().containerH.containerCenter.how-link
--- a/src/page-project-create.pug
+++ b/src/page-project-create.pug
@ -1,4 +1,4 @@
-.frame-form
+.frame-form.full-wide
  h1 New project
  p.form-goal Here you can create your project, add members and assign them a job.
  .form-view
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@ -17,7 +17,7 @@ sib-widget(name='template-members')
      label-user.name='Member(s)',
    )

-.frame-form
+.frame-form.full-wide
  h1 Edit your project
  p.form-goal Here you can edit your projet's details
  .form-view
--- a/src/page-project-profile.pug
+++ b/src/page-project-profile.pug
@ -1,4 +1,4 @@
-.frame
+.frame-form.full-wide

  include templates/template-business-provider.pug
  include templates/template-customer.pug
--- a/src/page-project.pug
+++ b/src/page-project.pug
@ -15,7 +15,7 @@ nav.jsRightMenu(role='navigation')
      sib-route(name='project-create', use-id)
        li
          a Add new
-#views-container
+.views-container
  #project-chat
    include page-project-chat.pug
  #project-profile
--- a/src/scripts/hd-app.js
+++ b/src/scripts/hd-app.js
@ -1,63 +0,0 @@
-document.addEventListener("DOMContentLoaded", function (event) {
-  // Constants declaration
-  const navBar = document.querySelector("#navbar");
-  const searchBar = document.querySelector("#search-bar");
-  const searchView = document.querySelector("#search-view");
-  const searchInput = searchBar.querySelector("#search-input");
-  const btnToggle = document.querySelector("#button-toggle");
-
-
-  // Shortcuts
-  window.addEventListener("keydown", function (e) {
-    // CTRL + K triggers the search feature
-    if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
-      e.preventDefault();
-      e.stopPropagation();
-      openSearchBar();
-    }
-
-    // Escape key
-    else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
-      closeSearchBar();
-    }
-  });
-
-  searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
-
-  function openSearchBar(e) {
-    navBar.classList.add("search-mode");
-    searchBar.querySelector("#search-input").focus();
-    searchView.classList.add("search-mode");
-  }
-
-  function closeSearchBar(e) {
-    navBar.classList.remove("search-mode");
-    searchView.classList.remove("search-mode");
-  }
-
-  function emptySearchBar(e) {
-    searchInput.value = '';
-    openSearchBar();
-    searchInput.focus;
-  }
-
-
-  // Synchronizes the search input with the <ldp-form>s 
-  searchInput.addEventListener("keyup", (e) => {
-    searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
-      el.value = searchInput.value;
-    });
-  });
-
-
-  btnToggle.addEventListener('click', e => {
-    navBar.classList.toggle('open');
-    e.stopPropagation();
-  });
-
-  window.addEventListener('click', e => {
-    navBar.classList.remove('open');
-  });
-
-
-});
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@ -1,34 +1,7 @@
 document.addEventListener('DOMContentLoaded', function (event) {
-  const navBar = document.querySelector('#navbar');
-  const btnToggle = document.querySelector('#button-toggle');
  const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
  const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));

-  if (!navBar || !btnToggle) return;
-
-  btnToggle.addEventListener('click', e => {
-    navBar.classList.toggle('open');
-    e.stopPropagation();
-  });
-
-  window.addEventListener('click', e => {
-    navBar.classList.remove('open');
-  });
-
-  function resize() {
-    setTimeout(() =>
-      Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
-        if (!elm.offsetParent) return;
-        elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
-      }));
-  }
-  window.addEventListener('resize', resize);
-  window.addEventListener('navigate', resize);
-  window.addEventListener('popstate', resize);
-  document.addEventListener('load', resize);
-  document.addEventListener('WebComponentsReady', resize);
-  resize();
-
  // Toggle sub-menus
  menuWrappers.forEach(menuWrapper => {
    const menu = menuWrapper.querySelector('.menu');
@ -44,5 +17,6 @@ document.addEventListener('DOMContentLoaded', function (event) {
    btnRightMenu.addEventListener('click', e => {
      rightMenu.classList.toggle('offsite-is-closed');
    })
-  })
+  });
+
 });
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@ -0,0 +1,17 @@
+@charset "UTF-8";
+
+@import '../../node_modules/include-media/dist/include-media';
+
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+@import 'components/icons/index';
+@import 'base/main';
+@import 'components/index';
+
+main#mainContainer {
+    @import 'layout/members/index';
+    @import 'layout/job-offers/index';
+    @import 'layout/project-profile/index';
+    @import 'layout/circle-profile/index';
+    @import 'layout/member-chat/index';
+}
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@ -0,0 +1,24 @@
+@mixin style-template-fieldset($name: 'default') {
+  template-legend-#{$name} {
+    border-bottom: 1px solid $color-221-51-90;
+    color: $color-233-18-29;
+    font-size: 1.8rem;
+    font-weight: 600;
+    padding-bottom: 1rem;
+  }
+}
+
+@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
+  box-shadow: 0 0 8px 0 $shadow;
+  background-color: $background;
+}
+
+%user-role {
+  border: 1px solid $color-45-95-54;
+  border-radius: 3px;
+  color: $color-210-4-50;
+  font-size: 1.4rem;
+  font-weight: 400;
+  margin-right: 0.4rem;
+  padding: calc(1.6rem - 0.8em) 0.7em;
+}
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@ -0,0 +1,25 @@
+// Color Variables
+$color-43-100-50: hsl(43, 100%, 50%);
+$color-45-95-54: hsl(45, 95%, 54%);
+$color-46-100-67: hsl(46, 100%, 67%);
+$color-46-100-50: hsl(46, 100%, 50%);
+$color-0-0-100: hsl(0, 0%, 100%);
+$color-210-17-91: hsl(210, 17%, 91%);
+$color-222-52-90: hsl(222, 52%, 90%);
+$color-210-25-95: hsl(210, 25%, 95%);
+$color-222-57-95: hsl(222, 57%, 95%);
+$color-213-20-91: hsl(213, 20%, 91%);
+$color-221-51-90: hsl(221, 51%, 90%);
+$color-0-0-85: hsl(0, 0%, 85%);
+$color-229-25-79: hsl(229, 25%, 79%);
+$color-215-9-73: hsl(215, 9%, 73%);
+$color-244-10-70: hsl(244, 10%, 70%);
+$color-215-6-63: hsl(215, 6%, 63%);
+$color-210-5-56: hsl(210, 5%, 56%);
+$color-210-4-50: hsl(210, 4%, 50%);
+$color-213-4-50: hsl(213, 4%, 50%);
+$color-213-13-86: hsla(213, 13%, 86%, 0.2);
+$color-0-0-29: hsl(0, 0%, 29%);
+$color-233-18-29: hsl(233, 18%, 29%);
+$color-216-4-22: hsl(216, 4%, 22%);
+$color-244-73-62: hsl(244, 73%, 62%);
--- a/src/styles/base/_compat.scss
+++ b/src/styles/base/_compat.scss
@ -0,0 +1,73 @@
+.grid-layer {
+    display: grid;
+    font-size: 16px;
+    grid-template-columns: [start]auto[middle]25%[end];
+    grid-template-rows: [start]7em[middle]auto[end];
+}
+
+%flex-grid-layer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.grid-layer-main {
+    @extend %flex-grid-layer;
+    grid-column-start: start;
+    grid-column-end: end;
+    grid-row-start: start;
+    grid-row-end: end;
+}
+
+.grid-layer-links {
+    @extend %flex-grid-layer;
+    grid-column-start: middle;
+    grid-column-end: end;
+    grid-row-start: start;
+    grid-row-end: middle;
+}
+
+.containerH {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.containerV {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}
+
+.grow {
+    flex-grow: 1;
+    flex-shrink: 1;
+}
+
+.fix {
+    flex-grow: 0;
+    flex-shrink: 0;
+}
+
+.containerCenter {
+    justify-content: center;
+    align-items: center;
+}
+
+.reverse {
+    flex-direction: row-reverse;
+}
+
+.row {
+    display: flex;
+    max-width: 100%;
+}
+
+.content {
+    flex-direction: row;
+    height: 100%;
+    overflow: hidden;
+}
+
+.col {
+    min-width: 0;
+}
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@ -0,0 +1,114 @@
+$breakpoints: (phone: 480px,
+  tablet: 768px,
+  desktop: 1024px) !default;
+
+[hidden],
+.hidden {
+  display: none !important;
+}
+
+:root {
+  font-size: 10px;
+  font-family: Open Sans, sans-serif;
+  --sib-notifications-theme: #{$color-46-100-50};
+
+  body {
+    background-color: $color-210-25-95;
+    color: $color-213-4-50;
+    font-size: 1.6rem;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+  }
+}
+
+img {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $color-216-4-22;
+  font-weight: 600;
+  padding: 0;
+
+  span {
+    font-weight: 400;
+    padding-left: 0.85rem;
+
+    &:before {
+      content: '// ';
+    }
+  }
+}
+
+h1 {
+  font-size: 2.1rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.6rem;
+}
+
+h4 {
+  font-size: 1.2rem;
+}
+
+h5 {
+  font-size: 2rem;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+%padding-main {
+  padding: 5rem;
+}
+
+.padded-width {
+  flex: 1;
+  @extend %padding-main;
+}
+
+.frame {
+  @include window-style-modal();
+  @extend %padding-main;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 2rem 1rem 5rem 2rem;
+}
+
+/* Dividing into columns */
+@mixin respond-to($breakpoint) {
+
+  @if map-has-key($breakpoints, $breakpoint) {
+
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+
+  @else {
+    @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
+    +"Available breakpoints are: #{map-keys($breakpoints)}.";
+  }
+}
+
+// Compatibility layer for non-updated components
+@import 'compat';
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@ -0,0 +1,8 @@
+@import 'form';
+@import 'content';
+@import 'filters';
+@import 'howto';
+@import 'header';
+@import 'menu-left';
+@import 'menu-right';
+@import 'skills';
--- a/src/styles/components/content.scss
+++ b/src/styles/components/content.scss
@ -0,0 +1,114 @@
+.backlink {
+  font-size: 1.5rem;
+  margin: 2rem 0 0 2rem;
+  @include icon('arrow-left-circle');
+  color: #3d4057;
+  text-decoration: underline;
+
+  &::before {
+    text-decoration: none;
+  }
+
+  &::before {
+    font-size: 2rem;
+    margin-right: 1rem;
+  }
+}
+
+sib-route,
+sib-link {
+  cursor: pointer;
+}
+
+// group
+
+#group-profile {
+  sib-display-div[name='name'] div {
+    @extend h1;
+  }
+
+  sib-display-div[name='label-description'] div {
+    @extend h2;
+  }
+}
+// chat
+
+.chat-view {
+  padding: 1.7rem;
+  position: relative;
+  z-index: 0;
+  @include window-style-modal();
+  height: calc(100vh - 104px);
+
+  > sib-chat {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+#member-profile {
+  @include media('width>tablet') {
+    div[name='header'] {
+      float: left;
+      width: 50%;
+    }
+  }
+
+  div[name='name'] {
+    @extend h1;
+
+    div {
+      display: inline-block;
+      margin-right: 0.7rem;
+    }
+  }
+
+  sib-link[next='member-chat'] {
+    border-style: solid;
+    display: flex;
+    border-radius: 25px;
+    border-style: solid;
+    border-color: $color-244-73-62;
+    color: $color-244-73-62;
+    padding: 1.7rem;
+    text-decoration:none;
+  }
+
+  div[name='pseudonym'] {
+    margin-top: -1.7rem;
+    margin-bottom: 1.7rem;
+  }
+
+  #member-info {
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+  }
+}
+
+sib-form {
+
+  form > * {
+    margin-top: 0.85rem;
+  }
+
+  // button like
+  input[type='color'],
+  input[type='file'],
+  input[type='reset'],
+  input[type='submit'] {
+    display: inline-block;
+    padding: 0.85rem 2.55rem;
+    border: none;
+    border-radius: 100em;
+    font-weight: normal;
+  }
+
+  input[type='reset'] {
+    display: none;
+  }
+}
--- a/src/styles/components/filters.scss
+++ b/src/styles/components/filters.scss
@ -14,7 +14,7 @@
    -webkit-appearance: none;
    border-style: none;
    box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
-    color: $color-taupe-gray;
+    color: $color-210-5-56;
    font-size: 1.36rem;
    line-height: 1.80;
    margin-top: 1.36rem;
@ -27,7 +27,7 @@
  }

  select {
-    background: $color-white;
+    background: $color-0-0-100;
    background-image: url("/images/chevron-down.png");
    background-position: right 12px top 60%;
    background-repeat: no-repeat;
--- a/src/styles/components/form.scss
+++ b/src/styles/components/form.scss
@ -1,31 +1,26 @@
+@include style-template-fieldset('fee');
+@include style-template-fieldset('customer');
+@include style-template-fieldset('team');
+
 .frame-form {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  min-height: 100vh;
-  padding: 6.8rem 8.5rem 10.2rem;
-  @extend %frame;
+  &.full-wide {
+    display: flex;
+    flex: 1;
+    font-size: 1.5rem;
+    flex-direction: column;
+    margin: 0 auto;
+    min-height: 100vh;
+    padding: 6.8rem 8.5rem 10.2rem;
+    background: $color-0-0-100;
+  }
  
  .form-view {
-    border-bottom: 1px solid $color-platinum;
+    border-bottom: 1px solid $color-210-17-91;
    padding-bottom: 2.55rem;
  }
-}
-
-@include styleTemplateFieldset('fee');
-@include styleTemplateFieldset('customer');
-@include styleTemplateFieldset('team');
-
-#circle-create,
-#circle-edit,
-#job-offer-create,
-#project-create,
-#project-edit {
-  flex: 1;
-  font-size: 1.5rem;

  h1 {
-    color: $color-purple-dark;
+    color: $color-233-18-29;
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
@ -49,9 +44,9 @@
  input {
    -webkit-appearance: none;
    align-items: center;
-    background: $color-glitter;
+    background: $color-222-57-95;
    border: none;
-    color: $color-purple-dark;
+    color: $color-233-18-29;
    display: inline-flex;
    justify-content: flex-start;
    line-height: 1.5;
@ -69,14 +64,21 @@
    flex-direction: column;

    > label {
-      @extend %label;
+      color: $color-244-10-70;
+      font-weight: 600;
+      margin: 2em 0 0.5em;
+      text-transform: uppercase;
+    
+      > div {
+        padding-bottom: 1rem;
+      }
    }

    select,
    textarea {
-      background: $color-glitter;
+      background: $color-222-57-95;
      border: none;
-      color: $color-purple-dark;
+      color: $color-233-18-29;
      line-height: 1.5;
      width: 100%;
      
@ -97,7 +99,7 @@
  sib-form-multiple-dropdown {

    label {
-      color: $color-dark-lava;
+      color: $color-216-4-22;
      font-weight: 600;
      text-transform: initial;
    }
@ -119,7 +121,7 @@
          /*@extend %skill;*/

          button.choices__button {
-            border-left: 1px solid $color-selective-yellow;
+            border-left: 1px solid $color-43-100-50;
            opacity: 1;
            padding-left: 0;
          }
@ -142,7 +144,7 @@
      margin-top: 2em;
      
      &:before {
-        border: 2px solid $color-taupe-gray; 
+        border: 2px solid $color-210-5-56; 
        content: '';
        height: 1rem;
        left: 0;
@ -155,8 +157,8 @@
      
      &:checked {
        &:before {
-          border: 2px solid $color-taupe-gray; 
-          color: $color-majorelle-blue;
+          border: 2px solid $color-210-5-56; 
+          color: $color-244-73-62;
          height: 1rem;
          left: 0;
          margin-left: 1rem;
@ -169,7 +171,7 @@
      }
      
      &:after {
-        background: $color-white;
+        background: $color-0-0-100;
        content: '';
        height: 1rem;
        position: absolute;
@ -198,10 +200,10 @@

    button {
      appearance: none;
-      background-color: $color-white;
+      background-color: $color-0-0-100;
      border: 1px solid;
      border-radius: 100%;
-      color: $color-majorelle-blue;
+      color: $color-244-73-62;
      cursor: pointer;
      font-size: 2.55rem;
      height: 1em;
@ -226,7 +228,11 @@

  input[type='submit'] {
    margin-top: 6rem;
-    @extend %submit-form;
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
+    float: right;
+    font-weight: bold;
+    text-transform: uppercase;
  }
 }

@ -271,10 +277,10 @@ sib-multiple-form[name='members'] {

  button {
    appearance: none;
-    background-color: $color-white;
+    background-color: $color-0-0-100;
    border: 1px solid;
    border-radius: 100%;
-    color: $color-majorelle-blue;
+    color: $color-244-73-62;
    cursor: pointer;
    font-size: 2.55rem;
    height: 1em;
--- a/src/styles/components/header.scss
+++ b/src/styles/components/header.scss
@ -1,8 +1,8 @@

 #header {
  align-items: center;
-  background-color: $color-white;
-  color: $color-dark-lava;
+  background-color: $color-0-0-100;
+  color: $color-216-4-22;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
  display: flex;
  flex-shrink: 0;
@ -15,15 +15,6 @@
  }
 }

-#button-toggle {
-  color: $color-dark-lava;
-  cursor: pointer;
-  display: none;
-  font-size: 3.2rem;
-  padding: 2.3rem;
-  @include icon('menu');
-}
-
 #logo {
  flex: 1 1 0;
 }
@ -34,14 +25,14 @@
  #search-input {
    border-radius: 10em;
    padding: 0.64rem 1.28rem;
-    border: 1px solid $color-bombay;
+    border: 1px solid $color-215-9-73;
    height: 3.8rem;
    width: 28rem;
    -webkit-appearance: textfield;
  
    & ~ #close-search-icon,
    & ~ #search-icon {
-      color: $color-bombay;
+      color: $color-215-9-73;
      display: block;
      font-size: 1.7rem;
      margin: auto;
@ -49,7 +40,7 @@
      right: 3.7rem;
      top: 50%;
      transform: translateY(-50%);
-      -webkit-text-stroke: 1px $color-bombay;
+      -webkit-text-stroke: 1px $color-215-9-73;
    }
  
    & ~ #close-search-icon {
@ -115,8 +106,8 @@ details {
 details#user-controls {

  summary:focus {
-    background-color: $color-purple-dark;
-    color: $color-white;
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;
    outline: none;
  }

@ -160,7 +151,7 @@ details#user-controls {
    z-index: 1;
    
    > nav {
-      background-color: $color-white;
+      background-color: $color-0-0-100;
      box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
      position: absolute;
      right: 0;
@ -178,14 +169,14 @@ details#user-controls {
          padding: 1.6rem 1.3rem;

          a {
-            color: $color-text-base;
+            color: $color-213-4-50;
            text-decoration: none;
          }
        }
      }

      button {
-        color: $color-text-base;
+        color: $color-213-4-50;
        padding: 1.6rem 1.3rem;
        text-align: left;
        width: 100%;
@ -194,8 +185,8 @@ details#user-controls {
  }

  &[open] {
-    background-color: $color-purple-dark;
-    color: $color-white;
+    background-color: $color-233-18-29;
+    color: $color-0-0-100;

    #user-controls__profile {

--- a/src/styles/components/howto.scss
+++ b/src/styles/components/howto.scss
@ -0,0 +1,17 @@
+.howto {
+  padding: 0.85rem;
+  margin-bottom: 1.7rem;
+  margin-left: 8.5rem;
+  flex-basis: auto;
+  border-radius: 2em;
+
+  div[class*="icon-"] {
+    align-items: center;
+    display: flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+
+
--- a/src/styles/components/icons/_index.scss
+++ b/src/styles/components/icons/_index.scss
@ -0,0 +1,3 @@
+@import 'custom-icons';
+@import 'icons';
+@import 'material-design-icons';
--- a/src/styles/components/icons/custom-icons.scss
+++ b/src/styles/components/icons/custom-icons.scss
--- a/src/styles/components/icons/icons.scss
+++ b/src/styles/components/icons/icons.scss
--- a/src/styles/components/icons/material-design-icons.scss
+++ b/src/styles/components/icons/material-design-icons.scss
--- a/src/styles/components/menu-left.scss
+++ b/src/styles/components/menu-left.scss
@ -1,14 +1,10 @@
 #navbar {
-  background-color: $color-purple-dark;
-  color: $color-white;
+  background-color: $color-233-18-29;
+  color: $color-0-0-100;
  display: block;
-  flex: 0 0 16em;
-  flex-direction: column;
  overflow: auto;
+  flex: 0 0 16em;
  transition: flex-basis 0.5s ease-in-out;
-  // max-width: 16rem;
-  // position: relative;
-  // min-height: 100%;

  &.open {
    transform: translateX(0);
@ -35,18 +31,17 @@
      padding: 1.6rem;
  
      &[active] {
-        background-color: $color-mustard;
-        color: $color-purple-dark;
+        background-color: $color-46-100-67;
+        color: $color-233-18-29;
  
        .menu-icon:before {
-          background-color: $color-purple-dark;
-          color: $color-white;
-          // transform: perspective(1000px) translateZ(1px) scale(0.8);
+          background-color: $color-233-18-29;
+          color: $color-0-0-100;
        }
  
        .menu-notification > sib-display > div:first-child {
-          background-color: $color-purple-dark;
-          color: $color-mustard;
+          background-color: $color-233-18-29;
+          color: $color-46-100-67;
        }
      }
  
@ -64,9 +59,6 @@
          height: 1.9em;
          line-height: 1.9em;
          width: 1.9em;
-          // transform: perspective(1000px) translateZ(1px) scale(1);
-          // will-change: transform;
-          // transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
        }
      }
      
@ -82,26 +74,9 @@
        width: 8em;
      }

-      /*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
-      .menu-notification {
-        align-self: center;
-        display: flex;
-        flex-grow: 0;
-        flex-shrink: 0;
-        justify-content: center;
-        width: 2em;
-  
-        > sib-display {
-          
-          > div:first-of-type {
-            @extend %notification;
-          }
-        }
-      }
-
      .menu-chevron {
        align-items: center;
-        color: $color-spun-pearl;
+        color: $color-244-10-70;
        display: flex;
        flex-grow: 0;
        flex-shrink: 0;
@ -118,7 +93,7 @@
      padding-left: 2.88rem;
      
      div {
-        color: $color-spun-pearl;
+        color: $color-244-10-70;
        cursor: pointer;
        padding-bottom: 1.12rem;
  
@ -138,24 +113,8 @@

    .divider {
      height: 1px;
-      background-color: $color-gainsboro-a02;
+      background-color: $color-213-13-86;
    }
  }
 }

-@include media('width<phone') {
-  #button-toggle {
-    display: block;
-  }
-
-  #navbar {
-    //transform: translateX(-120%);
-    transition: flex-basis 0.5s ease-in-out;
-    flex-basis: 0;
-    //position: absolute;
-    //top: auto;
-    //display: none;
-    //z-index: 1;
-  }
-}
-
--- a/src/styles/components/menu-right.scss
+++ b/src/styles/components/menu-right.scss
@ -1,17 +1,40 @@
 #mainContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow-y: auto;

-  > div {
+
+  >div#project,
+  >div#circle {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: stretch;
+    overflow-x: hidden;
+    
+    .views-container {
+      flex: 1 0 0;
+      overflow-y: auto;
+    }
+
+    >div {
+      transition: all 0.5s;
+    }
+  }
+
+  >div {

    nav {
      transition: all 0.5s;

-      > sib-router {
+      >sib-router {
        background-color: $color-222-52-90;
-        color: $color-purple-dark;
+        color: $color-233-18-29;
        flex: 0 0 auto;
        font-weight: 600;

-        > ul {  
+        >ul {
          cursor: pointer;
          list-style: none;
          margin: 0;
@ -19,7 +42,7 @@

          li {
            align-items: center;
-            border-bottom: 1px solid $color-lavender-gray;
+            border-bottom: 1px solid $color-229-25-79;
            display: flex;
            margin: 0;
            padding: 2.55rem 2.55rem;
@ -34,39 +57,39 @@
            }
          }

-          > li {
+          >li {
            @include icon('arrow-right-circle');
          }

-          > sib-route {
+          >sib-route {

            &[active] {
-              background-color: $color-purple-dark;
-              color: $color-mustard;
+              background-color: $color-233-18-29;
+              color: $color-46-100-67;
              display: inline-block;
            }

            &[name^='circle'],
            &[name^='project'] {

-              > li::before {
+              >li::before {
                font-size: 4rem;
              }
            }

-            &[name$='chat'] > li {
+            &[name$='chat']>li {
              @include ci('chat');
            }

-            &[name$='create'] > li {
+            &[name$='create']>li {
              @include ci('offer');
            }

-            &[name$='edit'] > li {
+            &[name$='edit']>li {
              @include ci('list');
            }

-            &[name$='profile'] > li {
+            &[name$='profile']>li {
              @include ci('information');
            }
          }
@ -80,7 +103,7 @@
          transform: rotate(180deg);
        }

-        & ~ #views-container {
+        &~.views-container {
          margin-left: -15.5rem;
          transform: translate(15.5rem);
        }
--- a/src/styles/components/skills.scss
+++ b/src/styles/components/skills.scss
@ -0,0 +1,18 @@
+/* TEMPLATE SKILLS*/
+
+sib-multiple[name*='skills'] {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.skill {
+    background-color: $color-43-100-50;
+    border: 1px solid $color-43-100-50;
+    border-radius: 2em;
+    color: $color-0-0-100;
+    display: block;
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin: 0.4rem 1rem 0.4rem 0;
+    padding: 0.5rem 2rem;
+}
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@ -1,191 +0,0 @@
-// job offers
-// .new-job-offer {
-//   @extend %button;
-//   text-transform: uppercase;
-//   margin-left: 1em;
-//   margin-bottom: 1em
-//   //float: right;
-// }
-
-// skills
-
-/*#member-profile sib-display-lookuplist {
-  display: flex;
-
-  ul {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-  }
-
-  li[name*='skills'] {
-    padding: 0.3em 1.2em;
-    border: 1px solid;
-    border-radius: 2em;
-    margin: 0.25em;
-    background-color: $color-selective-yellow;
-    color: $color-white;
-    font-weight: bold;
-  }
-}
-*/
-// group
-
-#group-profile {
-  sib-display-div[name='name'] div {
-    @extend h1;
-  }
-
-  sib-display-div[name='label-description'] div {
-    @extend h2;
-  }
-}
-// chat
-
-.chat-view {
-  padding: 1.7rem;
-  position: relative;
-  z-index: 0;
-  @extend %frame;
-  height: calc(100vh - 104px);
-
-  > sib-chat {
-    @include pos();
-  }
-}
-// member-profile && members
-
-/*.members-list-condensed {
-  img {
-    width: 50px;
-    height: 100px;
-    border-radius: 100%;
-    object-fit: cover;
-    object-position: top;
-  }
-
-  label {
-    display: none;
-  }
-
-  > 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;
-    }
-      
-    }
-
-
-    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 {
-  //   padding-left: 1em;
-  // }
-}*/
-
-hdapp-available {
-  display: block;
-  text-align: right;
-
-  strong {
-    @extend %button;
-  }
-}
-
-/*#member-profile {
-  ul {
-    @include list-reset();
-  }
-}*/
-
-#member-profile {
-  @include media('width>tablet') {
-    div[name='header'] {
-      float: left;
-      width: 50%;
-    }
-  }
-
-  div[name='name'] {
-    @extend h1;
-
-    div {
-      display: inline-block;
-      margin-right: 0.7rem;
-    }
-  }
-
-  sib-link[next='member-chat'] {
-    border-style: solid;
-    display: flex;
-    border-radius: 25px;
-    border-style: solid;
-    border-color: $color-majorelle-blue;
-    color: $color-majorelle-blue;
-    padding: 1.7rem;
-    text-decoration:none;
-  }
-
-  div[name='pseudonym'] {
-    margin-top: -1.7rem;
-    margin-bottom: 1.7rem;
-  }
-
-  #member-info {
-    &:after {
-      content: '';
-      display: block;
-      clear: both;
-    }
-  }
-}
-
-sib-form {
-
-  form > * {
-    margin-top: 0.85rem;
-  }
-
-  // button like
-  input[type='color'],
-  input[type='file'],
-  input[type='reset'],
-  input[type='submit'] {
-    @extend %button;
-  }
-
-  input[type='reset'] {
-    display: none;
-  }
-}
-
-/*
-label {
-  @extend h2;
-  &:after {
-    content: ':';
-  }
-}
-*/
-
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -1,28 +0,0 @@
-@charset "UTF-8";
-
-@import '../../node_modules/include-media/dist/include-media';
-@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
-@import 'icons/custom-icons';
-@import 'icons/icons';
-@import 'icons/material-design-icons';
-
-@import 'variables';
-@import 'mixins';
-@import 'main';
-@import 'form';
-@import 'content';
-
-@import 'filters';
-@import 'right-panel';
-
-@import 'group-profile';
-@import 'job-offers';
-@import 'member-profile';
-@import 'members';
-@import 'project-profile';
-@import 'member-chat';
-
-// @import 'members';
-@import 'header';
-@import 'menu-left';
-@import 'menu-right';
--- a/src/styles/job-offers.scss
+++ b/src/styles/job-offers.scss
@ -1,134 +0,0 @@
-#offers-list {
-  @extend .grid-layer;
-  
-  > sib-form {
-    grid-column-start: start;
-    grid-column-end: middle;
-    grid-row-start: start;
-    grid-row-end: middle;
-  }
-  
-  > div {
-    grid-column-start: start;
-    grid-column-end: end;
-    grid-row-start: middle;
-    grid-row-end: end;
-    
-    &:first-of-type {
-      margin-top: 5rem;
-    }
-    
-    > sib-display {
-      @extend %frame;
-      display: block;
-      font-size: 1.5rem;
-      margin: 1.7rem 0;
-      padding: 3.4rem;
-      /*&:nth-child(odd) {
-        background-color: $color-anti-flash-white;
-      }*/
-      
-      [name='user-thumb'] {
-        align-items: center;
-        display: flex;
-        margin: -0.25em;
-      
-        > * {
-          margin: 0.25em;
-        }
-  
-        [name='author.first_name'] {
-          color: $color-quartz;
-          font-weight: 600;
-        }
-
-        sib-multiple[name$='groups'] {
-          display: flex;
-
-          label {
-            display: none;
-          }
-
-          > * {
-            @extend %group;
-          }
-        }
-      
-        sib-display-img {
-          background-color: $color-white;
-          border-radius: 50%;
-          height: 4.25rem;
-          overflow: hidden;
-          position: relative;
-          width: 4.25rem;
-
-          img {
-            height: 100%;
-            left: 0;
-            object-fit: cover;
-            position: absolute;
-            top: 0;
-            width: 100%;
-          }
-        }
-      }
-      
-      [name='creationDate'] {
-        display: block;
-        margin-bottom: 0.7rem;
-        margin-top: 2rem;
-      }
-
-      [name='title'] {
-        @extend h3;
-        display: block;
-        font-weight: bold;
-        line-height: 19px;
-      }
-      
-      [name='description'] {
-        display: block;
-        line-height: 1.6;
-        margin-bottom: 1.6rem;
-      }
-
-      [name='skills'] {
-        label {
-          display: none;
-        }
-      }
-      
-      [name='send'] {
-        color: $color-majorelle-blue;
-        font-size: 1.3rem;
-        float: right;
-      
-        > sib-link {
-          cursor: pointer;
-          @include icon('speech');
-      
-          &::before {
-            font-size: 1.5rem;
-            margin-right: 1.2rem;
-          }
-        }
-      }
-      
-      [name='status'] {
-        float: right;
-        display: flex;
-        align-items: center;
-        margin: -0.25em;
-        
-        > * {
-          margin: 0.25em;
-        }
-        
-        strong {
-          @extend %status-open;
-        }
-      } 
-    }
-  }
-}
-
--- a/src/styles/layout/circle-profile/_index.scss
+++ b/src/styles/layout/circle-profile/_index.scss
@ -0,0 +1 @@
+@import 'circle-profile';
--- a/src/styles/layout/circle-profile/circle-profile.scss
+++ b/src/styles/layout/circle-profile/circle-profile.scss
@ -31,7 +31,7 @@
      }

      > div[name='teammate-img'] {
-        background-color: $color-bombay;
+        background-color: $color-215-9-73;
        border-radius: 50%;
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
@ -61,7 +61,7 @@
      }

      > sib-display-value[name='teammate-profile'] {
-        color: $color-dark-lava;
+        color: $color-216-4-22;
        display: block;
        font-size: 1.2rem;
        grid-column: 1 / span 2;
@ -69,7 +69,7 @@
      }

      > sib-display-value[name='teammate-contact'] {
-        color: $color-majorelle-blue;
+        color: $color-244-73-62;
        font-size: 1.2rem;
        justify-self: stretch;
        grid-column: 3 / span 2;
--- a/src/styles/layout/job-offers/_index.scss
+++ b/src/styles/layout/job-offers/_index.scss
@ -0,0 +1 @@
+@import 'job-offers.scss';
--- a/src/styles/layout/job-offers/job-offers.scss
+++ b/src/styles/layout/job-offers/job-offers.scss
@ -0,0 +1,163 @@
+#job-offers {
+
+  .plus-button {
+    @extend .howto;
+    background-color: $color-43-100-50;
+    color: $color-0-0-100;
+    font-weight: bold;
+    text-transform: uppercase;
+    cursor: pointer;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    .icon-plus {
+      font-size: 20px;
+      justify-content: center;
+      margin: 0.5rem 0.5rem 0.5rem 0;
+
+    }
+  }
+
+  #offers-list {
+    @extend .grid-layer;
+
+    >sib-form {
+      grid-column-start: start;
+      grid-column-end: middle;
+      grid-row-start: start;
+      grid-row-end: middle;
+    }
+
+    >div {
+      grid-column-start: start;
+      grid-column-end: end;
+      grid-row-start: middle;
+      grid-row-end: end;
+
+      &:first-of-type {
+        margin-top: 5rem;
+      }
+
+      >sib-display {
+        @include window-style-modal();
+        display: block;
+        font-size: 1.5rem;
+        margin: 1.7rem 0;
+        padding: 3.4rem;
+        /*&:nth-child(odd) {
+        background-color: $color-210-25-95;
+      }*/
+
+        [name='user-thumb'] {
+          align-items: center;
+          display: flex;
+          margin: -0.25em;
+
+          >* {
+            margin: 0.25em;
+          }
+
+          [name='author.first_name'] {
+            color: $color-0-0-29;
+            font-weight: 600;
+          }
+
+          sib-multiple[name$='groups'] {
+            display: flex;
+
+            label {
+              display: none;
+            }
+
+            >* {
+              @extend %user-role;
+            }
+          }
+
+          sib-display-img {
+            background-color: $color-0-0-100;
+            border-radius: 50%;
+            height: 4.25rem;
+            overflow: hidden;
+            position: relative;
+            width: 4.25rem;
+
+            img {
+              height: 100%;
+              left: 0;
+              object-fit: cover;
+              position: absolute;
+              top: 0;
+              width: 100%;
+            }
+          }
+        }
+
+        [name='creationDate'] {
+          display: block;
+          margin-bottom: 0.7rem;
+          margin-top: 2rem;
+        }
+
+        [name='title'] {
+          @extend h3;
+          display: block;
+          font-weight: bold;
+          line-height: 19px;
+        }
+
+        [name='description'] {
+          display: block;
+          line-height: 1.6;
+          margin-bottom: 1.6rem;
+        }
+
+        [name='skills'] {
+          label {
+            display: none;
+          }
+        }
+
+        [name='send'] {
+          color: $color-244-73-62;
+          font-size: 1.3rem;
+          float: right;
+
+          >sib-link {
+            cursor: pointer;
+            @include icon('speech');
+
+            &::before {
+              font-size: 1.5rem;
+              margin-right: 1.2rem;
+            }
+          }
+        }
+
+        [name='status'] {
+          float: right;
+          display: flex;
+          align-items: center;
+          margin: -0.25em;
+
+          >* {
+            margin: 0.25em;
+          }
+
+          strong {
+            background-color: $color-244-73-62;
+            border: none;
+            border-radius: 100em;
+            color: $color-0-0-100;
+            display: inline-block;
+            font-weight: normal;
+            padding: 0.85rem 1.7rem;
+          }
+        }
+      }
+    }
+  }
+
+}
--- a/src/styles/layout/member-chat/_index.scss
+++ b/src/styles/layout/member-chat/_index.scss
@ -0,0 +1 @@
+@import 'member-chat.scss';
--- a/src/styles/layout/member-chat/member-chat.scss
+++ b/src/styles/layout/member-chat/member-chat.scss
--- a/src/styles/layout/members/_index.scss
+++ b/src/styles/layout/members/_index.scss
@ -0,0 +1,2 @@
+@import 'members';
+@import 'member-profile';
--- a/src/styles/layout/members/member-profile.scss
+++ b/src/styles/layout/members/member-profile.scss
@ -3,25 +3,14 @@
  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-info {
-    background-color: $color-white;
+    background-color: $color-0-0-100;
    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;
+      border-bottom: 1px solid $color-221-51-90;
      display: grid;
      grid-template-areas: "avatar name status"
                           "avatar pseudo status"
@ -49,7 +38,7 @@
        grid-area: name;
  
        > sib-display-value[name^='user.'] {
-          color: $color-dark-lava;
+          color: $color-216-4-22;
          font-weight: bold;
          @extend h1;
        }
@ -80,7 +69,7 @@

      member-status[name$='available']{
        align-self: flex-end;
-        color: $color-majorelle-blue;
+        color: $color-244-73-62;
        grid-area: status;
        justify-self: flex-end;

@ -97,7 +86,7 @@
          @include ci('awareness');

          &::before {
-            border-bottom: 2px solid $color-selective-yellow;
+            border-bottom: 2px solid $color-43-100-50;
            font-size: 7.3rem;
            padding-bottom: 1.5rem;
          }
@ -107,7 +96,7 @@
          @include ci('armor');

          &::before {
-            border-bottom: 2px solid $color-selective-yellow;
+            border-bottom: 2px solid $color-43-100-50;
            font-size: 7.3rem;
            padding-bottom: 1.5rem;
          }
@ -122,9 +111,9 @@
      
      [next=member-chat] {
        @include icon('speech');
-        border: 1px solid $color-majorelle-blue;
+        border: 1px solid $color-244-73-62;
        border-radius: 2em;
-        color: $color-majorelle-blue;
+        color: $color-244-73-62;
        font-size: 18px;
        font-weight: bold;
        justify-self: end;
--- a/src/styles/layout/members/members.scss
+++ b/src/styles/layout/members/members.scss
@ -1,3 +1,51 @@
+%member-info {
+
+  sib-multiple[name^='user.'],
+  > member-info > div,
+  > sib-display-value {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0;
+    margin-top: 1.7rem;
+
+    &::before {
+      color: $color-43-100-50;
+      padding: 0 0.6em 0 0;
+    }
+  }
+  
+  [name$='city'] * {
+    @include mdi('atom');
+  }
+
+  [name$='email'] * {
+    @include mdi('email-outline');
+  }
+
+  [name$='phone'] * {
+    @include mdi('cellphone-iphone');
+  }
+
+  [name="foaf:homepage"]:not(:empty) {
+    @include mdi('link-variant');
+  }
+}
+
+.how-link {
+  @extend .howto;
+  background-color: $color-0-0-100;
+  color: $color-216-4-22;
+  flex-wrap: nowrap;
+  .icon-idea {
+    background-color: $color-46-100-67;
+    border-radius: 100%;
+    justify-content: center;
+    margin-right: 1.2rem;
+    width: 1.8em;
+    height: 1.8em;
+  }
+}
+
 #members-list {
  @extend .grid-layer;

@ -11,15 +59,15 @@
      justify-content: center;

      button {
-        color: $color-anti-flash-white;
+        color: $color-210-25-95;
        
        &:before {
-          color: $color-dark-lava;
+          color: $color-216-4-22;
          @include icon('arrow-left-circle');
        }

        &:disabled::before {
-          color: $color-manatee;
+          color: $color-215-6-63;
        }
      }

@ -53,14 +101,14 @@
      justify-content: space-between;

      &:first-of-type {
-        color: $color-quartz;
+        color: $color-0-0-29;
        font-weight: bold;
        justify-content: center;
        margin: 3.75rem 0;
        position: relative;

        &::before {
-          border-top: 1px solid $color-timberwolf;
+          border-top: 1px solid $color-0-0-85;
          bottom: 0;
          content: '';
          left: 0;
@ -73,7 +121,7 @@
        }

        span {
-          background-color: $color-anti-flash-white;
+          background-color: $color-210-25-95;
          padding: 0 60px;
        }
      }
@ -81,7 +129,7 @@
      > sib-display {
        background-color: white;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
-        color: $color-rolling-stone;
+        color: $color-210-4-50;
        cursor: pointer;
        display: flex;
        flex-flow: column wrap;
@ -110,7 +158,7 @@
        }

        div[name='header'] {
-          border-bottom: 1px solid $color-anti-flash-white;
+          border-bottom: 1px solid $color-210-25-95;
          display: flex;
          flex-direction: column;
          padding: 0.85rem 0 3.4rem;
@ -122,7 +170,7 @@
          }

          member-picture {
-            background-color: $color-white;
+            background-color: $color-0-0-100;
            border-radius: 50%;
            height: 28vh;
            margin: 1.7rem auto;
@ -157,9 +205,9 @@
          
          [next=member-chat] {
            align-self: center;
-            border: 1px solid $color-majorelle-blue;
+            border: 1px solid $color-244-73-62;
            border-radius: 3.4rem;
-            color: $color-majorelle-blue;
+            color: $color-244-73-62;
            font-size: 1.8rem;
            font-weight: bold;
            padding: 1rem 2.55rem 0.7rem;
--- a/src/styles/layout/project-profile/_index.scss
+++ b/src/styles/layout/project-profile/_index.scss
@ -0,0 +1 @@
+@import 'project-profile'
--- a/src/styles/layout/project-profile/project-profile.scss
+++ b/src/styles/layout/project-profile/project-profile.scss
@ -19,12 +19,12 @@
  }

  [name='block-title'] {
-    border-bottom: 1px solid $color-link-water;
+    border-bottom: 1px solid $color-221-51-90;
    display: flex;
    padding-bottom: 3.4rem;
  
    > * {
-      color: $color-dark-lava;
+      color: $color-216-4-22;
      font-size: 2rem;
      font-weight: bold;
      padding-right: 0.85rem;
@ -40,7 +40,7 @@
    }
    
    > :nth-child(5) {
-      color: $color-purple-dark;
+      color: $color-233-18-29;
      font-weight: normal;
      text-transform: none;
    }
@ -50,7 +50,7 @@
    }

    > :nth-last-child(-n+2) {
-      color: $color-text-base;
+      color: $color-213-4-50;
      font-size: 1.6rem;
      font-weight: normal;
      text-transform: none;
@ -105,7 +105,7 @@
  max-width: 100%;

  > * {
-    border: 1px solid $color-link-water;
+    border: 1px solid $color-221-51-90;
    flex: 1 1 auto;
    justify-content: space-between;
    margin: 0 -0.1rem -0.1rem 0;
@ -158,7 +158,7 @@
        }

        &::before {
-          color: $color-selective-yellow;
+          color: $color-43-100-50;
          font-size: 2.2rem;
          padding: 0 1rem 0 0;
        }
@ -187,7 +187,7 @@
        grid-row: 1 / span 2;

        div {
-          background-color: $color-white;
+          background-color: $color-0-0-100;
          border-radius: 50%;
          height: 7vh;
          overflow: hidden;
@ -223,7 +223,7 @@
            margin-left: 1rem;
            
            sib-multiple [name='name'] {
-              @extend %group;
+              @extend %user-role;
            }
          }
        }
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@ -1,332 +0,0 @@
-[hidden],
-.hidden,
-.is-hidden {
-  display: none !important;
-}
-
-:root {
-  font-size: 62.5%;
-  font-family: Open Sans, sans-serif;
-  --sib-notifications-theme: #{$color-46-100-50};
-  
-  body {
-    /*Will help to make .content fit your height screen size. Part.1*/
-    background-color: $color-anti-flash-white;
-    color: $color-text-base;
-    display: flex;
-    flex-direction: column;
-    font-size: 1.6rem;
-    height: 100vh;
-    margin: 0;
-    overflow: hidden;
-    overflow-wrap: break-word;
-  }
-}
-
-img {
-  max-width: 100%;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  color: $color-dark-lava;
-  font-weight: 600;
-  padding: 0;
-  /*margin: 0.67em 0;*/
-
-  span {
-    font-weight: 400;
-    padding-left: 0.85rem;
-
-    &:before {
-      content: '// ';
-    }
-  }
-}
-
-h1 {
-  font-size: 2.1rem;
-}
-
-h2 {  font-size: 2rem;
-}
-
-h3 {
-  font-size: 1.6rem;
-}
-
-h4 {
-  font-size: 1.2rem;
-}
-
-h5 {
-  font-size: 2rem;
-}
-
-.debug {
-  outline: 2px dotted red;
-}
-
-button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-  -webkit-appearance: none;
-}
-
-li {
-  list-style: none;
-  margin-right: 0.4rem;
-  padding-left: 0;
-}
-
-#job-offers,
-#members {
-  @extend %content-padding;
-}
-
-.frame {
-  @extend %frame;
-  padding: 5rem;
-}
-
-.layer {
-  position: absolute;
-  bottom: 0;
-  top: 0;
-  right: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  overflow-x: hidden;
-}
-
-/*
-#content {
-  display: flex;
-  overflow: hidden;
-}
-*/
-
-#mainContainer {
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow-y: auto;
-}
-
-.limiter {
-  display: block;
-  max-width: 650px;
-}
-/* sub menu (right menu) */
-#mainContainer {
-  display: flex;
-  > div#project,
-  > div#circle {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: stretch;
-    overflow-x: hidden;
-
-    > div {
-      transition: all 0.5s;
-    }
-  }
-}
-
-sib-route,
-sib-link {
-  cursor: pointer;
-}
-
-sib-link.back {
-  color: $color-purple-dark;
-  display: block;
-  font-size: 2rem;
-  font-weight: bold;
-  text-align: right;
-}
-
-.containerH {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.containerV {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.grow {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-.fix {
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.containerCenter {
-  justify-content: center;
-  align-items: center;
-}
-
-.reverse {
-  flex-direction: row-reverse;
-}
-
-#views-container {
-  flex: 1 0 0;
-  overflow-y: auto;
-}
-
-.grid-layer{
-  display: grid;
-  font-size: 16px;
-  grid-template-columns: [start]auto[middle]25%[end];
-  grid-template-rows: [start]7em[middle]auto[end];
-}
-.grid-layer-main {
-  grid-column-start: start;
-  grid-column-end: end;
-  grid-row-start: start;
-  grid-row-end: end;
-}
-.grid-layer-links {
-  grid-column-start: middle;
-  grid-column-end: end;
-  grid-row-start: start;
-  grid-row-end: middle;
-}
-
-
-/* TEMPLATE SKILLS*/
-
-sib-multiple[name*='skills'] {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.skill {
-  background-color: $color-selective-yellow;
-  border: 1px solid $color-selective-yellow;
-  border-radius: 2em;
-  color: $color-white;
-  display: block;
-  font-size: 1.4rem;
-  font-weight: bold;
-  margin: 0.4rem 1rem 0.4rem 0;
-  padding: 0.5rem 2rem;
-}
-
-member-info-groups {
-  @extend %group;
-}
-
-
-/* NEW RESPONSIVE */
-
-.right-sidebar {
-  overflow: hidden;
-  transition: width 0.3s;
-}
-
-.right-sidebar.js-right-sidebar-expanded {
-  width: 130px;
-}
-
-.right-sidebar.js-right-sidebar-collapsed {
-  width: 62px;
-}
-
-/*Define the basic row-column properties that construct the foundation*/
-.row {
-  display: flex;
-  max-width: 100%;
-}
-
-.content {
-  /*Will help to make .content fit your height screen size. Part 2*/
-  flex-direction: row;
-  height: 100%;
-  overflow: hidden;
-}
-
-.col {
-  min-width: 0;
-}
-
-.block-grid {
-  display: flex;
-  flex-wrap: nowrap;
-  height: 100%;
-}
-
-/* Dividing into columns */
-@mixin respond-to($breakpoint) {
-  
-  @if map-has-key($breakpoints, $breakpoint) {
-
-    @media (min-width: map-get($breakpoints, $breakpoint)) {
-      @content;
-    }
-  }
-
-  @else {
-    @warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
-      + "Available breakpoints are: #{map-keys($breakpoints)}.";
-  }
-}
-
-.small-2 {
-
-  @include respond-to('phone'){
-    display: block;
-    flex: 0 1 calc(100% / 12 * 2);
-  }
-}
-
-.small-shrink {
-
-  @include respond-to('phone') {
-    display: block;
-    flex: 0 1 auto;
-  }
-}
-
-.medium-auto {
-
-  @include respond-to('tablet') {
-    display: block;
-    flex: 1;
-    overflow: auto;
-  }
-}
-
-.small-12 {
-
-  @include respond-to('phone') {
-    display: block;
-    flex: 0 1 calc(100% / 12 * 12);
-  }
-}
-
-.small-auto {
-
-  @include respond-to ('phone') {
-    display: block;
-    flex: 1;
-    overflow: auto;
-  }
-}
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@ -1,160 +0,0 @@
-@charset "UTF-8";
-@mixin debug {
-  $hsla: hsla(random(360), 100%, 50%, 0.3);
-  background-color: $hsla;
-}
-@mixin log($v) {
-  font-family: '__log__:#{$v}';
-}
-
-@mixin offset($corner: 1, $x: 0, $y: 0) {
-  // corner:
-  // 1-----2
-  // |     |
-  // |     |
-  // 3-----4
-  position: absolute;
-  @if ($corner == 1) {
-    top: $y;
-    left: $x;
-  }
-  @if ($corner == 2) {
-    top: $y;
-    right: $x;
-  }
-  @if ($corner == 3) {
-    bottom: $y;
-    left: $x;
-  }
-  @if ($corner == 4) {
-    bottom: $y;
-    right: $x;
-  }
-}
-
-@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
-  //  --1--
-  // |     |
-  // 4     2
-  // |     |
-  //  --3--
-  @if ($right == null) {
-    $right: $top;
-  }
-
-  @if ($bottom == null) {
-    $bottom: $top;
-  }
-
-  @if ($left == null) {
-    $left: $right;
-  }
-
-  position: absolute;
-  top: $top;
-  left: $left;
-  right: $right;
-  bottom: $bottom;
-}
-
-@mixin pos($pos: 5, $position: absolute) {
-  // ╔═──┐ ╔═══╗ ┌──═╗
-  // │ 1 │ │ 2 │ │ 3 │
-  // └───┘ └───┘ └───┘
-  // ╔═──┐ ╔═══╗ ┌──═╗
-  // ║ 4 │ ║ 5 ║ │ 6 ║
-  // ╚═──┘ ╚═══╝ └──═╝
-  // ┌───┐ ┌───┐ ┌───┐
-  // │ 7 │ │ 8 │ │ 9 │
-  // ╚═──┘ ╚═══╝ └──═╝
-
-  $mod: ($pos - 1) % 3;
-
-  position: $position;
-  @if ($pos <= 6) {
-    top: 0;
-  }
-  @if ($mod <= 1) {
-    left: 0;
-  }
-  @if ($mod >= 1) {
-    right: 0;
-  }
-  @if ($pos >= 4) {
-    bottom: 0;
-  }
-}
-
-// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
-//   &:after {
-//     content: '';
-//     position: absolute;
-//     top: if(($border == bottom), auto, 0);
-//     left: if(($border == right), auto, 0);
-//     right: if(($border == left), auto, 0);
-//     bottom: if(($border == top), auto, 0);
-//     background-image: linear-gradient(to #{$border}, $color, transparent);
-//     #{$border}: -$size;
-//     opacity: $opacity;
-//     @if ($border == top or $border == bottom) {
-//       height: $size;
-//     } @else {
-//       width: $size;
-//     }
-//   }
-// }
-
-@mixin align($horizontal: center, $vertical: middle) {
-  text-align: $horizontal;
-  white-space: nowrap;
-  &:after,
-  > * {
-    display: inline-block;
-    vertical-align: $vertical;
-  }
-  &:after {
-    content: '';
-    height: 100%;
-    width: 0;
-    visibility: hidden;
-  }
-  > * {
-    //text-align:left;
-    white-space: normal;
-  }
-}
-
-@mixin list-reset($deep: 0) {
-  padding: 0;
-  margin: 0;
-  display: block;
-  list-style: none;
-  @if ($deep == 0) {
-    > li {
-      padding: 0;
-      margin: 0;
-      display: block;
-      list-style: none;
-    }
-  } @else {
-    ul,
-    ol,
-    li {
-      padding: 0;
-      margin: 0;
-      display: block;
-      list-style: none;
-    }
-  }
-}
-
-@mixin styleTemplateFieldset($name) {
-  template-legend-#{$name} {
-    border-bottom: 1px solid $color-link-water;
-    color: $color-purple-dark;
-    font-size: 1.8rem;
-    font-weight: 600;
-    padding-bottom: 1rem;
-  }
-}
-
--- a/src/styles/right-panel.scss
+++ b/src/styles/right-panel.scss
@ -1,50 +0,0 @@
-.right-link {
-  padding: 0.85rem;
-  margin-bottom: 1.7rem;
-  margin-left: 8.5rem;
-  flex-basis: auto;
-  border-radius: 2em;
-
-  div[class*="icon-"] {
-    align-items: center;
-    display: flex;
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}
-
-.how-link {
-  @extend .right-link;
-  background-color: $color-white;
-  color: $color-dark-lava;
-  flex-wrap: nowrap;
-  .icon-idea {
-    background-color: $color-mustard;
-    border-radius: 100%;
-    justify-content: center;
-    margin-right: 1.2rem;
-    //flex-direction: column;
-    width: 1.8em;
-    height: 1.8em;
-    //margin-right: 1em;
-  }
-}
-
-.action-link {
-  @extend .right-link;
-  background-color: $color-selective-yellow;
-  color: $color-white;
-  font-weight: bold;
-  text-transform: uppercase;
-  cursor: pointer;
-
-  .icon-plus {
-    font-size: 20px;
-    justify-content: center;
-    margin: 0.5rem 0.5rem 0.5rem 0;
-
-    &:before {
-      //font-size: 1.3em;
-    }
-  }
-}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@ -1,150 +0,0 @@
-//Color Variables
-$color-quartz:           hsl(0, 0%, 29%);
-$color-timberwolf:       hsl(0, 0%, 85%);
-$color-white:            hsl(0, 0%,100%);
-
-$color-selective-yellow: hsl(43, 100%, 50%);
-$color-mikado-yellow:    hsl(45, 95%, 54%);
-$color-mustard:          hsl(46, 100%, 67%);
-$color-46-100-50:        hsl(46, 100%, 50%);
-
-$color-rolling-stone:    hsl(210, 4%, 50%);
-$color-taupe-gray:       hsl(210, 5%, 56%);
-$color-platinum:         hsl(210, 17%, 91%);
-$color-anti-flash-white: hsl(210, 25%, 95%);
-$color-text-base:        hsl(213, 4%, 50%);
-$color-gainsboro:        hsl(213, 13%, 86%);
-$color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
-$color-213-20-91:        hsl(213, 20%, 91%);
-$color-bombay:           hsl(215, 9%, 73%);
-$color-manatee:          hsl(215, 6%, 63%);
-$color-dark-lava:        hsl(216, 4%, 22%);
-$color-link-water:       hsl(221, 51%, 90%);
-$color-222-52-90:        hsl(222, 52%, 90%);
-$color-glitter:          hsl(222, 57%, 95%);
-$color-lavender-gray:    hsl(229, 25%, 79%);
-$color-purple-dark:      hsl(233, 18%, 29%);
-$color-spun-pearl:       hsl(244, 10%, 70%);
-$color-majorelle-blue:   hsl(244, 73%, 62%);
-
-%backlink {
-  @include icon('arrow-left-circle');
-  color: #3d4057;
-  text-decoration: underline;
-
-  &::before {
-    text-decoration: none;
-  }
-}
-
-%button {
-  display: inline-block;
-  padding: 0.85rem 2.55rem;
-  border: none;
-  border-radius: 100em;
-  font-weight: normal;
-}  
-
-%content-padding {
-  flex: 1;
-  padding: 4.4rem;
-}
-
-%frame {
-  @extend %shadow;
-  background-color: $color-white;
-}
-
-%group {
-  border: 1px solid $color-mikado-yellow;
-  border-radius: 3px;
-  color: $color-rolling-stone;
-  font-size: 1.4rem;
-  font-weight: 400;
-  margin-right: 0.4rem;
-  padding: calc(1.6rem - 0.8em) 0.7em;
-}
-
-%member-info {
-
-  sib-multiple[name^='user.'],
-  > member-info > div,
-  > sib-display-value {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 0;
-    margin-top: 1.7rem;
-
-    &::before {
-      color: $color-selective-yellow;
-      padding: 0 0.6em 0 0;
-    }
-  }
-  
-  [name$='city'] * {
-    @include mdi('atom');
-  }
-
-  [name$='email'] * {
-    @include mdi('email-outline');
-  }
-
-  [name$='phone'] * {
-    @include mdi('cellphone-iphone');
-  }
-
-  [name="foaf:homepage"]:not(:empty) {
-    @include mdi('link-variant');
-  }
-}
-
-%label {
-  color: $color-spun-pearl;
-  font-weight: 600;
-  margin: 2em 0 0.5em;
-  text-transform: uppercase;
-
-  > div {
-    padding-bottom: 1rem;
-  }
-}
-
-%notification {
-  align-items: center;
-  background-color: $color-mustard;
-  border-radius: 100%;
-  color: $color-dark-lava;
-  display: flex !important;
-  font-size: 1.3rem;
-  height: 1.7em;
-  justify-content: center;
-  width: 1.7em;
-}
-
-%shadow {
-  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
-}
-
-%status-open {
-  background-color: $color-majorelle-blue;
-  border: none;
-  border-radius: 100em;
-  color: $color-white;
-  display: inline-block;
-  font-weight: normal;
-  padding: 0.85rem 1.7rem;
-}
-
-%submit-form {
-  background-color: $color-purple-dark;
-  color: $color-white;
-  float: right;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-$breakpoints: (
-  phone: 480px,
-  tablet: 768px,
-  desktop: 1024px
-) !default;