mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 05:54:49 +03:00
Merge pull request #224 from filecoin-project/@gndclouds/general-benchmark-improvements
@gndclouds/general-benchmark-improvements Updated all assets to new compressed versions
This commit is contained in:
martinalong
GitHub
commit
6d6f2fed85
@ -21,6 +21,7 @@ const STYLES_CONTAINER = css`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
463
pages/_/old.js
Normal file
463
pages/_/old.js
Normal file
@ -0,0 +1,463 @@
|
||||
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_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_OPENSOURCE_CONTAINER = css`
|
||||
width: 100%;
|
||||
background-color: ${Constants.system.foreground};
|
||||
`;
|
||||
|
||||
const STYLES_HEADER_TEXT = css`
|
||||
font-size: 4.768rem;
|
||||
padding: 0px 0px 32px 0px;
|
||||
width: 100%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 2.441rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_TEXT = css`
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CONTAINER = css`
|
||||
display: grid;
|
||||
padding-top: 32px;
|
||||
column-gap: 5px;
|
||||
row-gap: 10px;
|
||||
justify-items: center;
|
||||
align-item: center;
|
||||
grid-template-columns: repeat(auto-fit, 150px);
|
||||
height: 70vh;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTOR_CARD = css`
|
||||
height: 200px;
|
||||
width: 150px;
|
||||
background-color: ${Constants.system.white};
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONTAINER = css`
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_IMAGE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_TEXT = css`
|
||||
font-size: 1rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_CONTRIBUTE = css`
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: auto 1fr 1fr;
|
||||
`;
|
||||
|
||||
const STYLES_BTN_SPACER = css`
|
||||
padding-bottom: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGES_CONTAINER = css`
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_CONT = css`
|
||||
max-width: 500px;
|
||||
float: right;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid ${Constants.system.border};
|
||||
box-shadow: 5px 5px 1px ${Constants.system.border};
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTE_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
`;
|
||||
|
||||
const STYLES_IMAGE_THREE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_QUOTE = css`
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
font-size: 2rem;
|
||||
color: ${Constants.system.black};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_CONTAINER = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
const STYLES_CONTACT_BTN_CONTAINER = css`
|
||||
display: flex;
|
||||
padding: 96px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
`;
|
||||
|
||||
const STYLES_INTEGRATE_GIF = css`
|
||||
width: 100%
|
||||
height: 70vh;
|
||||
padding-top: 20vh;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CONTAINER = css`
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column-gap: 32px;
|
||||
`;
|
||||
|
||||
const STYLES_D_TEXT = css`
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_CODE = css`
|
||||
width: 100%;
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
`;
|
||||
|
||||
const STYLES_D_IMAGE_CONTAINER = css`
|
||||
height: auto;
|
||||
width: 90%;
|
||||
grid-column: 2;
|
||||
grid-row: 1 / span 2;
|
||||
`;
|
||||
|
||||
const STYLES_DESIGN_IMAGE = css`
|
||||
width: 100%;
|
||||
height: auto;
|
||||
`;
|
||||
const STYLES_WRAPPER_TEXT = css`
|
||||
width: 40%;
|
||||
align-self: center;
|
||||
padding: 0 50px;
|
||||
`;
|
||||
const STYLES_SECTION = css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-self: center;
|
||||
h1 {
|
||||
font-size: 46px;
|
||||
line-height: 100%;
|
||||
}
|
||||
`;
|
||||
const STYLES_CARD = css``;
|
||||
|
||||
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);
|
||||
this.addContributors();
|
||||
}
|
||||
|
||||
contributorsList = [
|
||||
{
|
||||
id: 1,
|
||||
name: "jimmylee",
|
||||
url: "https://github.com/jimmylee",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "martinalong",
|
||||
url: "https://github.com/martinalong",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "gndclouds",
|
||||
url: "https://github.com/gndclouds",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/1757261?s=400&u=b7136d82bfacac3002b3b08980ac611ca7f34b7b&v=4"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "uonai",
|
||||
url: "https://github.com/uonai",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/7935491?s=400&u=8d91d58215c8df440eacf37d6291d912252685c3&v=4"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "tarafanlin",
|
||||
url: "https://github.com/tarafanlin",
|
||||
organization: "Slate",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "jasonleyser",
|
||||
url: "https://github.com/",
|
||||
organization: "Slate",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "akuokojnr",
|
||||
url: "https://github.com/akuokojnr",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/31008944?s=400&u=340814cc84eac860654a072781661e58aadaf560&v=4"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "jordattebayo",
|
||||
url: "https://github.com/jordattebayo",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars2.githubusercontent.com/u/31581758?s=400&u=21765bba0c302a554ef3aab835450a32fc947a98&v=4"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Pooja",
|
||||
url: "https://github.com/",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "tmytrn",
|
||||
url: "https://github.com/tmrtrn",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars0.githubusercontent.com/u/2691514?s=400&u=b589dc97fa893152768b00c27b5f9f68d1a7fb79&v=4"
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "motdde",
|
||||
url: "https://github.com/motdde",
|
||||
organization: "",
|
||||
pic:
|
||||
"https://avatars3.githubusercontent.com/u/12215060?s=400&u=aa85ebcfc7438becdb50a67aa79e78ba8feb2d77&v=4"
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "harisbutt",
|
||||
url: "https://github.com/harisbutt",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "andrewxhill",
|
||||
url: "https://github.com/andrewxhill",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "johannes-jp",
|
||||
url: "https://github.com/johannes-jp",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Anish-Agnihotri",
|
||||
url: "https://github.com/anish-agnihotri",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Aminejvm",
|
||||
url: "https://github.com/aminejvm",
|
||||
organization: "",
|
||||
pic: "/static/a1.jpg"
|
||||
}
|
||||
];
|
||||
|
||||
addContributors = () => {
|
||||
const allContributors = [];
|
||||
const contributors = this.contributorsList;
|
||||
for (let c of contributors) {
|
||||
allContributors.push(
|
||||
<div key={c.id} css={STYLES_CONTRIBUTOR_CARD}>
|
||||
<div css={STYLES_IMAGE_CONTAINER}>
|
||||
<img css={STYLES_CARD_IMAGE} src={c.pic} />
|
||||
</div>
|
||||
<System.P css={STYLES_CARD_TEXT}>{c.name}</System.P>
|
||||
<a href={c.url}>{`@${c.name}`}</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(allContributors, document.getElementById("contr-cont"));
|
||||
};
|
||||
|
||||
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>
|
||||
<System.P>ytu</System.P>
|
||||
</div>
|
||||
<div>
|
||||
{" "}
|
||||
<div id="contr-cont" css={STYLES_CONTRIBUTOR_CONTAINER}></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section css={STYLES_SECTION}>
|
||||
<div css={STYLES_WRAPPER_TEXT}>
|
||||
<System.H1>Get Involved</System.H1>
|
||||
<System.P>
|
||||
Slate is a fully open-source file sharing network designed for
|
||||
research and collaboration.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<div>
|
||||
<img
|
||||
src="https://d2w9rnfcy7mm78.cloudfront.net/8547413/original_613b9b0a650a3f274c68e1407f552ff3.png?1599111034?bc=0"
|
||||
alt="Slate Web App Screenshot"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Contribute</System.H2>
|
||||
<br />
|
||||
<System.P>Get involved with the project and contribute.</System.P>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<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>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div css={STYLES_CARD}>
|
||||
<System.H2>Integrate</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Explore our API and SDK and build on top of Slate.
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<System.H2>Design System</System.H2>
|
||||
<br />
|
||||
<System.P>
|
||||
Check out our open source design system for your projects
|
||||
</System.P>
|
||||
<br />
|
||||
<br />
|
||||
<CodeBlock>npm install --save slate-react-system</CodeBlock>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
1075
pages/index-t.js
Normal file
1075
pages/index-t.js
Normal file
File diff suppressed because it is too large
Load Diff
347
pages/index.js
347
pages/index.js
@ -9,6 +9,8 @@ import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"
|
||||
import TextLoop from "react-text-loop";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -294,6 +296,7 @@ const STYLES_SLATE_CARD = css`
|
||||
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);
|
||||
@ -385,7 +388,6 @@ const STYLES_SLATE_CARD_EXPLAINER = css`
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 0px;
|
||||
font-size: 1rem;
|
||||
@ -410,6 +412,17 @@ const STYLES_SLATE_CARD_CTA_PARAGRAPH = css`
|
||||
font-size: 1rem;
|
||||
}
|
||||
`;
|
||||
const STYLES_SLATE_CARD_IMAGE = css`
|
||||
border-radius: 4px;
|
||||
height: 100%;
|
||||
:hover {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
height: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async context => {
|
||||
return {
|
||||
@ -421,8 +434,129 @@ export default class IndexPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
console.log("HEALTH_CHECK", response);
|
||||
this.addExampleSlates();
|
||||
}
|
||||
|
||||
coolSlates = [
|
||||
{
|
||||
id: 1,
|
||||
slateName: "Urban gardens",
|
||||
slateUrl: "https://slate.host/gndclouds/urban-gardens",
|
||||
slateUser: "gndclouds",
|
||||
previewImageUrl:
|
||||
"https://bafybeiff7y4kz4e2z4nfso4nsgdbkfsyroa62jvvldoxafuaf34m7lticu.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
slateName: "Shapes and Letters",
|
||||
slateUrl: "https://slate.host/haris/shapes-and-letters",
|
||||
slateUser: "haris",
|
||||
previewImageUrl:
|
||||
"https://bafybeifgxtl7mq5djnorxedzi35hkizjmbjvdy3nnoitd3xvdnqpmruxbm.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
slateName: "Mountains",
|
||||
slateUrl: "https://slate.host/jason/mountains",
|
||||
slateUser: "jason",
|
||||
previewImageUrl:
|
||||
"https://bafkreies6uykgocrkunrsndxfubntyqvfqzo5wuwyos42vak6d4qnvtdn4.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
slateName: "Loom",
|
||||
slateUrl: "https://slate.host/tara/loom",
|
||||
slateUser: "tara",
|
||||
previewImageUrl:
|
||||
"https://bafybeifl5xzy4vjctrsr3jywdlv5ceq3hpaadhcii2ekjx2gljyagveqna.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
slateName: "Brand",
|
||||
slateUrl: "https://slate.host/slate/brand",
|
||||
slateUser: "slate",
|
||||
previewImageUrl:
|
||||
"https://bafybeiaerbu2nivrgncqtwgwom27caji25netswvjbo6tcmbka47ucmupa.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
slateName: "Montreal underground",
|
||||
slateUrl: "https://slate.host/tcosta/montreal-underground",
|
||||
slateUser: "tcosta",
|
||||
previewImageUrl:
|
||||
"https://bafybeieblkyt6d7wg4xmltshvxm6w7tz4c3zjpjuu4yfhiak36debqccda.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
slateName: "Monet",
|
||||
slateUrl: "https://slate.host/slate/monet",
|
||||
slateUser: "slate",
|
||||
previewImageUrl:
|
||||
"https://bafkreieb4yfiamtipapmhoihl547lxeod2vfku67dimrhmab5tcglr5bli.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
slateName: "Book shelf",
|
||||
slateUrl: "https://slate.host/haris/book-shelf",
|
||||
slateUser: "haris",
|
||||
previewImageUrl:
|
||||
"https://bafkreihe7ismqfyytekj6yvbv6mpbc5de3gozk6n7a47smodbcsnrhbpri.ipfs.slate.textile.io/"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
slateName: "Papers",
|
||||
slateUrl: "https://slate.host/slate/papers",
|
||||
slateUser: "@slate",
|
||||
previewImageUrl:
|
||||
"https://bafkreif7l2vxkvdyrydcjwjjrrmqq73id3tdrdkf3z54tp2fotc75wkdwm.ipfs.slate.textile.io/"
|
||||
}
|
||||
];
|
||||
addExampleSlates = () => {
|
||||
console.log("Function Running");
|
||||
const allExampleSlates = [];
|
||||
const slates = this.coolSlates;
|
||||
for (let c of slates) {
|
||||
allExampleSlates.push(
|
||||
<div key={c.id} css={STYLES_SLATE_CARD}>
|
||||
<div
|
||||
css={css`
|
||||
height: 100%;
|
||||
|
||||
:hover {
|
||||
background: url(${c.previewImageUrl});
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
opacity: 0.5;
|
||||
height: 100%;
|
||||
}
|
||||
`}
|
||||
>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href={c.slateURL}
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>{c.slateName}</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
>{`@${c.slateUser}`}</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
ReactDOM.render(
|
||||
allExampleSlates,
|
||||
document.getElementById("example-slates")
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const title = `Slate`;
|
||||
const description =
|
||||
@ -434,9 +568,9 @@ export default class IndexPage extends React.Component {
|
||||
description={description}
|
||||
url={url}
|
||||
>
|
||||
<WebsitePrototypeHeader color="light" />
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<section css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
A file storage network <br />
|
||||
@ -459,11 +593,11 @@ export default class IndexPage extends React.Component {
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeifsvkepb46prksbt7ank6o5gxeqcz4lshrn7d34ruzitxqr3hiqka.ipfs.slate.textile.io/"
|
||||
src="https://bafybeidfr2x5ftxzixjxtrgiqm6iuotzip25tlrpase226jog3tqenqd4a.ipfs.slate.textile.io/"
|
||||
type="video/m4v"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafybeigalcaqfsxj4iiy5lseonatvvaglsxoz33knc5kngnilp2l23wndu.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafybeict43te7wcy7pdw3v45dwwedwxw7yjthbytdsja6dpsiqkgil7iey.ipfs.slate.textile.io/')`,
|
||||
borderRadius: `4px`,
|
||||
width: `100%`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`,
|
||||
@ -520,8 +654,8 @@ export default class IndexPage extends React.Component {
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</section>
|
||||
<section css={STYLES_SECTION_SLATE}>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
A new home
|
||||
@ -553,7 +687,7 @@ export default class IndexPage extends React.Component {
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafybeic4c572po5xd2crtcgr4m7vipddfttcaslsyy64xkl77pyocgqrii.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafybeihez3rtyqqftx7mkyktwozyqjkwdtk2kglxqjc4zspah26bva3yk4.ipfs.slate.textile.io/')`,
|
||||
backgroundSize: `cover`,
|
||||
borderRadius: `4px`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
|
||||
@ -570,7 +704,7 @@ export default class IndexPage extends React.Component {
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafybeicpw2w6udug33s5sfcratqxabiebzwrhe34jfdmycc5imippcjjli.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafybeidnt2l3lslxi7ofkxs5ffncsh4fw5h2ohbukxumngrqj5pdrooaou.ipfs.slate.textile.io/')`,
|
||||
backgroundSize: `cover`,
|
||||
borderRadius: `4px`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
|
||||
@ -589,7 +723,7 @@ export default class IndexPage extends React.Component {
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafkreiexblrnkrzp4ywwtfxrt6xo4aexo6dmphvfdjkwbcxphbivkrd2xi.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafkreibb3onijljnmonrbs7qguimjf5qwbnkx3m33pouxbtar2yb7hupti.ipfs.slate.textile.io/')`,
|
||||
backgroundSize: `cover`,
|
||||
borderRadius: `4px`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
|
||||
@ -606,7 +740,7 @@ export default class IndexPage extends React.Component {
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafkreiefuyyk6dcjhyk3hl2httqvdlnl3mo6wrfzgmponexrc75jop757y.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafkreihu7k46n6eixx6sxjv7aolou5bgvksvb7ryju3gbwie22t6r2dhli.ipfs.slate.textile.io/')`,
|
||||
backgroundSize: `cover`,
|
||||
borderRadius: `4px`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
|
||||
@ -615,9 +749,9 @@ export default class IndexPage extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
Upload from <br />
|
||||
@ -632,12 +766,13 @@ export default class IndexPage extends React.Component {
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_MEDIA_LEFT}
|
||||
src="https://bafybeibwppu23j5wgshqvm5qyqv3c6pmhp3y5irdwn3ivvnnrpexiguzbi.ipfs.slate.textile.io/"
|
||||
src="https://bafybeig46uuyp3fkjpk2edeqlmt26r3rxdola52dy7kbgvjms6olyucjdu.ipfs.slate.textile.io/"
|
||||
alt="Slate Web Clipper being used in chrome dropdown menu"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
@ -659,11 +794,11 @@ export default class IndexPage extends React.Component {
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeib46kplzcylnzviaojgbogua52wyrzbvnj6uulvo4zwrxm4hnxeqe.ipfs.slate.textile.io/"
|
||||
src="https://bafybeiagnzwfvdsqqxamlpru2fulmwzlgaqtg4ys4gs4wfnm5rq75c2cs4.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafybeiaxdqxxwksdykptwghh5du6fhwobavohyrgsajgzje2vvhbxphsl4.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafybeicoaponp2nv3ikpsjgcgu7pio6aercflsvsiyxrpaonza7ncg73dq.ipfs.slate.textile.io/')`,
|
||||
backgroundSize: `cover`,
|
||||
borderRadius: `4px`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
|
||||
@ -677,7 +812,7 @@ export default class IndexPage extends React.Component {
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
|
||||
src="https://bafybeigstyjfpzazdlmgkfuhw4yxrneux3opvbls7nmv6gq7dbnhmy6xwy.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
@ -695,20 +830,20 @@ export default class IndexPage extends React.Component {
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeia4bvim5wcvsqoqb27pkky6b6ocamzv3pbgltgso43tdz454bmjsu.ipfs.slate.textile.io/"
|
||||
src="https://bafybeiampkmsxeihxnuz2hkgbhtzosgkwghslpwm7dsrxrzlqwa7tvzreq.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafkreihlxav37dy6vqwrcamvbhub72zy3z6doayhjwtvqqvrlbvojum3um.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafkreiglefskwq7bpa3aazihegawd4qwxockl6shipnps7zlokrbnu4f7u.ipfs.slate.textile.io/')`,
|
||||
backgroundSize: `cover`,
|
||||
borderRadius: `4px`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
<span css={STYLES_HIGHLIGHT}>
|
||||
@ -729,20 +864,20 @@ export default class IndexPage extends React.Component {
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeidnaytqqghnwoduomvefwmnxz3kqllyl5xhyzc4azcl4zflscqcry.ipfs.slate.textile.io/"
|
||||
src="https://bafybeih63zq5f7htbhkmrog447ybytyid2yi6fix4k6z3pbegxpcq2r2qa.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
playsInline
|
||||
style={{
|
||||
backgroundImage: `url('https://bafkreid67aupu7dpnekkej77ik642zyrytkfhgpwxdoyhxey6qbcyuxrpq.ipfs.slate.textile.io/')`,
|
||||
backgroundImage: `url('https://bafkreiagwjqvmisseb6voj7cwd3lhjudigkel63hqg6efpqjmhlfv5ucj4.ipfs.slate.textile.io/')`,
|
||||
backgroundSize: `cover`,
|
||||
borderRadius: `4px`,
|
||||
boxShadow: `0px 10px 50px 20px rgba(0, 0, 0, 0.1)`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_SECTION_SLATE}>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
<h1 css={STYLES_H1}>
|
||||
Built on <br />
|
||||
@ -766,16 +901,17 @@ export default class IndexPage extends React.Component {
|
||||
Learn more about Filecoin ->
|
||||
</a>
|
||||
</div>
|
||||
|
||||
z
|
||||
<div>
|
||||
<img
|
||||
css={STYLES_MEDIA_RIGHT_OVERLAP}
|
||||
src="https://bafybeihi2f53tmtwxv5f5jd2wcxtzrutgvxg5xsawfv3ousfjz2yfurm2i.ipfs.slate.textile.io/"
|
||||
src="https://bafybeiaex6rorqtumulc4x3u4sbl5pdbn5sx45mvm6uvbebu4cxgk3okjy.ipfs.slate.textile.io/"
|
||||
alt="Slate logo in frosted cube"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section css={STYLES_SECTION_SLATE_WALL}>
|
||||
<div css={STYLES_SECTION_SLATE_WALL}>
|
||||
<div css={STYLES_SLATE_CARD_GRAY}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
@ -792,158 +928,15 @@ export default class IndexPage extends React.Component {
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>
|
||||
Create your first slate
|
||||
</div>
|
||||
</div>{" "}
|
||||
<div css={STYLES_SLATE_CARD_CTA_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div css={STYLES_SLATE_CARD_GROUP}>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/gndclouds/urban-gardens"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Urban gardens</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@gndclouds</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/haris/shapes-and-letters"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Shapes and letters</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@haris</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/jason/mountains"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Mountains</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@jason</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD_GROUP}>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/tara/loom"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Loom</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@tara</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/slate/brand"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Brand</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/tcosta/montreal-underground"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>
|
||||
Montreal underground
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@tcosta</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD_GROUP}>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/slate/monet"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Monet</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/haris/book-shelf"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Book shelf</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@haris</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_SLATE_CARD}>
|
||||
<a
|
||||
css={STYLES_SLATE_CARD_PARAGRAPH}
|
||||
href="https://slate.host/slate/papers"
|
||||
target="_blank"
|
||||
>
|
||||
<div css={STYLES_SLATE_CARD_TEXT}>
|
||||
<div css={STYLES_SLATE_CARD_TITLE}>Papers</div>
|
||||
<div css={STYLES_SLATE_CARD_EXPLAINER}>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>@slate</div>
|
||||
<div css={STYLES_SLATE_CARD_PARAGRAPH}>-></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<br /> <div id="example-slates" css={STYLES_SLATE_CARD_GROUP}></div>
|
||||
</div>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user