feat: tidy up styles

web/src/App.js

@@ -26,11 +26,12 @@ export default function App() {
   }
 
   return (
-    <>
+    <Content>
       <Header>
-        <Logo>namæ</Logo>
-        <SubHeader>name your new project</SubHeader>
-        <Input onChange={onChange} />
+        <InputContainer>
+          <Logo>namæ</Logo>
+          <Input onChange={onChange} />
+        </InputContainer>
       </Header>
 
       {query && query.length > 0 ? (
@@ -51,47 +52,62 @@ export default function App() {
           <EventReporter query={query} />
         </Cards>
       ) : null}
-
       <Footer />
-    </>
+    </Content>
   )
 }
 
+const Content = styled.div``
+
 const Header = styled.header`
-  margin-top: 30px;
-  text-align: center;
+  margin-bottom: 100px;
+  padding: 0 40px;
+  background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
+
+  ${mobile} {
+    margin-bottom: 60px;
+    padding: 0 20px;
+  }
+`
+
+const InputContainer = styled.div`
+  transform: translateY(40px);
+  padding: 20px;
+  background: #ffffff;
+  box-shadow: 0 10px 20px 0 #3c94fa;
+  border-radius: 4px;
+
+  ${mobile} {
+    transform: translateY(20px);
+  }
 `
 
 const Logo = styled.div`
   margin-bottom: 5px;
+  text-align: center;
   font-family: sans-serif;
   font-weight: bold;
-`
-
-const SubHeader = styled.div`
-  font-size: 0.8em;
-  font-style: italic;
+  font-size: 20px;
+  color: #4a90e2;
 `
 
 const Input = styled.input.attrs({
   type: 'text',
-  placeholder: 'awesome-package',
+  placeholder: ['awesome-library', 'stunning-package', 'magnificent-app'][
+    Math.floor(Math.random() * 3)
+  ],
   autocomplete: 'off',
   autocorrect: 'off',
   autocapitalize: 'off',
   spellcheck: 'false',
 })`
   width: 100%;
-  margin-top: 30px;
-  padding: 20px;
   outline: none;
   text-align: center;
-  font-size: 4rem;
+  font-size: 5rem;
   font-family: monospace;
   border: none;
 
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-
   ${mobile} {
     font-size: 2rem;
   }

web/src/components/Cards.js

@@ -42,9 +42,9 @@ const CardWrapper = styled.div`
 `
 
 const CardTitle = styled.div`
+  margin-bottom: 15px;
   font-size: 0.8rem;
   font-weight: bold;
-  margin-bottom: 15px;
 
   ${mobile} {
     padding-left: 20px;
@@ -57,6 +57,7 @@ const CardList = styled.div`
   ${mobile} {
     padding: 20px;
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+    background: white;
     border-radius: 0;
   }
 `

web/src/index.css

@@ -11,6 +11,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: #f5f5f5;
 }
 
 code {