filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-12-23 00:51:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

mobile nits

Browse Source
This commit is contained in:
William Felker 2020-10-01 15:09:16 +08:00
parent e5a0f81568
commit f5d680d725
2 changed files with 34 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,5 @@
.next .next
.nova
.env .env
.env-custom-development .env-custom-development
.env-development .env-development

51
pages/_/community.js
View File

@ -262,15 +262,18 @@ const STYLES_SECTION_WRAPPER = css`
} }
`; `;
const STYLES_SECTION_WRAPPER_BOX = css` const STYLES_SECTION_WRAPPER_BOX = css`
width: 750px;
padding: 44px; padding: 44px;
margin: 12px; margin: 12px auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
background: white; background: white;
border-radius: 8px;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
padding: 24px; padding: 24px;
margin: 36px;
} }
`; `;
@ -491,10 +494,28 @@ const STYLES_SLATE_CARD_EFFECTS = css`
} }
`; `;
const STYLES_FEATURE_CARD_WRAPPER = css`
width: 33%;
height: auto;
padding-right: 24px;
:nth-last-child() {
padding-right: 0px;
}
@media (max-width: ${Constants.sizes.tablet}px) {
width: 100%;
height: auto;
margin-bottom: 32px;
}
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
height: auto;
margin-bottom: 32px;
}
`;
const STYLES_FEATURE_CARD = css` const STYLES_FEATURE_CARD = css`
width: 30%;
height: 350px;
justify-content: space-between;
margin: 24px auto; margin: 24px auto;
padding: 16px; padding: 16px;
border-radius: 8px; border-radius: 8px;
@ -612,9 +633,7 @@ const STYLES_CONSOLE = css`
font-size: 14px; font-size: 14px;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
border-radius: 8px;
:hover {
}
`; `;
const STYLES_CONSOLE_BODY = css` const STYLES_CONSOLE_BODY = css`
@ -714,11 +733,13 @@ const SlateTeamCards = (props) => {
const FeatureCard = (props) => { const FeatureCard = (props) => {
return ( return (
<div css={STYLES_FEATURE_CARD}> <div css={STYLES_FEATURE_CARD_WRAPPER}>
<img css={STYLES_FEATURE_IMG} src={props.illustration} /> <div css={STYLES_FEATURE_CARD}>
<div css={STYLES_FEATURE_TEXT}>{props.title}</div> <img css={STYLES_FEATURE_IMG} src={props.illustration} />
<div css={STYLES_FEATURE_TEXT} style={{ opacity: 0.7 }}> <div css={STYLES_FEATURE_TEXT}>{props.title}</div>
{props.description} <div css={STYLES_FEATURE_TEXT} style={{ opacity: 0.7 }}>
{props.description}
</div>
</div> </div>
</div> </div>
); );
@ -981,12 +1002,6 @@ method: 'POST',
const json = await response.json(); const json = await response.json();
console.log(json);`} console.log(json);`}
</CodeWindow> </CodeWindow>
{/*<div css={STYLES_CONSOLE}>
<div css={STYLES_CONSOLE_BODY}>
<code>{`
`}</code>
</div>
</div>*/}
</div> </div>
</div> </div>
</div> </div>