Merge branch 'jbpasquier/css' into 'staging'

Jbpasquier/css

See merge request startinblox/applications/sib-app!28

Makefile

@@ -6,11 +6,6 @@ SCRIPT_DEST := $(SCRIPT_SRC:src/%=$(DIST_DIR)/%)
 
 default: build
 
-clean:
-	git clean -fXd -e !src/config.json
-
-install: node_modules copy_lib copy_samples
-
 build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST)
 
 watch:
@@ -21,23 +16,6 @@ watch:
 		sleep 0.5; \
 	done
 
-serve:
-	node server
-
-# npm
-node_modules:
-	npm install
-
-# vendor lib
-copy_lib:
-	@node copy_lib.js
-
-# samples
-copy_samples: src/config.json
-
-src/config.json:
-	@cp -n src/config.sample.json src/config.json
-
 # pug
 $(DIST_DIR)/index.html: src/index.pug src/config.json $(wildcard src/*.pug src/*/*.pug)
 	@echo pug: $< ➜ $@
@@ -60,7 +38,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 $@ 
 
@@ -76,11 +54,6 @@ buildstaging: build
 buildprod: build
 	$(MAKE) $(DIST_DIR)/index.prod.html
 
-deploy: pull install build
-
-pull:
-	git pull
-
 sync: buildstaging
 	rsync -rv www/* staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/ --exclude=www/index.html --exclude=www/index.prod.html --exclude=www/index.staging.html
 	rsync --no-R --no-implied-dirs www/index.staging.html staging-app@ssh-staging-app.happy-dev.fr:~/staging-app.happy-dev.fr/index.html
@@ -91,4 +64,4 @@ syncprod: buildprod
 	rsync --no-R --no-implied-dirs www/index.prod.html alpha@ssh-alpha.happy-dev.fr:~/www/index.html
 	rsync -v www/.htaccess alpha@ssh-alpha.happy-dev.fr:~/www/
 
-.PHONY: default install copy_lib copy_samples build watch serve clean sync syncprod buildstaging buildprod pull deploy
+.PHONY: default build watch sync syncprod buildstaging buildprod

README.md

@@ -1,74 +1,181 @@
-# HD app
+# SiB App
 
-HD app is the magic tool that allows the Happy Dev network to thrive in a decentralized way.
+SiB App is the magic tool that allows the Happy Dev network to thrive in a decentralized way.
 
-## Use cases
+## Getting Started
 
-Identified and scheduled use cases of the application includes (but are not limited to):
+These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
 
-- Listing of projects
+### Prerequisites
-- Listing of members
-- Search of members by skills
-- Invoicing and billing
-- Project-scoped chat
-- Personal messaging
 
-### Chat
+To install SiB App, you'll need to have:
 
-The repository of the SIB Chat component can be found here:
+- Python3 & Pip
+- NodeJS & NPM
+- A Prosody Server
+- (Optional) A SMTP Server
 
-- https://git.happy-dev.fr/startinblox/sib-chat
+### Installing
 
-It is based on XMPP as messaging protocol, Prosody as the server and ConverseJS as the client.
+#### At first, you'll need to deploy a `sib-manager` server, then configure it.
 
-### Project
+#### `sib-manager` installation or update
 
-The repository of the project listing components is the core and can be found here:
+```
+$ pip3 install -U sib-manager
+```
 
-- https://git.happy-dev.fr/startinblox/sib-core
+#### `sib-manager` deploy
 
-### Invoicing
+```
+$ sib startproject newserver -m djangoldp_project -m oidc_provider@django-oidc-provider -m djangoldp_circle -m djangoldp_joboffer -m djangoldp_profile -m djangoldp_skill -m djangoldp_account -m djangoldp_notification -m djangoldp_conversation
+$ sib initproject newserver
+```
 
-The invoicing component is still at an early stage. Its repository is here:
+We're using 
+- `djangoldp_project`,
+- `django-oidc-provider`,
+- `djangoldp_circle`,
+- `djangoldp_joboffer`,
+- `djangoldp_profile`,
+- `djangoldp_skill`,
+- `djangoldp_account`,
+- `djangoldp_notification`,
+- `djangoldp_conversation`
 
-- https://git.happy-dev.fr/startinblox/sib-invoicing 
+As dependencies, if you don't want them, just remove the `-m packagename`.
 
-## Architecture
+`sibserver` is the name of the folder that `sib-manager` will create, choose it wisely.
 
-Some general schema of the existing StartinBlox applications architecture can be found here:
+In addition to the `startproject` you can add :
 
-https://docs.google.com/presentation/d/1iCRGaJpFvZjhjIUnpsn6lRTJJ31ES6n94BNkJygzUwM/edit?usp=sharing
+- `--site-url "http://localhost:8000"`
+- `--production` to use postgresql instead of sqlite
+- `--db-host`, `--db-name`, `--db-user` and `--db-pass` are used to configure the database (mandatory with `--production`)
+- `--smtp-host`, `--smtp-user` and `--smtp-pass` are used to configure the SMTP (optional)
 
-## Installation
+#### `sibserver` configuration
 
-If you want to contribute or test the app, please follow those steps.
+You'll have to change some settings on the `sibserver` files.
 
-### Requirements
+- Add your server name to `ALLOWED_HOSTS`
+    - In `settings.py`, add your hostname on `ALLOWED_HOSTS`, eg:
+        ```
+        ALLOWED_HOSTS = ['api.myserver.com', 'localhost']
+        ```
+- Around line `96-97` of `settings.py` set your `PROSODY_HTTP_URL`, `JABBER_DEFAULT_HOST`, eg:
+    ```
+    PROSODY_HTTP_URL = 'https://jabber.happy-dev.fr'
+    JABBER_DEFAULT_HOST = 'happy-dev.fr'
+    ```
 
-You need to have both NodeJS and NPM installed and working.
+#### `sib-manager` launching
 
-### Installation process
+On the first `sibserver` folder
 
-clone then:
+```
+$ ./manage.py runserver
+```
 
-* `make install`
+#### Create a Client ID for Prosody & Client
 
-Edit the created `./src/config.pug` file to :
+- Go to `localhost:8000/admin/`
- - update the `client_id` [you generated on the server](https://git.happy-dev.fr/startinblox/applications/sib-app-data-server/blob/master/README.md#openidconnect-configuration) / OIDC provider
+- Login with previously created account.
- - update the `sdn` / Server Domain Name to match yours
+    - If needed you can create another admin account with `./manage.py createsuperadmin`
+- Add a `Clients` on `OpenID Connect Provider` section
+    - Name it as you wish
+    - `Client type`: `Public`
+    - `Response types`: `id_token token (Implicit Flow)`
+    - `Redirect URIs`:
+        ```
+        http://localhost:3000
+        http://127.0.0.1:3000
+        http://0.0.0.0:3000
+        http://localhost:8000
+        https://myserver.com
+        ```
+- Keep the `6-digits` newly create `Client ID` somewhere
 
-## Build
+#### Then, you'll have to install the client.
 
-A first build is mandatory for compiling the static assets.
+#### Clone this repository
 
-* `make build`
+```
+# With SSH
+$ git clone git@git.happy-dev.fr:startinblox/applications/sib-app.git
 
-or
+# Or with HTTPS
+$ git clone https://git.happy-dev.fr/startinblox/applications/sib-app.git
+```
 
-* `make watch`
+#### Install dependencies
 
-if you are working on something and want to benefit of the hot reload feature.
+```
+$ cd sib-app
+$ npm install
+```
 
-## Run server
+#### Configure `config.json`
 
-* `make serve`
+On the newly created `./src/config.json` change the `dev` configuration like this:
+```
+  "dev": {
+    "sdn": "http://api.myserver.com", # Or localhost:8000
+    "cdn": "https://cdn.happy-dev.fr",
+    "xmpp": "https://prosody.myserver.com/http-bind/",
+    "client_id": "000000" # <- Here goes your previously created Client ID
+  },
+```
+
+#### That's all! Now let's run it!
+
+```
+# For dev
+$ make watch
+$ npm run serve
+
+# Or for prod
+$ make build
+# Then publish the www folder
+
+```
+
+## Deployment
+
+Deployment will need a registered RSA Key on production servers.
+
+### On Alpha
+
+```
+$ make syncprod
+```
+
+### On Staging
+
+```
+$ make sync
+```
+
+## Built With
+
+* [Sib-Core](https://git.happy-dev.fr/startinblox/framework/sib-core/) - An awesome new framework!
+
+### Architecture
+
+Some general schema of the existing StartinBlox applications architecture can be found [here](https://docs.google.com/presentation/d/1iCRGaJpFvZjhjIUnpsn6lRTJJ31ES6n94BNkJygzUwM/edit?usp=sharing).
+
+<!---
+## Contributing
+
+We may add a `CONTRIBUTING.md`
+
+## License
+
+We may add a `LICENSE.md`
+
+## Acknowledgments
+
+* Maybe some thanks too
+* Inspiration
+* etc
+--->

copy_lib.js

@@ -1,20 +0,0 @@
-const { basename, join, resolve } = require('path');
-const { readFileSync, lstatSync } = require('fs');
-const { exec } = require('child_process');
-
-const distDir = 'www/lib';
-
-const filelist = readFileSync('lib_list.txt', 'utf-8').split(/\r?\n/);
-
-exec(`mkdir -p ${distDir}`, () => {
-  filelist.forEach(path => {
-    path = resolve(path);
-    const filename = basename(path);
-    const dest = lstatSync(path).isDirectory()
-      ? distDir
-      : join(distDir, filename);
-    const cmd = `rsync -ru ${path} ${dest}`;
-    console.log(cmd);
-    exec(cmd);
-  });
-});

lib_list.txt

@@ -1,5 +1 @@
 node_modules/normalize.css/normalize.css
-node_modules/@webcomponents/webcomponentsjs
-node_modules/@webcomponents/html-imports/src/html-imports.js
-node_modules/oidc-client/dist/oidc-client.min.js
-node_modules/oidc-client/dist/oidc-client.js

package.json

@@ -1,21 +1,20 @@
 {
-  "name": "hd-app",
+  "name": "sib-app",
   "version": "1.0.0",
-  "license": "ISC",
+  "license": "MIT",
+  "scripts": {
+    "serve": "node server.js",
+    "postinstall": "node postinstall.js"
+  },
   "devDependencies": {
-    "@babel/core": "^7.1.0",
+    "@babel/core": "^7.4.4",
-    "@babel/cli": "^7.1.0",
+    "@babel/cli": "^7.4.4",
-    "node-sass": "^4.9.3",
+    "node-sass": "^4.12.0",
     "pug-cli": "^1.0.0-alpha6",
-    "browser-sync": "^2.24.7",
+    "express": "^4.16.4"
-    "express": "^4.16.3"
   },
   "dependencies": {
-    "@webcomponents/html-imports": "^1.2.0",
-    "@webcomponents/webcomponentsjs": "^1.2.7",
     "include-media": "^1.4.9",
-    "normalize.css": "^8.0.0",
+    "normalize.css": "^8.0.1"
-    "oidc-client": "^1.5.3-beta.1",
-    "simple-line-icons": "^2.4.1"
   }
 }

postinstall.js

@@ -0,0 +1,8 @@
+const fs = require('fs');
+const { exec } = require('child_process');
+
+if (!fs.existsSync('src/config.json')) {
+  const cmd = `rsync -ru src/config.sample.json src/config.json`;
+  console.log(cmd);
+  exec(cmd);
+}

server.js

@@ -1,5 +1,4 @@
-const port = 9000;
+const port = 3000;
-const browserSyncPort = 3000;
 const distPath = 'www';
 
 // express server
@@ -8,19 +7,5 @@ const express = require('express');
 const app = express();
 app
   .use(express.static(distPath))
-  // .use('/src', express.static(join(__dirname, 'src')))
+  .get(/^[^.]*$/, (req, rep) => rep.sendFile(join(__dirname, distPath, '/index.html')))
-  .get(/^[^.]*$/, (req, rep) =>
-    rep.sendFile(join(__dirname, distPath, '/index.html')),
-  )
   .listen(port);
-
-// browser sync
-const bs = require('browser-sync').create();
-bs.init({
-  files: [distPath + '/**/*'],
-  proxy: `http://localhost:${port}`,
-  open: false,
-  notify: false,
-  port: browserSyncPort
-  // tunnel: true,
-});

