Merge branch 'improvement/search-button' into improvement/navigation-new

_sass/layout.scss

@@ -164,16 +164,10 @@
 }
 
 .site-button {
-  appearance: none;
   display: flex;
   height: 100%;
   padding: $gutter-spacing-sm;
   align-items: center;
-  color: $link-color;
-  text-transform: uppercase;
-  background: transparent;
-  border: 0;
-  @include fs-3;
 
   @include mq(md) {
     display: none;
@@ -214,3 +208,9 @@ body {
     justify-self: end;
   }
 }
+
+.icon {
+  width: $sp-5;
+  height: $sp-5;
+  fill: $link-color;
+}

_sass/search.scss

@@ -62,6 +62,8 @@
 }
 
 .search-icon {
+  width: 1.2rem;
+  height: 1.2rem;
   align-self: center;
   margin-right: $sp-2;
   fill: $grey-dk-000;
@@ -165,3 +167,26 @@
   font-weight: bold;
   color: $link-color;
 }
+
+.search-button {
+  position: fixed;
+  right: $sp-4;
+  bottom: $sp-4;
+  display: flex;
+  width: $sp-9;
+  height: $sp-9;
+  background-color: $search-background-color;
+  border-radius: #{$sp-9 / 2};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+  align-items: center;
+  justify-content: center;
+}
+
+.search-results,
+.search-button {
+  border: 1px solid rgba($link-color, 0.3);
+}
+
+.blur {
+  filter: blur(5px);
+}