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

community page section text block

Browse Source
This commit is contained in:
tarafanlin 2020-09-18 23:31:33 -07:00
parent bd74d9e721
commit da900b54bc
1 changed files with 61 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
pages/_/marketing-candidate/community-t.js
View File

@ -25,22 +25,61 @@ const STYLES_H1 = css`
line-height: 1.3; line-height: 1.3;
color: ${Constants.system.slate}; color: ${Constants.system.slate};
margin-bottom: 1rem; margin-bottom: 1rem;
width: 45%;
@media (max-width: ${Constants.sizes.mobile}px) { @media (max-width: ${Constants.sizes.mobile}px) {
font-size: ${Constants.typescale.lvl4}; font-size: ${Constants.typescale.lvl4};
} }
`; `;
const STYLES_H2 = css`
font-family: ${Constants.font.medium};
font-weight: 400;
font-size: ${Constants.typescale.lvl3};
letter-spacing: -0.022rem;
line-height: 1.3;
color: ${Constants.system.slate};
margin-bottom: 1rem;
width: 45%;
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
font-size: ${Constants.typescale.lvl2};
}
`;
const STYLES_P = css` const STYLES_P = css`
font-family: ${Constants.font.text}; font-family: ${Constants.font.text};
font-weight: 400; font-weight: 400;
font-size: ${Constants.typescale.lvl1}; font-size: ${Constants.typescale.lvl1};
letter-spacing: -0.011rem; letter-spacing: -0.011rem;
line-height: 1.3; line-height: 1.5;
margin: 4px 0 0 0;
width: 50%;
color: ${Constants.system.slate}; color: ${Constants.system.slate};
opacity: 0.7; opacity: 0.7;
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
}
`; `;
const STYLES_TEXT_BLOCK = css`
display: flex;
flex: 1 1 auto;
justify-content: space-between;
width: 70%;
@media (max-width: ${Constants.sizes.mobile}px) {
display: block;
width: 100%;
}
`;
const STYLES_HERO_TEXT = {
width: `100%`,
};
const STYLES_SECTION_WRAPPER = css` const STYLES_SECTION_WRAPPER = css`
width: 100%; width: 100%;
padding: 88px; padding: 88px;
@ -175,8 +214,10 @@ export default class CommunityPage extends React.Component {
src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se" src="https://slate.textile.io/ipfs/bafybeiehufugq7vujsclzdpkdhff5kop6c4uw6emjuswwp3jhpznaou2se"
/> />
<div css={STYLES_DINNER_TABLE}> <div css={STYLES_DINNER_TABLE}>
<h1 css={STYLES_H1}>An open invitation to everyone</h1> <h1 css={STYLES_H1} style={STYLES_HERO_TEXT}>
<p css={STYLES_P}> An open invitation to everyone
</h1>
<p css={STYLES_P} style={STYLES_HERO_TEXT}>
Slate is designed and built by a growing community of hackers, artists, and creatives on the web. Slate is designed and built by a growing community of hackers, artists, and creatives on the web.
</p> </p>
<button css={STYLES_BUTTON}>Join our community </button> <button css={STYLES_BUTTON}>Join our community </button>
@ -197,6 +238,23 @@ export default class CommunityPage extends React.Component {
/> />
</div> </div>
</section> </section>
<section css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}>
<h2 css={STYLES_H2}>What features are your most excited about?</h2>
<p css={STYLES_P}>
Slate has infinite possibilities. Upvote your favorite ideas or expand our imaginations.
</p>
</div>
</section>
<section css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}>
<h2 css={STYLES_H2}>We couldn’t build Slate without our community of contributors</h2>
<p css={STYLES_P}>
Here features some great work from our contributors. We define contribution beyond code. And we believe
that everyone has something to bring to the table. 🍰
</p>
</div>
</section>
</div> </div>
<WebsitePrototypeFooter /> <WebsitePrototypeFooter />
</WebsitePrototypeWrapper> </WebsitePrototypeWrapper>