feat: responsible design

src/App.js

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { FaTwitter, FaGlobe } from 'react-icons/fa'
 
 import { useDeferredState } from './hooks/state'
+import { mobile } from './util/css'
 import { CardHolder } from './components/Card'
 import GithubCard from './components/GithubCard'
 import DomainCard from './components/DomainCard'
@@ -106,7 +107,7 @@ const Input = styled.input`
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   }
 
-  @media screen and (max-width: 800px) {
+  ${mobile} {
     font-size: 2rem;
   }
 `
@@ -120,6 +121,11 @@ const ResultHeader = styled.div`
   margin-bottom: 20px;
   font-size: 1.2rem;
   font-weight: bold;
+  text-align: center;
+
+  ${mobile} {
+    text-align: left;
+  }
 `
 
 const Footer = styled.footer`

src/components/Card.js

@@ -2,6 +2,7 @@ import React, { Suspense, useState } from 'react'
 import styled from 'styled-components'
 import useFetch from 'fetch-suspense'
 import { BarLoader } from 'react-spinners'
+import { mobile } from '../util/css'
 
 export function Card({ children }) {
   return (
@@ -21,7 +22,13 @@ export const CardTitle = styled.div`
 
 export const CardHolder = styled.div`
   display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  ${mobile} {
     flex-direction: column;
+  }
 `
 
 export function AvailabilityCell({
@@ -168,9 +175,14 @@ class ErrorBoundary extends React.Component {
 
 const CardWrapper = styled.div`
   margin-bottom: 20px;
+  padding: 40px;
+  border-radius: 2px;
+
+  ${mobile} {
     padding: 20px;
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+    border-radius: 0;
+  }
 `
 
 const ItemContainer = styled.div`

src/util/css.js

@@ -0,0 +1 @@
+export const mobile = '@media screen and (max-width: 800px)'