Merge branch 'master' into feature/resource-component

src/styles/base/about.scss

@@ -1,6 +1,4 @@
 #about{
-  $main-color: rgb(236, 94, 92);
-  $second-color: white;
   h2,h3{
     text-transform: uppercase;
   }
@@ -37,10 +35,10 @@
   }
 
   .main-cta{
-    background: $second-color none repeat scroll 0% 0%;
-    border: 1px solid $main-color;
+    background: var(--color-white) none repeat scroll 0% 0%;
+    border: 1px solid var(--color-primary);
     border-radius: 55px;
-    color: $main-color;
+    color: var(--color-primary);
     cursor: pointer;
     font-weight: bold;
     text-transform: uppercase;
@@ -51,8 +49,8 @@
   }
 
   .main-cta:hover{
-    background: $main-color none repeat scroll 0% 0%;
-    border : 1px solid $second-color;
-    color: $second-color;
+    background: var(--color-primary) none repeat scroll 0% 0%;
+    border : 1px solid var(--color-primary);
+    color: var(--color-white);
   }
 }

src/styles/base/header.scss

@@ -26,6 +26,34 @@
     }
   }
 
+  .header-left {
+    flex-grow: 1;
+    position: relative;
+
+    .logo {
+      display: inline-block;
+    }
+
+    .beta-tag {
+      display: none;
+
+      @include breakpoint(lg) {
+        display: inline-block;
+        font-size: 1.4rem;
+        font-weight: 600;
+        line-height: 19px;
+        letter-spacing: 0.19px;
+        padding: 3px 13px 3px 15px;
+        border-radius: 3px;
+        background: var(--color-primary);
+        color: var(--color-white);
+        position: absolute;
+        top: -9px;
+        left: 267px;
+      }
+    }
+  }
+
   >*:not(:first-child) {
     margin-left: 2rem;
 
@@ -34,15 +62,15 @@
     }
   }
 
-  .logo {
-    flex: 1 0 0;
-    align-items: stretch;
-  }
-
-  /* To remove the place taken by this element */
+  /* Fix: to remove the place taken by these elements */
   solid-widget[name='hubl-user-avatar'] {
     display: contents;
   }
+
+  solid-notifications-template[data-rdf-type='hd:circle'],
+  solid-notifications-template[data-rdf-type='foaf:user'] {
+    position: absolute;
+  }
 }
   
 /* General styling for both notification and user's panel */

src/styles/base/user-thumb.scss

@@ -48,7 +48,7 @@
 
     &::before {
       display: inline-block;
-      color: #FF6765;
+      color: var(--color-primary);
     }
   }
 }

src/styles/components/sidebar.scss

@@ -8,6 +8,10 @@
 
   &.with-padding {
     padding: 1.3rem;
+
+    @include breakpoint(lg) {
+      padding: 2.5rem;
+    }
   }
 }