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

style: set bg color white when desktop browser

Browse Source
This commit is contained in:
uetchy 2019-08-01 02:01:20 +09:00
parent 9742f3abea
commit 0fc724bc21
2 changed files with 45 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
web/src/App.js
View File

@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled, { createGlobalStyle } from 'styled-components'
import { useDeferredState } from './hooks/state' import { useDeferredState } from './hooks/state'
import { mobile } from './util/css' import { mobile } from './util/css'
@ -26,37 +26,50 @@ export default function App() {
} }
return ( return (
<Content> <>
<Header> <GlobalStyle />
<InputContainer> <Content>
<Logo>namæ</Logo> <Header>
<Input onChange={onChange} /> <InputContainer>
</InputContainer> <Logo>namæ</Logo>
</Header> <Input onChange={onChange} />
</InputContainer>
</Header>
{query && query.length > 0 ? ( {query && query.length > 0 ? (
<Cards> <Cards>
<CardHeader>Result for {query}</CardHeader> <CardHeader>Result for {query}</CardHeader>
<CardContainer> <CardContainer>
<DomainCard name={query} /> <DomainCard name={query} />
<GithubCard name={query} /> <GithubCard name={query} />
<HomebrewCard name={query} /> <HomebrewCard name={query} />
<NpmCard name={query} /> <NpmCard name={query} />
<PypiCard name={query} /> <PypiCard name={query} />
<CratesioCard name={query} /> <CratesioCard name={query} />
<TwitterCard name={query} /> <TwitterCard name={query} />
<SlackCard name={query} /> <SlackCard name={query} />
<S3Card name={query} /> <S3Card name={query} />
<JsOrgCard name={query} /> <JsOrgCard name={query} />
</CardContainer> </CardContainer>
<EventReporter query={query} /> <EventReporter query={query} />
</Cards> </Cards>
) : null} ) : null}
<Footer /> <Footer />
</Content> </Content>
</>
) )
} }
const GlobalStyle = createGlobalStyle`
body {
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
}
`
const Content = styled.div`` const Content = styled.div``
const Header = styled.header` const Header = styled.header`
@ -89,6 +102,10 @@ const Logo = styled.div`
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
color: #4a90e2; color: #4a90e2;
${mobile} {
font-size: 15px;
}
` `
const Input = styled.input.attrs({ const Input = styled.input.attrs({

1
web/src/index.css
View File

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