src/dependencies.pug

@@ -1,32 +1,24 @@
-// 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&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-core/src/index.js")
-//script(type="module" src="/lib/sib-router/sib-router.js")
+//- script(type="module" src="/lib/sib-router/src/index.js")
-//script(type="module" src="/lib/sib-core/sib-form.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")
 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")
 script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.12")
 script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1")
-script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.11")
+script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.15")
 

src/get_config.pug

@@ -1,6 +1,5 @@
-- var __env = locals[process.env.ENV]
-
 -
+  var __env = locals[process.env.ENV]
   for(k in __env){
     eval(`var ${k} = __env[${JSON.stringify(k)}]`);
   }

src/header.pug

@@ -1,4 +1,3 @@
-#button-toggle
 #logo
   img(src="/images/logo.png" width=111 height=32)
 

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(role='banner')
-      header#header.row(role='banner')
       include header.pug
-      .content.row
+    main
       include menu-left.pug
+      div#viewport
 
-        main#mainContainer
+        #members(hidden).no-sidebar
-          //- #dashboard(hidden)
+          include page-members-directory.pug
-            include page-dashboard.pug
+
-          #members(hidden)
+        #job-offers(hidden).no-sidebar
-            include page-members.pug
-          #member-chat(hidden)
-            include page-member-chat.pug
-          #job-offers(hidden)
           include page-job-offers.pug
-          #job-offer-create(hidden)
+
+        #job-offer-create(hidden).no-sidebar
+          sib-link(class="backlink", next="job-offers") Back
           include page-job-offer-create.pug
-          #project(hidden)
+
+        #project(hidden).with-sidebar
           include page-project.pug
+
+        #circle(hidden).with-sidebar
+          include page-circle.pug
+
+        #member-chat(hidden).with-sidebar
+          include page-member-chat.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

src/menu-left.pug

@@ -1,22 +1,10 @@
-nav#navbar
+nav#main__menu
   sib-router#navbar-router(default-route='members')
     sib-route.menu(name='members')
-      div.menu-notification
-        sib-display(
-        data-src=`${sdn}/members/`,
-        data-fields='-',
-        counter-template='${counter}'
-        )
       div.menu-label Members
       div.menu-icon.icon-people
     div.divider
     sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
-      div.menu-notification
-        sib-display(
-        data-src=`${sdn}/job-offers/`,
-        data-fields='-',
-        counter-template='${counter}'
-        )
       div.menu-label Job offers
       div.menu-icon.icon-briefcase
     sib-route(hidden, name='job-offer-create')

src/page-circle-chat.pug

