mirror of
https://github.com/filecoin-project/slate.git
synced 2024-12-24 01:23:08 +03:00
Merge pull request #1126 from filecoin-project/@tarafanlin/landing
landing page update
This commit is contained in:
Amine
GitHub
commit
9197b6bfa0
@ -33,14 +33,109 @@ export const system = {
|
||||
grayDark6: "#1C1D1E",
|
||||
black: "#00050A",
|
||||
|
||||
blue: "#0084FF",
|
||||
blue: "hsl(208, 100%, 47.3%)",
|
||||
green: "#34D159",
|
||||
yellow: "#FFD600",
|
||||
red: "#FF4530",
|
||||
purple: "#585CE6",
|
||||
teal: "#64C8FA",
|
||||
pink: "#FF375F",
|
||||
orange: "#FF9F00",
|
||||
orange: "hsl(24, 94.0%, 50.0%)",
|
||||
indigo: "hsl(226, 70.0%, 55.5%)",
|
||||
sky: "hsl(193, 77.9%, 53.9%)",
|
||||
lime: "hsl(76, 61.7%, 45.1%)",
|
||||
grass: "hsl(131, 41.0%, 46.5%)",
|
||||
mint: "hsl(168, 52.8%, 51.0%)",
|
||||
|
||||
// .mint {
|
||||
// --mint1: hsl(165, 80.0%, 98.8%);
|
||||
// --mint2: hsl(164, 88.2%, 96.7%);
|
||||
// --mint3: hsl(164, 76.6%, 93.3%);
|
||||
// --mint4: hsl(165, 68.8%, 89.5%);
|
||||
// --mint5: hsl(165, 60.6%, 84.5%);
|
||||
// --mint6: hsl(165, 53.5%, 76.9%);
|
||||
// --mint7: hsl(166, 50.7%, 66.1%);
|
||||
// --mint8: hsl(168, 52.8%, 51.0%);
|
||||
// --mint9: hsl(167, 65.0%, 66.0%);
|
||||
// --mint10: hsl(167, 59.3%, 63.1%);
|
||||
// --mint11: hsl(172, 72.0%, 28.5%);
|
||||
// --mint12: hsl(172, 70.0%, 12.0%);
|
||||
// }
|
||||
|
||||
// .orange {
|
||||
// --orange1: hsl(24, 70.0%, 99.0%);
|
||||
// --orange2: hsl(24, 83.3%, 97.6%);
|
||||
// --orange3: hsl(24, 100%, 95.3%);
|
||||
// --orange4: hsl(25, 100%, 92.2%);
|
||||
// --orange5: hsl(25, 100%, 88.2%);
|
||||
// --orange6: hsl(25, 100%, 82.8%);
|
||||
// --orange7: hsl(24, 100%, 75.3%);
|
||||
// --orange8: hsl(24, 94.5%, 64.3%);
|
||||
// --orange9: hsl(24, 94.0%, 50.0%);
|
||||
// --orange10: hsl(24, 100%, 46.5%);
|
||||
// --orange11: hsl(24, 100%, 37.0%);
|
||||
// --orange12: hsl(15, 60.0%, 17.0%);
|
||||
// }
|
||||
|
||||
// .indigo {
|
||||
// --indigo1: hsl(225, 60.0%, 99.4%);
|
||||
// --indigo2: hsl(223, 100%, 98.6%);
|
||||
// --indigo3: hsl(223, 98.4%, 97.1%);
|
||||
// --indigo4: hsl(223, 92.9%, 95.0%);
|
||||
// --indigo5: hsl(224, 87.1%, 92.0%);
|
||||
// --indigo6: hsl(224, 81.9%, 87.8%);
|
||||
// --indigo7: hsl(225, 77.4%, 82.1%);
|
||||
// --indigo8: hsl(226, 75.4%, 74.5%);
|
||||
// --indigo9: hsl(226, 70.0%, 55.5%);
|
||||
// --indigo10: hsl(226, 58.6%, 51.3%);
|
||||
// --indigo11: hsl(226, 55.0%, 45.0%);
|
||||
// --indigo12: hsl(226, 62.0%, 17.0%);
|
||||
// }
|
||||
|
||||
// .sky {
|
||||
// --sky1: hsl(193, 100%, 98.8%);
|
||||
// --sky2: hsl(193, 100%, 97.3%);
|
||||
// --sky3: hsl(193, 99.0%, 94.7%);
|
||||
// --sky4: hsl(193, 91.4%, 91.4%);
|
||||
// --sky5: hsl(194, 82.0%, 86.6%);
|
||||
// --sky6: hsl(194, 74.1%, 79.5%);
|
||||
// --sky7: hsl(194, 72.3%, 69.6%);
|
||||
// --sky8: hsl(193, 77.9%, 53.9%);
|
||||
// --sky9: hsl(193, 98.0%, 70.0%);
|
||||
// --sky10: hsl(193, 87.0%, 66.5%);
|
||||
// --sky11: hsl(195, 100%, 31.5%);
|
||||
// --sky12: hsl(195, 100%, 13.0%);
|
||||
// }
|
||||
|
||||
// .lime {
|
||||
// --lime1: hsl(85, 50.0%, 98.7%);
|
||||
// --lime2: hsl(85, 66.7%, 96.5%);
|
||||
// --lime3: hsl(85, 76.0%, 92.3%);
|
||||
// --lime4: hsl(84, 75.3%, 87.5%);
|
||||
// --lime5: hsl(84, 71.5%, 81.9%);
|
||||
// --lime6: hsl(82, 65.0%, 74.6%);
|
||||
// --lime7: hsl(79, 53.2%, 61.8%);
|
||||
// --lime8: hsl(76, 61.7%, 45.1%);
|
||||
// --lime9: hsl(81, 67.0%, 50.0%);
|
||||
// --lime10: hsl(80, 68.3%, 46.9%);
|
||||
// --lime11: hsl(75, 80.0%, 26.0%);
|
||||
// --lime12: hsl(78, 70.0%, 11.5%);
|
||||
// }
|
||||
|
||||
// .grass {
|
||||
// --grass1: hsl(116, 50.0%, 98.9%);
|
||||
// --grass2: hsl(120, 60.0%, 97.1%);
|
||||
// --grass3: hsl(120, 53.6%, 94.8%);
|
||||
// --grass4: hsl(121, 47.5%, 91.4%);
|
||||
// --grass5: hsl(122, 42.6%, 86.5%);
|
||||
// --grass6: hsl(124, 39.0%, 79.7%);
|
||||
// --grass7: hsl(126, 37.1%, 70.2%);
|
||||
// --grass8: hsl(131, 38.1%, 56.3%);
|
||||
// --grass9: hsl(131, 41.0%, 46.5%);
|
||||
// --grass10: hsl(132, 43.1%, 42.2%);
|
||||
// --grass11: hsl(133, 50.0%, 32.5%);
|
||||
// --grass12: hsl(130, 30.0%, 14.9%);
|
||||
// }
|
||||
|
||||
blueLight6: "#D5EBFF",
|
||||
blueLight5: "#AAD7FF",
|
||||
|
||||
@ -25,6 +25,8 @@ const TEXT = css`
|
||||
overflow-wrap: break-word;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
a {
|
||||
${LINK}
|
||||
|
||||
1328
common/svg.js
1328
common/svg.js
File diff suppressed because one or more lines are too long
@ -5,18 +5,18 @@ import * as SVG from "~/common/svg";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
font-family: ${Constants.font.text};
|
||||
font-family: ${Constants.font.medium};
|
||||
color: ${Constants.semantic.textGray};
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
@ -26,13 +26,13 @@ const STYLES_CONTAINER = css`
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 16px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.text};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
@ -55,7 +55,7 @@ const STYLES_FLEX_BLOCK = css`
|
||||
width: 33.3%;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
padding: 4px 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Link from "next/link";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
position: -webkit-sticky;
|
||||
@ -10,8 +12,8 @@ const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: ${Constants.zindex.header};
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
@ -23,30 +25,29 @@ const STYLES_CONTAINER = css`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font: ${Constants.font.medium};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.01px;
|
||||
text-align: left;
|
||||
padding: 16px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LOGO = css`
|
||||
flex-shrink: 0;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
cursor: poitner;
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
cursor: poitner;
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
@ -54,22 +55,18 @@ const STYLES_BUTTON = css`
|
||||
box-shadow: ${Constants.shadow.lightSmall};
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.006px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY = css`
|
||||
${STYLES_BUTTON};
|
||||
color: ${Constants.semantic.textWhite};
|
||||
background-color: ${Constants.system.blue};
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY_SMALL = css`
|
||||
${STYLES_BUTTON_PRIMARY};
|
||||
padding: 1px 12px 3px;
|
||||
border-radius: 8px;
|
||||
${STYLES_BUTTON};
|
||||
padding: 5px 16px 7px;
|
||||
border-radius: 12px;
|
||||
background-color: ${Constants.system.lime};
|
||||
color: ${Constants.semantic.textWhite};
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
@ -82,16 +79,14 @@ const WebsiteHeader = (props) => {
|
||||
return (
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_LOGO}>
|
||||
<a href="../">
|
||||
<Link href="../">
|
||||
<a css={STYLES_LOGO}>
|
||||
<img css={STYLES_IMG} src={slate} alt="Slate volumetric logo" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a css={STYLES_BUTTON_PRIMARY_SMALL} href="../_/auth">
|
||||
Install Slate for Chrome
|
||||
</a>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="../_/auth">
|
||||
<a css={STYLES_BUTTON_PRIMARY_SMALL}>Get started</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -14,20 +14,12 @@ const JUMPER_HEIGHT = 432;
|
||||
* -----------------------------------------------------------------------------------------------*/
|
||||
|
||||
const STYLES_JUMPER_ROOT = (theme) => css`
|
||||
${Styles.VERTICAL_CONTAINER};
|
||||
|
||||
position: relative;
|
||||
width: ${JUMPER_WIDTH}px;
|
||||
height: ${JUMPER_HEIGHT}px;
|
||||
z-index: 23423423432;
|
||||
|
||||
border: 1px solid ${theme.semantic.borderGrayLight};
|
||||
box-shadow: ${theme.shadow.darkLarge};
|
||||
//NOTE(amine): when changing border-radius, change it also in STYLES_MARBLE_WRAPPER and STYLES_APP_MODAL_BACKGROUND
|
||||
background-color: ${theme.semantic.bgBlurLight6};
|
||||
border-radius: 16px;
|
||||
//NOTE(amine): when changing border-radius, change it also in STYLES_MARBLE_WRAPPER and STYLES_APP_MODAL_BACKGROUND
|
||||
overflow: hidden;
|
||||
|
||||
background-color: ${theme.semantic.white};
|
||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||
-webkit-backdrop-filter: blur(75px);
|
||||
backdrop-filter: blur(75px);
|
||||
@ -35,10 +27,35 @@ const STYLES_JUMPER_ROOT = (theme) => css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_JUMPER_ROOT_WRAPPER = (theme) => css`
|
||||
${Styles.VERTICAL_CONTAINER};
|
||||
${STYLES_JUMPER_ROOT}
|
||||
-moz-box-shadow: ${theme.shadow.lightMedium};
|
||||
-webkit-box-shadow: ${theme.shadow.lightMedium};
|
||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||
background-image: url("../public/static/bg-jumper.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
border: 1px solid ${theme.semantic.borderGrayLight};
|
||||
border-radius: 16px;
|
||||
//NOTE(amine): when changing border-radius, change it also in STYLES_MARBLE_WRAPPER and STYLES_APP_MODAL_BACKGROUND
|
||||
overflow: hidden;
|
||||
width: ${JUMPER_WIDTH}px;
|
||||
height: ${JUMPER_HEIGHT}px;
|
||||
position: relative;
|
||||
z-index: 23423423432;
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
height: 16px;
|
||||
`;
|
||||
|
||||
function Root({ children, ...props }) {
|
||||
return (
|
||||
<div css={STYLES_JUMPER_ROOT} {...props}>
|
||||
{children}
|
||||
<div css={STYLES_JUMPER_ROOT_WRAPPER} {...props}>
|
||||
<div css={STYLES_JUMPER_ROOT}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -49,16 +66,23 @@ function Root({ children, ...props }) {
|
||||
|
||||
const STYLES_JUMPER_HEADER = css`
|
||||
${Styles.HORIZONTAL_CONTAINER_CENTERED};
|
||||
padding: 12px 16px;
|
||||
padding: 12px 20px;
|
||||
`;
|
||||
|
||||
function Header({ ...props }) {
|
||||
const slate = "../public/static/Slate_volumetric.png";
|
||||
return (
|
||||
<div css={STYLES_JUMPER_HEADER} {...props}>
|
||||
<SVG.Link width={20} height={20} />
|
||||
<System.H3 color="textGrayLight" style={{ marginLeft: 12, marginTop: 3, marginBottom: 1 }}>
|
||||
Search by keywords or #tags
|
||||
</System.H3>
|
||||
<img css={STYLES_IMG} src={slate} alt="Slate volumetric logo" />
|
||||
{!!props.search ? (
|
||||
<System.H3 color="textBlack" style={{ marginLeft: 12, marginTop: 3, marginBottom: 1 }}>
|
||||
{props.search}
|
||||
</System.H3>
|
||||
) : (
|
||||
<System.H3 color="textGrayLight" style={{ marginLeft: 12, marginTop: 3, marginBottom: 1 }}>
|
||||
Search by keywords or #tags
|
||||
</System.H3>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -68,7 +92,7 @@ function Header({ ...props }) {
|
||||
* -----------------------------------------------------------------------------------------------*/
|
||||
|
||||
const STYLES_JUMPER_BODY = css`
|
||||
padding: 12px 8px;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
@ -106,17 +130,48 @@ const STYLES_COLOR_SYSTEM_GREEN = (theme) => css`
|
||||
color: ${theme.system.green};
|
||||
`;
|
||||
|
||||
function Object({ title, isSelected, isSaved, Favicon, ...props }) {
|
||||
const STYLES_TAG = (theme) => css`
|
||||
box-sizing: border-box;
|
||||
background: ${theme.semantic.bgWhite};
|
||||
border: 1px solid ${theme.semantic.borderGrayLight};
|
||||
box-shadow: 0px 4px 16px rgba(174, 176, 178, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
padding: 2px 8px;
|
||||
color: ${theme.semantic.textBlack};
|
||||
font-family: ${theme.font.medium};
|
||||
margin-left: 8px;
|
||||
`;
|
||||
|
||||
function Object({ title, isSelected, isSaved, Favicon, tag, ...props }) {
|
||||
return (
|
||||
<div css={[STYLES_JUMPER_OBJECT, isSelected && STYLES_JUMPER_OBJECT_IS_SELECTED]} {...props}>
|
||||
{isSelected ? <div css={STYLES_JUMPER_OBJECT_CHECKBOX} /> : <Favicon />}
|
||||
<System.H5
|
||||
color="textBlack"
|
||||
nbrOflines={1}
|
||||
style={{ marginLeft: 12, marginTop: 3, marginBottom: 1, maxWidth: 438 }}
|
||||
>
|
||||
{title}
|
||||
</System.H5>
|
||||
{isSelected ? (
|
||||
<div css={STYLES_JUMPER_OBJECT_CHECKBOX} />
|
||||
) : (
|
||||
<Favicon style={{ height: 16, width: 16 }} />
|
||||
)}
|
||||
{!!tag ? (
|
||||
<React.Fragment>
|
||||
<div css={STYLES_TAG}>{tag}</div>
|
||||
<System.H5
|
||||
color="textBlack"
|
||||
nbrOflines={1}
|
||||
style={{ marginLeft: 4, marginTop: 3, marginBottom: 1, maxWidth: 280 }}
|
||||
>
|
||||
{title}
|
||||
</System.H5>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<System.H5
|
||||
color="textBlack"
|
||||
nbrOflines={1}
|
||||
style={{ marginLeft: 12, marginTop: 3, marginBottom: 1, maxWidth: 438 }}
|
||||
>
|
||||
{title}
|
||||
</System.H5>
|
||||
)}
|
||||
<div css={Styles.HORIZONTAL_CONTAINER} style={{ marginLeft: "auto" }}>
|
||||
{isSelected ? (
|
||||
<>
|
||||
@ -139,7 +194,7 @@ function Object({ title, isSelected, isSaved, Favicon, ...props }) {
|
||||
|
||||
{isSaved ? (
|
||||
<div style={{ margin: 2, marginLeft: 8 }}>
|
||||
<SVG.CheckCircle css={STYLES_COLOR_SYSTEM_GREEN} width={16} />{" "}
|
||||
<SVG.Saved css={STYLES_COLOR_SYSTEM_GREEN} width={16} />{" "}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
@ -153,22 +208,40 @@ function Object({ title, isSelected, isSaved, Favicon, ...props }) {
|
||||
|
||||
const STYLES_JUMPER_TOP_PANEL = (theme) => css`
|
||||
${Styles.HORIZONTAL_CONTAINER};
|
||||
width: ${JUMPER_WIDTH}px;
|
||||
background-color: ${theme.semantic.bgBlurLight6};
|
||||
padding: 8px;
|
||||
border-radius: 16px;
|
||||
background-color: white;
|
||||
border: 1px solid ${theme.semantic.borderGrayLight};
|
||||
box-shadow: ${theme.shadow.darkLarge};
|
||||
overflow: hidden;
|
||||
|
||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||
-webkit-backdrop-filter: blur(75px);
|
||||
backdrop-filter: blur(75px);
|
||||
background-color: ${theme.semantic.bgBlurWhite};
|
||||
background-color: ${theme.semantic.bgBlurLight6};
|
||||
}
|
||||
`;
|
||||
|
||||
const TopPanel = ({ children }) => {
|
||||
return <div css={STYLES_JUMPER_TOP_PANEL}>{children}</div>;
|
||||
const STYLES_JUMPER_TOP_PANEL_WRAPPER = (theme) => css`
|
||||
${STYLES_JUMPER_TOP_PANEL}
|
||||
-moz-box-shadow:: ${theme.shadow.lightMedium};
|
||||
-webkit-box-shadow: ${theme.shadow.lightMedium};
|
||||
@supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
|
||||
background-image: url("../public/static/bg-space-switcher.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
border: 1px solid ${theme.semantic.borderGrayLight};
|
||||
width: ${JUMPER_WIDTH}px;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const TopPanel = ({ children, ...props }) => {
|
||||
return (
|
||||
<div css={STYLES_JUMPER_TOP_PANEL_WRAPPER} {...props}>
|
||||
<div css={STYLES_JUMPER_TOP_PANEL}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/* -------------------------------------------------------------------------------------------------
|
||||
|
||||
@ -15,23 +15,25 @@ import { css } from "@emotion/react";
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 52px;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 113px);
|
||||
min-height: calc(100vh - 61px);
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
min-height: calc(100vh - 112px);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 0;
|
||||
padding: 24px 0 96px 0;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
padding: 16px 16px 32px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -101,8 +103,8 @@ export default function AboutUsPage() {
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<div css={STYLES_HEADING1}>About Us</div>
|
||||
<div css={STYLES_BODY}>
|
||||
|
||||
@ -15,23 +15,25 @@ import { css } from "@emotion/react";
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 52px;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 113px);
|
||||
min-height: calc(100vh - 61px);
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
min-height: calc(100vh - 112px);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 0;
|
||||
padding: 24px 0 96px 0;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
padding: 16px 16px 32px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -90,8 +92,8 @@ export default function FAQPage() {
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<div css={STYLES_HEADING1}>FAQs</div>
|
||||
<div css={STYLES_HEADING2}>What is a personal search engine?</div>
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVGLogo from "~/common/logo";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as System from "~/components/system";
|
||||
import * as Validations from "~/common/validations";
|
||||
import * as Strings from "~/common/strings";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
@ -16,26 +12,43 @@ import { useGuideKeyCommands } from "./guide/guide";
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
min-height: calc(100vh - 61px);
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
min-height: calc(100vh - 112px);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 64px 0;
|
||||
padding: 24px 0 96px 0;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
padding: 16px 16px 24px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@keyframes hero-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: hero-fade-in 300ms ease-in-out;
|
||||
`;
|
||||
|
||||
const STYLES_HEADING = css`
|
||||
@ -59,61 +72,54 @@ const STYLES_HEADING = css`
|
||||
font-size: 48px;
|
||||
line-height: 52px;
|
||||
letter-spacing: -0.04em;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
@keyframes heading-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(25%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(25%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: heading-fade-in 400ms ease-in-out;
|
||||
`;
|
||||
|
||||
const STYLES_BODY = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 40px;
|
||||
`;
|
||||
letter-spacing: -0.015em;
|
||||
margin-bottom: 32px;
|
||||
|
||||
const STYLES_CURSOR_BLINK = css`
|
||||
display: inline-block;
|
||||
background-color: ${Constants.semantic.textGray};
|
||||
width: 32px;
|
||||
height: 61px;
|
||||
margin-left: 6px;
|
||||
overflow: visible;
|
||||
animation: blink-animation 1s steps(5, start) infinite;
|
||||
-webkit-animation: blink-animation 1s steps(5, start) infinite;
|
||||
@keyframes blink-animation {
|
||||
to {
|
||||
visibility: hidden;
|
||||
@keyframes body-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes blink-animation {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 28.5px;
|
||||
height: 47px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 21px;
|
||||
height: 35px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
`;
|
||||
animation: body-fade-in 600ms ease-in-out;
|
||||
|
||||
const STYLES_CURSOR_BLINK_SMALL = css`
|
||||
${STYLES_CURSOR_BLINK}
|
||||
width: 25px;
|
||||
height: 41px;
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 21px;
|
||||
height: 35px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 17.5px;
|
||||
height: 29px;
|
||||
margin-left: 2px;
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -128,34 +134,76 @@ const STYLES_BUTTON = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.015em;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background-color: ${Constants.system.blue};
|
||||
margin-right: 16px;
|
||||
margin-bottom: 16px;
|
||||
@keyframes button-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: button-fade-in 700ms ease-in-out;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_PRIMARY_BUTTON = css`
|
||||
${STYLES_BUTTON}
|
||||
background-color: ${Constants.system.lime};
|
||||
color: ${Constants.semantic.textWhite};
|
||||
`;
|
||||
|
||||
const STYLES_SECONDARY_BUTTON = css`
|
||||
${STYLES_BUTTON}
|
||||
background-color: none;
|
||||
border: 2px solid ${Constants.semantic.borderGray};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
`;
|
||||
|
||||
export default function InstallPage() {
|
||||
const title = `Install Slate for Chrome - Slate`;
|
||||
const description = "Install Slate from Chrome web store";
|
||||
const url = "https://slate.host/get-slate";
|
||||
const image =
|
||||
"https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4";
|
||||
const slate = "../public/static/Slate_volumetric.png";
|
||||
const next =
|
||||
"https://chrome.google.com/webstore/detail/slate-web-extension/gloembacbehhbfbkcfjmloikeeaebnoc?hl=en-US";
|
||||
const next = "/_/auth";
|
||||
const prev = "../guide/new-tab";
|
||||
useGuideKeyCommands(next, prev);
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<img css={STYLES_IMG} src="../public/static/slate-jumper.png" />
|
||||
<div css={STYLES_HEADING}>Get started with Slate for Free</div>
|
||||
<div css={STYLES_BODY}>Slate is free to use, with monthly premium plan coming soom.</div>
|
||||
<a css={STYLES_BUTTON} href="../get-started">
|
||||
<SVG.RightArrow height={20} width={20} style={{ marginRight: 8 }} />
|
||||
Get Slate from Chrome Store{" "}
|
||||
<div css={STYLES_HEADING}>
|
||||
Get started — <br />
|
||||
it’s free.
|
||||
</div>
|
||||
<div css={STYLES_BODY}>
|
||||
Slate is currently free to use, we’ll add premium features later on for you to use.
|
||||
</div>
|
||||
<a css={STYLES_PRIMARY_BUTTON} href="/_/auth">
|
||||
Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
||||
</a>
|
||||
<a css={STYLES_SECONDARY_BUTTON} href="../get-started">
|
||||
Get Slate from Chrome store
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,58 +7,40 @@ import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const VIEWS_ACTIONS = [
|
||||
{ label: "Current Window" },
|
||||
{ label: "All Open Tabs" },
|
||||
{ label: "Recent" },
|
||||
];
|
||||
|
||||
const CUSTOM_VIEWS_ACTIONS = [
|
||||
{ label: "Twitter", Favicon: SVG.TwitterFavicon },
|
||||
{ label: "Youtube", Favicon: SVG.YoutubeFavicon },
|
||||
];
|
||||
const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
|
||||
|
||||
const OBJECTS = [
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
},
|
||||
{
|
||||
title: "Paul Prudence on Twitter: Computers and Automation [August-12-2022]",
|
||||
isSelected: true,
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
title: "Fitzcarraldo 1982 Werner Herzog Klaus Kinski Full Movie HD",
|
||||
Favicon: SVG.YoutubeFavicon,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
title: "Amazon.com: Whole Foods Market",
|
||||
Favicon: SVG.AmazonFavicon,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
title: "NASA Is Working With Startups to Harvest the Moon’s Resources",
|
||||
Favicon: SVG.WSJFavicon,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
title: "SyntheticEvent - React",
|
||||
Favicon: SVG.ReactFavicon,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
title: "slate-engineering/slate-web-extension at @aminejv/history",
|
||||
Favicon: SVG.GithubFavicon,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
title: "Verticle ⋅ Mount Kimbie",
|
||||
Favicon: SVG.SpotifyFavicon,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
title: "tokyo travel restrictions 2022 - Google Search",
|
||||
Favicon: SVG.GoogleFavicon,
|
||||
},
|
||||
];
|
||||
|
||||
@ -69,35 +51,21 @@ export default function BrowserControlGuidePage() {
|
||||
description="Your personal search engine"
|
||||
url="https://slate.host/guide/browser-control"
|
||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||
heading="Organize your internet browsing"
|
||||
body="It connects with your browser so you can easily see recent sites, all your open tabs, and everything in your current window at a glance."
|
||||
heading="Built for your browser"
|
||||
body="Our Chrome extension gives you seamless control of your tabs with powerful tools to help you manage and keep track of things."
|
||||
next="save"
|
||||
prev="../"
|
||||
jumper={
|
||||
<div>
|
||||
<React.Fragment>
|
||||
<JumperPrototype.TopPanel>
|
||||
{VIEWS_ACTIONS.map((action) => (
|
||||
<JumperPrototype.ViewAction key={action.label}>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.Divider
|
||||
height="none"
|
||||
width="1px"
|
||||
style={{ margin: "0px 4px", flexShrink: 0 }}
|
||||
/>
|
||||
{CUSTOM_VIEWS_ACTIONS.map((action, i) => (
|
||||
<JumperPrototype.ViewAction
|
||||
isSelected={i === 0}
|
||||
key={action.label}
|
||||
Favicon={action.Favicon}
|
||||
>
|
||||
{VIEWS_ACTIONS.map((action, i) => (
|
||||
<JumperPrototype.ViewAction isSelected={i === 0} key={action.label}>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
||||
</JumperPrototype.TopPanel>
|
||||
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
||||
<JumperPrototype.Root style={{ marginTop: 16, boxShadow: "none", opacity: 0.5 }}>
|
||||
<JumperPrototype.Header />
|
||||
<JumperPrototype.Divider />
|
||||
<JumperPrototype.Body>
|
||||
@ -112,8 +80,9 @@ export default function BrowserControlGuidePage() {
|
||||
))}
|
||||
</JumperPrototype.Body>
|
||||
</JumperPrototype.Root>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
}
|
||||
mobileguide="../public/static/browser-control.png"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,64 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
|
||||
|
||||
const CUSTOM_VIEWS_ACTIONS = [{ label: "Files" }];
|
||||
|
||||
const OBJECTS = [
|
||||
{
|
||||
title: "Alexander, C., Notes on the Synthesis of Form",
|
||||
Favicon: SVG.Book,
|
||||
isSaved: true,
|
||||
tag: "computer-architecture",
|
||||
},
|
||||
{
|
||||
title: "Graphical database interface",
|
||||
Favicon: SVG.Image,
|
||||
isSaved: true,
|
||||
},
|
||||
{
|
||||
title: "Landscape in the Mist",
|
||||
Favicon: SVG.Video,
|
||||
isSaved: true,
|
||||
tag: "theo-angelopoulos",
|
||||
},
|
||||
{
|
||||
title: "Shannon, C., “A Theory of Communications”",
|
||||
Favicon: SVG.Document,
|
||||
isSaved: true,
|
||||
tag: "computer-architecture",
|
||||
},
|
||||
{
|
||||
title: "Retro computer fonts",
|
||||
Favicon: SVG.TextDocument,
|
||||
isSaved: true,
|
||||
},
|
||||
{
|
||||
title: "Prime number ASMR",
|
||||
Favicon: SVG.Sound,
|
||||
isSaved: true,
|
||||
},
|
||||
{
|
||||
title: "Hesse, H., Demian",
|
||||
Favicon: SVG.Book,
|
||||
isSaved: true,
|
||||
tag: "reading",
|
||||
},
|
||||
{
|
||||
title: "Pask, G., “The Architectural Relevance of Cybernetics”",
|
||||
Favicon: SVG.TextDocument,
|
||||
isSaved: true,
|
||||
tag: "computer-architecture",
|
||||
},
|
||||
];
|
||||
|
||||
export default function FileGuidePage() {
|
||||
return (
|
||||
<Guide
|
||||
@ -12,10 +66,53 @@ export default function FileGuidePage() {
|
||||
description="Your personal search engine"
|
||||
url="https://slate.host/guide/file"
|
||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||
heading="Files and links in one place"
|
||||
body="In addition to links, Slate includes integrated storage that allows you to upload files and clip things from the web."
|
||||
next="search"
|
||||
prev="space"
|
||||
heading="Integrated storage for your files"
|
||||
body="Save text, images, and files from the web or upload them directly to Slate to create your personal archive."
|
||||
next="space"
|
||||
prev="save"
|
||||
jumper={
|
||||
<div>
|
||||
<JumperPrototype.TopPanel>
|
||||
{VIEWS_ACTIONS.map((action, i) => (
|
||||
<JumperPrototype.ViewAction key={action.label}>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.Divider
|
||||
height="none"
|
||||
width="1px"
|
||||
style={{ margin: "0px 4px", flexShrink: 0 }}
|
||||
/>
|
||||
{CUSTOM_VIEWS_ACTIONS.map((action, i) => (
|
||||
<JumperPrototype.ViewAction
|
||||
isSelected={i === 0}
|
||||
key={action.label}
|
||||
Favicon={action.Favicon}
|
||||
>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
||||
</JumperPrototype.TopPanel>
|
||||
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
||||
<JumperPrototype.Header />
|
||||
<JumperPrototype.Divider />
|
||||
<JumperPrototype.Body>
|
||||
{OBJECTS.map((object) => (
|
||||
<JumperPrototype.Object
|
||||
key={object.title}
|
||||
title={object.title}
|
||||
Favicon={object.Favicon}
|
||||
isSelected={object.isSelected}
|
||||
isSaved={object.isSaved}
|
||||
tag={object.tag}
|
||||
/>
|
||||
))}
|
||||
</JumperPrototype.Body>
|
||||
</JumperPrototype.Root>
|
||||
</div>
|
||||
}
|
||||
mobileguide="../public/static/file.png"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import * as SVG from "~/common/svg";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||
import Link from "next/link";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
@ -13,13 +12,12 @@ import { useEventListener } from "~/common/hooks";
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 52px;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 113px);
|
||||
min-height: 100vh;
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
@ -29,7 +27,7 @@ const STYLES_CONTAINER = css`
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -42,11 +40,12 @@ const STYLES_HEADING = css`
|
||||
font-size: 40px;
|
||||
line-height: 40px;
|
||||
letter-spacing: -0.035em;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@keyframes heading-fade-in {
|
||||
@ -63,11 +62,12 @@ const STYLES_HEADING = css`
|
||||
`;
|
||||
|
||||
const STYLES_BODY = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 49px;
|
||||
letter-spacing: -0.015em;
|
||||
margin-bottom: 16px;
|
||||
min-height: 84px;
|
||||
|
||||
@keyframes body-fade-in {
|
||||
0% {
|
||||
@ -84,29 +84,22 @@ const STYLES_BODY = css`
|
||||
}
|
||||
}
|
||||
animation: body-fade-in 500ms ease-in-out;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 17px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_JUMPER = css`
|
||||
@keyframes jumper-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
}
|
||||
animation: jumper-fade-in 700ms ease-in-out;
|
||||
`;
|
||||
|
||||
const STYLES_FLEX = css`
|
||||
position: absolute;
|
||||
bottom: 48px;
|
||||
margin-top: 48px;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
display: flex;
|
||||
@ -114,7 +107,7 @@ const STYLES_FLEX = css`
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
bottom: 96px;
|
||||
max-width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -138,6 +131,62 @@ const STYLES_BUTTON = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMGGUIDE = css`
|
||||
display: block;
|
||||
height: 498px;
|
||||
border-radius: 8px;
|
||||
margin-left: -190px;
|
||||
|
||||
@keyframes jumper-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: jumper-fade-in 700ms ease-in-out;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-left: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_MOBILEGUIDE = css`
|
||||
display: none;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
||||
@keyframes jumper-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: jumper-fade-in 700ms ease-in-out;
|
||||
}
|
||||
`;
|
||||
|
||||
export const useGuideKeyCommands = (next, prev) => {
|
||||
const handleKeyUp = (e) => {
|
||||
const input = document.querySelectorAll("input");
|
||||
@ -165,28 +214,38 @@ export const useGuideKeyCommands = (next, prev) => {
|
||||
useEventListener({ type: "keyup", handler: handleKeyUp });
|
||||
};
|
||||
|
||||
export default function Guide(props) {
|
||||
useGuideKeyCommands(props.next, props.prev);
|
||||
export default function Guide({
|
||||
title,
|
||||
description,
|
||||
url,
|
||||
image,
|
||||
heading,
|
||||
body,
|
||||
jumper,
|
||||
imageguide,
|
||||
mobileguide,
|
||||
prev,
|
||||
next,
|
||||
...props
|
||||
}) {
|
||||
useGuideKeyCommands(next, prev);
|
||||
return (
|
||||
<WebsitePrototypeWrapper
|
||||
title={props.title}
|
||||
description={props.description}
|
||||
url={props.url}
|
||||
image={props.image}
|
||||
>
|
||||
<WebsiteHeader />
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<div css={STYLES_HEADING}>{props.heading}</div>
|
||||
<div css={STYLES_BODY}>{props.body}</div>
|
||||
<div css={STYLES_JUMPER}>{props.jumper}</div>
|
||||
<div css={STYLES_HEADING}>{heading}</div>
|
||||
<div css={STYLES_BODY}>{body}</div>
|
||||
{jumper && <div css={STYLES_JUMPER}>{jumper}</div>}
|
||||
{imageguide && <img css={STYLES_IMGGUIDE} src={imageguide} />}
|
||||
{mobileguide && <img css={STYLES_MOBILEGUIDE} src={mobileguide} />}
|
||||
<div css={STYLES_FLEX}>
|
||||
<Link href={props.prev}>
|
||||
<a css={STYLES_BUTTON} style={{ marginRight: `12px` }}>
|
||||
<Link href={prev}>
|
||||
<a css={STYLES_BUTTON} style={{ marginRight: `16px` }}>
|
||||
<SVG.LeftArrow height={16} width={16} />
|
||||
</a>
|
||||
</Link>
|
||||
<Link href={props.next}>
|
||||
<Link href={next}>
|
||||
<a css={STYLES_BUTTON}>
|
||||
<SVG.RightArrow height={16} width={16} />
|
||||
</a>
|
||||
@ -194,7 +253,6 @@ export default function Guide(props) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WebsiteFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
@ -13,10 +13,11 @@ export default function NewTabGuidePage() {
|
||||
description="Your personal search engine"
|
||||
url="https://slate.host/guide/new-tab"
|
||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||
heading="Slate new tab"
|
||||
heading="Refresh your memory with every tab"
|
||||
body="You can even use Slate as your new tab experience to refresh your memory as you browse."
|
||||
next="/get-slate"
|
||||
prev="search"
|
||||
imageguide="../public/static/new-tab.png"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,58 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
|
||||
|
||||
const OBJECTS = [
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
tag: "architecture",
|
||||
},
|
||||
{
|
||||
title: "Fitzcarraldo 1982 Werner Herzog Klaus Kinski Full Movie HD",
|
||||
Favicon: SVG.YoutubeFavicon,
|
||||
isSelected: true,
|
||||
},
|
||||
{
|
||||
title: "Amazon.com: Whole Foods Market",
|
||||
Favicon: SVG.AmazonFavicon,
|
||||
},
|
||||
{
|
||||
title: "NASA Is Working With Startups to Harvest the Moon’s Resources",
|
||||
Favicon: SVG.WSJFavicon,
|
||||
},
|
||||
{
|
||||
title: "SyntheticEvent - React",
|
||||
Favicon: SVG.ReactFavicon,
|
||||
isSaved: true,
|
||||
tag: "code",
|
||||
},
|
||||
{
|
||||
title: "slate-engineering/slate-web-extension at @aminejv/history",
|
||||
Favicon: SVG.GithubFavicon,
|
||||
isSaved: true,
|
||||
tag: "slate",
|
||||
},
|
||||
{
|
||||
title: "Verticle ⋅ Mount Kimbie",
|
||||
Favicon: SVG.SpotifyFavicon,
|
||||
isSaved: true,
|
||||
tag: "work-music",
|
||||
},
|
||||
{
|
||||
title: "tokyo travel restrictions 2022 - Google Search",
|
||||
Favicon: SVG.GoogleFavicon,
|
||||
},
|
||||
];
|
||||
|
||||
export default function SaveGuidePage() {
|
||||
return (
|
||||
<Guide
|
||||
@ -12,10 +60,39 @@ export default function SaveGuidePage() {
|
||||
description="Your personal search engine"
|
||||
url="https://slate.host/guide/save"
|
||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||
heading="Quick save"
|
||||
body="You can easily save any webpage using a keyboard shortcut or through the app."
|
||||
next="tag"
|
||||
heading="Always at your fingertips"
|
||||
body="Save links, take notes, and add tags with keyboard shortcuts to capture things on the fly."
|
||||
next="file"
|
||||
prev="browser-control"
|
||||
jumper={
|
||||
<div>
|
||||
<JumperPrototype.TopPanel style={{ boxShadow: "none", opacity: "0.5" }}>
|
||||
{VIEWS_ACTIONS.map((action, i) => (
|
||||
<JumperPrototype.ViewAction isSelected={i === 0} key={action.label}>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
||||
</JumperPrototype.TopPanel>
|
||||
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
||||
<JumperPrototype.Header />
|
||||
<JumperPrototype.Divider />
|
||||
<JumperPrototype.Body>
|
||||
{OBJECTS.map((object) => (
|
||||
<JumperPrototype.Object
|
||||
key={object.title}
|
||||
title={object.title}
|
||||
Favicon={object.Favicon}
|
||||
isSelected={object.isSelected}
|
||||
isSaved={object.isSaved}
|
||||
tag={object.tag}
|
||||
/>
|
||||
))}
|
||||
</JumperPrototype.Body>
|
||||
</JumperPrototype.Root>
|
||||
</div>
|
||||
}
|
||||
mobileguide="../public/static/save.png"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,73 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
|
||||
|
||||
const CUSTOM_VIEWS_ACTIONS = [
|
||||
{ label: "Files" },
|
||||
{ label: "Twitter", Favicon: SVG.TwitterFavicon },
|
||||
{ label: "Reading", Favicon: SVG.Hash },
|
||||
];
|
||||
|
||||
const OBJECTS = [
|
||||
{
|
||||
title: "Nicholas Negroponte Architecture Machine",
|
||||
Favicon: SVG.InternetArchiveFavicon,
|
||||
},
|
||||
{
|
||||
title: "Alexander, C., Notes on the Synthesis of Form",
|
||||
Favicon: SVG.Book,
|
||||
isSaved: true,
|
||||
tag: "computer-architecture",
|
||||
},
|
||||
{
|
||||
title: "Von Neumann Architecture - Computerphile",
|
||||
Favicon: SVG.YoutubeFavicon,
|
||||
},
|
||||
{
|
||||
title: "Shannon, C., “A Theory of Communications”",
|
||||
Favicon: SVG.Document,
|
||||
isSaved: true,
|
||||
tag: "computer-architecture",
|
||||
},
|
||||
{
|
||||
title: "Pask, G., “The Architectural Relevance of Cybernetics”",
|
||||
Favicon: SVG.TextDocument,
|
||||
isSaved: true,
|
||||
tag: "computer-architecture",
|
||||
},
|
||||
{
|
||||
title: "Michael Porter, “How Smart, Connected Products Are Transforming Competition”",
|
||||
Favicon: SVG.HBRFavicon,
|
||||
},
|
||||
{
|
||||
title: "Morozov, Evgeny (2014), “The Planning Machine: Project Cybersyn… Big Data…”",
|
||||
Favicon: SVG.NewYorkerFavicon,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"no on Twitter: “An Introduction to Cybernetics (1956) : Ashby, W. Ross DOI: https://doi.org/10.2307/3006723”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
{
|
||||
title: "Capra, F., and Luisi, P. L., The Systems View of Life: A Unifying Vision",
|
||||
Favicon: SVG.Document,
|
||||
isSaved: true,
|
||||
tag: "computer-architecture",
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Nimbu on Twitter: “📷 spaceintruderdetector: CYBERNETICS AND ITS DEVELOPMENT IN THE SOVIET UNION 1964 https://archive.org/details/DTIC_AD0602705/mode/2up The report is an introduction to the subject of cybernetics, with special reference to its origins and...”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
];
|
||||
|
||||
export default function SearchGuidePage() {
|
||||
return (
|
||||
<Guide
|
||||
@ -12,10 +75,49 @@ export default function SearchGuidePage() {
|
||||
description="Your personal search engine"
|
||||
url="https://slate.host/guide/search"
|
||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||
heading="One place to search it all"
|
||||
heading="Find things instantly with search"
|
||||
body="Search allows you to easily find things by either keyword or tag (we’ve got some filters on the way too)."
|
||||
next="new-tab"
|
||||
prev="file"
|
||||
prev="space"
|
||||
jumper={
|
||||
<React.Fragment>
|
||||
<JumperPrototype.TopPanel style={{ boxShadow: "none", opacity: "0.5" }}>
|
||||
{VIEWS_ACTIONS.map((action, i) => (
|
||||
<JumperPrototype.ViewAction isSelected={i === 2} key={action.label}>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.Divider
|
||||
height="none"
|
||||
width="1px"
|
||||
style={{ margin: "0px 4px", flexShrink: 0 }}
|
||||
/>
|
||||
{CUSTOM_VIEWS_ACTIONS.map((action) => (
|
||||
<JumperPrototype.ViewAction key={action.label} Favicon={action.Favicon}>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
||||
</JumperPrototype.TopPanel>
|
||||
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
||||
<JumperPrototype.Header search="Computer architecture" />
|
||||
<JumperPrototype.Divider />
|
||||
<JumperPrototype.Body>
|
||||
{OBJECTS.map((object) => (
|
||||
<JumperPrototype.Object
|
||||
key={object.title}
|
||||
title={object.title}
|
||||
Favicon={object.Favicon}
|
||||
isSelected={object.isSelected}
|
||||
isSaved={object.isSaved}
|
||||
tag={object.tag}
|
||||
/>
|
||||
))}
|
||||
</JumperPrototype.Body>
|
||||
</JumperPrototype.Root>
|
||||
</React.Fragment>
|
||||
}
|
||||
mobileguide="../public/static/search.png"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,67 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
import * as JumperPrototype from "~/components/landing/jumperPrototype";
|
||||
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const VIEWS_ACTIONS = [{ label: "Current Window" }, { label: "All Open" }, { label: "Recent" }];
|
||||
|
||||
const CUSTOM_VIEWS_ACTIONS = [
|
||||
{ label: "Files" },
|
||||
{ label: "Twitter", Favicon: SVG.TwitterFavicon },
|
||||
{ label: "Reading", Favicon: SVG.Hash },
|
||||
];
|
||||
|
||||
const OBJECTS = [
|
||||
{
|
||||
title: "Paul Prudence on Twitter: “Computers and Automation [August-12-2022]",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
|
||||
{
|
||||
title:
|
||||
"Massimo on Twitter: “This is how you cut a high voltage power line [source, full video by Joe Chenoweth: https://buff.ly/2lYgk5V]”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
},
|
||||
{
|
||||
title: "qubibi on Twitter: “stardust https://t.co/3Uu6nOmsJyafq...”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
{
|
||||
title: "pictures of the end on Twitter: “https://t.co/A2k7vZdIF7 / Twitter”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
{
|
||||
title: "Internal Tech Emails on Twitter: “https://t.co/2uOQawmsvJ..”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
{
|
||||
title: "𝗺𝗮𝗺𝗲 on Twitter: “京都でかわいい建物を発見しました🤖”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"Letterform Archive on Twitter: “La Carte surréaliste: La première série, 1937. (1) André Breton, Poème-Objet, (2) Georges Hugnet, Au pied de la Lettre, (3) René Magritte, La solution du rébus, (4) Joan Miró, Horaire.”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
},
|
||||
{
|
||||
title:
|
||||
"karatekid on Twitter: “Doubling down. Second @qubibien = art². And delight multiplied...”",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
},
|
||||
{
|
||||
title: "Concrete Architecture (@architeg) / Twitter",
|
||||
Favicon: SVG.TwitterFavicon,
|
||||
isSaved: true,
|
||||
},
|
||||
];
|
||||
|
||||
export default function SpaceGuidePage() {
|
||||
return (
|
||||
<Guide
|
||||
@ -12,10 +69,52 @@ export default function SpaceGuidePage() {
|
||||
description="Your personal search engine"
|
||||
url="https://slate.host/guide/space"
|
||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||
heading="Customize your spaces"
|
||||
body="As you save and tag things, you can create spaces for your favorite tags and sites so your can easily jump between them."
|
||||
next="file"
|
||||
prev="tag"
|
||||
heading="Make space for everything"
|
||||
body="Set up spaces to automatically revisit things from your favorite sites or create your own using tags."
|
||||
next="search"
|
||||
prev="file"
|
||||
jumper={
|
||||
<React.Fragment>
|
||||
<JumperPrototype.TopPanel>
|
||||
{VIEWS_ACTIONS.map((action) => (
|
||||
<JumperPrototype.ViewAction key={action.label}>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.Divider
|
||||
height="none"
|
||||
width="1px"
|
||||
style={{ margin: "0px 4px", flexShrink: 0 }}
|
||||
/>
|
||||
{CUSTOM_VIEWS_ACTIONS.map((action, i) => (
|
||||
<JumperPrototype.ViewAction
|
||||
isSelected={i === 1}
|
||||
key={action.label}
|
||||
Favicon={action.Favicon}
|
||||
>
|
||||
{action.label}
|
||||
</JumperPrototype.ViewAction>
|
||||
))}
|
||||
<JumperPrototype.ViewAddButton style={{ marginLeft: "auto" }} />
|
||||
</JumperPrototype.TopPanel>
|
||||
<JumperPrototype.Root style={{ marginTop: 16 }}>
|
||||
<JumperPrototype.Header />
|
||||
<JumperPrototype.Divider />
|
||||
<JumperPrototype.Body>
|
||||
{OBJECTS.map((object) => (
|
||||
<JumperPrototype.Object
|
||||
key={object.title}
|
||||
title={object.title}
|
||||
Favicon={object.Favicon}
|
||||
isSelected={object.isSelected}
|
||||
isSaved={object.isSaved}
|
||||
/>
|
||||
))}
|
||||
</JumperPrototype.Body>
|
||||
</JumperPrototype.Root>
|
||||
</React.Fragment>
|
||||
}
|
||||
mobileguide="../public/static/space.png"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import Guide from "~/pages/guide/guide.js";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
export default function TagGuidePage() {
|
||||
return (
|
||||
<Guide
|
||||
title="Tag Guide - Slate"
|
||||
description="Your personal search engine"
|
||||
url="https://slate.host/guide/tag"
|
||||
image="https://slate.textile.io/ipfs/bafkreifww37ypduoi5pvj2cuikz7iycp7l5h7czke6lcboukkaqkoab3t4"
|
||||
heading="Tag on the fly"
|
||||
body="Tags can be added to anything you save to help you organize things further."
|
||||
next="space"
|
||||
prev="save"
|
||||
/>
|
||||
);
|
||||
}
|
||||
134
pages/index.js
134
pages/index.js
@ -12,29 +12,43 @@ import { useGuideKeyCommands } from "./guide/guide";
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 52px;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 113px);
|
||||
min-height: calc(100vh - 61px);
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
min-height: calc(100vh - 112px);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 0;
|
||||
padding: 24px 0 96px 0;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
padding: 16px 16px 32px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@keyframes hero-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(5%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: hero-fade-in 300ms ease-in-out;
|
||||
`;
|
||||
|
||||
const STYLES_HEADING = css`
|
||||
@ -59,35 +73,77 @@ const STYLES_HEADING = css`
|
||||
line-height: 52px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
@keyframes heading-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(25%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(25%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: heading-fade-in 400ms ease-in-out;
|
||||
`;
|
||||
|
||||
const STYLES_BODY = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
margin-bottom: 40px;
|
||||
letter-spacing: -0.015em;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@keyframes body-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: body-fade-in 600ms ease-in-out;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CURSOR_BLINK = css`
|
||||
display: inline-block;
|
||||
background-color: ${Constants.semantic.textGray};
|
||||
width: 32px;
|
||||
height: 61px;
|
||||
height: 64px;
|
||||
margin-left: 6px;
|
||||
overflow: visible;
|
||||
animation: blink-animation 1s steps(5, start) infinite;
|
||||
-webkit-animation: blink-animation 1s steps(5, start) infinite;
|
||||
|
||||
@keyframes blink-animation {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink-animation {
|
||||
to {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
animation: blink-animation 1s steps(5, start) infinite;
|
||||
-webkit-animation: blink-animation 1s steps(5, start) infinite;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 28.5px;
|
||||
height: 47px;
|
||||
@ -100,22 +156,6 @@ const STYLES_CURSOR_BLINK = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CURSOR_BLINK_SMALL = css`
|
||||
${STYLES_CURSOR_BLINK}
|
||||
width: 25px;
|
||||
height: 41px;
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 21px;
|
||||
height: 35px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 17.5px;
|
||||
height: 29px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
cursor: poitner;
|
||||
display: inline-flex;
|
||||
@ -127,6 +167,7 @@ const STYLES_BUTTON = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.015em;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border: 2px solid ${Constants.semantic.borderGray};
|
||||
@ -136,6 +177,29 @@ const STYLES_BUTTON = css`
|
||||
background-color: ${Constants.semantic.textGray};
|
||||
color: ${Constants.semantic.textWhite};
|
||||
}
|
||||
|
||||
@keyframes button-fade-in {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
50% {
|
||||
opacity: 0%;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
animation: button-fade-in 700ms ease-in-out;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default function IndexPage() {
|
||||
@ -149,21 +213,21 @@ export default function IndexPage() {
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<img css={STYLES_IMG} src="../public/static/browser-tabs.png" />
|
||||
<div css={STYLES_HEADING}>
|
||||
Search your internet memory
|
||||
Save, organize, <br />
|
||||
search
|
||||
<span css={STYLES_CURSOR_BLINK} />
|
||||
</div>
|
||||
<div css={STYLES_BODY}>
|
||||
Slate is a Chrome extension that helps you save, organize and search stuff you care
|
||||
about on the web. It’s a lightweight tool designed to make the internet feel a little
|
||||
more personal.
|
||||
Slate is a personal storage space that helps you keep track and come back to things you
|
||||
care about on the web.
|
||||
</div>
|
||||
<a css={STYLES_BUTTON} href={next}>
|
||||
Get Started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
||||
Get started <SVG.RightArrow height={20} width={20} style={{ marginLeft: 8 }} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
public/static/bg-jumper.png
Normal file
BIN
public/static/bg-jumper.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
public/static/bg-space-switcher.png
Normal file
BIN
public/static/bg-space-switcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
public/static/browser-control.png
Normal file
BIN
public/static/browser-control.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 569 KiB |
BIN
public/static/file-1.png
Normal file
BIN
public/static/file-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 559 KiB |
BIN
public/static/file.png
Normal file
BIN
public/static/file.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 601 KiB |
BIN
public/static/new-tab.png
Normal file
BIN
public/static/new-tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 974 KiB |
BIN
public/static/recent window.png
Normal file
BIN
public/static/recent window.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
BIN
public/static/save.png
Normal file
BIN
public/static/save.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 540 KiB |
BIN
public/static/search.png
Normal file
BIN
public/static/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 570 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 586 KiB After Width: | Height: | Size: 586 KiB |
BIN
public/static/space.png
Normal file
BIN
public/static/space.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 603 KiB |
BIN
public/static/view switcher.png
Normal file
BIN
public/static/view switcher.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Loading…
Reference in New Issue
Block a user