mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
Merge pull request #1130 from filecoin-project/@tarafanlin/landing
@tarafanlin/landing
This commit is contained in:
commit
098362a230
@ -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%);
|
||||
|
@ -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;
|
||||
`;
|
||||
|
@ -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`
|
||||
|
@ -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`
|
||||
|
@ -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;
|
||||
}
|
||||
};
|
||||
|
@ -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;
|
||||
}
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 835 KiB After Width: | Height: | Size: 885 KiB |
Binary file not shown.
Before Width: | Height: | Size: 974 KiB After Width: | Height: | Size: 983 KiB |
Binary file not shown.
Before Width: | Height: | Size: 586 KiB After Width: | Height: | Size: 598 KiB |
Loading…
Reference in New Issue
Block a user