mirror of
https://github.com/uetchy/namae.git
synced 2025-03-17 04:30:31 +09:00
feat: responsible design
This commit is contained in:
parent
cc12514e9e
commit
c803a5817a
@ -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`
|
||||
|
@ -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`
|
||||
|
1
src/util/css.js
Normal file
1
src/util/css.js
Normal file
@ -0,0 +1 @@
|
||||
export const mobile = '@media screen and (max-width: 800px)'
|
Loading…
x
Reference in New Issue
Block a user