feature: multiple updates

src/styles/index.scss

@@ -6,6 +6,10 @@ main {
   background-color: pink;
 }
 
+solid-display>div {
+  display: contents !important;
+}
+
 .whitespace-normal {
   white-space: normal;
 }
@@ -14,14 +18,163 @@ main {
   display: block;
 }
 
-solid-display>div {
-  display: contents !important;
+.line-xlarge {
+  line-height: 22px;
 }
 
-.text-left {
-  text-align: left;
+
+.send-display {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+
+  &::before {
+    margin-top: 4px;
+    margin-right: 0.5px;
+  }
 }
 
+.button-modify-picture {
+  position: absolute;
+  bottom: 51px;
+  right: 30px;
+  z-index: 1;
+}
+
+.button-modify-profile {
+  position: absolute;
+  right: 40px;
+  top: 40px;
+  z-index: 1;
+}
+
+.button-modify-skill {
+  position: absolute;
+  z-index: 1;
+  right: 40px;
+}
+
+.counter>div:nth-child(1) {
+  display: block !important;
+  position: relative;
+  text-align: center;
+  margin-right: 10px;
+  margin-bottom: 20px;
+  margin-left: 10px;
+
+  &::before {
+    border-top: 1px solid #807A7A;
+    bottom: 0;
+    content: '';
+    left: 0;
+    margin: 0 auto;
+    opacity: 0.2;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    width: 100%;
+  }
+  &>span {
+    padding: 0 18.5px 0 21.5px;
+    background: #F6F6F6;
+    font-size: 16px;
+    position: relative;
+    color: var(--color-heading);
+    text-align: center;
+  }
+}
+
+.pagination nav {
+  display: grid;
+  font-size: 20px;
+  margin-top: 56px;
+  grid-template-columns: auto 7% auto;
+  grid-template-rows: auto;
+  grid-template-areas: "left middle right";
+  overflow: hidden;
+  text-align: center;
+  align-content: center;
+  width: 100%;
+  
+  @media(max-width: 768px) {
+    grid-template-columns: auto 27% auto;
+  }
+
+  >[data-id="prev"] {
+    align-self: end;
+    grid-area: left;
+    justify-self: end;
+    line-height: 1;
+  }
+
+  >[data-id="next"] {
+    align-self: baseline;
+    grid-area: right;
+    justify-self: start;
+    transform: rotate(180deg);
+  }
+
+  button {
+    color: transparent;
+
+    &:before {
+      background-color: var(--color-secondary);
+      content: '';
+      display: inline-block;
+      height: 20px;
+
+      mask: url('/lib/solid-directory/dist/assets/arrow-left-circle.svg') 1% 1% / 1px 1px no-repeat;
+      mask-size: cover;
+      -webkit-mask: url('/lib/solid-directory/dist/assets/arrow-left-circle.svg') 1% 1% / 1px 1px no-repeat;
+      -webkit-mask-size: cover;
+      width: 20px;
+    }
+
+    &:disabled::before {
+      background-color: #5D7393;
+      opacity: 50%;
+    }
+  }
+
+  span {
+    color: #5D7393;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 27px;
+  }
+}
+
+
+/* Member-profile */
+#member-profile .send-message {
+  right: 20px;
+  position: absolute;
+  bottom: 0;
+}
+
+#member-profile .member-bio,
+#profile .member-bio {
+  max-width: 50%;
+}
+
+.icon-location-pin::before,
+.icon-bell::before {
+  margin-left: -3px;
+}
+
+/* Job-offers */
+.job-edit {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+}
+
+.padding-very-xxlarge {
+  padding-left: 135px;
+  padding-right: 135px;
+}
+
+
 $small: "max-width: 640px";
 
 .segment {
@@ -104,4 +257,7 @@ $small: "max-width: 640px";
 @import 'left-nav/_index';
 @import 'content/_index';
 @import 'about/_index';
+@import 'members/_index';
+@import 'profile/_index';
+@import 'job-offers/_index';
 @import 'chat/_index';

src/styles/job-offers/_index.scss

@@ -0,0 +1,3 @@
+#job-offers>div:first-of-type {
+  min-height: calc(100vh - 72px);
+}

src/styles/left-nav/_index.scss

@@ -19,7 +19,7 @@ nav#main__menu {
       background: var(--color-heading);
     }
     &[active]+.divider {
-      display: none;
+      visibility: hidden;
     }
   }
 
@@ -80,10 +80,10 @@ nav#main__menu {
   }
 
   &.jsLeftMenu {
-    display: none;
+    display: inline-block;
 
-    @media(min-width: 1024px) {
-      display: block;
+    @media(max-width: 768px) {
+      display: none;
     }
   }
 

src/styles/members/_index.scss

@@ -0,0 +1,3 @@
+#members>div:first-of-type {
+  min-height: calc(100vh - 72px);
+}

src/styles/profile/_index.scss

@@ -0,0 +1,3 @@
+#profile>div:first-of-type {
+  min-height: calc(100vh - 72px);
+}