diff --git a/src/App.js b/src/App.js index ec07a7e..615e561 100644 --- a/src/App.js +++ b/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` diff --git a/src/components/Card.js b/src/components/Card.js index bcecbe6..f9a71e9 100644 --- a/src/components/Card.js +++ b/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: column; + 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: 20px; - box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + padding: 40px; border-radius: 2px; + + ${mobile} { + padding: 20px; + box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); + border-radius: 0; + } ` const ItemContainer = styled.div` diff --git a/src/util/css.js b/src/util/css.js new file mode 100644 index 0000000..46272ae --- /dev/null +++ b/src/util/css.js @@ -0,0 +1 @@ +export const mobile = '@media screen and (max-width: 800px)'