Make the sidebar Rebble branded

Signed-off-by: Stasia Michalska <hel@lcp.world>

Author: hellcp

source/_includes/icons/rebble.svg

@@ -19,7 +19,7 @@
 <div class="sidebar__wrapper{% unless page.sidebar_only or layout.sidebar_only %} sidebar__wrapper--sectionmenu{% endunless %}">
   <div class="sidebar sidebar--narrow">
     <a href="/" class="sidebar__header">
-      <span>pebble</span>
+      {% include icons/rebble.svg %}<span>Rebble</span>
     </a>
     <ul class="mainmenu">
       {% include mainmenu.html %}

source/_layouts/sidebar_narrow.html

@@ -19,7 +19,7 @@
 <div class="sidebar__wrapper">
   <div class="sidebar sidebar--wide">
     <a href="/" class="sidebar__header">
-      <span>pebble</span><span>|</span><span>developer</span>
+      {% include icons/rebble.svg %}<span>Rebble</span><span>|</span><span>developer</span>
     </a>
     <ul class="mainmenu">
       {% include mainmenu.html %}
@@ -29,7 +29,7 @@
       &middot;
       <a href="{{ site.links.legal.cookies }}" target="_blank">Cookie Policy</a>
     </div>
-    <a href="{{ site.links.devportal }}" target="_blank" class="sidebar__footer">Publish your app <i class="fa fa-angle-right fa-fw"></i></a>
+    <a href="{{ site.links.devportal }}" target="_blank" class="sidebar__footer">Publish your app <img src="{{ '/images/menu/rocket.svg' | prepend: site.asset_path }}" alt=""/></a>
   </div>
 </div>
 <div class="content content--narrow">

source/_layouts/sidebar_wide.html

@@ -88,6 +88,7 @@ $color-sdk: $lightblue;
 $color-appstore: $gray-03;
 $color-blog: $orange-02;
 $color-examples: #2c67ce;
+$color-devportal: #00c3fd;
 
 $modifier-color-names: 'guides', 'docs', 'community', 'more', 'getting-started',
                        'sdk', 'appstore', 'blog';

source/_sass/colors.scss

@@ -70,6 +70,11 @@ $sidebar-hide-at: xs;
     color: $white;
   }
 
+  svg {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+
   span {
     display: inline-block;
   }
@@ -131,10 +136,10 @@ $sidebar-hide-at: xs;
 }
 
 .sidebar__footer {
-  background-color: $color-appstore;
-  border-right: 1px solid color.adjust($color-appstore, $lightness: -10%, $space: hsl);
+  background-color: $color-devportal;
+  border-right: 1px solid color.adjust($color-devportal, $lightness: -10%, $space: hsl);
   bottom: 0;
-  color: $white;
+  color: $black;
   font-weight: bold;
   height: 3 * $base-line-height;
   left: 0;
@@ -143,11 +148,18 @@ $sidebar-hide-at: xs;
   right: 0;
   text-align: center;
   text-transform: uppercase;
+  transition-duration: 0.5s;
+  transition-property: background, color;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
 
   &:hover,
   &.active {
-    background-color: color.adjust($color-appstore, $lightness: -10%, $space: hsl);
-    border-color: color.adjust($color-appstore, $lightness: -20%, $space: hsl);
+    background-color: color.adjust($color-devportal, $lightness: -40%, $space: hsl);
+    background-image: url('/assets/images/menu/devportal-background.svg');
+    border-color: color.adjust($color-devportal, $lightness: -50%, $space: hsl);
     color: $white;
   }
 }