mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-19 18:28:03 +03:00
community page: apply styling to be consistent with landing
This commit is contained in:
tarafanlin
parent
af7416094c
commit
6db596ee70
@ -12,60 +12,62 @@ import CodeBlock from "~/components/system/CodeBlock";
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px 88px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 5px 5px;
|
||||
}
|
||||
justify-content: space-between;
|
||||
max-width: 1440px;
|
||||
margin: -88px 0 0 0;
|
||||
background-color: ${Constants.system.wall};
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
font-size: 1.953rem;
|
||||
font-size: 3.815rem;
|
||||
line-height: 1.25;
|
||||
padding: 0px 0px 32px 0px;
|
||||
width: 100%;
|
||||
color: ${Constants.system.pitchBlack};
|
||||
|
||||
color: ${Constants.system.slate};
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: 3.052rem;
|
||||
padding: 0px 0px 16px 0px;
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1.953rem;
|
||||
padding: 0px 0px 16px 0px;
|
||||
line-height: 1.25;
|
||||
padding: 0px 0px 8px 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H2 = css`
|
||||
font-size: 1.25rem;
|
||||
font-size: 2.441em;
|
||||
line-height: 1.25;
|
||||
padding: 0px 0px 32px 0px;
|
||||
padding: 16px 0px 0 0px;
|
||||
width: 100%;
|
||||
color: ${Constants.system.darkGray};
|
||||
|
||||
color: ${Constants.system.slate};
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: 1.563rem;
|
||||
padding: 8px 0px 0px 0px;
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1.25rem;
|
||||
padding: 0px 0px 8px 0px;
|
||||
padding: 8px 0px 0 0px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H3 = css`
|
||||
font-size: 1.563em;
|
||||
font-size: 1.563rem;
|
||||
line-height: 1.5;
|
||||
padding: 0px 0px 16px 0px;
|
||||
color: ${Constants.system.darkGray};
|
||||
|
||||
padding: 16px 0px 0px 0px;
|
||||
color: ${Constants.system.slate};
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: 1.25rem;
|
||||
padding: 8px 0px 0px 0px;
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1rem;
|
||||
padding: 0px 0px 8px 0px;
|
||||
line-height: 1.5;
|
||||
color: ${Constants.system.moonstone};
|
||||
padding: 8px 0px 0px 0px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_P = css`
|
||||
font-size: 1rem;
|
||||
padding: 16px 0px 0px 0px;
|
||||
color: ${Constants.system.black};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -73,25 +75,44 @@ const STYLES_P = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_A = css`
|
||||
color: ${Constants.system.darkGray};
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
const STYLES_SECTION_HERO = css`
|
||||
width: 100vw;
|
||||
padding: 30vh 88px 88px 88px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.pitchBlack};
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 40vh 24px 48px 24px;
|
||||
display: block;
|
||||
}
|
||||
:active {
|
||||
color: yellow;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const STYLES_TEXT_BLOCK = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 56vw;
|
||||
align-self: center;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 88%;
|
||||
right: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_HEROIMG = css`
|
||||
float: right;
|
||||
margin: -80px 0 0 0;
|
||||
width: 50vw;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
margin: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 180px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
`;
|
||||
@ -133,48 +154,41 @@ const STYLES_BUTTON_PRIMARY = css`
|
||||
|
||||
const STYLES_SECTION_WRAPPER = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px auto;
|
||||
flex-direction: column;
|
||||
padding: 88px;
|
||||
width: 100vw;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 64px 24px;
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
const STYLES_SECTION_CHILD_FULL = css`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CHILD_FULL = css`
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
`;
|
||||
const STYLES_SECTION_CHILD_SPLIT = css`
|
||||
padding: 50px;
|
||||
width: 50%;
|
||||
padding: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CARD_GROUP = css`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 48px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_NAME = css`
|
||||
font-size: 1.3rem;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.002em;
|
||||
text-align: center;
|
||||
@ -193,20 +207,12 @@ const STYLES_CARD_TEXT = css`
|
||||
`;
|
||||
|
||||
const STYLES_CARD_WRAPPER = css`
|
||||
float: left;
|
||||
width: 150px;
|
||||
width: calc(100% / 7 px);
|
||||
transition: 200ms ease box-shadow;
|
||||
border-radius: 4px;
|
||||
margin: 20px 40px;
|
||||
padding: 16px 16px 0 0;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -220,42 +226,37 @@ export default class CommunityPage extends React.Component {
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
"The place for all of your assets. Powered by Textile and Filecoin.";
|
||||
"Slate is designed and built by a growing community of hackers, artists, and creatives on the web.";
|
||||
const url = "https://slate.host/community";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper
|
||||
title={title}
|
||||
description={description}
|
||||
url={url}>
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||
<h1 css={STYLES_H1}>
|
||||
Slate is designed and built by a growing community of hackers,
|
||||
artists, and creatives on the web.
|
||||
</h1>
|
||||
<div css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>Community</h1>
|
||||
<h2 css={STYLES_H2}>
|
||||
Slate is designed and built by a growing community of hackers, artists, and creatives on the web.
|
||||
</h2>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
src=" https://bafybeihi2f53tmtwxv5f5jd2wcxtzrutgvxg5xsawfv3ousfjz2yfurm2i.ipfs.slate.textile.io"
|
||||
alt="Slate browser extension"
|
||||
css={STYLES_HEROIMG}
|
||||
src="https://bafybeihg57cndacdyww5rl62qjbitltdxnj4xpuyeohzv6wos2fnsrknza.ipfs.slate.textile.io/"
|
||||
alt="Slate hive tesseract"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||
<h1 css={STYLES_H1}>Core Team</h1>
|
||||
<br />
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h2 css={STYLES_H2}>Core Team</h2>
|
||||
</div>
|
||||
<div css={STYLES_CARD_GROUP}>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/jasonleyser">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt="Github Profile Photo for Jason Leyser"
|
||||
@ -271,10 +272,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/jimmylee">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt="Github Profile Photo for Cake"
|
||||
@ -290,10 +288,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/martinalong">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt="Github Profile Photo for Martina Long"
|
||||
@ -309,10 +304,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/harisbutt">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -329,10 +321,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/tarafanlin">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt="Github Profile Photo for Tara Lin"
|
||||
@ -348,10 +337,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/gndclouds">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt="Github Profile Photo for William Felker"
|
||||
@ -368,15 +354,13 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||
<h1 css={STYLES_H1}>Contributors</h1>
|
||||
<br />
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h2 css={STYLES_H2}>Contributors</h2>
|
||||
</div>
|
||||
<div css={STYLES_CARD_GROUP}>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/pooja">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt="Github Profile Photo for Pooja Shah"
|
||||
@ -392,10 +376,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/whyrusleeping">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt="Github Profile Photo for Why"
|
||||
@ -411,10 +392,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/asutula">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -431,10 +409,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/jsign">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -451,10 +426,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/sanderpick">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -471,10 +443,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/andrewxhill">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -491,10 +460,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/akuokojnr">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -512,10 +478,7 @@ export default class CommunityPage extends React.Component {
|
||||
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/narative">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -532,10 +495,7 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
<div css={STYLES_CARD_WRAPPER}>
|
||||
<a href="https://github.com/narative">
|
||||
<System.HoverTile
|
||||
height={300}
|
||||
width={200}
|
||||
style={{ padding: 10 }}>
|
||||
<System.HoverTile height={300} width={200} style={{ padding: 8 }}>
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
@ -553,58 +513,47 @@ export default class CommunityPage extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>Get involved</h1>
|
||||
<p css={STYLES_P}>
|
||||
Slate is a fully open-source file sharing network designed for
|
||||
research and collaboration.
|
||||
</p>
|
||||
<h3 css={STYLES_H3}>
|
||||
Slate is a fully open-source file sharing network designed for research and collaboration.
|
||||
</h3>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h2 css={STYLES_H2}>Contribute</h2>
|
||||
<br />
|
||||
<p css={STYLES_P}>
|
||||
Get involved with the project and contribute.
|
||||
</p>
|
||||
<br />
|
||||
|
||||
<button css={STYLES_BUTTON_PRIMARY}>
|
||||
<a>Github</a>
|
||||
</button>
|
||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h3 css={STYLES_H3}>Contribute</h3>
|
||||
<p css={STYLES_P}>Get involved with the project and contribute.</p>
|
||||
<br />
|
||||
<button css={STYLES_BUTTON_PRIMARY}>
|
||||
<a>Github</a>
|
||||
</button>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h3 css={STYLES_H3}>Contact</h3>
|
||||
<p css={STYLES_P}>
|
||||
{" "}
|
||||
Reach out to any of the core contributors, reach us on Twitter, or join our Slack.
|
||||
</p>
|
||||
<br />
|
||||
<button css={STYLES_BUTTON_PRIMARY}>
|
||||
<a>Github</a>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h2 css={STYLES_H2}>Contact</h2>
|
||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h3 css={STYLES_H3}>Integrate</h3>
|
||||
<p css={STYLES_P}>Explore our API and SDK and build on top of Slate.</p>
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
<br />
|
||||
<p css={STYLES_P}>
|
||||
{" "}
|
||||
Reach out to any of the core contributors, reach us on Twitter,
|
||||
or join our Slack.
|
||||
</p>
|
||||
<br />
|
||||
|
||||
<button css={STYLES_BUTTON_PRIMARY}>
|
||||
<a>Github</a>
|
||||
</button>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h2 css={STYLES_H2}>Integrate</h2>
|
||||
<br />
|
||||
<p css={STYLES_P}>
|
||||
Explore our API and SDK and build on top of Slate.
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
<br />
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h2 css={STYLES_H2}>Design System</h2>
|
||||
<p css={STYLES_P}>
|
||||
Check out our open source design system for your projects.
|
||||
</p>
|
||||
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||
<h3 css={STYLES_H3}>Design System</h3>
|
||||
<p css={STYLES_P}>Check out our open source design system for your projects.</p>
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user