1
0
mirror of https://github.com/uetchy/namae.git synced 2025-08-20 09:58:13 +09:00

fix: content margin

This commit is contained in:
2020-03-26 16:32:52 +09:00
parent 8b850fa09f
commit 4a41743943
2 changed files with 101 additions and 89 deletions

View File

@@ -72,51 +72,30 @@ function Search() {
<Header>
<Form initialValue={currentQuery} />
</Header>
<Legend>
<ResultItem color={COLORS.available}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('available')}</ResultName>
<AvailableIcon>
<IoIosFlash />
</AvailableIcon>
</ResultItem>
<ResultItem color={COLORS.unavailable}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('unavailable')}</ResultName>
</ResultItem>
</Legend>
<Content>
<Legend>
<ResultItem color={COLORS.available}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('available')}</ResultName>
<AvailableIcon>
<IoIosFlash />
</AvailableIcon>
</ResultItem>
<ResultItem color={COLORS.unavailable}>
<ResultIcon>
<IoIosRocket />
</ResultIcon>
<ResultName>{t('unavailable')}</ResultName>
</ResultItem>
</Legend>
<Cards query={currentQuery} />
</Content>
</>
);
}
const Legend = styled.div`
padding: 80px 0 30px;
display: flex;
flex-direction: row;
justify-content: center;
user-select: none;
cursor: default;
background-color: #f6f6fa;
${mobile} {
padding: 60px 0 20px;
align-items: center;
flex-direction: column;
background-color: none;
}
${ResultItem} {
margin: 0 20px 0;
}
`;
const GlobalStyle = createGlobalStyle`
* {
box-sizing: border-box;
@@ -144,10 +123,10 @@ body {
`;
const Content = styled.div`
/* padding-top: 100px; */
padding-top: 100px;
${mobile} {
/* padding-top: 60px; */
padding-top: 60px;
}
`;
@@ -159,3 +138,24 @@ const Header = styled.header`
padding: 0 20px;
}
`;
const Legend = styled.div`
margin-top: -100px;
padding: 80px 0 30px;
display: flex;
flex-direction: row;
justify-content: center;
user-select: none;
cursor: default;
background-color: #f6f6fa;
${mobile} {
margin-top: -80px;
padding: 60px 0 30px;
background-color: none;
}
${ResultItem} {
margin: 0 10px 0;
}
`;