@@ -1,4 +1,4 @@
-.chat-view
+.content-box.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-circle-create.pug

@@ -0,0 +1,26 @@
+.content-box.with-form.full-width
+  h1 New group
+  p Here you can create a new group according to your interests, what you want to share, etc.
+
+  sib-form(
+    data-src=`${sdn}/circles/`,
+    range-owner=`${sdn}/users/`, 
+    range-team=`${sdn}/members/`
+    
+    data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
+
+    label-name="Channel's name",
+    label-description='Description',
+    label-owner='Owner of this channel',
+    label-foaf:jabberID='Chatroom id',
+    label-team='Member(s) of this channel',
+
+    value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
+    value-owner-text='The one who will admin this channel',
+    value-team-text='Add any members as you want.',
+
+
+    widget-description='sib-form-textarea',
+    widget-jabberRoom='sib-form-checkbox',
+    widget-team='sib-form-multiple-dropdown'
+  )

src/page-circle-edit.pug

@@ -0,0 +1,9 @@
+#circle-edit.content-box.with-form.full-width
+  h1 Edit group
+  sib-form.block(
+    range-owner=`${sdn}/members/`,
+    data-fields="name, description, owner, team, jabberID, jabberRoom"
+    range-team=`${sdn}/members/`,
+    widget-team='sib-form-multiple-dropdown',
+    bind-resources
+  )

src/page-circle-profile.pug

@@ -1,4 +1,4 @@
-.frame
+.content-box.full-width
   h2 Channel's name:
   sib-display(
     data-fields='name',

src/page-circle.pug

@@ -1,3 +1,12 @@
+.views-container
+  #circle-chat
+    include page-circle-chat.pug
+  #circle-profile
+    include page-circle-profile.pug
+  #circle-edit
+    include page-circle-edit.pug
+  #circle-create
+    include page-circle-create.pug
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='circle-chat')
     ul
@@ -8,20 +17,10 @@ nav.jsRightMenu(role='navigation')
           a Chat
       sib-route(name='circle-profile')
         li
-          a Info
+          a Information
-      sib-ac-checker(permission='change' bind-resources)
       sib-route(name='circle-edit')
         li
           a Edit
       sib-route(name='circle-create')
         li
           a Add new
-#views-container
-  #circle-chat
-    include page-group-chat.pug
-  #circle-profile
-    include page-group-profile.pug
-  #circle-edit
-    include page-group-edit.pug
-  #circle-create
-    include page-group-create.pug

src/page-group-create.pug

@@ -1,26 +0,0 @@
-.frame-form
-  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
-    sib-form(
-      data-src=`${sdn}/circles/`,
-      range-owner=`${sdn}/users/`, 
-      range-team=`${sdn}/members/`
-      
-      data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
-
-      label-name="Channel's name",
-      label-description='Description',
-      label-owner='Owner of this channel',
-      label-foaf:jabberID='Chatroom id',
-      label-team='Member(s) of this channel',
-
-      value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
-      value-owner-text='The one who will admin this channel',
-      value-team-text='Add any members as you want.',
-
-
-      widget-description='sib-form-textarea',
-      widget-jabberRoom='sib-form-checkbox',
-      widget-team='sib-form-multiple-dropdown'
-    )

src/page-group-edit.pug

@@ -1,10 +0,0 @@
-#circle-edit
-  h1 Edit group
-  .form-view
-    sib-form.block(
-      range-owner=`${sdn}/members/`,
-      data-fields="name, description, owner, team, jabberID, jabberRoom"
-      range-team=`${sdn}/members/`,
-      widget-team='sib-form-multiple-dropdown',
-      bind-resources
-    )

src/page-groups.pug

@@ -1,7 +0,0 @@
-#circles
-  sib-display#circles-list(
-    data-src=`${sdn}/circles/`,
-    data-fields='name, description',
-    search-fields='name, description',
-    next='group'
-  )

src/page-job-offer-create.pug

@@ -1,4 +1,6 @@
-.frame-form
+.content-box.with-form
+  h1 Post a new job offer
+  p.center This form allows you to share an offer to all members of the network.
     
   sib-widget(name='title-text')
     template
@@ -8,10 +10,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
   sib-form.block(
     data-src=`${sdn}/job-offers/`,
     range-skills= `${sdn}/skills/`,

src/page-job-offers.pug

@@ -1,11 +1,11 @@
-div.grid-layer
+div.job-offers__main
 
   include templates/template-groups.pug
   include templates/template-skills.pug
   include templates/template-joboffers-filter.pug
 
-  div.grid-layer-main.containerV
+  div.job-offers__content
-    h2 New offers
+    h1 New offers
       span Here you can find and post offers
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
@@ -35,15 +35,9 @@ div.grid-layer
       search-widget-open='joboffers-filter'
     )
     
-  div.grid-layer-links.containerV
+  div.job-offers__newoffer
     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
-      div.icon-idea
-      div.grow How To find a new offer?
-    //-sib-link().containerH.containerCenter.how-link
-      div.icon-idea
-      div.grow How to set notification?

src/page-member-chat.pug

@@ -1,5 +1,4 @@
-div
+.content-box.full-width.chat-view
-  .chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-member-edit.pug

