filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-09-11 22:07:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1130 from filecoin-project/@tarafanlin/landing

Browse Source 
@tarafanlin/landing
This commit is contained in:
Amine 2022-07-18 21:21:46 +01:00 committed by GitHub
commit 098362a230
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 61 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
common/constants.js
View File

@ -46,6 +46,7 @@ export const system = {
lime: "hsl(76, 61.7%, 45.1%)",
grass: "hsl(131, 41.0%, 46.5%)",
mint: "hsl(168, 52.8%, 51.0%)",
highlighter: "#E2FF59",
// .mint {
// --mint1: hsl(165, 80.0%, 98.8%);

2
components/core/WebsiteFooter.js
View File

@ -7,7 +7,7 @@ import { css } from "@emotion/react";
const STYLES_ROOT = css`
width: 100%;
margin: 0 auto;
background-color: ${Constants.semantic.bgLight};
background-color: ${Constants.semantic.bgGrayLight};
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
`;

4
components/core/WebsiteHeader.js
View File

@ -65,8 +65,8 @@ const STYLES_BUTTON_PRIMARY_SMALL = css`
${STYLES_BUTTON};
padding: 5px 16px 7px;
border-radius: 12px;
background-color: ${Constants.system.lime};
color: ${Constants.semantic.textWhite};
background-color: ${Constants.system.highlighter};
color: ${Constants.semantic.textBlack};
`;
const STYLES_IMG = css`

18
pages/get-slate.js
View File

@ -26,7 +26,7 @@ const STYLES_ROOT = css`
const STYLES_CONTAINER = css`
max-width: 700px;
margin: 0 auto;
padding: 24px 0 96px 0;
padding: min(2.5vw, 120px) 0 24px 0;
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: 480px;
@ -35,8 +35,8 @@ const STYLES_CONTAINER = css`
`;
const STYLES_IMG = css`
width: 100%;
margin-bottom: 40px;
width: 88%;
margin-bottom: 8px;
@keyframes hero-fade-in {
0% {
@ -57,10 +57,10 @@ const STYLES_HEADING = css`
flex-shrink: 0;
min-width: 50%;
max-width: 100%;
font-size: 88px;
line-height: 88px;
line-height: min(100px, 6vw);
font-size: min(100px, 6vw);
letter-spacing: -0.05em;
margin-bottom: 25px;
margin-bottom: 21px;
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: 64px;
@ -97,7 +97,7 @@ const STYLES_BODY = css`
font-size: 20px;
line-height: 28px;
letter-spacing: -0.015em;
margin-bottom: 32px;
margin-bottom: 20px;
@keyframes body-fade-in {
0% {
@ -165,8 +165,8 @@ const STYLES_BUTTON = css`
const STYLES_PRIMARY_BUTTON = css`
${STYLES_BUTTON}
background-color: ${Constants.system.lime};
color: ${Constants.semantic.textWhite};
background-color: ${Constants.system.highlighter};
color: ${Constants.semantic.textBlack};
`;
const STYLES_SECONDARY_BUTTON = css`

49
pages/guide/guide.js
View File

@ -4,6 +4,7 @@ import * as SVG from "~/common/svg";
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
import WebsiteHeader from "~/components/core/WebsiteHeader";
import { useRouter } from 'next/router'
import Link from "next/link";
import { css } from "@emotion/react";
@ -13,7 +14,7 @@ const STYLES_ROOT = css`
width: 100%;
height: 100%;
min-height: 100vh;
background-color: ${Constants.semantic.bgLight};
background-color: ${Constants.semantic.bgGrayLight};
color: ${Constants.semantic.textBlack};
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -23,7 +24,7 @@ const STYLES_ROOT = css`
const STYLES_CONTAINER = css`
max-width: 700px;
margin: 0 auto;
padding: 80px 0;
padding-top: min(2.6vw, 200px);
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: 480px;
@ -37,8 +38,8 @@ const STYLES_HEADING = css`
flex-shrink: 0;
min-width: 50%;
max-width: 100%;
font-size: 40px;
line-height: 40px;
line-height: min(30px, 3vw);
font-size: min(36px, 3.6vw);
letter-spacing: -0.035em;
margin-bottom: 20px;
@ -51,14 +52,14 @@ const STYLES_HEADING = css`
@keyframes heading-fade-in {
0% {
opacity: 0%;
transform: translateY(30%);
transform: translateY(50%);
}
100% {
opacity: 100%;
transform: translateY(0%);
}
}
animation: heading-fade-in 300ms ease-in-out;
animation: heading-fade-in 200ms ease-in-out;
`;
const STYLES_BODY = css`
@ -66,24 +67,24 @@ const STYLES_BODY = css`
font-size: 18px;
line-height: 28px;
letter-spacing: -0.015em;
margin-bottom: 16px;
min-height: 84px;
margin-bottom: min(0.3vw, 80px);
@keyframes body-fade-in {
0% {
opacity: 0%;
transform: translateY(30%);
transform: translateY(10%);
}
50% {
opacity: 0%;
transform: translateY(30%);
transform: translateY(10%);
}
100% {
opacity: 100%;
transform: translateY(0%);
}
}
animation: body-fade-in 500ms ease-in-out;
animation: body-fade-in 350ms ease-in-out;
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 17px;
@ -93,13 +94,25 @@ const STYLES_BODY = css`
`;
const STYLES_JUMPER = css`
@keyframes jumper-fade-in {
0% {
opacity: 95%;
}
100% {
opacity: 100%;
}
}
animation: jumper-fade-in 200ms ease-in-out;
}
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_FLEX = css`
margin-top: 48px;
margin-top: min(1.5vw, 80px);
width: 100%;
max-width: 700px;
display: flex;
@ -137,7 +150,7 @@ const STYLES_IMGGUIDE = css`
border-radius: 8px;
margin-left: -190px;
@keyframes jumper-fade-in {
@keyframes guide-fade-in {
0% {
opacity: 0%;
transform: translateY(5%);
@ -151,7 +164,7 @@ const STYLES_IMGGUIDE = css`
transform: translateY(0%);
}
}
animation: jumper-fade-in 700ms ease-in-out;
animation: guide-fade-in 500ms ease-in-out;
@media (max-width: ${Constants.sizes.mobile}px) {
width: 100%;
@ -168,8 +181,9 @@ const STYLES_MOBILEGUIDE = css`
display: block;
width: 100%;
height: auto;
margin: 20px 0 64px 0;
@keyframes jumper-fade-in {
@keyframes mobile-fade-in {
0% {
opacity: 0%;
transform: translateY(5%);
@ -183,11 +197,12 @@ const STYLES_MOBILEGUIDE = css`
transform: translateY(0%);
}
}
animation: jumper-fade-in 700ms ease-in-out;
animation: mobile-fade-in 700ms ease-in-out;
}
`;
export const useGuideKeyCommands = (next, prev) => {
const router = useRouter();
const handleKeyUp = (e) => {
const input = document.querySelectorAll("input");
for (let elem of input) {
@ -204,10 +219,10 @@ export const useGuideKeyCommands = (next, prev) => {
switch (e.key) {
case "ArrowRight":
if (next) window.location.replace(next);
if (next) router.replace(next);
break;
case "ArrowLeft":
if (prev) window.location.replace(prev);
if (prev) router.replace(prev);
break;
}
};

32
pages/index.js
View File

@ -13,7 +13,7 @@ const STYLES_ROOT = css`
width: 100%;
height: 100%;
min-height: calc(100vh - 61px);
background-color: ${Constants.semantic.bgLight};
background-color: ${Constants.semantic.bgGrayLight};
color: ${Constants.semantic.textBlack};
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -26,7 +26,7 @@ const STYLES_ROOT = css`
const STYLES_CONTAINER = css`
max-width: 700px;
margin: 0 auto;
padding: 24px 0 96px 0;
padding: min(0.2vw, 120px) 0 40px 0;
@media (max-width: ${Constants.sizes.mobile}px) {
max-width: 480px;
@ -35,8 +35,8 @@ const STYLES_CONTAINER = css`
`;
const STYLES_IMG = css`
width: 100%;
margin-bottom: 40px;
width: 92%;
margin-bottom: 24px;
@keyframes hero-fade-in {
0% {
@ -57,20 +57,20 @@ const STYLES_HEADING = css`
flex-shrink: 0;
min-width: 50%;
max-width: 100%;
font-size: 88px;
line-height: 88px;
line-height: min(100px, 6vw);
font-size: min(120px, 6vw);
letter-spacing: -0.05em;
margin-bottom: 25px;
margin-bottom: 21px;
@media (max-width: ${Constants.sizes.tablet}px) {
font-size: 64px;
line-height: 68px;
font-size: 60px;
line-height: 60px;
letter-spacing: -0.04em;
}
@media (max-width: ${Constants.sizes.mobile}px) {
font-size: 48px;
line-height: 52px;
line-height: 48px;
letter-spacing: -0.04em;
}
@ -96,7 +96,7 @@ const STYLES_BODY = css`
font-size: 20px;
line-height: 28px;
letter-spacing: -0.015em;
margin-bottom: 32px;
margin-bottom: 24px;
@keyframes body-fade-in {
0% {
@ -124,8 +124,8 @@ const STYLES_BODY = css`
const STYLES_CURSOR_BLINK = css`
display: inline-block;
background-color: ${Constants.semantic.textGray};
width: 32px;
height: 64px;
width: min(50px, 2.6vw);
height: min(88px, 4.5vw);
margin-left: 6px;
overflow: visible;
@ -145,12 +145,12 @@ const STYLES_CURSOR_BLINK = css`
-webkit-animation: blink-animation 1s steps(5, start) infinite;
@media (max-width: ${Constants.sizes.tablet}px) {
width: 28.5px;
height: 47px;
width: 25px;
height: 44px;
margin-left: 4px;
}
@media (max-width: ${Constants.sizes.mobile}px) {
width: 21px;
width: 20px;
height: 35px;
margin-left: 2px;
}

BIN
public/static/browser-tabs.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 835 KiB

After

Width:  |  Height:  |  Size: 885 KiB

BIN
public/static/new-tab.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 974 KiB

After

Width:  |  Height:  |  Size: 983 KiB

BIN
public/static/slate-jumper.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 586 KiB

After

Width:  |  Height:  |  Size: 598 KiB