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: animated header

Browse Source
This commit is contained in:
uetchy 2019-08-01 02:22:20 +09:00
parent 0fc724bc21
commit 8e4fd48b90
1 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/src/App.js
View File

@ -25,18 +25,20 @@ export default function App() {
setQuery(e.target.value) setQuery(e.target.value)
} }
const queryGiven = query && query.length > 0
return ( return (
<> <>
<GlobalStyle /> <GlobalStyle />
<Content> <Content>
<Header> <Header queryGiven={queryGiven}>
<InputContainer> <InputContainer>
<Logo>namæ</Logo> <Logo>namæ</Logo>
<Input onChange={onChange} /> <Input onChange={onChange} />
</InputContainer> </InputContainer>
</Header> </Header>
{query && query.length > 0 ? ( {queryGiven && (
<Cards> <Cards>
<CardHeader>Result for {query}</CardHeader> <CardHeader>Result for {query}</CardHeader>
<CardContainer> <CardContainer>
@ -53,7 +55,7 @@ export default function App() {
</CardContainer> </CardContainer>
<EventReporter query={query} /> <EventReporter query={query} />
</Cards> </Cards>
) : null} )}
<Footer /> <Footer />
</Content> </Content>
</> </>
@ -74,12 +76,13 @@ const Content = styled.div``
const Header = styled.header` const Header = styled.header`
margin-bottom: 100px; margin-bottom: 100px;
padding: 0 40px; padding: ${({ queryGiven }) => (queryGiven ? '0 40px' : '40vh 40px 0')};
background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%); background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
transition: padding 0.6s cubic-bezier(0.19, 1, 0.22, 1);
${mobile} { ${mobile} {
margin-bottom: 60px; margin-bottom: 60px;
padding: 0 20px; padding: ${({ queryGiven }) => (queryGiven ? '0 20px' : '40vh 20px 0')};
} }
` `