Pulling upstream changes

css/main.css

@@ -323,8 +323,37 @@ ul .balance:last-of-type {
   min-height: 100vh;
 }
 
-#search_page h1 {
+#search_page {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 20;
+  margin: 0;
+  background: rgba(var(--foreground), 1);
+  padding: 1.5rem 8vw;
+}
+
+#search_page header {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
   margin-top: 2rem;
+}
+
+#search_page header .icon {
+  margin: 0;
+  cursor: pointer;
+  height: 2.2rem;
+  width: 2.2rem;
+  padding: 0.6rem;
+}
+
+#search_page h1 {
   font-weight: 500;
   font-size: 3rem;
 }
@@ -334,7 +363,7 @@ ul .balance:last-of-type {
           animation: fade 0.4s;
 }
 
-#search_page .input input:valid ~ #suggestions {
+#search_page .input input:focus ~ #suggestions {
   opacity: 1;
   pointer-events: all;
   -webkit-transform: none;
@@ -1157,6 +1186,9 @@ p {
   #homepage {
     margin: 0 12vw;
   }
+  #search_page {
+    padding: 1.5rem 12vw;
+  }
   .input {
     width: 40% !important;
   }
@@ -1172,6 +1204,9 @@ p {
   #homepage {
     margin: 0 24vw;
   }
+  #search_page {
+    padding: 1.5rem 24vw;
+  }
   #first_section {
     min-height: auto;
   }

css/main.scss

@@ -234,14 +234,34 @@ ul{
     min-height: 100vh;
 }
 #search_page{
-    h1{
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 20;
+    margin: 0;
+    background: rgba(var(--foreground), 1);
+    padding: 1.5rem 8vw;
+    header{
+        align-items: center;
+        justify-content: space-between;
         margin-top: 2rem;
+        .icon{
+            margin: 0;
+            cursor: pointer;
+            height: 2.2rem;
+            width: 2.2rem;
+            padding: 0.6rem;
+        }
+    }
+    h1{
         font-weight: 500;
         font-size: 3rem;
     }
     .input{
         animation: fade 0.4s;
-        input:valid ~ #suggestions{
+        input:focus ~ #suggestions{
             opacity: 1;
             pointer-events: all;
             transform: none;
@@ -564,7 +584,6 @@ p{
         border: solid 1px rgba(var(--text), 0.2);
     }
 }
-
 .address, .token, .hash, .contract, .block-height{
     cursor: pointer;
     color: var(--primary-color);
@@ -800,6 +819,9 @@ p{
     #homepage{
         margin: 0 12vw;
     }
+    #search_page{
+        padding: 1.5rem 12vw;
+    }
     .input{
         width: 40% !important;
     }
@@ -814,6 +836,9 @@ p{
     #homepage{
         margin: 0 24vw;
     }
+    #search_page{
+        padding: 1.5rem 24vw;
+    }
     #first_section{
         min-height: auto;
     }