From a46a540934593b5dcc4fda16317e97535f0309a4 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 26 Nov 2018 21:16:02 -0800
Subject: [PATCH] Make the search bar sticky

---
 src/App.css | 12 ++++++++++++
 src/App.js  |  1 +
 2 files changed, 13 insertions(+)

diff --git a/src/App.css b/src/App.css
index a674f063..574f3f45 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,9 +4,17 @@ body {
 
 #search {
   width: 100%;
+  position: fixed;
+  top: 0;
   background: black;
   padding: 5px;
   text-align: center;
+  height: 50px; /* This matches the margin-top for #infinite-skins */
+  z-index: 5;
+  /* A little shadow below the search bar */
+  -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.15);
+  -moz-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
+  box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.35);
 }
 
 #search input {
@@ -15,6 +23,10 @@ body {
   font-size: 40px;
 }
 
+#infinite-skins {
+  margin-top: 50px; /* This matches the height of #search */
+}
+
 body.overlay-open {
   overflow: hidden;
 }
diff --git a/src/App.js b/src/App.js
index 5e379cf8..187e6bf8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -136,6 +136,7 @@ class App extends React.Component {
           />
         </div>
         <div
+          id="infinite-skins"
           style={{
             height: Math.ceil(hashes.length / columnCount) * SKIN_HEIGHT,
             position: "relative"