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

nits styling

Browse Source
This commit is contained in:
L 2022-07-14 20:05:06 -07:00
parent 9197b6bfa0
commit e5b7bf05c3
3 changed files with 49 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
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% {

39
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";
@ -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;
@ -168,6 +181,7 @@ const STYLES_MOBILEGUIDE = css`
display: block;
width: 100%;
height: auto;
margin: 20px 0 64px 0;
@keyframes jumper-fade-in {
0% {
@ -188,6 +202,7 @@ const STYLES_MOBILEGUIDE = css`
`;
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;
}
};

30
pages/index.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(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;
}