right panel ok

src/page-job-offers.pug

@@ -1,7 +1,7 @@
 div.grid-layer
   div.grid-layer-main.containerV
-    h2 New offers
+    h2 Nouvelles offres
-      span Here you can find and post offers
+      span Tu trouveras ici des offres de missions
     sib-display#offers-list(
       data-src=`${sdn}/job-offers/`,
       data-fields='date, user-thumb, title, description, skills',
@@ -16,11 +16,11 @@ div.grid-layer
     )
   div.grid-layer-links.containerV
     sib-link(next="job-offer-create").containerH.containerCenter.action-link
-      div.containerV.fix.icon-plus
+      div.icon-plus
-      div.containerV.fix Post a new offer
+      div Poster une offre
     sib-link().containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
+      div.icon-idea
-      div.containerV.grow How To find a new offer
+      div.grow Comment trouver une offre ?
     sib-link().containerH.containerCenter.how-link
-      div.containerV.fix.icon-idea
+      div.icon-idea
-      div.containerV.grow How to set notification ?
+      div.grow Comment programmer des notifications ?

src/styles/content.scss

@@ -452,57 +452,6 @@ hdapp-available {
   }
 }
 
-.right-link {
-  padding: 0.5em;
-  margin-bottom: 1em;
-  margin-left: 1em;
-  flex-basis: content;
-  border-radius: 2em;
-
-  div[class*="icon-"] {
-    margin-right: 1em;
-  }
-}
-
-.how-link {
-  @extend .right-link;
-  background-color: $color-white;
-  color: $color-black;
-  flex-wrap: nowrap;
-  .icon-idea {
-    background-color: $color-yellow-light;
-    border-radius: 100%;
-    flex-shrink: 0;
-    flex-grow: 0;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    width: 1.8em;
-    height: 1.8em;
-    //margin-right: 1em;
-  }
-}
-
-.action-link {
-  @extend .right-link;
-  background-color: $color-yellow;
-  color: $color-white;
-  font-weight: bold;
-  text-transform: uppercase;
-
-  .icon-plus {
-    flex-shrink: 0;
-    flex-grow: 0;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-
-    &:before {
-      //font-size: 1.3em;
-    }
-  }
-}
 /*
 label {
   @extend h2;

src/styles/index.scss

@@ -8,6 +8,7 @@
 @import 'main';
 @import 'form';
 @import 'content';
+@import 'right-panel';
 
 // @import 'members';
 @import 'header';

src/styles/main.scss

@@ -49,11 +49,11 @@ h1 {
 }
 
 h2 {
-  font-size: 1.04em;
+  font-size: 20px;
 }
 
 h3 {
-  font-size: 0.84em;
+  font-size: 20px;
 }
 
 h4 {
@@ -276,16 +276,19 @@ sib-trigger.back {
 
 .grid-layer{
   display: grid;
-  grid-template-columns: [start]auto[middle]20em[end];
+  font-size: 16px;
-  grid-template-rows: [start]10em[middle]auto[end];
+  grid-template-columns: [start]auto[middle]25%[end];
+  grid-template-rows: [start]13em[middle]auto[end];
 }
 .grid-layer-main{
+  background: green;
   grid-column-start: start;
   grid-column-end: end;
   grid-row-start: start;
   grid-row-end: end;
 }
 .grid-layer-links{
+  background: pink;
   grid-column-start: middle;
   grid-column-end: end;
   grid-row-start: start;

src/styles/right-panel.scss

@@ -0,0 +1,49 @@
+.right-link {
+  padding: 0.5em;
+  margin-bottom: 1em;
+  margin-left: 5em;
+  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-black;
+  flex-wrap: nowrap;
+  .icon-idea {
+    background-color: $color-yellow-light;
+    border-radius: 100%;
+    justify-content: center;
+    margin-right: 0.7em;
+    //flex-direction: column;
+    width: 1.8em;
+    height: 1.8em;
+    //margin-right: 1em;
+  }
+}
+
+.action-link {
+  @extend .right-link;
+  background-color: $color-yellow;
+  color: $color-white;
+  font-weight: bold;
+  text-transform: uppercase;
+
+  .icon-plus {
+    font-size: 20px;
+    justify-content: center;
+    margin: 0.3em 0.3em 0.3em 0;
+
+    &:before {
+      //font-size: 1.3em;
+    }
+  }
+}