uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +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 styled from 'styled-components'
import styled, { createGlobalStyle } from 'styled-components'
import { useDeferredState } from './hooks/state'
import { mobile } from './util/css'
@ -26,37 +26,50 @@ export default function App() {
}
return (
<Content>
<Header>
<InputContainer>
<Logo>namæ</Logo>
<Input onChange={onChange} />
</InputContainer>
</Header>
<>
<GlobalStyle />
<Content>
<Header>
<InputContainer>
<Logo>namæ</Logo>
<Input onChange={onChange} />
</InputContainer>
</Header>
{query && query.length > 0 ? (
<Cards>
<CardHeader>Result for {query}</CardHeader>
<CardContainer>
<DomainCard name={query} />
<GithubCard name={query} />
<HomebrewCard name={query} />
<NpmCard name={query} />
<PypiCard name={query} />
<CratesioCard name={query} />
<TwitterCard name={query} />
<SlackCard name={query} />
<S3Card name={query} />
<JsOrgCard name={query} />
</CardContainer>
<EventReporter query={query} />
</Cards>
) : null}
<Footer />
</Content>
{query && query.length > 0 ? (
<Cards>
<CardHeader>Result for {query}</CardHeader>
<CardContainer>
<DomainCard name={query} />
<GithubCard name={query} />
<HomebrewCard name={query} />
<NpmCard name={query} />
<PypiCard name={query} />
<CratesioCard name={query} />
<TwitterCard name={query} />
<SlackCard name={query} />
<S3Card name={query} />
<JsOrgCard name={query} />
</CardContainer>
<EventReporter query={query} />
</Cards>
) : null}
<Footer />
</Content>
</>
)
}
const GlobalStyle = createGlobalStyle`
body {
background: #ffffff;
${mobile} {
background: #f5f5f5;
}
}
`
const Content = styled.div``
const Header = styled.header`
@ -89,6 +102,10 @@ const Logo = styled.div`
font-weight: bold;
font-size: 20px;
color: #4a90e2;
${mobile} {
font-size: 15px;
}
`
const Input = styled.input.attrs({

1
web/src/index.css
View File

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