mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-25 10:05:02 +03:00
Merge pull request #220 from filecoin-project/@tarafanlin/landing
Landing v1 ready for review
This commit is contained in:
CAKE
GitHub
commit
9908f07af6
@ -16,9 +16,9 @@ const STYLES_CONTAINER = css`
|
||||
align-items: top;
|
||||
justify-content: top;
|
||||
padding: 96px 88px 96px 88px;
|
||||
z-index: ${Constants.zindex.navigation};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
justify-content: left;
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { Logo } from "~/common/logo.js";
|
||||
import { NearestMipMapLinearFilter } from "three";
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
font-family: ${Constants.font.text};
|
||||
@ -15,7 +14,7 @@ const STYLES_CONTAINER = css`
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 42;
|
||||
z-index: ${Constants.zindex.header};
|
||||
height: 88px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
@ -73,11 +72,11 @@ const STYLES_BURGER = css`
|
||||
justify-content: space-around;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
z-index: ${Constants.zindex.header};
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 10;
|
||||
color: ${Constants.system.darkGray};
|
||||
}
|
||||
`;
|
||||
@ -130,6 +129,7 @@ const openBurgerBun2 = {
|
||||
const STYLES_MENU = css`
|
||||
display: none;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
z-index: ${Constants.zindex.header}
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -142,7 +142,7 @@ const STYLES_MENU = css`
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
transition: 1s ease-in-out;
|
||||
transition: 200ms ease-in-out;
|
||||
transition-property: transform, width;
|
||||
}
|
||||
`;
|
||||
@ -150,12 +150,12 @@ const STYLES_MENU = css`
|
||||
const STYLES_NAVLINK = css`
|
||||
display: none;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 16px 0;
|
||||
z-index: ${Constants.zindex.header};
|
||||
padding: 8px 0;
|
||||
color: ${Constants.system.white};
|
||||
text-decoration: none;
|
||||
transition: color 0.3s linear;
|
||||
transition-property: transform;
|
||||
|
||||
font-size: 1.563rem;
|
||||
text-align: left;
|
||||
|
||||
@ -176,11 +176,12 @@ const openNavLink = {
|
||||
|
||||
const NewWebsitePrototypeHeader = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", handleOpen);
|
||||
return () => window.removeEventListener("resize", handleOpen);
|
||||
});
|
||||
const handleOpen = () => {
|
||||
handleOpen();
|
||||
window.addEventListener("resize", () => {
|
||||
useState({ open: false });
|
||||
});
|
||||
setOpen(false);
|
||||
};
|
||||
const communityURL = "/community";
|
||||
const signInURL = "/_";
|
||||
|
||||
@ -13,6 +13,7 @@ const STYLES_ROOT = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
max-width: 1440px;
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
@ -124,43 +125,34 @@ const STYLES_FILETYPE = css`
|
||||
|
||||
const STYLES_VIDEO_BIG = css`
|
||||
margin: 48px auto 88px auto;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
margin: 32px auto 64px auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 24px auto 48px auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_VIDEO_SMALL = css`
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
border-radius: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_MEDIA_LEFT = css`
|
||||
margin: 64px 0 0 -240px;
|
||||
width: 80vw;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 24px 0 0 -80px;
|
||||
width: 80vw;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
`;
|
||||
|
||||
@ -186,12 +178,10 @@ const STYLES_TEXT_BLOCK = css`
|
||||
justify-content: space-between;
|
||||
width: 56vw;
|
||||
align-self: center;
|
||||
z-index: 10;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 88%;
|
||||
right: 24px;
|
||||
z-index: 10;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -301,7 +291,7 @@ const STYLES_SLATE_CARD_GRAY = css`
|
||||
box-shadow: 0px 4px 80px 4px rgba(0, 0, 0, 0.1);
|
||||
text-decoration: none;
|
||||
transition: 200ms ease box-shadow;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
a {
|
||||
color: ${Constants.system.pitchBlack};
|
||||
}
|
||||
@ -442,10 +432,11 @@ export default class IndexPage extends React.Component {
|
||||
<div>
|
||||
<video
|
||||
css={STYLES_VIDEO_BIG}
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
src="https://bafybeihptz3tl5zxoronrlefow6kovk3jzllgfv36nt7metavqa4en26km.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeifsvkepb46prksbt7ank6o5gxeqcz4lshrn7d34ruzitxqr3hiqka.ipfs.slate.textile.io/"
|
||||
type="video/m4v"
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_TEXT_BLOCK}>
|
||||
@ -495,8 +486,9 @@ export default class IndexPage extends React.Component {
|
||||
<div css={STYLES_FILETYPE}>
|
||||
<div>
|
||||
<video
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src="https://bafybeiawzns4vxqp3llkzmc4shvytzpurysh26yj3aljde4d4fsgf7wlze.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
@ -504,8 +496,9 @@ export default class IndexPage extends React.Component {
|
||||
</div>
|
||||
<div>
|
||||
<video
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src="https://bafybeiczug4d6uyr4pkejdwirkeffbzkkzrbaprxvreid6iitw3pmjzq3q.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
@ -515,8 +508,9 @@ export default class IndexPage extends React.Component {
|
||||
<div css={STYLES_FILETYPE}>
|
||||
<div>
|
||||
<video
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src="https://bafkreid7wl4443p764ozdlqtodh7dmsej6ffayp4tc3lr3hil2qkclrohi.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
@ -524,8 +518,9 @@ export default class IndexPage extends React.Component {
|
||||
</div>
|
||||
<div>
|
||||
<video
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
css={STYLES_VIDEO_SMALL}
|
||||
src="https://bafybeicjovnsnhvt7xwjw3igdwwpb4ms2m23fayoydj3oevrwyi7dzjtga.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
@ -572,17 +567,19 @@ export default class IndexPage extends React.Component {
|
||||
<h2 css={STYLES_H2}>Create moodboards</h2>
|
||||
<video
|
||||
css={STYLES_VIDEO_BIG}
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeie3q44jsb7ttklkcej52jmvtdvxfs2w7jpwmqhq7tatyijkw62km4.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
/>
|
||||
|
||||
<h2 css={STYLES_H2}>Organize research</h2>
|
||||
<video
|
||||
css={STYLES_VIDEO_BIG}
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
/>
|
||||
@ -590,9 +587,10 @@ export default class IndexPage extends React.Component {
|
||||
<h2 css={STYLES_H2}>Share presentations</h2>
|
||||
<video
|
||||
css={STYLES_VIDEO_BIG}
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
src="https://bafybeifrvssh7hata6kbhkq26zkmiw7ti66vvc3pc5aptapqmpafotsufm.ipfs.slate.textile.io/"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeia4bvim5wcvsqoqb27pkky6b6ocamzv3pbgltgso43tdz454bmjsu.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
/>
|
||||
</div>
|
||||
@ -615,8 +613,9 @@ export default class IndexPage extends React.Component {
|
||||
<div>
|
||||
<video
|
||||
css={STYLES_VIDEO_BIG}
|
||||
Autoplay="autoplay"
|
||||
Loop="loop"
|
||||
autoPlay
|
||||
loop
|
||||
muted
|
||||
src="https://bafybeidnaytqqghnwoduomvefwmnxz3kqllyl5xhyzc4azcl4zflscqcry.ipfs.slate.textile.io/"
|
||||
type="video/mp4"
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user