fixed splash image

client/components/ResultsContainer.jsx

@@ -10,9 +10,9 @@ const ResultsContainer = (props) => {
 
   if (!props.searchResults.length) {
     return (
-      <div id="splash">
-        <h1>Fun with frollic</h1>
-      </div>
+      <section id="splash">
+        <h1>fun with frollic</h1>
+      </section>
     )
   }
 

client/style.scss

@@ -7,18 +7,20 @@ $black: #2A343A;
 html, body {
   width: 100%;
   height: 100%;
-  margin: 0px;
+  margin: 0;
   overflow-x: hidden;
+  max-height:100vh;
   color: $black;
   font-family: sans-serif;
   background-color: $white;
 }
 
 h1 {
   color: $white;
-  background-color: $gold;
-  font-size: 28px;
+  background-color: $black;
+  font-size: 48px;
   text-align: center;
+  padding: 75px 50px;
 }
 
 p {
@@ -75,7 +77,7 @@ aside {
 
 input[type=text]{
   width: 80%;
-  padding: 10px 20px;
+  padding: 10px 10px;
   margin: 5px 0 20px;
 }
 
@@ -89,6 +91,7 @@ input[type=checkbox]{
   width: 30px;
   height: 30px;
   vertical-align: middle;
+  margin-right: 10px;
 }
 
 .checkbox {
@@ -105,14 +108,14 @@ input[type=checkbox]{
   background-color: $gold;
   color: $black;
   font-weight: bold;
-  letter-spacing: .05rem;
+  font-size: 16px;
   border: 1px solid $gold;
   border-radius: 5px;
   width: 200px;
   height: 45px;
   z-index: auto;
   box-shadow: none;
-  margin: 30px 0;
+  margin: 30px 0 0;
 }
 
 #results-container {
@@ -125,11 +128,12 @@ input[type=checkbox]{
 
 #splash {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: $gold;
-  background-image: url("./assets/background.png");
-  background-repeat: repeat;
+  background: url("./assets/background.gif") $gold repeat center;
+  height: 100%;
+  padding: 40px;
 }
 
 article {

package.json

@@ -39,7 +39,8 @@
     "redux-devtools-extension": "^2.13.9",
     "redux-thunk": "^2.4.1",
     "scss-loader": "^0.0.1",
-    "style-loader": "^3.3.1"
+    "style-loader": "^3.3.1",
+    "url-loader": "^4.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.16.12",

webpack.config.js

@@ -26,11 +26,11 @@ module.exports = {
       },
       {
         test: /.(css|scss)$/,
-        use: ['style-loader', 'css-loader', 'sass-loader']
+        use: ['style-loader', 'css-loader', 'sass-loader'],
       },
       {
         test: /\.(png|jp(e*)g|svg|gif)$/,
-        use: ['file-loader'],
+        type: 'asset/resource',
       }
     ]
   },