mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 18:13:10 +03:00
styling + refactor: team cards and tablet sizes
This commit is contained in:
William Felker
parent
f972e1e535
commit
2d601dd7eb
@ -1,442 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import * as Constants from "~/common/constants";
|
|
||||||
import * as Actions from "~/common/actions";
|
|
||||||
import * as System from "~/components/system";
|
|
||||||
import CodeBlock from "~/components/system/CodeBlock";
|
|
||||||
import ReactDOM from "react-dom";
|
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
|
||||||
|
|
||||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
|
||||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
|
||||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
|
||||||
|
|
||||||
const STYLES_ROOT = css`
|
|
||||||
padding: 16px 88px;
|
|
||||||
section {
|
|
||||||
width: 1140px;
|
|
||||||
margin: auto;
|
|
||||||
padding: 15vh 0;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 46px;
|
|
||||||
line-height: 100%;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background: #36383d;
|
|
||||||
color: white;
|
|
||||||
width: 300px;
|
|
||||||
height: 60px;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 18px;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_SECTION = css`
|
|
||||||
width: 100%;
|
|
||||||
`;
|
|
||||||
const STYLES_HERO = css`
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-self: center;
|
|
||||||
`;
|
|
||||||
const STYLES_TEAM = css`
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_CARD = css``;
|
|
||||||
|
|
||||||
const STYLES_CONTRIBUTOR_CARD = css`
|
|
||||||
height: 200px;
|
|
||||||
width: 150px;
|
|
||||||
background-color: ${Constants.system.white};
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: 200ms ease box-shadow;
|
|
||||||
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.02);
|
|
||||||
:hover {
|
|
||||||
transition: 200ms ease box-shadow;
|
|
||||||
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: ${Constants.system.moonstone};
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: ${Constants.system.pitchBlack};
|
|
||||||
font-color: ${Constants.system.pitchBlack};
|
|
||||||
background-color: transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
color: ${Constants.system.pitchBlack};
|
|
||||||
background-color: transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
const STYLES_IMAGE_CONTAINER = css`
|
|
||||||
height: 150px;
|
|
||||||
width: 150px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_CARD_IMAGE = css`
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
`;
|
|
||||||
const STYLES_CARD_TEXT = css`
|
|
||||||
margin: auto;
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px 5px;
|
|
||||||
text-align: center;
|
|
||||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
||||||
font-size: 0.78rem;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
const STYLES_TEAM_GALLERY = css`
|
|
||||||
display: grid;
|
|
||||||
padding-top: 20px;
|
|
||||||
column-gap: 20px;
|
|
||||||
row-gap: 20px;
|
|
||||||
justify-items: center;
|
|
||||||
align-item: center;
|
|
||||||
grid-template-columns: repeat(auto-fit, 150px);
|
|
||||||
overflow: hidden;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_TEAM_CARD = css`
|
|
||||||
width: 250px;
|
|
||||||
height: 250px;
|
|
||||||
background-color: black;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: 200ms ease box-shadow;
|
|
||||||
box-shadow: 0px 4px 8px 4px rgba(0, 0, 0, 0.02);
|
|
||||||
:hover {
|
|
||||||
transition: 200ms ease box-shadow;
|
|
||||||
box-shadow: 0px 10px 40px 20px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: ${Constants.system.moonstone};
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: ${Constants.system.pitchBlack};
|
|
||||||
font-color: ${Constants.system.pitchBlack};
|
|
||||||
background-color: transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
color: ${Constants.system.pitchBlack};
|
|
||||||
background-color: transparent;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const STYLES_GET_INVOLVED_WRAPPER = css`
|
|
||||||
height: 100%;
|
|
||||||
padding: 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap:wrap;
|
|
||||||
const STYLES_GET_IN
|
|
||||||
|
|
||||||
`;
|
|
||||||
const STYLES_GET_INVOLVED = css`
|
|
||||||
width: 50%;
|
|
||||||
padding-top: 100px;
|
|
||||||
padding-right: 50px;
|
|
||||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const getServerSideProps = async context => {
|
|
||||||
return {
|
|
||||||
props: { ...context.query }
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default class IndexPage extends React.Component {
|
|
||||||
async componentDidMount() {
|
|
||||||
const response = await Actions.health();
|
|
||||||
console.log("HEALTH_CHECK", response);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const title = `Slate`;
|
|
||||||
const description =
|
|
||||||
"The place for all of your assets. Powered by Textile and Filecoin.";
|
|
||||||
const url = "https://slate.host/community";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<WebsitePrototypeWrapper
|
|
||||||
title={title}
|
|
||||||
description={description}
|
|
||||||
url={url}
|
|
||||||
>
|
|
||||||
<WebsitePrototypeHeader />
|
|
||||||
<div css={STYLES_ROOT}>
|
|
||||||
<section css={STYLES_SECTION}>
|
|
||||||
<div>
|
|
||||||
<System.H1>
|
|
||||||
Slate is designed and built by a growing community of hackers,
|
|
||||||
artists, and creatives on the web.
|
|
||||||
</System.H1>
|
|
||||||
</div>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<System.H2>Core Team</System.H2>
|
|
||||||
<div css={STYLES_TEAM_GALLERY}>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Jason Leyser"
|
|
||||||
src="https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/jasonleyser">Jason Leyser</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Cake"
|
|
||||||
src="https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/jimmylee">Cake</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Martina Long"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/martinalong">Martina Long</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Haris Butt"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/13544493?s=400&u=264f4b9241b2520ba13e4eb4d71042b05adc5f74&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/harisbutt">Haris Butt</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Tara Lin"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/tarafanlin">Tara Lin</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for William Felker"
|
|
||||||
src="https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/gndclouds">William Felker</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<System.H2>Contributors</System.H2>
|
|
||||||
<div css={STYLES_TEAM_GALLERY}>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Pooja Shah"
|
|
||||||
src="https://avatars0.githubusercontent.com/u/5668171?s=400&u=68f1223a7b241c0b8622b921805a0d9cb816a679&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/pooja">Pooja Shah</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Why"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/1243164?s=400&u=04070140d22a204d2510a3b115943583b4e28df9&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/whyrusleeping">Why</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Aaron Sutula"
|
|
||||||
src="https://avatars0.githubusercontent.com/u/528969?s=400&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/asutula">Aaron Sutula</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Ignacio Hagopian"
|
|
||||||
src="https://avatars3.githubusercontent.com/u/6136245?s=400&u=50177a94e7b3be5fcfcede6d8f1f641c16568ebe&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/jsign">Ignacio Hagopian</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Sander Pick"
|
|
||||||
src="https://avatars1.githubusercontent.com/u/361000?s=400&u=d95539a31bca0d2e5be3cfc366321f17aa755ebd&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/sanderpick">Sander Pick</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Andrew Hill"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/370259?s=400&u=76ac510ace513bd7fb04ef7011d8402a6b3a3043&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/andrewxhill">Andrew Hill</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Narative"
|
|
||||||
src="https://avatars0.githubusercontent.com/u/38549791?s=200&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/Narative">Narative</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
src="https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/uonai">Colin S. Mccaleb</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CONTRIBUTOR_CARD}>
|
|
||||||
<div css={STYLES_IMAGE_CONTAINER}>
|
|
||||||
<img
|
|
||||||
css={STYLES_CARD_IMAGE}
|
|
||||||
alt="Github Profile Photo for Akuoko Daniel Jnr"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<System.P css={STYLES_CARD_TEXT}>
|
|
||||||
<a href="https://github.com/akuokojnr">Akuoko Daniel Jnr</a>
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
<div>
|
|
||||||
<System.H1>Get Involved</System.H1>
|
|
||||||
<br />
|
|
||||||
<System.P>
|
|
||||||
Slate is a fully open-source file sharing network designed for
|
|
||||||
research and collaboration.
|
|
||||||
</System.P>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={STYLES_GET_INVOLVED_WRAPPER}>
|
|
||||||
<div css={STYLES_GET_INVOLVED}>
|
|
||||||
<System.H2>Contribute</System.H2>
|
|
||||||
<br />
|
|
||||||
<System.P>
|
|
||||||
Get involved with the project and contribute
|
|
||||||
</System.P>
|
|
||||||
<System.P>WIP ASSET</System.P>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_GET_INVOLVED}>
|
|
||||||
<System.H2>Contact</System.H2>
|
|
||||||
<br />
|
|
||||||
<System.P>
|
|
||||||
Reach out to any of the core contributors, reach us on
|
|
||||||
Twitter, or join our Slack.
|
|
||||||
</System.P>
|
|
||||||
<div>
|
|
||||||
<button>
|
|
||||||
<a>Twitter</a>
|
|
||||||
</button>
|
|
||||||
<button>
|
|
||||||
<a>Join Slack</a>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_GET_INVOLVED}>
|
|
||||||
<System.H2>Integrate</System.H2>
|
|
||||||
<br />
|
|
||||||
<System.P>
|
|
||||||
Explore our API and SDK and build on top of Slate
|
|
||||||
</System.P>
|
|
||||||
<br />
|
|
||||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_GET_INVOLVED}>
|
|
||||||
<System.H2>Design System</System.H2>
|
|
||||||
<br />
|
|
||||||
<System.P>
|
|
||||||
Check out our open source design system for your projects
|
|
||||||
</System.P>
|
|
||||||
<br />
|
|
||||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
<WebsitePrototypeFooter />
|
|
||||||
</WebsitePrototypeWrapper>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -2,13 +2,15 @@ import * as React from "react";
|
|||||||
import * as Constants from "~/common/constants";
|
import * as Constants from "~/common/constants";
|
||||||
import * as System from "~/components/system";
|
import * as System from "~/components/system";
|
||||||
|
|
||||||
import { css } from "@emotion/react";
|
|
||||||
|
|
||||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||||
import CodeBlock from "~/components/system/CodeBlock";
|
import CodeBlock from "~/components/system/CodeBlock";
|
||||||
|
|
||||||
|
import { css } from "@emotion/react";
|
||||||
|
|
||||||
|
import ReactDOM from "react-dom";
|
||||||
|
|
||||||
const STYLES_ROOT = css`
|
const STYLES_ROOT = css`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -112,6 +114,7 @@ const STYLES_BUTTON_PRIMARY = css`
|
|||||||
border: 0;
|
border: 0;
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
padding: 0px 24px 0px 24px;
|
padding: 0px 24px 0px 24px;
|
||||||
|
margin: 20px 0px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -171,6 +174,7 @@ const STYLES_SECTION_CHILD_SPLIT = css`
|
|||||||
const STYLES_CARD_GROUP = css`
|
const STYLES_CARD_GROUP = css`
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 48px;
|
margin-top: 48px;
|
||||||
|
flex-wrap: wrap;
|
||||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
}
|
}
|
||||||
@ -197,8 +201,8 @@ const STYLES_CARD_WRAPPER = css`
|
|||||||
width: calc(100% / 10 px);
|
width: calc(100% / 10 px);
|
||||||
transition: 200ms ease box-shadow;
|
transition: 200ms ease box-shadow;
|
||||||
padding: 16px 16px 0 0;
|
padding: 16px 16px 0 0;
|
||||||
|
|
||||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||||
width: 50%;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
const STYLES_SLATE_CARD_EFFECTS = css`
|
const STYLES_SLATE_CARD_EFFECTS = css`
|
||||||
@ -226,13 +230,206 @@ const STYLES_SLATE_CARD_EFFECTS = css`
|
|||||||
:after {
|
:after {
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
export const getServerSideProps = async (context) => {
|
export const getServerSideProps = async context => {
|
||||||
return {
|
return {
|
||||||
props: { ...context.query },
|
props: { ...context.query }
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export default class CommunityPage extends React.Component {
|
export default class CommunityPage extends React.Component {
|
||||||
|
async componentDidMount() {
|
||||||
|
this.addCoreTeam();
|
||||||
|
this.addContributorTeam();
|
||||||
|
}
|
||||||
|
|
||||||
|
coreTeam = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Jason Leyser",
|
||||||
|
url: "https://github.com/jasonleyser",
|
||||||
|
handle: "jasonleyser",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Cake",
|
||||||
|
url: "https://github.com/jimmylee",
|
||||||
|
handle: "jimmylee",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Martina Long",
|
||||||
|
url: "https://github.com/martinalong",
|
||||||
|
handle: "martinalong",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Haris Butt",
|
||||||
|
url: "https://github.com/harisbutt",
|
||||||
|
handle: "harisbutt",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Tara Lin",
|
||||||
|
url: "https://github.com/tarafanlin",
|
||||||
|
handle: "tarafanlin",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "William Felker",
|
||||||
|
url: "https://slate.host/gndclouds/urban-gardens",
|
||||||
|
handle: "gndclouds",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
contributorTeam = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Pooja Shah",
|
||||||
|
url: "https://github.com/pooja",
|
||||||
|
handle: "pooja",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: "Why",
|
||||||
|
url: "https://github.com/whyrusleeping",
|
||||||
|
handle: "whyrusleeping",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: "Aaron Stula",
|
||||||
|
url: "https://github.com/asutula",
|
||||||
|
handle: "asutula",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: "Ignacio Hagopian",
|
||||||
|
url: "https://github.com/jsign",
|
||||||
|
handle: "jsign",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: "Sander Pick",
|
||||||
|
url: "https://github.com/sanderpick",
|
||||||
|
handle: "sanderpick",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: "Andrew Hill",
|
||||||
|
url: "https://github.com/andrewxhill",
|
||||||
|
handle: "andrewxhill",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: "Akuoko Daniel Jnr",
|
||||||
|
url: "https://github.com/akuokojnr",
|
||||||
|
handle: "akuokojnr",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: "Narative",
|
||||||
|
url: "https://github.com/narative",
|
||||||
|
handle: "Narative",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
name: "Colin S. McCaleb",
|
||||||
|
url: "https://github.com/uonai",
|
||||||
|
handle: "uonai",
|
||||||
|
imageUrl:
|
||||||
|
"https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
addCoreTeam = () => {
|
||||||
|
const allCoreTeam = [];
|
||||||
|
const team = this.coreTeam;
|
||||||
|
for (let c of team) {
|
||||||
|
allCoreTeam.push(
|
||||||
|
<div key={c.id} css={STYLES_CARD_WRAPPER}>
|
||||||
|
<a href={c.url}>
|
||||||
|
<System.HoverTile
|
||||||
|
height={250}
|
||||||
|
width={200}
|
||||||
|
style={{ borderRadius: 4 }}
|
||||||
|
>
|
||||||
|
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
||||||
|
<img
|
||||||
|
css={STYLES_IMG}
|
||||||
|
alt={`Github Profile Photo for ${c.handle}`}
|
||||||
|
src={c.imageUrl}
|
||||||
|
/>
|
||||||
|
<div css={STYLES_CARD_TEXT}>
|
||||||
|
<p css={STYLES_CARD_NAME}>{c.name}</p>
|
||||||
|
<p css={STYLES_CARD_GITHUB}>{`@${c.handle}`}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</System.HoverTile>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
ReactDOM.render(allCoreTeam, document.getElementById("core-team"));
|
||||||
|
};
|
||||||
|
addContributorTeam = () => {
|
||||||
|
const allContributerTeam = [];
|
||||||
|
const team = this.contributorTeam;
|
||||||
|
for (let c of team) {
|
||||||
|
allContributerTeam.push(
|
||||||
|
<div key={c.id} css={STYLES_CARD_WRAPPER}>
|
||||||
|
<a href={c.url}>
|
||||||
|
<System.HoverTile
|
||||||
|
height={250}
|
||||||
|
width={200}
|
||||||
|
style={{ borderRadius: 4 }}
|
||||||
|
>
|
||||||
|
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
||||||
|
<img
|
||||||
|
css={STYLES_IMG}
|
||||||
|
alt={`Github Profile Photo for ${c.handle}`}
|
||||||
|
src={c.imageUrl}
|
||||||
|
/>
|
||||||
|
<div css={STYLES_CARD_TEXT}>
|
||||||
|
<p css={STYLES_CARD_NAME}>{c.name}</p>
|
||||||
|
<p css={STYLES_CARD_GITHUB}>{`@${c.handle}`}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</System.HoverTile>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
ReactDOM.render(
|
||||||
|
allContributerTeam,
|
||||||
|
document.getElementById("contributer-team")
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const title = `Slate`;
|
const title = `Slate`;
|
||||||
const description =
|
const description =
|
||||||
@ -240,7 +437,11 @@ export default class CommunityPage extends React.Component {
|
|||||||
const url = "https://slate.host/community";
|
const url = "https://slate.host/community";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
<WebsitePrototypeWrapper
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
url={url}
|
||||||
|
>
|
||||||
<WebsitePrototypeHeader />
|
<WebsitePrototypeHeader />
|
||||||
<div css={STYLES_ROOT}>
|
<div css={STYLES_ROOT}>
|
||||||
<div css={STYLES_SECTION_HERO}>
|
<div css={STYLES_SECTION_HERO}>
|
||||||
@ -252,11 +453,16 @@ export default class CommunityPage extends React.Component {
|
|||||||
/>
|
/>
|
||||||
<h1 css={STYLES_H1}>Community</h1>
|
<h1 css={STYLES_H1}>Community</h1>
|
||||||
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
||||||
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.
|
||||||
</h3>
|
</h3>
|
||||||
<br />
|
<br />
|
||||||
|
<br />
|
||||||
<div>
|
<div>
|
||||||
<button css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("https://filecoin.io/slack")}>
|
<button
|
||||||
|
css={STYLES_BUTTON_PRIMARY}
|
||||||
|
onClick={() => window.open("https://filecoin.io/slack")}
|
||||||
|
>
|
||||||
Join our community
|
Join our community
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -267,294 +473,38 @@ export default class CommunityPage extends React.Component {
|
|||||||
<div css={STYLES_TEXT_BLOCK}>
|
<div css={STYLES_TEXT_BLOCK}>
|
||||||
<h2 css={STYLES_H2}>Core Team</h2>
|
<h2 css={STYLES_H2}>Core Team</h2>
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_CARD_GROUP}>
|
<div id="core-team" css={STYLES_CARD_GROUP}></div>
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/jasonleyser">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Jason Leyser"
|
|
||||||
src="https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Jason Leyser</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@jasonleyser</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/jimmylee">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Cake"
|
|
||||||
src="https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Cake</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@jimmylee</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/martinalong">
|
|
||||||
<System.HoverTile width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Martina Long"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Martina Long</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@martinalong</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/harisbutt">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Haris Butt"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/13544493?s=400&u=264f4b9241b2520ba13e4eb4d71042b05adc5f74&v=4"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Haris Butt</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@harisbutt</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/tarafanlin">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Tara Lin"
|
|
||||||
src="https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Tara Lin</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@tarafanlin</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/gndclouds">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for William Felker"
|
|
||||||
src="https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>William Felker</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@gndclouds</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div css={STYLES_SECTION_WRAPPER}>
|
<div css={STYLES_SECTION_WRAPPER}>
|
||||||
<div css={STYLES_TEXT_BLOCK}>
|
<div css={STYLES_TEXT_BLOCK}>
|
||||||
<h2 css={STYLES_H2}>Contributors</h2>
|
<h2 css={STYLES_H2}>Contributors</h2>
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_CARD_GROUP}>
|
<div id="contributer-team" css={STYLES_CARD_GROUP}></div>
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/pooja">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Pooja Shah"
|
|
||||||
src="https://bafkreifqrmwuvlky7urkmkxyswksyjjpxvk62jwqgol35bfdfshgmcjmba.ipfs.slate.textile.io/"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Pooja Shah</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@pooja</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/whyrusleeping">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Why"
|
|
||||||
src="https://bafkreiczwqnp5c6msa42pihhobagcbq6r5lkxuucmm3rmccb5lh46x3h7u.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Why</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@whyrusleeping</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/asutula">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Aaron Sutula"
|
|
||||||
src="https://bafkreihl4pll4esqivugvam7d7j6oxbms4kz6c3azq77vf2ittwuon2dy4.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Aaron Sutula</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@asutula</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/jsign">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Ignacio Hagopian"
|
|
||||||
src="https://bafkreieqpfn4bpqv3yrdr22surdngc3xyn574miybm3awjosfu6fcmbd6a.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Ignacio Hagopian</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@jsign</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/sanderpick">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Sander Pick"
|
|
||||||
src="https://bafkreial7bum4chyd2rubvxkyufis4qczvb7xerrzis7eg6gyshbf7ltci.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Sander Pick</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@sanderpick</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/andrewxhill">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Andrew Hill"
|
|
||||||
src="https://bafkreighz4m7bqjmt7cidgbbocbzp65f4liuzebwq6d64t27slhpe2cigm.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Andrew Hill</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@andrewxhill</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_GROUP}>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/akuokojnr">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Akuoko Daniel Jnr"
|
|
||||||
src="https://bafkreibpqkmnm6vijyxlkbcjyayoo7b6tnf4tzelzsi4wk3z6o7enhpbrm.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Akuoko Daniel Jnr</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@akuokojnr</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/narative">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Narative"
|
|
||||||
src="https://bafkreihgmyxi2rzp4gtkoxwkrajiwivrbttixfjrdfb6qz5fhpdaofrhoi.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Narative</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@narative</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div css={STYLES_CARD_WRAPPER}>
|
|
||||||
<a href="https://github.com/narative">
|
|
||||||
<System.HoverTile height={300} width={200} style={{ borderRadius: 4 }}>
|
|
||||||
<div css={STYLES_SLATE_CARD_EFFECTS}>
|
|
||||||
<img
|
|
||||||
css={STYLES_IMG}
|
|
||||||
alt="Github Profile Photo for Colin S. Mccaleb"
|
|
||||||
src="https://bafkreigxhplpm7adi3p77eljj3g66lcnnzig7m6ihpervxwqeti3tbqudi.ipfs.slate.textile.io"
|
|
||||||
/>
|
|
||||||
<div css={STYLES_CARD_TEXT}>
|
|
||||||
<p css={STYLES_CARD_NAME}>Colin S. McCaleb</p>
|
|
||||||
<p css={STYLES_CARD_GITHUB}>@uonai</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</System.HoverTile>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div css={STYLES_SECTION_WRAPPER}>
|
<div css={STYLES_SECTION_WRAPPER}>
|
||||||
<div css={STYLES_TEXT_BLOCK}>
|
<div css={STYLES_TEXT_BLOCK}>
|
||||||
<h1 css={STYLES_H1}>Get involved</h1>
|
<h1 css={STYLES_H1}>Get involved</h1>
|
||||||
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
||||||
The Slate Project is the byproduct of a growing community of contributors from around the world. We’d
|
The Slate Project is the byproduct of a growing community of
|
||||||
love for you to join us, get involved in the project and contribute.
|
contributors from around the world. We’d love for you to join
|
||||||
|
us, get involved in the project and contribute.
|
||||||
</h3>
|
</h3>
|
||||||
<div css={STYLES_SECTION_CHILD_FULL}>
|
<div css={STYLES_SECTION_CHILD_FULL}>
|
||||||
<h3 css={STYLES_H3}>Contribute</h3>
|
<h3 css={STYLES_H3}>Contribute</h3>
|
||||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||||
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
||||||
Find something you want to work on and file an issue. If you see something you want to fix or
|
Find something you want to work on and file an issue. If you
|
||||||
change, submit a pull request.
|
see something you want to fix or change, submit a pull
|
||||||
|
request.
|
||||||
</h3>
|
</h3>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<button
|
<button
|
||||||
css={STYLES_BUTTON_PRIMARY}
|
css={STYLES_BUTTON_PRIMARY}
|
||||||
onClick={() => window.open("https://github.com/filecoin-project/slate")}
|
onClick={() =>
|
||||||
|
window.open("https://github.com/filecoin-project/slate")
|
||||||
|
}
|
||||||
>
|
>
|
||||||
Github
|
Github
|
||||||
</button>
|
</button>
|
||||||
@ -565,7 +515,8 @@ export default class CommunityPage extends React.Component {
|
|||||||
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
<div css={STYLES_SECTION_CHILD_SPLIT}>
|
||||||
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
|
||||||
{" "}
|
{" "}
|
||||||
Reach out to any of the core contributors, reach us on Twitter, or join our Slack.
|
Reach out to any of the core contributors, reach us on
|
||||||
|
Twitter, or join our Slack.
|
||||||
</h3>
|
</h3>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
@ -576,7 +527,10 @@ export default class CommunityPage extends React.Component {
|
|||||||
>
|
>
|
||||||
Twitter
|
Twitter
|
||||||
</button>
|
</button>
|
||||||
<button css={STYLES_BUTTON_PRIMARY} onClick={() => window.open("https://filecoin.io/slack")}>
|
<button
|
||||||
|
css={STYLES_BUTTON_PRIMARY}
|
||||||
|
onClick={() => window.open("https://filecoin.io/slack")}
|
||||||
|
>
|
||||||
Slack
|
Slack
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@ -606,7 +560,9 @@ export default class CommunityPage extends React.Component {
|
|||||||
<button
|
<button
|
||||||
css={STYLES_BUTTON_PRIMARY}
|
css={STYLES_BUTTON_PRIMARY}
|
||||||
style={{ marginRight: 24 }}
|
style={{ marginRight: 24 }}
|
||||||
onClick={() => window.open("http://localhost:1337/_/system")}
|
onClick={() =>
|
||||||
|
window.open("http://localhost:1337/_/system")
|
||||||
|
}
|
||||||
>
|
>
|
||||||
Design system
|
Design system
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@ -518,7 +518,6 @@ export default class IndexPage extends React.Component {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
addExampleSlates = () => {
|
addExampleSlates = () => {
|
||||||
console.log("Function Running");
|
|
||||||
const allExampleSlates = [];
|
const allExampleSlates = [];
|
||||||
const slates = this.coolSlates;
|
const slates = this.coolSlates;
|
||||||
for (let c of slates) {
|
for (let c of slates) {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user