@@ -1,96 +0,0 @@
-.form-view
-  sib-form.block(
-    data-fields='user.first_name, user.last_name, user.account.picture, bio, groups, phone, skills, website',
-    widget-user='hdapp-usereditinfo',
-    range-groups=`${sdn}/groups/`, widget-skills='sib-form-multiple-dropdown',
-    range-skills=`${sdn}/skills/`,
-    bind-resources
-  )
-
-  #crop-modal
-    .crop-wrapper
-      img#crop-preview(src='')
-    .control-bar
-      button#cancel-img-cropping.btn.btn-link Annuler
-      i#rotate-img.fa.fa-undo(aria-hidden='true')
-      button#crop-img.btn.btn-link Valider
-
-
-//-script.
-  class LDPFormImgUpload extends SIBWidget {
-    get template() {
-      return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
-        <input id="${this.name}" type="file" name="${this.name}" value="${this.value}" />`;
-    }
-
-    render() {
-      store.get(this.value).then( (value) => {
-        this._value = value;
-        this.innerHTML = this.template;
-      });
-    }
-  }
-  customElements.define("ldp-form-img-upload", LDPFormImgUpload);
-  widget-avatar="ldp-form-img-upload"
-
-
-//-script.
-  // Constant declaration
-  const avatarPreview = document.querySelector("#avatar-preview");
-  const avatarInput   = document.querySelector("#avatar-input");
-  const cropModal     = document.querySelector("#crop-modal");
-  const cropPreview   = cropModal.querySelector("#crop-preview");
-  const $cropPreview  = $(cropPreview);
-
-  // Triggers cropping on image upload
-  avatarInput.addEventListener("change", function(e) {
-    var img     = avatarInput.files[0];
-    var reader  = new FileReader();
-
-    reader.onloadend = function () {
-      cropPreview.src = reader.result;
-      cropModal.classList.add("cropping-mode");
-    }
-
-    if (img) {
-      reader.readAsDataURL(img);//reads the data as a URL
-    } 
-  });
-  cropPreview.addEventListener("load", () => {
-    $cropPreview.cropper({
-      aspectRatio:  1/1,
-      viewMode:     3,
-      zoomable:     false,
-    });
-  });
-
-
-  // Rotate image 
-  cropModal.querySelector("#rotate-img").addEventListener("click", () => {
-    $cropPreview.cropper("rotate", -90);
-  });
-
-
-  // Cancel cropping
-  cropModal.querySelector("#cancel-img-cropping").addEventListener("click", () => {
-    closeCropping();
-  });
-
-  // Shortcut
-  document.querySelector("body").addEventListener("keydown", function(e) {
-    // Escape key
-    if (e.keyCode == 27 && cropModal.classList.contains("cropping-mode")) {
-      closeCropping();
-    }
-  });
-  function closeCropping() {
-    cropModal.classList.remove("cropping-mode");
-    avatarInput.value = null;
-  }
-
-
-  // Validating cropping 
-  cropModal.querySelector("#crop-img").addEventListener("click", () => {
-    avatarPreview.src = $cropPreview.cropper("getCroppedCanvas").toDataURL()
-    closeCropping();
-  });

src/page-project-chat.pug

@@ -1,4 +1,4 @@
-.chat-view
+.content-box.full-width.chat-view
   sib-chat(
     data-authentication='login',
     data-auto-login='true',

src/page-project-create.pug

@@ -1,7 +1,7 @@
-.frame-form
+.content-box.with-form.full-width
   h1 New project
-  p.form-goal Here you can create your project, add members and assign them a job.
+  p Here you can create your project, add members and assign them a job.
-  .form-view
+  
   sib-form.block(
     data-src=`${sdn}/projects/`,
     range-members=`${sdn}/members/`,
@@ -16,12 +16,12 @@
     label-description='Project description',
     
     set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
-      widget-fieldset-fee='template-legend-fee',
+    widget-fieldset-fee='hd-template-project-title',
     label-businessProvider='Business provider',
     label-businessProviderFee='Amount of the contribution',
     
     set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
-      widget-fieldset-customer='template-legend-customer',
+    widget-fieldset-customer='hd-template-project-title',
     label-customer.companyRegister='Company register',
     label-customer.address='Address',
     label-customer.firstName='Name of the contact at the customer\'s premises',

src/page-project-edit.pug

@@ -1,11 +1,15 @@
 
-sib-widget(name='template-legend-team')
+
+.content-box.with-form.full-width
+  h1 Edit your project
+  p Here you can edit your projet's details
+
+  sib-widget(name='hd-template-project-title')
     template
       span ${label}
 
   sib-widget(name='template-members')
     template
-
       sib-form.team.is-horizontal(
         naked,
         data-src='${id}',
@@ -17,10 +21,6 @@ sib-widget(name='template-members')
         label-user.name='Member(s)',
       )
 
-.frame-form
-  h1 Edit your project
-  p.form-goal Here you can edit your projet's details
-  .form-view
   sib-form.block(
     data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team',
 
@@ -34,7 +34,7 @@ sib-widget(name='template-members')
     range-businessProvider=`${sdn}/businessproviders/`,
     label-businessProvider='Business provider',
     label-businessProvider.fee='Amount of the contribution (%)',
-      widget-fieldset-fee='template-legend-team',
+    widget-fieldset-fee='hd-template-project-title',
     widget-businessProvider.fee='sib-form-number',
     label-fieldset-fee='Fee',
 
@@ -46,12 +46,12 @@ sib-widget(name='template-members')
     label-customer.role='Role within the company',
     label-customer.email='Email',
     label-customer.phone='Phone',
-      widget-fieldset-customer='template-legend-team',
+    widget-fieldset-customer='hd-template-project-title',
     label-fieldset-customer='Customer information',
 
     set-block-project__team='fieldset-team, members',
     label-fieldset-team='The team',
-      widget-fieldset-team='template-legend-team',
+    widget-fieldset-team='hd-template-project-title',
     widget-members='template-members',
     multiple-members,
 

src/page-project-profile.pug

@@ -1,4 +1,4 @@
-.frame
+.content-box.full-width
 
   include templates/template-business-provider.pug
   include templates/template-customer.pug

src/page-project.pug

@@ -1,3 +1,12 @@
+.views-container
+  #project-chat
+    include page-project-chat.pug
+  #project-profile
+    include page-project-profile.pug
+  #project-edit
+    include page-project-edit.pug
+  #project-create
+    include page-project-create.pug
 nav.jsRightMenu(role='navigation')
   sib-router(default-route='project-chat')
     ul
@@ -15,12 +24,3 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='project-create', use-id)
         li
           a Add new
-#views-container
-  #project-chat
-    include page-project-chat.pug
-  #project-profile
-    include page-project-profile.pug
-  #project-edit
-    include page-project-edit.pug
-  #project-create
-    include page-project-create.pug

src/page-projects.pug

@@ -1,10 +0,0 @@
-//#projects
-div
-  h1 Projects
-  sib-display(
-    data-src=`${sdn}/projects/`,
-    data-fields='phone, customer, name',
-    widget-customer='hdapp-client',
-    search-fields='phone, name',
-    next='project'
-  )

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');
-  });
-
-
-});

src/scripts/index.js

@@ -1,35 +1,9 @@
 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'));
+  const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
 
-  if (!navBar || !btnToggle) return;
+  //- Toggle sub-menus
-
-  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');
     menu.addEventListener('click', e => {
@@ -37,12 +11,14 @@ document.addEventListener('DOMContentLoaded', function (event) {
     });
   });
 
-  // Open/close menu on the right
+  //- Open/close menu on the right
   rightMenus.forEach(rightMenu => {
     const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
 
     btnRightMenu.addEventListener('click', e => {
-      rightMenu.classList.toggle('offsite-is-closed');
+      rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
-    })
+      viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
     })
   });
+
+});

src/styles/_index.scss

@@ -0,0 +1,21 @@
+@charset "UTF-8";
+
+@import '../../node_modules/include-media/dist/include-media';
+@import '../../node_modules/normalize.css/normalize';
+
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+@import 'components/icons/index';
+@import 'base/main';
+
+div#viewport {
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow-y: auto;
+    @import 'components/index';
+    @import 'layout/members/index';
+    @import 'layout/job-offers/index';
+    @import 'layout/project-profile/index';
+    @import 'layout/circle-profile/index';
+}

src/styles/abstracts/_mixins.scss

@@ -0,0 +1,4 @@
+@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;
+}

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%);

src/styles/base/_compat.scss

@@ -0,0 +1,34 @@
+%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;
+}
+
+%containerV {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+}

src/styles/base/form.scss

@@ -0,0 +1,294 @@
+.content-box {
+
+  &.with-form {
+
+    hd-template-project-title {
+      border-bottom: 1px solid $color-221-51-90;
+      color: $color-233-18-29;
+      font-size: 1.8rem;
+      font-weight: 600;
+      padding-bottom: 1rem;
+    }
+
+    sib-form {
+      border-bottom: 1px solid $color-210-17-91;
+      padding-bottom: 2.55rem;
+    }
+
+    h1 {
+      color: $color-233-18-29;
+      font-weight: bold;
+      font-size: 2rem;
+      text-align: center;
+    }
+
+    p.center {
+      margin-bottom: 6.8rem;
+      text-align: center;
+    }
+
+    [name$='-text'] {
+      font-size: 1.5rem;
+      margin-bottom: 2em;
+    }
+
+    div[name^='block-'] {
+      display: flex;
+      flex-direction: column;
+    }
+
+    input {
+      -webkit-appearance: none;
+      align-items: center;
+      background: $color-222-57-95;
+      border: none;
+      color: $color-233-18-29;
+      display: inline-flex;
+      justify-content: flex-start;
+      line-height: 1.5;
+      vertical-align: top;
+    }
+
+    sib-form-auto-completion,
+    sib-form-checkbox,
+    sib-form-dropdown,
+    sib-form-label-text,
+    sib-form-multiple-dropdown,
+    sib-form-number,
+    sib-form-textarea {
+      display: flex;
+      flex-direction: column;
+
+      >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-222-57-95;
+        border: none;
+        color: $color-233-18-29;
+        line-height: 1.5;
+        width: 100%;
+
+      }
+
+      select,
+      textarea {
+        padding: 1.7rem;
+      }
+
+      select {
+        margin-bottom: 1.7rem;
+      }
+    }
+
+    sib-form-auto-completion,
+    sib-form-checkbox,
+    sib-form-multiple-dropdown {
+
+      label {
+        color: $color-216-4-22;
+        font-weight: 600;
+        text-transform: initial;
+      }
+    }
+
+    sib-form-auto-completion {
+
+      div.choices__inner {
+        background-color: inherit;
+        border: none;
+        display: flex;
+        flex-direction: column-reverse;
+        padding-left: 0;
+
+        div.choices__list {
+          margin-top: 1.7rem;
+
+          div.choices__item {
+
+            button.choices__button {
+              border-left: 1px solid $color-43-100-50;
+              opacity: 1;
+              padding-left: 0;
+            }
+          }
+        }
+
+        input[type='text'].choices__input {
+          max-width: 27.2rem;
+          min-width: 27.2rem;
+        }
+      }
+    }
+
+    sib-form-checkbox {
+      flex-direction: row;
+
+      [type='checkbox'] {
+        position: relative;
+        margin-top: 2em;
+
+        &:before {
+          border: 2px solid $color-210-5-56;
+          content: '';
+          height: 1rem;
+          left: 0;
+          margin-left: 1rem;
+          padding-bottom: 0.2rem;
+          position: absolute;
+          width: 1.2rem;
+          z-index: 1;
+        }
+
+        &:checked {
+          &:before {
+            border: 2px solid $color-210-5-56;
+            color: $color-244-73-62;
+            height: 1rem;
+            left: 0;
+            margin-left: 1rem;
+            padding-bottom: 0.2rem;
+            position: absolute;
+            width: 1.2rem;
+            z-index: 1;
+            @include mdi('check');
+          }
+        }
+
+        &:after {
+          background: $color-0-0-100;
+          content: '';
+          height: 1rem;
+          position: absolute;
+          width: 1rem;
+        }
+      }
+    }
+
+    sib-form-dropdown {
+
+      select {
+        appearance: none;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        background-image: url("/images/chevron-down.png");
+        background-position: right 12px top 60%;
+        background-repeat: no-repeat;
+        background-size: 14px 9px;
+        box-sizing: border-box;
+      }
+    }
+
+    /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
+
+    sib-form-multiple-dropdown {
+
+      button {
+        appearance: none;
+        background-color: $color-0-0-100;
+        border: 1px solid;
+        border-radius: 100%;
+        color: $color-244-73-62;
+        font-size: 2.55rem;
+        height: 1em;
+        line-height: 0;
+        margin: 0.34rem;
+        padding: 0 0.04em 0.08em;
+        vertical-align: middle;
+        width: 1em;
+      }
+    }
+
+    sib-form-textarea {
+      align-items: stretch;
+    }
+
+    sib-multiple-form {
+
+      >label {
+        display: none;
+      }
+    }
+
+    input[type='submit'] {
+      margin-top: 6rem;
+      background-color: $color-233-18-29;
+      color: $color-0-0-100;
+      float: right;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .is-horizontal {
+    display: flex;
+  }
+
+  sib-multiple-form[name='members'] {
+
+    >div {
+      align-items: center;
+      display: flex;
+    }
+
+    >div:not(:nth-child(-n + 2)) {
+
+      label {
+
+        >div {
+          display: none;
+        }
+      }
+    }
+
+    button {
+      appearance: none;
+      background-color: $color-0-0-100;
+      border: 1px solid;
+      border-radius: 100%;
+      color: $color-244-73-62;
+      font-size: 2.55rem;
+      height: 1em;
+      line-height: 0;
+      margin: 0.34rem;
+      padding: 0 0.04em 0.08em;
+      vertical-align: middle;
+      width: 1em;
+
+      &::after {
+        content: Add;
+      }
+    }
+  }
+}
+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;
+  }
+}

src/styles/base/header.scss

@@ -1,8 +1,9 @@
-
 #header {
+  max-height: 51px;
+  height: 51px;
   align-items: center;
-  background-color: $color-white;
+  background-color: $color-0-0-100;
-  color: $color-dark-lava;
+  color: $color-216-4-22;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
   flex-shrink: 0;
@@ -15,15 +16,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 +26,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 +41,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 +107,8 @@ details {
 details#user-controls {
 
   summary:focus {
-    background-color: $color-purple-dark;
+    background-color: $color-233-18-29;
-    color: $color-white;
+    color: $color-0-0-100;
     outline: none;
   }
 
@@ -160,7 +152,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 +170,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 +186,8 @@ details#user-controls {
   }
 
   &[open] {
-    background-color: $color-purple-dark;
+    background-color: $color-233-18-29;
-    color: $color-white;
+    color: $color-0-0-100;
 
     #user-controls__profile {
 

src/styles/base/main.scss

@@ -0,0 +1,147 @@
+$breakpoints: (phone: 480px,
+  tablet: 768px,
+  desktop: 1024px) !default;
+
+[hidden],
+.hidden {
+  display: none !important;
+}
+
+* {
+  outline: none;
+}
+
+: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;
+  }
+
+  main {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    max-width: 100%;
+    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;
+}
+
+sib-route,
+sib-link,
+button,
+input,
+a {
+  cursor: pointer;
+  &:hover,
+  &:link,
+  &:active {
+    cursor: pointer;
+  }
+}
+
+%padding-main {
+  padding: 5rem;
+}
+
+.content-box {
+  @include window-style-modal();
+  @extend %padding-main;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 2rem 1rem 5rem 2rem;
+
+  &.full-width {
+    background: $color-0-0-100;
+    flex: 1;
+    font-size: 1.5rem;
+    margin: 0 auto;
+    min-height: calc(100vh - 84px);
+  }
+}
+
+.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;
+  }
+}
+
+// Compatibility layer for non-updated components
+@import 'compat';
+// Other base components
+@import 'form';
+@import 'header';
+@import 'menu-left';

src/styles/base/menu-left.scss

@@ -1,14 +1,10 @@
-#navbar {
+#main__menu {
-  background-color: $color-purple-dark;
+  background-color: $color-233-18-29;
-  color: $color-white;
+  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;
+        background-color: $color-46-100-67;
-        color: $color-purple-dark;
+        color: $color-233-18-29;
   
         .menu-icon:before {
-          background-color: $color-purple-dark;
+          background-color: $color-233-18-29;
-          color: $color-white;
+          color: $color-0-0-100;
-          // transform: perspective(1000px) translateZ(1px) scale(0.8);
         }
   
         .menu-notification > sib-display > div:first-child {
-          background-color: $color-purple-dark;
+          background-color: $color-233-18-29;
-          color: $color-mustard;
+          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;
-  }
-}
-

src/styles/components/_index.scss

@@ -0,0 +1,6 @@
+@import 'chat';
+@import 'filters';
+@import 'howto';
+@import 'sidebar';
+@import 'skills';
+@import 'user-role';

src/styles/components/chat.scss

@@ -0,0 +1,19 @@
+
+// chat
+
+.chat-view {
+  padding: 0;
+  height: calc(100vh - 84px);
+  position: relative;
+
+  > sib-chat {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: calc(100vh - 84px);
+    z-index: 0;
+  }
+}
+

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;

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;
+  }
+}
+
+
+

src/styles/components/icons/_index.scss

@@ -0,0 +1,3 @@
+@import 'custom-icons';
+@import 'icons';
+@import 'material-design-icons';

src/styles/components/sidebar.scss

@@ -0,0 +1,107 @@
+.no-sidebar {
+  flex: 1;
+  @extend %padding-main;
+}
+
+.with-sidebar {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow-x: hidden;
+
+  .views-container {
+    flex: 1 0 0;
+    overflow-y: auto;
+    -webkit-backface-visibility: hidden;
+
+    &.sidebar-is-closed {
+      margin-left: -15.5rem;
+      transform: translate(15.5rem);
+    }
+  }
+
+  >div {
+    transition: all 0.5s;
+  }
+
+  nav {
+    transition: all 0.5s;
+
+    >sib-router {
+      background-color: $color-222-52-90;
+      color: $color-233-18-29;
+      flex: 0 0 auto;
+      font-weight: 600;
+
+      >ul {
+        cursor: pointer;
+        list-style: none;
+        margin: 0;
+        padding-left: 0;
+
+        li {
+          align-items: center;
+          border-bottom: 1px solid $color-229-25-79;
+          display: flex;
+          margin: 0;
+          padding: 2.55rem 2.55rem;
+          position: relative;
+          width: 12em;
+
+          &::before {
+            float: left;
+            font-size: 4rem;
+            margin-left: 0;
+            margin-right: 2.55rem;
+          }
+        }
+
+        >li {
+          @include icon('arrow-right-circle');
+        }
+
+        >sib-route {
+
+          &[active] {
+            background-color: $color-233-18-29;
+            color: $color-46-100-67;
+            display: inline-block;
+          }
+
+          &[name^='circle'],
+          &[name^='project'] {
+
+            >li::before {
+              font-size: 4rem;
+            }
+          }
+
+          &[name$='chat']>li {
+            @include ci('chat');
+          }
+
+          &[name$='create']>li {
+            @include ci('offer');
+          }
+
+          &[name$='edit']>li {
+            @include ci('list');
+          }
+
+          &[name$='profile']>li {
+            @include ci('information');
+          }
+        }
+      }
+    }
+
+    &.offsite-is-closed {
+      transform: translate(15.5rem);
+
+      & .jsOffsiteToggle::before {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}

src/styles/components/skills.scss

@@ -0,0 +1,16 @@
+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;
+}

src/styles/components/user-role.scss

@@ -0,0 +1,9 @@
+%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;
+  }

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: ':';
-  }
-}
-*/
-

src/styles/form.scss

@@ -1,291 +0,0 @@
-.frame-form {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  min-height: 100vh;
-  padding: 6.8rem 8.5rem 10.2rem;
-  @extend %frame;
-  
-  .form-view {
-    border-bottom: 1px solid $color-platinum;
-    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;
-    font-weight: bold;
-    font-size: 2rem;
-    text-align: center;
-  }
-
-  p.form-goal {
-    margin-bottom: 6.8rem;
-    text-align: center;
-  }
-
-  [name$='-text'] {
-    font-size: 1.5rem;
-    margin-bottom: 2em;
-  }
-
-  div[name^='block-'] {
-    display: flex;
-    flex-direction: column;
-  }
-
-  input {
-    -webkit-appearance: none;
-    align-items: center;
-    background: $color-glitter;
-    border: none;
-    color: $color-purple-dark;
-    display: inline-flex;
-    justify-content: flex-start;
-    line-height: 1.5;
-    vertical-align: top;
-  }
-  
-  sib-form-auto-completion,
-  sib-form-checkbox,
-  sib-form-dropdown,
-  sib-form-label-text,
-  sib-form-multiple-dropdown,
-  sib-form-number,
-  sib-form-textarea {
-    display: flex;
-    flex-direction: column;
-
-    > label {
-      @extend %label;
-    }
-
-    select,
-    textarea {
-      background: $color-glitter;
-      border: none;
-      color: $color-purple-dark;
-      line-height: 1.5;
-      width: 100%;
-      
-    }
-
-    select,
-    textarea {
-      padding: 1.7rem;
-    }
-
-    select {
-      margin-bottom: 1.7rem;
-    }
-  }
-
-  sib-form-auto-completion,
-  sib-form-checkbox,
-  sib-form-multiple-dropdown {
-
-    label {
-      color: $color-dark-lava;
-      font-weight: 600;
-      text-transform: initial;
-    }
-  }
-
-  sib-form-auto-completion {
-
-    div.choices__inner {
-      background-color: inherit;
-      border: none;
-      display: flex;
-      flex-direction: column-reverse;
-      padding-left: 0;
-
-      div.choices__list {
-        margin-top: 1.7rem;
-
-        div.choices__item {
-          /*@extend %skill;*/
-
-          button.choices__button {
-            border-left: 1px solid $color-selective-yellow;
-            opacity: 1;
-            padding-left: 0;
-          }
-        }
-      }
-
-      input[type='text'].choices__input {
-        max-width: 27.2rem;
-        min-width: 27.2rem;
-      }
-    }
-  }
-
-  sib-form-checkbox {
-    flex-direction: row;
-
-    [type='checkbox'] {
-      cursor: pointer;
-      position: relative;
-      margin-top: 2em;
-      
-      &:before {
-        border: 2px solid $color-taupe-gray; 
-        content: '';
-        height: 1rem;
-        left: 0;
-        margin-left: 1rem;
-        padding-bottom: 0.2rem;
-        position: absolute;
-        width: 1.2rem;
-        z-index: 1;
-      }
-      
-      &:checked {
-        &:before {
-          border: 2px solid $color-taupe-gray; 
-          color: $color-majorelle-blue;
-          height: 1rem;
-          left: 0;
-          margin-left: 1rem;
-          padding-bottom: 0.2rem;
-          position: absolute;
-          width: 1.2rem;
-          z-index: 1;
-          @include mdi('check');
-        } 
-      }
-      
-      &:after {
-        background: $color-white;
-        content: '';
-        height: 1rem;
-        position: absolute;
-        width: 1rem;
-      }
-    }
-  }
-
-  sib-form-dropdown {
-
-    select {
-      appearance: none;
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      background-image: url("/images/chevron-down.png");
-      background-position: right 12px top 60%;
-      background-repeat: no-repeat;
-      background-size: 14px 9px;
-      box-sizing: border-box;
-    }
-  }
-
-  /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
-  
-  sib-form-multiple-dropdown {
-
-    button {
-      appearance: none;
-      background-color: $color-white;
-      border: 1px solid;
-      border-radius: 100%;
-      color: $color-majorelle-blue;
-      cursor: pointer;
-      font-size: 2.55rem;
-      height: 1em;
-      line-height: 0;
-      margin: 0.34rem;
-      padding: 0 0.04em 0.08em;
-      vertical-align: middle;
-      width: 1em;
-    }
-  }
-
-  sib-form-textarea {
-    align-items: stretch;
-  }
-
-  sib-multiple-form {
-
-    > label {
-      display: none;
-    }
-  }
-
-  input[type='submit'] {
-    margin-top: 6rem;
-    @extend %submit-form;
-  }
-}
-
-#project-create,
-#project-edit {
-
-  input,
-  textarea {
-    margin-bottom: 3.4rem;
-  }
-}
-
-.is-horizontal {
-  display: flex;
-}
-
-.field {
-  margin-right: 0.75rem;
-  max-width: 50%;
-}
-
-.is-expanded {
-  flex-grow: 1;
-}
-
-sib-multiple-form[name='members'] {
-
-  > div {
-    align-items: center;
-    display: flex;
-  }
-
-  > div:not(:nth-child(-n + 2)) {
-
-    label {
-      
-      > div {
-        display: none;
-      }
-    }
-  }
-
-  button {
-    appearance: none;
-    background-color: $color-white;
-    border: 1px solid;
-    border-radius: 100%;
-    color: $color-majorelle-blue;
-    cursor: pointer;
-    font-size: 2.55rem;
-    height: 1em;
-    line-height: 0;
-    margin: 0.34rem;
-    padding: 0 0.04em 0.08em;
-    vertical-align: middle;
-    width: 1em;
-
-    &::after {
-      content: Add;
-    }
-  }
-}

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';

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;
-        }
-      } 
-    }
-  }
-}
-

src/styles/layout/circle-profile/_index.scss

@@ -0,0 +1 @@
+@import 'circle-profile';

src/styles/layout/circle-profile/circle-profile.scss

@@ -1,5 +1,4 @@
 #circle-profile {
-  min-height: 100%;
 
   .block-group > div {
     display: flex;
@@ -31,7 +30,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 +60,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 +68,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;

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

@@ -0,0 +1 @@
+@import 'job-offers.scss';

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

@@ -0,0 +1,174 @@
+.job-offers__main {
+  @extend %grid-layer;
+}
+
+.job-offers__content {
+  @extend %grid-layer-main;
+  @extend %containerV;
+}
+
+.job-offers__newoffer {
+  @extend %grid-layer-links;
+  @extend %containerV;
+}
+
+#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;
+
+        [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;
+          }
+        }
+      }
+    }
+  }
+
+}

src/styles/layout/members/_index.scss

@@ -0,0 +1,2 @@
+@import 'members';
+@import 'member-profile';

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;

src/styles/layout/members/members.scss

@@ -1,8 +1,45 @@
+%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');
+  }
+}
+
+member-info-groups {
+  @extend %user-role;
+}
+
 #members-list {
-  @extend .grid-layer;
+  @extend %grid-layer;
 
   #members-list__content {
-    @extend .grid-layer;
+    @extend %grid-layer;
 
     nav {
       align-items: center;
@@ -11,15 +48,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 +90,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 +110,7 @@
         }
 
         span {
-          background-color: $color-anti-flash-white;
+          background-color: $color-210-25-95;
           padding: 0 60px;
         }
       }
@@ -81,7 +118,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 +147,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 +159,7 @@
           }
 
           member-picture {
-            background-color: $color-white;
+            background-color: $color-0-0-100;
             border-radius: 50%;
             height: 28vh;
             margin: 1.7rem auto;
@@ -142,7 +179,6 @@
 
           [name='user.name'] {
             font-weight: bold;
-            margin: 0;
             @extend h1;
           }
 
@@ -157,9 +193,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;

src/styles/layout/project-profile/_index.scss

@@ -0,0 +1 @@
+@import 'project-profile'

src/styles/layout/project-profile/project-profile.scss

@@ -0,0 +1,240 @@
+#project-profile {
+
+  [name^='block-']:not([name='block-title']) {
+    margin-top: 5.1rem;
+
+    [name^='label-'] {
+      display: block;
+      font-weight: bold;
+      margin-bottom: 1.4rem;
+      text-transform: uppercase;
+      @extend h2;
+    }
+
+    sib-display-value:not(:first-of-type),
+    ul,
+    [name*='job'] {
+      font-size: 1.5rem;
+    }
+  }
+
+  [name='block-title'] {
+    border-bottom: 1px solid $color-221-51-90;
+    display: flex;
+    padding-bottom: 3.4rem;
+
+    >* {
+      color: $color-216-4-22;
+      font-size: 2rem;
+      font-weight: bold;
+      padding-right: 0.85rem;
+      text-transform: uppercase;
+    }
+
+    >[name^='const-'] {
+      padding: 0;
+    }
+
+    >sib-display-value[name='name'] {
+      padding-left: 0.85rem;
+    }
+
+    > :nth-child(5) {
+      color: $color-233-18-29;
+      font-weight: normal;
+      text-transform: none;
+    }
+
+    [name='entitled'] {
+      margin-left: auto;
+    }
+
+    > :nth-last-child(-n+2) {
+      color: $color-213-4-50;
+      font-size: 1.6rem;
+      font-weight: normal;
+      text-transform: none;
+    }
+  }
+
+  [name='infos'] {
+    display: flex;
+    justify-content: space-between;
+
+    [name='description'] {
+      display: flex;
+      flex-direction: column;
+      width: 90%;
+    }
+
+    [name='block-logo'] {
+      box-sizing: border-box;
+      display: block;
+      height: 8.5vh;
+      position: relative;
+      text-align: end;
+      width: 15vw;
+    }
+  }
+
+  [name='businessProvider'] {
+
+    ul {
+      list-style: none;
+      padding-left: 0;
+
+      li {
+
+        &:first-child {
+          margin-bottom: 0.5em;
+        }
+
+        span {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  #clientBox {
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 1.7rem;
+    max-width: 100%;
+
+    >* {
+      border: 1px solid $color-221-51-90;
+      flex: 1 1 auto;
+      justify-content: space-between;
+      margin: 0 -0.1rem -0.1rem 0;
+      min-width: 25vw;
+      padding: 0;
+
+      h5 {
+        margin-left: 2rem;
+        margin-top: 2rem;
+      }
+
+      ul {
+        font-size: 1.5rem;
+        list-style: none;
+        margin: -2.04rem 0 3.74rem -2.04rem;
+
+        li {
+
+          span {
+            font-weight: bold;
+          }
+        }
+      }
+
+      &:first-child {
+        li {
+
+          span {
+            margin-right: 0.3em;
+          }
+
+          &:first-child {
+            margin-bottom: 0.5em;
+          }
+
+          &:last-child {
+            margin-top: 2.4em;
+          }
+        }
+      }
+
+      &:not(:first-child) {
+        padding-left: 5.1rem;
+
+        li {
+          margin-bottom: 1.7rem;
+
+          &:last-child {
+            margin-top: 2.2rem;
+          }
+
+          &::before {
+            color: $color-43-100-50;
+            font-size: 2.2rem;
+            padding: 0 1rem 0 0;
+          }
+        }
+      }
+    }
+  }
+
+  [name='block-team'] {
+
+    >sib-multiple {
+
+      label {
+        display: none;
+      }
+
+      >team-template[name='members'] {
+        display: grid;
+        grid-column-gap: 1.6rem;
+        grid-template-columns: 7vh auto;
+        grid-template-rows: repeat(2, 5.2vh);
+
+        >sib-display:first-child {
+          align-self: center;
+          grid-column: 1 / span 1;
+          grid-row: 1 / span 2;
+
+          div {
+            background-color: $color-0-0-100;
+            border-radius: 50%;
+            height: 7vh;
+            overflow: hidden;
+            position: relative;
+            width: 7vh;
+
+            img {
+              height: 100%;
+              left: 0;
+              object-fit: cover;
+              position: absolute;
+              top: 0;
+              width: 100%;
+            }
+          }
+        }
+
+        >div:nth-child(2) {
+          align-self: end;
+          display: flex;
+          grid-column: 2 / span 1;
+          grid-row: 1 / span 1;
+
+          span {
+            align-self: center;
+            font-weight: 600;
+          }
+
+          span~sib-display {
+
+            >div {
+              display: flex;
+              margin-left: 1rem;
+
+              sib-multiple [name='name'] {
+                @extend %user-role;
+              }
+            }
+          }
+        }
+
+        >span:nth-child(3) {
+          align-self: start;
+          grid-column: 2 / span 1;
+          grid-row: 2 / span 1;
+        }
+      }
+    }
+  }
+
+}

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;
-  }
-}

src/styles/member-chat.scss

@@ -1,3 +0,0 @@
-#member-chat {
-  width: 100%;
-}

src/styles/menu-right.scss

@@ -1,90 +0,0 @@
-#mainContainer {
-  
-  > div {
-
-    nav {
-      transition: all 0.5s;
-
-      > sib-router {
-        background-color: $color-222-52-90;
-        color: $color-purple-dark;
-        flex: 0 0 auto;
-        font-weight: 600;
-
-        > ul {  
-          cursor: pointer;
-          list-style: none;
-          margin: 0;
-          padding-left: 0;
-
-          li {
-            align-items: center;
-            border-bottom: 1px solid $color-lavender-gray;
-            display: flex;
-            margin: 0;
-            padding: 2.55rem 2.55rem;
-            position: relative;
-            width: 12em;
-
-            &::before {
-              float: left;
-              font-size: 4rem;
-              margin-left: 0;
-              margin-right: 2.55rem;
-            }
-          }
-
-          > li {
-            @include icon('arrow-right-circle');
-          }
-          
-          > sib-route {
-            
-            &[active] {
-              background-color: $color-purple-dark;
-              color: $color-mustard;
-              display: inline-block;
-            }
-
-            &[name^='circle'],
-            &[name^='project'] {
-              
-              > li::before {
-                font-size: 4rem;
-              }
-            }
-            
-            &[name$='chat'] > li {
-              @include ci('chat');
-            }
-            
-            &[name$='create'] > li {
-              @include ci('offer');
-            }
-            
-            &[name$='edit'] > li {
-              @include ci('list');
-            }
-            
-            &[name$='profile'] > li {
-              @include ci('information');
-            }          
-          }
-        }
-      }
-      
-      &.offsite-is-closed {
-        transform: translate(15.5rem);
-        
-        & .jsOffsiteToggle::before {
-          transform: rotate(180deg);
-        }
-
-        & ~ #views-container {
-          margin-left: -15.5rem;
-          transform: translate(15.5rem);
-        }
-      }
-    }
-  }
-}

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;
-  }
-}
-

src/styles/project-profile.scss

@@ -1,239 +0,0 @@
-#project-profile {
-  
-  [name^='block-']:not([name='block-title']) {
-    margin-top: 5.1rem;
-  
-    [name^='label-'] {
-      display: block;
-      font-weight: bold;
-      margin-bottom: 1.4rem;
-      text-transform: uppercase;
-      @extend h2;
-    }
-  
-    sib-display-value:not(:first-of-type),
-    ul,
-    [name*='job'] {
-      font-size: 1.5rem;
-    }
-  }
-
-  [name='block-title'] {
-    border-bottom: 1px solid $color-link-water;
-    display: flex;
-    padding-bottom: 3.4rem;
-  
-    > * {
-      color: $color-dark-lava;
-      font-size: 2rem;
-      font-weight: bold;
-      padding-right: 0.85rem;
-      text-transform: uppercase;
-    }
-  
-    > [name^='const-'] {
-      padding: 0;
-    }
-
-    > sib-display-value[name='name'] {
-      padding-left: 0.85rem;
-    }
-    
-    > :nth-child(5) {
-      color: $color-purple-dark;
-      font-weight: normal;
-      text-transform: none;
-    }
-
-    [name='entitled'] {
-      margin-left: auto;
-    }
-
-    > :nth-last-child(-n+2) {
-      color: $color-text-base;
-      font-size: 1.6rem;
-      font-weight: normal;
-      text-transform: none;
-    }
-  }
-
-  [name='infos'] {
-    display: flex;
-    justify-content: space-between;
-
-    [name='description'] {
-      display: flex;
-      flex-direction: column;
-      width: 90%;
-    }
-    
-    [name='block-logo'] {
-      box-sizing: border-box;
-      display: block;
-      height: 8.5vh;
-      position: relative;
-      text-align: end;
-      width: 15vw;
-    }
-  }
-
-  [name='businessProvider'] {
-    
-    ul {
-      list-style: none;
-      padding-left: 0;
-
-      li {
-        
-        &:first-child {
-          margin-bottom: 0.5em;
-        }
-        
-        span {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-}
-
-#clientBox {
-  display: flex;
-  margin-left: auto;
-  margin-right: auto;
-  margin-top: 1.7rem;
-  max-width: 100%;
-
-  > * {
-    border: 1px solid $color-link-water;
-    flex: 1 1 auto;
-    justify-content: space-between;
-    margin: 0 -0.1rem -0.1rem 0;
-    min-width: 25vw;
-    padding: 0;
-
-    h5 {
-      margin-left: 2rem;
-      margin-top: 2rem;
-    }
-
-    ul {
-      font-size: 1.5rem;
-      list-style: none;
-      margin: -2.04rem 0 3.74rem -2.04rem;
-
-      li {
-
-        span {
-          font-weight: bold;
-        }
-      }
-    }
-
-    &:first-child {
-      li {
-      
-        span {
-          margin-right: 0.3em;
-        }
-
-        &:first-child {
-          margin-bottom: 0.5em;
-        }
-
-        &:last-child {
-          margin-top: 2.4em;
-        }
-      }
-    }
-
-    &:not(:first-child) {
-      padding-left: 5.1rem;
-
-      li {
-        margin-bottom: 1.7rem;
-
-        &:last-child {
-          margin-top: 2.2rem;
-        }
-
-        &::before {
-          color: $color-selective-yellow;
-          font-size: 2.2rem;
-          padding: 0 1rem 0 0;
-        }
-      }
-    }
-  }
-}
-
-[name='block-team'] {
-  
-  > sib-multiple {
-
-    label {
-      display: none;
-    }
-
-    > team-template[name='members'] {
-      display: grid;
-      grid-column-gap: 1.6rem;
-      grid-template-columns: 7vh auto;
-      grid-template-rows: repeat(2, 5.2vh);
-
-      > sib-display:first-child {
-        align-self: center; 
-        grid-column: 1 / span 1;
-        grid-row: 1 / span 2;
-
-        div {
-          background-color: $color-white;
-          border-radius: 50%;
-          height: 7vh;
-          overflow: hidden;
-          position: relative;
-          width: 7vh;
-
-          img {
-            height: 100%;
-            left: 0;
-            object-fit: cover;
-            position: absolute;
-            top: 0;
-            width: 100%;
-          }
-        }
-      }
-
-      > div:nth-child(2) {
-        align-self: end;
-        display: flex;
-        grid-column: 2 / span 1;
-        grid-row: 1 / span 1;
-
-        span {
-          align-self: center;
-          font-weight: 600;
-        }
-
-        span ~ sib-display {
-          
-          > div {
-            display: flex;
-            margin-left: 1rem;
-            
-            sib-multiple [name='name'] {
-              @extend %group;
-            }
-          }
-        }
-      }
-
-      > span:nth-child(3) {
-        align-self: start;
-        grid-column: 2 / span 1;
-        grid-row: 2 / span 1;
-      }
-    }
-  }
-}

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;
-    }
-  }
-}

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;