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:
parent
88a67e45fc
commit
dcefd36bcc
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
`
|
||||
|
@ -11,6 +11,7 @@ body {
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
code {
|
||||
|
Loading…
x
Reference in New Issue
Block a user