uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 12:30:32 +09:00
Code Issues Releases Activity

feat: responsible design

Browse Source
This commit is contained in:
uetchy 2019-07-31 04:42:54 +09:00
parent cc12514e9e
commit c803a5817a
3 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.js
View File

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

18
src/components/Card.js
View File

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

1
src/util/css.js Normal file
View File

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