1
0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00

feat: tidy up styles

This commit is contained in:
uetchy 2019-08-01 01:48:55 +09:00
parent 88a67e45fc
commit dcefd36bcc
3 changed files with 38 additions and 20 deletions

View File

@ -26,11 +26,12 @@ export default function App() {
}
return (
<>
<Content>
<Header>
<Logo>namæ</Logo>
<SubHeader>name your new project</SubHeader>
<Input onChange={onChange} />
<InputContainer>
<Logo>namæ</Logo>
<Input onChange={onChange} />
</InputContainer>
</Header>
{query && query.length > 0 ? (
@ -51,47 +52,62 @@ export default function App() {
<EventReporter query={query} />
</Cards>
) : null}
<Footer />
</>
</Content>
)
}
const Content = styled.div``
const Header = styled.header`
margin-top: 30px;
text-align: center;
margin-bottom: 100px;
padding: 0 40px;
background-image: linear-gradient(180deg, #a2d4ff 0%, #ac57ff 99%);
${mobile} {
margin-bottom: 60px;
padding: 0 20px;
}
`
const InputContainer = styled.div`
transform: translateY(40px);
padding: 20px;
background: #ffffff;
box-shadow: 0 10px 20px 0 #3c94fa;
border-radius: 4px;
${mobile} {
transform: translateY(20px);
}
`
const Logo = styled.div`
margin-bottom: 5px;
text-align: center;
font-family: sans-serif;
font-weight: bold;
`
const SubHeader = styled.div`
font-size: 0.8em;
font-style: italic;
font-size: 20px;
color: #4a90e2;
`
const Input = styled.input.attrs({
type: 'text',
placeholder: 'awesome-package',
placeholder: ['awesome-library', 'stunning-package', 'magnificent-app'][
Math.floor(Math.random() * 3)
],
autocomplete: 'off',
autocorrect: 'off',
autocapitalize: 'off',
spellcheck: 'false',
})`
width: 100%;
margin-top: 30px;
padding: 20px;
outline: none;
text-align: center;
font-size: 4rem;
font-size: 5rem;
font-family: monospace;
border: none;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
${mobile} {
font-size: 2rem;
}

View File

@ -42,9 +42,9 @@ const CardWrapper = styled.div`
`
const CardTitle = styled.div`
margin-bottom: 15px;
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 15px;
${mobile} {
padding-left: 20px;
@ -57,6 +57,7 @@ const CardList = styled.div`
${mobile} {
padding: 20px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
background: white;
border-radius: 0;
}
`

View File

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