styling + refactor: team cards and tablet sizes

This commit is contained in:
William Felker 2020-09-10 11:19:10 +08:00
parent f972e1e535
commit 2d601dd7eb
3 changed files with 235 additions and 722 deletions

View File

@ -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>
);
}
}

View File

@ -2,13 +2,15 @@ import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import { css } from "@emotion/react";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
import CodeBlock from "~/components/system/CodeBlock";
import { css } from "@emotion/react";
import ReactDOM from "react-dom";
const STYLES_ROOT = css`
display: flex;
flex-direction: column;
@ -112,6 +114,7 @@ const STYLES_BUTTON_PRIMARY = css`
border: 0;
min-height: 48px;
padding: 0px 24px 0px 24px;
margin: 20px 0px;
display: inline-flex;
align-items: center;
justify-content: center;
@ -171,6 +174,7 @@ const STYLES_SECTION_CHILD_SPLIT = css`
const STYLES_CARD_GROUP = css`
display: flex;
margin-top: 48px;
flex-wrap: wrap;
@media (max-width: ${Constants.sizes.tablet}px) {
margin-top: 16px;
}
@ -197,8 +201,8 @@ const STYLES_CARD_WRAPPER = css`
width: calc(100% / 10 px);
transition: 200ms ease box-shadow;
padding: 16px 16px 0 0;
@media (max-width: ${Constants.sizes.tablet}px) {
width: 50%;
}
`;
const STYLES_SLATE_CARD_EFFECTS = css`
@ -226,13 +230,206 @@ const STYLES_SLATE_CARD_EFFECTS = css`
:after {
}
`;
export const getServerSideProps = async (context) => {
export const getServerSideProps = async context => {
return {
props: { ...context.query },
props: { ...context.query }
};
};
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() {
const title = `Slate`;
const description =
@ -240,7 +437,11 @@ export default class CommunityPage extends React.Component {
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_HERO}>
@ -252,11 +453,16 @@ export default class CommunityPage extends React.Component {
/>
<h1 css={STYLES_H1}>Community</h1>
<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>
<br />
<br />
<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
</button>
</div>
@ -267,294 +473,38 @@ export default class CommunityPage extends React.Component {
<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={{ 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 id="core-team" css={STYLES_CARD_GROUP}></div>
</div>
<div css={STYLES_SECTION_WRAPPER}>
<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={{ 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 id="contributer-team" css={STYLES_CARD_GROUP}></div>
</div>
<div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_TEXT_BLOCK}>
<h1 css={STYLES_H1}>Get involved</h1>
<h3 css={STYLES_H3} style={{ opacity: 0.7 }}>
The Slate Project is the byproduct of a growing community of contributors from around the world. Wed
love for you to join us, get involved in the project and contribute.
The Slate Project is the byproduct of a growing community of
contributors from around the world. Wed love for you to join
us, get involved in the project and contribute.
</h3>
<div css={STYLES_SECTION_CHILD_FULL}>
<h3 css={STYLES_H3}>Contribute</h3>
<div css={STYLES_SECTION_CHILD_SPLIT}>
<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
change, submit a pull request.
Find something you want to work on and file an issue. If you
see something you want to fix or change, submit a pull
request.
</h3>
<br />
<br />
<button
css={STYLES_BUTTON_PRIMARY}
onClick={() => window.open("https://github.com/filecoin-project/slate")}
onClick={() =>
window.open("https://github.com/filecoin-project/slate")
}
>
Github
</button>
@ -565,7 +515,8 @@ export default class CommunityPage extends React.Component {
<div css={STYLES_SECTION_CHILD_SPLIT}>
<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>
<br />
<br />
@ -576,7 +527,10 @@ export default class CommunityPage extends React.Component {
>
Twitter
</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
</button>
</div>
@ -606,7 +560,9 @@ export default class CommunityPage extends React.Component {
<button
css={STYLES_BUTTON_PRIMARY}
style={{ marginRight: 24 }}
onClick={() => window.open("http://localhost:1337/_/system")}
onClick={() =>
window.open("http://localhost:1337/_/system")
}
>
Design system
</button>

View File

@ -518,7 +518,6 @@ export default class IndexPage extends React.Component {
},
];
addExampleSlates = () => {
console.log("Function Running");
const allExampleSlates = [];
const slates = this.coolSlates;
for (let c of slates) {