refactored main classes for small devices

This commit is contained in:
William Felker 2020-09-05 20:02:27 +08:00 committed by jimmylee
parent e3c2082d05
commit 2dffdc064c
2 changed files with 684 additions and 0 deletions

View File

@ -0,0 +1,442 @@
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

@ -0,0 +1,242 @@
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`
display: flex;
flex-direction: column;
justify-content: space-between;
`;
const STYLES_H1 = css`
font-size: 1.953rem;
line-height: 1.25;
padding: 0px 0px 32px 0px;
width: 100%;
color: ${Constants.system.pitchBlack};
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 1.953rem;
padding: 0px 0px 16px 0px;
line-height: 1.25;
}
`;
const STYLES_H2 = css`
font-size: 1.25rem;
line-height: 1.25;
padding: 0px 0px 32px 0px;
width: 100%;
color: ${Constants.system.darkGray};
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 1.25rem;
padding: 0px 0px 8px 0px;
line-height: 1.5;
}
`;
const STYLES_H3 = css`
font-size: 1.563em;
line-height: 1.5;
padding: 0px 0px 16px 0px;
color: ${Constants.system.darkGray};
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 1rem;
padding: 0px 0px 8px 0px;
line-height: 1.5;
color: ${Constants.system.moonstone};
}
`;
const STYLES_P = css`
font-size: 1rem;
color: ${Constants.system.black};
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 0.78rem;
}
`;
const STYLES_A = css`
:link {
color: ${Constants.system.darkGray};
background-color: transparent;
text-decoration: none;
}
:hover {
color: ${Constants.system.pitchBlack};
background-color: transparent;
text-decoration: none;
}
:active {
color: yellow;
background-color: transparent;
text-decoration: none;
}
@media (max-width: ${Constants.sizes.mobile}px) {
}
`;
const STYLES_IMG = css`
width: 100%;
:hover {
}
@media (max-width: ${Constants.sizes.mobile}px) {
}
`;
const STYLES_ANNOTATION = css`
padding-top: 7px;
font-size: 12px;
color: #646464;
`;
const STYLES_BUTTON_PRIMARY = css`
box-sizing: border-box;
border-radius: 2px;
outline: 0;
border: 0;
min-height: 40px;
padding: 6px 24px 6px 24px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
letter-spacing: 0.2px;
font-family: ${Constants.font.semiBold};
transition: 200ms ease all;
user-select: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
background-color: ${Constants.system.wall};
color: ${Constants.system.slate};
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
:hover {
background-color: ${Constants.system.pitchBlack};
box-shadow: 0px 10px 90px 20px rgba(207, 206, 211, 0.3);
color: ${Constants.system.wall};
}
:focus {
box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.3);
background-color: ${Constants.system.pitchBlack};
color: ${Constants.system.wall};
outline: 0;
border: 0;
}
`;
const STYLES_SECTION_WRAPPER = css`
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 55vh;
margin: 10px auto;
:nth-child(even) {
margin: 150px auto;
flex-direction: row-reverse;
}
@media (max-width: ${Constants.sizes.mobile}px) {
flex-direction: column;
justify-content: space-between;
align-items: center;
:nth-child(even) {
flex-direction: column;
}
}
`;
const STYLES_SECTION_CHILD = css`
width: 50%;
padding: 0 50px;
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
padding: 20px;
}
`;
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}>
<div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_SECTION_CHILD}>
<h1 css={STYLES_H1}>
Slate is designed and built by a growing community of hackers,
artists, and creatives on the web.
</h1>
<p css={STYLES_H2}>
Take any image on the web and save it to Slate right from your
browser tab.
</p>
</div>
<div css={STYLES_SECTION_CHILD}>
<img
css={STYLES_IMG}
src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
alt="Slate browser extension"
/>
</div>
</div>
<div css={STYLES_SECTION_WRAPPER}>
<div css={STYLES_SECTION_CHILD}>
<h1 css={STYLES_H1}>
Slate is designed and built by a growing community of hackers,
artists, and creatives on the web.
</h1>
<p css={STYLES_H2}>
Take any image on the web and save it to Slate right from your
browser tab.
</p>
<a src="/">
<button css={STYLES_BUTTON_PRIMARY}>
Get Chrome Extension
</button>
</a>
<p css={STYLES_ANNOTATION}>
Currently avaible for <a href="/">Chrome</a>.
</p>
</div>
<div css={STYLES_SECTION_CHILD}>
<img
css={STYLES_IMG}
src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
alt="Slate browser extension"
/>
</div>
</div>
</div>
<WebsitePrototypeFooter />
</WebsitePrototypeWrapper>
);
}
}