move global search to right sidebar

src/assets/css/BottomBar/BottomBar.scss

@@ -47,6 +47,7 @@
       align-items: center;
       margin: $small;
       padding: $small;
+      background-color: $bbb;
 
       .progress-bottom {
         display: flex;

src/assets/css/Search/Search.scss

@@ -45,6 +45,8 @@
 
   .search-icon {
     position: absolute;
+    top: 0;
+    right: 0;
     height: 2.5rem;
     width: 2.5rem;
     background-image: url(../../icons/search.svg);

src/assets/css/_variables.scss

@@ -7,12 +7,16 @@ $green: #439443;
 $separator: #ffffff46;
 $pink: #c43a3a;
 $highlight-blue: #006eff;
+$bbb: #050608; //bottom controls background
+
 // sizes
-$small: 0.5em;
-$smaller: 0.25em;
+$small: 0.5rem;
+$smaller: 0.25rem;
+$medium: 0.75rem;
+$large: 1.5rem;
+$larger: 2rem;
 
 // media query mixins
-
 @mixin phone-only {
   @media (max-width: 599px) {
     @content;

src/assets/css/global.scss

@@ -95,11 +95,9 @@ button {
 }
 
 .l-sidebar {
-  width: 15em;
+  width: 15rem;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
-  margin: 0.5rem 0 0.5rem 0.5rem;
-  border-radius: 0.5rem;
   background-color: $card-dark;
 }
 
@@ -109,7 +107,7 @@ button {
 }
 
 .collapsed .l-sidebar {
-  width: 70px;
+  width: 3rem;
   transition: all 0.3s ease;
 }
 
@@ -141,16 +139,6 @@ button {
 
 .r-sidebar {
   grid-area: r-sidebar;
-  border-radius: 5px;
-  margin-right: 0.5rem;
-  overflow-y: auto;
-  width: 30em;
-  position: relative;
-  margin-bottom: 0.5em;
-
-  @include tablet-landscape {
-    display: none;
-  }
 }
 
 .image {