mirror of
https://github.com/filecoin-project/slate.git
synced 2024-10-26 22:39:39 +03:00
Merge pull request #1014 from filecoin-project/@tarafanlin/new-landing
@tarafanlin/new landing
This commit is contained in:
martinalong
GitHub
commit
af3f5d820c
@ -154,6 +154,7 @@ export const font = {
|
||||
text: `'inter-regular', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
|
||||
semiBold: `'inter-semi-bold', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
|
||||
medium: `'inter-medium', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
|
||||
bold: `'inter-bold', -apple-system, BlinkMacSystemFont, arial, sans-serif`,
|
||||
mono: `'mono', monaco, monospace`,
|
||||
monoBold: `'mono-bold', monaco, monospace`,
|
||||
monoCode: `'fira-code-regular', mono, monospace`,
|
||||
|
||||
@ -62,4 +62,60 @@ export const DarkSymbol = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Discord = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"
|
||||
fill="#ffffff"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="71" height="55" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Twitter = (props) => {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 248 204" {...props}>
|
||||
<g id="Logo_1_">
|
||||
<path
|
||||
id="white_background"
|
||||
class="st0"
|
||||
d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
|
||||
C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
|
||||
c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
|
||||
c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
|
||||
c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
|
||||
c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const PLHorizontal = (props) => {
|
||||
return (
|
||||
<svg viewBox="0 0 597 160" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M388.478 54.2378V99.9741H397.493V54.2378H388.478ZM264.242 90.7387V87.6603V71.8286H271.278V65.8916H264.242V54.4575H255.227V65.8916H250.169V71.8286H255.227V88.7597C255.227 90.7387 255.227 92.278 255.446 93.8172C255.886 98.6547 258.305 100.853 264.902 100.853C266.881 100.853 268.859 100.634 270.838 100.414V94.4768C265.781 94.9166 264.462 94.037 264.242 90.7387ZM174.088 82.8229C180.685 81.9434 186.182 77.3257 186.182 69.19C186.182 60.8343 180.905 56.2167 174.308 55.3372C171.89 55.1173 170.35 55.1172 167.712 55.1172H152.1V99.974H160.895V83.0428H167.492H167.494C170.131 83.0428 171.89 83.0428 174.088 82.8229ZM171.45 62.5934C174.528 63.0331 176.727 65.0121 176.727 69.19C176.727 73.3678 174.528 75.3467 171.45 76.0064C170.57 76.2263 169.031 76.2263 167.492 76.2263H161.115V62.3734H167.492C169.031 62.3734 170.57 62.3735 171.45 62.5934ZM210.59 72.0485V64.7922C209.71 64.5723 209.05 64.5723 207.951 64.5723C205.972 64.5723 203.773 65.4519 202.014 66.9911L199.375 71.8286V65.4519H190.36V99.974H199.375V84.1422C199.375 74.907 203.114 71.6087 210.59 72.0485ZM247.97 82.6029C247.97 93.1575 241.594 100.853 230.159 100.853C218.725 100.853 212.349 93.1575 212.349 82.6029C212.349 72.0484 218.725 64.3524 230.159 64.3524C241.594 64.5723 247.97 72.2683 247.97 82.6029ZM238.735 82.6029C238.735 75.1268 235.437 70.7292 230.159 70.7292C224.882 70.7292 221.584 75.1268 221.584 82.6029C221.584 90.0791 224.882 94.4769 230.159 94.4769C235.437 94.4769 238.735 90.0791 238.735 82.6029ZM309.538 82.6029C309.538 93.1575 303.162 100.853 291.728 100.853C280.293 100.853 273.917 93.1575 273.917 82.6029C273.917 72.0484 280.293 64.3524 291.728 64.3524C302.942 64.5723 309.538 72.2683 309.538 82.6029ZM300.083 82.6029C300.083 75.1268 296.785 70.7292 291.508 70.7292C286.23 70.7292 282.932 75.1268 282.932 82.6029C282.932 90.0791 286.23 94.4769 291.508 94.4769C297.005 94.4769 300.083 90.0791 300.083 82.6029ZM336.804 77.9854H345.6C344.94 70.2894 339.223 64.5723 329.988 64.5723C320.533 64.5723 312.837 71.1689 312.837 83.0428C312.837 94.9166 319.873 100.853 329.328 100.853C337.904 100.853 344.28 96.6757 345.82 88.1001H336.804C335.925 92.4978 333.286 94.6967 329.768 94.6967C325.37 94.6967 322.072 91.1785 322.072 82.603C322.072 74.6871 325.15 70.949 329.768 70.949C333.286 70.949 335.925 72.928 336.804 77.9854ZM384.52 82.6029C384.52 93.1575 378.143 100.853 366.709 100.853C355.275 100.853 348.898 93.1575 348.898 82.6029C348.898 72.0484 355.275 64.3524 366.709 64.3524C378.143 64.5723 384.52 72.2683 384.52 82.6029ZM375.284 82.6029C375.284 75.1268 371.986 70.7292 366.709 70.7292C361.432 70.7292 358.133 75.1268 358.133 82.6029C358.133 90.0791 361.432 94.4769 366.709 94.4769C371.986 94.4769 375.284 90.0791 375.284 82.6029ZM452.904 99.9741H420.581V54.2378H429.596V92.4979H452.904V99.9741ZM475.333 98.6546L477.092 94.9167L477.531 99.974H486.327C485.887 96.0161 485.667 93.8172 485.667 91.1786V79.9643C485.667 78.2052 485.667 76.2263 485.447 74.6871C484.788 68.7502 481.27 64.5723 471.594 64.5723C463.459 64.5723 457.082 68.97 456.862 76.666H465.658C465.878 72.7081 467.856 70.7292 471.375 70.7292C474.893 70.7292 476.432 72.4882 476.652 74.9069C476.872 76.2263 476.872 77.1058 476.872 78.2052V78.8649H474.673C462.359 78.8649 455.763 83.0428 455.763 90.7388C455.763 97.3354 460.82 100.853 466.757 100.853C470.055 100.853 472.914 100.194 475.333 98.6546ZM477.092 84.362V87.2207C477.092 92.0582 474.013 94.4769 470.495 94.4769C467.197 94.4769 465.218 93.1576 465.218 90.0791C465.218 85.4615 470.055 83.9223 477.092 84.362ZM528.545 81.9434C528.545 94.4769 520.849 100.854 512.054 100.854C509.195 100.854 505.677 100.194 503.918 98.8747L501.719 95.3564V99.9741H492.704V54.2378H501.719V70.7293L504.358 66.9912C506.337 65.452 509.855 64.5723 513.373 64.5723C522.828 64.5723 528.545 71.8286 528.545 81.9434ZM519.09 82.603C519.09 75.5667 515.792 70.7293 510.295 70.7293C505.457 70.7293 501.279 73.8076 501.279 82.1632V83.7025C501.279 91.6184 505.677 94.257 509.855 94.257C515.352 94.4769 519.09 90.5189 519.09 82.603ZM550.974 75.3467H559.989C559.109 69.1899 554.492 64.3524 546.356 64.3524C538.22 64.3524 532.723 68.3103 532.723 74.9069C532.723 80.8439 537.121 83.7024 543.497 85.2416C549.434 86.7808 551.633 88.32 551.633 90.9586C551.633 93.3773 549.434 94.6967 546.576 94.6967C543.497 94.6967 540.859 92.9376 540.199 89.1995H531.184C532.063 96.8955 538 100.634 546.356 100.634C554.272 100.634 560.649 97.3353 560.649 90.299C560.649 83.9223 556.471 81.0637 549.434 79.3046C543.717 77.9853 541.519 76.6661 541.519 74.0275C541.519 71.8286 543.058 70.2894 545.696 70.2894C548.555 70.2894 550.314 72.2683 550.974 75.3467Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M39.0784 49.62L55.7897 40.1649C56.2295 39.945 56.6693 39.945 57.1091 40.1649L96.2488 62.5933C96.6886 63.0331 96.6886 63.6927 96.2488 63.9126L79.5374 73.3677C79.0977 73.5876 78.6579 73.5876 78.2181 73.3677L39.0784 50.9394C38.6386 50.4996 38.6386 49.8399 39.0784 49.62ZM83.4954 49.62L100.207 40.1649C100.647 39.945 101.306 39.945 101.526 40.1649L118.457 49.84C118.897 50.2797 118.897 50.9393 118.457 51.1592L101.746 60.6143C101.306 60.8342 100.866 60.8342 100.427 60.6143L83.4954 50.9394C83.0556 50.4996 83.0556 49.8399 83.4954 49.62ZM80.6369 78.2053V97.5552C80.6369 97.995 81.2965 98.4349 81.7363 98.215L98.6675 88.54L98.6676 88.5398C98.8875 88.32 99.1073 88.1002 99.1073 87.8803V68.3104C99.1073 67.8706 98.4476 67.4309 98.0079 67.6508L81.5164 77.1059C81.0766 77.3257 80.6369 77.7655 80.6369 78.2053ZM120.436 54.8975L103.725 64.3526C103.065 64.5725 102.845 65.0123 102.845 65.2322V89.1997C102.845 89.8594 102.625 90.2992 102.186 90.5191L81.2965 102.393C80.8568 102.833 80.6369 103.273 80.6369 103.712V123.062C80.6369 123.722 81.2965 123.942 81.7363 123.722L120.876 101.733C121.316 101.293 121.536 100.854 121.536 100.414V55.5572C121.536 54.8975 120.876 54.6776 120.436 54.8975ZM76.8988 78.2051V97.775C76.8988 98.2148 76.4591 98.4347 76.0193 98.2148L55.5699 86.5607C55.1301 86.3409 54.4704 86.5609 54.4704 87.2205V110.309C54.4704 110.748 53.8108 111.188 53.371 110.968L36.6597 101.513C36.2199 101.293 36 100.853 36 100.194V55.117C36 54.6773 36.6597 54.2375 37.0994 54.4574L76.2392 76.8858C76.679 77.1057 76.8988 77.7653 76.8988 78.2051ZM76.0193 102.613L59.3079 92.9376C58.8682 92.7178 58.2085 93.1575 58.2085 93.5973V112.947C58.2085 113.607 58.4284 114.047 58.8682 114.267L75.5795 123.942C76.0193 124.161 76.6789 123.722 76.6789 123.282V103.932C76.6789 103.272 76.4591 102.833 76.0193 102.613Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Logo;
|
||||
|
||||
@ -24,6 +24,11 @@ export const injectGlobalStyles = () => css`
|
||||
src: url('https://slate.textile.io/ipfs/bafkreiaezvuz6wawoqyntfl4gbprol3e7majovgof3uxvhilvd2pgk4w54');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-bold';
|
||||
src: url('https://slate.textile.io/ipfs/bafybeigljfbymd52vnrie6qkcy4u4kplsz4yen2idpizhr3dvrgy7kufaq');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'inter-medium';
|
||||
src: url('https://slate.textile.io/ipfs/bafkreiapyxmqjwoowqpek2cjocouzxoalwlzwwbv3dscug3e5l2ok7xmqe');
|
||||
|
||||
@ -31,8 +31,9 @@ const STYLES_SEARCH_COMPONENT = (theme) => css`
|
||||
padding: 0px 4px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
&::placeholder {
|
||||
input::placeholder {
|
||||
color: ${theme.semantic.textGray};
|
||||
font-size: ${theme.typescale.lvl1};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -62,7 +63,7 @@ const STYLES_APPLICATION_HEADER = css`
|
||||
${Styles.HORIZONTAL_CONTAINER_CENTERED};
|
||||
padding: 14px 24px;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 16px 16px 12px;
|
||||
padding: 14px 16px;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -1,165 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
padding: 96px 88px 96px 88px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: ${Constants.system.grayLight5};
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
justify-content: left;
|
||||
padding: 64px 24px;
|
||||
}
|
||||
`;
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
align-items: top;
|
||||
z-index: ${Constants.zindex.navigation};
|
||||
`;
|
||||
|
||||
const STYLES_P = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 4px 0 0 0;
|
||||
color: ${Constants.system.grayDark6};
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 4px 0 0 0;
|
||||
color: ${Constants.system.grayDark6};
|
||||
opacity: 0.7;
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
:hover {
|
||||
color: ${Constants.system.blue};
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FLEX = css`
|
||||
display: flex;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTENT_BLOCK = css`
|
||||
width: 16.67%;
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_HR = css`
|
||||
background-color: ${Constants.system.grayLight2};
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const styleFlexFull = {
|
||||
justifyContent: `space-between`,
|
||||
};
|
||||
|
||||
export const NewWebsitePrototypeFooter = (props) => {
|
||||
return (
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div>
|
||||
<p css={STYLES_P}>
|
||||
<span style={{ fontFamily: `${Constants.font.semiBold}`, marginRight: `16px` }}>
|
||||
Slate{" "}
|
||||
</span>{" "}
|
||||
Decentralized file sharing network. Powered by{" "}
|
||||
<a css={STYLES_LINK} href="https://textile.io" target="_blank">
|
||||
Textile
|
||||
</a>{" "}
|
||||
and{" "}
|
||||
<a css={STYLES_LINK} href="https://filecoin.io" target="_blank">
|
||||
Filecoin
|
||||
</a>
|
||||
.
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div css={STYLES_FLEX}>
|
||||
<div css={STYLES_CONTENT_BLOCK}>
|
||||
<p
|
||||
css={STYLES_P}
|
||||
style={{ fontFamily: `${Constants.font.semiBold}`, marginBottom: `4px` }}
|
||||
>
|
||||
Contact & Support
|
||||
</p>
|
||||
<a css={STYLES_LINK} href="https://twitter.com/_slate" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://filecoin.io/slack" target="_blank">
|
||||
Slack
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div css={STYLES_CONTENT_BLOCK}>
|
||||
<p
|
||||
css={STYLES_P}
|
||||
style={{ fontFamily: `${Constants.font.semiBold}`, marginBottom: `4px` }}
|
||||
>
|
||||
Resources
|
||||
</p>
|
||||
<a css={STYLES_LINK} href="/slate-for-chrome">
|
||||
Slate for Chrome
|
||||
</a>
|
||||
<br />
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href="https://github.com/filecoin-project/slate/issues/126"
|
||||
target="_blank"
|
||||
>
|
||||
Community
|
||||
</a>
|
||||
<br />
|
||||
{/* <a css={STYLES_LINK} href="/_/system">
|
||||
Design system
|
||||
</a> */}
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div css={STYLES_HR} />
|
||||
<div css={STYLES_FLEX} style={styleFlexFull}>
|
||||
<p css={STYLES_P}>MIT License</p>
|
||||
<div>
|
||||
<a css={STYLES_LINK} style={{ marginRight: `32px` }} href="/terms">
|
||||
Terms of service
|
||||
</a>
|
||||
<a css={STYLES_LINK} href="/guidelines">
|
||||
Community guidelines
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewWebsitePrototypeFooter;
|
||||
@ -1,234 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { css } from "@emotion/react";
|
||||
import { Logo } from "~/common/logo.js";
|
||||
import { Link } from "~/components/core/Link";
|
||||
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 24px 64px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
z-index: ${Constants.zindex.header};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 16px 24px;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
`;
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
font-family: ${Constants.font.text};
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
color: ${Constants.system.grayLight2};
|
||||
text-decoration: none;
|
||||
transition: 200ms ease color;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.blue};
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
color: ${Constants.system.grayDark6};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LEFT = css`
|
||||
flex-shrink: 0;
|
||||
height: 24px;
|
||||
`;
|
||||
|
||||
const STYLES_RIGHT = css`
|
||||
min-width: 10%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_MOBILENAV = css`
|
||||
display: none;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: flex;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BURGER = css`
|
||||
display: none;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
z-index: ${Constants.zindex.modal};
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BURGER_BUN = css`
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: ${Constants.system.grayLight2};
|
||||
transition: all 0.2s linear;
|
||||
position: relative;
|
||||
transform-origin: 1.5px;
|
||||
transform: rotate(0);
|
||||
transistion-property: transform;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
background: ${Constants.system.grayDark6};
|
||||
}
|
||||
`;
|
||||
|
||||
const openBurgerBun = {
|
||||
transform: `rotate(45deg)`,
|
||||
};
|
||||
|
||||
const STYLES_BURGER_BUN2 = css`
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: ${Constants.system.grayLight2};
|
||||
transition: all 0.2s linear;
|
||||
position: relative;
|
||||
transform-origin: 1.5px;
|
||||
transform: rotate(0);
|
||||
transistion-property: transform;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
background: ${Constants.system.grayDark6};
|
||||
}
|
||||
`;
|
||||
|
||||
const openBurgerBun2 = {
|
||||
transform: `rotate(-45deg)`,
|
||||
};
|
||||
|
||||
const STYLES_MENU = css`
|
||||
display: none;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: ${Constants.system.grayLight3};
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
text-align: left;
|
||||
padding: 24px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
transition: 200ms ease-in-out;
|
||||
transition-property: transform, width;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_NAVLINK = css`
|
||||
display: none;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 8px 0;
|
||||
color: ${Constants.system.grayDark6};
|
||||
text-decoration: none;
|
||||
transition: color 0.3s linear;
|
||||
transition-property: transform;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
letter-spacing: -0.017rem;
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.grayLight2};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const openMenu = {
|
||||
display: `flex`,
|
||||
transform: `translateX(0)`,
|
||||
};
|
||||
|
||||
const openNavLink = {
|
||||
display: `flex`,
|
||||
};
|
||||
|
||||
const NewWebsitePrototypeHeader = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", handleOpen);
|
||||
return () => window.removeEventListener("resize", handleOpen);
|
||||
});
|
||||
|
||||
const handleOpen = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const communityURL = "https://github.com/filecoin-project/slate";
|
||||
const signInURL = "/_/auth";
|
||||
const styleMenu = open ? openMenu : null;
|
||||
const styleBurgerBun = open ? openBurgerBun : null;
|
||||
const styleBurgerBun2 = open ? openBurgerBun2 : null;
|
||||
const styleNavLink = open ? openNavLink : null;
|
||||
|
||||
return (
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_LEFT}>
|
||||
<a css={STYLES_LINK} href="/" style={{ marginRight: 24 }}>
|
||||
<Logo style={{ height: 20, color: Constants.system.blueDark6 }} />
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_RIGHT}>
|
||||
<a css={STYLES_LINK} href={signInURL}>
|
||||
Use Slate
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_MOBILENAV}>
|
||||
<div onClick={() => setOpen(!open)} css={STYLES_BURGER}>
|
||||
<div css={STYLES_BURGER_BUN} style={styleBurgerBun} />
|
||||
<div css={STYLES_BURGER_BUN2} style={styleBurgerBun2} />
|
||||
</div>
|
||||
<div css={STYLES_MENU} style={styleMenu}>
|
||||
<a css={STYLES_NAVLINK} style={styleNavLink} href={signInURL}>
|
||||
Use Slate
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewWebsitePrototypeHeader;
|
||||
@ -13,7 +13,7 @@ const STYLES_AVATAR = css`
|
||||
background-position: 50% 50%;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
background-color: ${Constants.system.black};
|
||||
display: block;
|
||||
`;
|
||||
|
||||
115
components/core/WebsiteFooter.js
Normal file
115
components/core/WebsiteFooter.js
Normal file
@ -0,0 +1,115 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
background-color: ${Constants.semantic.bgGrayLight};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01px;
|
||||
padding: 96px 24px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.01px;
|
||||
margin: 4px 0 0 0;
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
`;
|
||||
|
||||
const STYLES_FLEX = css`
|
||||
display: flex;
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTENT_BLOCK = css`
|
||||
width: 25%;
|
||||
margin-bottom: 24px;
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_HR = css`
|
||||
background-color: ${Constants.semantic.borderGrayLight4};
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 12px 0;
|
||||
`;
|
||||
|
||||
const styleFlexFull = {
|
||||
justifyContent: `space-between`,
|
||||
};
|
||||
|
||||
export const WebsiteFooter = (props) => {
|
||||
return (
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div>Slate your personal search engine</div>
|
||||
<div css={STYLES_HR} />
|
||||
<div css={STYLES_FLEX}>
|
||||
<div css={STYLES_CONTENT_BLOCK}>
|
||||
<div>Resources</div>
|
||||
<a css={STYLES_LINK} href="/slate-for-chrome">
|
||||
Slate for Chrome
|
||||
</a>
|
||||
<br />
|
||||
<a
|
||||
css={STYLES_LINK}
|
||||
href="https://github.com/filecoin-project/slate/issues/126"
|
||||
target="_blank"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_CONTENT_BLOCK}>
|
||||
<div>Contact & Support</div>
|
||||
<a css={STYLES_LINK} href="https://twitter.com/_slate" target="_blank">
|
||||
Twitter
|
||||
</a>
|
||||
<br />
|
||||
<a css={STYLES_LINK} href="https://github.com/filecoin-project/slate" target="_blank">
|
||||
Discord
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_HR} />
|
||||
<div css={STYLES_FLEX} style={styleFlexFull}>
|
||||
<div>MIT License</div>
|
||||
<div>
|
||||
<a css={STYLES_LINK} style={{ marginRight: `32px` }} href="/terms">
|
||||
Terms of service
|
||||
</a>
|
||||
<a css={STYLES_LINK} href="/guidelines">
|
||||
Community guidelines
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WebsiteFooter;
|
||||
122
components/core/WebsiteHeader.js
Normal file
122
components/core/WebsiteHeader.js
Normal file
@ -0,0 +1,122 @@
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: ${Constants.semantic.bgBlurWhiteOP};
|
||||
backdrop-filter: blur(75px);
|
||||
z-index: ${Constants.zindex.header};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
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: 14px 24px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINK = css`
|
||||
color: ${Constants.semantic.textBlack};
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const STYLES_LEFT = css`
|
||||
flex-shrink: 0;
|
||||
`;
|
||||
|
||||
const STYLES_RIGHT = css`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
cursor: poitner;
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: ${Constants.shadow.lightSmall};
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 14px;
|
||||
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;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_SECONDARY = css`
|
||||
${STYLES_BUTTON};
|
||||
color: ${Constants.semantic.textBlack};
|
||||
background-color: ${Constants.semantic.bgGrayLight};
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_SECONDARY_SMALL = css`
|
||||
${STYLES_BUTTON_SECONDARY};
|
||||
padding: 1px 12px 3px;
|
||||
border-radius: 8px;
|
||||
`;
|
||||
|
||||
const WebsiteHeader = (props) => {
|
||||
const signInURL = "/_/auth";
|
||||
|
||||
return (
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER} style={props.style}>
|
||||
<div css={STYLES_LEFT}>
|
||||
<a css={STYLES_LINK} href="/" style={{ marginRight: 24 }}>
|
||||
Slate
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_RIGHT}>
|
||||
<a css={STYLES_BUTTON_SECONDARY_SMALL} style={{ marginRight: 8 }} href="../_/auth">
|
||||
Sign in
|
||||
</a>
|
||||
<a css={STYLES_BUTTON_PRIMARY_SMALL} href="../_/auth">
|
||||
Sign up
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WebsiteHeader;
|
||||
@ -10,8 +10,7 @@ const STYLES_BUTTON = `
|
||||
border-radius: 12px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
min-height: 40px;
|
||||
padding: 9px 24px 11px;
|
||||
padding: 9px 24px 11px 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -93,7 +93,7 @@ function ChannelKeyboardShortcut({ searchResults, searchQuery, onAddFileToChanne
|
||||
);
|
||||
}
|
||||
|
||||
const STYLES_SEARCH_CHANNELS_INPUT = (theme) => css`
|
||||
const STYLES_SEARCH_TAGS_INPUT = (theme) => css`
|
||||
background-color: transparent;
|
||||
${theme.semantic.textGray};
|
||||
box-shadow: none;
|
||||
@ -115,8 +115,8 @@ function ChannelInput({ value, searchResults, onChange, onAddFileToChannel, ...p
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
name="search"
|
||||
placeholder="Search or create a new channel"
|
||||
inputCss={STYLES_SEARCH_CHANNELS_INPUT}
|
||||
placeholder="Search or create a new tag"
|
||||
inputCss={STYLES_SEARCH_TAGS_INPUT}
|
||||
{...props}
|
||||
/>
|
||||
<div style={{ position: "absolute", top: "50%", transform: "translateY(-50%)", right: 20 }}>
|
||||
|
||||
@ -30,6 +30,7 @@ const STYLES_EDIT_INFO_FOOTER = (theme) => css`
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: ${theme.semantic.bgWhite};
|
||||
border-top: 1px solid ${theme.semantic.borderGrayLight};
|
||||
`;
|
||||
|
||||
const STYLES_EDIT_INFO_FORM = css`
|
||||
|
||||
@ -1,746 +0,0 @@
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Actions from "~/common/actions";
|
||||
import * as System from "~/components/system";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import Prism from "prismjs";
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
|
||||
const SLATE_CORE_TEAM = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Jason Leyser",
|
||||
url: "https://github.com/jasonleyser",
|
||||
username: "jasonleyser",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Cake",
|
||||
url: "https://github.com/jimmylee",
|
||||
username: "jimmylee",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Martina Long",
|
||||
url: "https://github.com/martinalong",
|
||||
username: "martinalong",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Haris Butt",
|
||||
url: "https://github.com/harisbutt",
|
||||
username: "harisbutt",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreih3tbsh6f4m3m2yv3uyc7cupriovl4b354rsyyxuh6l5sv7ftdgzq",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Tara Lin",
|
||||
url: "https://github.com/tarafanlin",
|
||||
username: "tarafanlin",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreih4jc7scjz7ni24enb6ur32mn7eel5nax562zohrhcq2xkcegukj4",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "William Felker",
|
||||
url: "https://github.com/gndclouds",
|
||||
username: "gndclouds",
|
||||
imageUrl:
|
||||
"https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/",
|
||||
},
|
||||
];
|
||||
|
||||
const SLATE_CONTRIBUTOR_TEAM = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Pooja Shah",
|
||||
url: "https://github.com/pooja",
|
||||
username: "pooja",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Why",
|
||||
url: "https://github.com/whyrusleeping",
|
||||
username: "whyrusleeping",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Carson Farmer",
|
||||
url: "https://github.com/carsonfarmer",
|
||||
username: "carsonfarmer",
|
||||
imageUrl:
|
||||
"https://avatars0.githubusercontent.com/u/1220613?s=460&u=8048272c1509d02cdeabb6ae561bf1c697869a33&v=4",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Aaron Stula",
|
||||
url: "https://github.com/asutula",
|
||||
username: "asutula",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Ignacio Hagopian",
|
||||
url: "https://github.com/jsign",
|
||||
username: "jsign",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreicktewpelagb3uvgd6psacr4kra66ii7254ghqflklek7taahni2m",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Sander Pick",
|
||||
url: "https://github.com/sanderpick",
|
||||
username: "sanderpick",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreihptnrkusu7qnsm4qure7noknmsrhftyrx7zy6aaj4e2cxmtcey6q",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "Andrew Hill",
|
||||
url: "https://github.com/andrewxhill",
|
||||
username: "andrewxhill",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreicfbr2qpmineh2ezi2kjfbshbpizkikectbdurfskczwatjkdfcoa",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Akuoko Daniel Jnr",
|
||||
url: "https://github.com/akuokojnr",
|
||||
username: "akuokojnr",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreiblpimmchcbvsv3xh5aimjzrjw6bmiz6yg2dtifssf2oencg5z54q",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Narative",
|
||||
url: "https://github.com/narative",
|
||||
username: "Narative",
|
||||
imageUrl:
|
||||
"https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y",
|
||||
},
|
||||
];
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
padding: 0 88px;
|
||||
margin: 88px auto 0 auto;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 48px 24px 0 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl5};
|
||||
letter-spacing: -0.022rem;
|
||||
line-height: 1.3;
|
||||
color: ${Constants.system.grayDark6};
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl4};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H2 = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl4};
|
||||
letter-spacing: -0.022rem;
|
||||
line-height: 1.3;
|
||||
color: ${Constants.system.grayDark6};
|
||||
margin-bottom: 1rem;
|
||||
width: 80%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_P = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 4px 0 0 0;
|
||||
color: ${Constants.system.grayDark6};
|
||||
opacity: 0.7;
|
||||
width: 80%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_WRAPPER = css`
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 88px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
margin-top: 48px;
|
||||
min-height: 48px;
|
||||
margin-right: 12px;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0 24px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
background: ${Constants.system.grayDark6};
|
||||
color: ${Constants.system.white};
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
transition: 200ms ease all;
|
||||
|
||||
:hover {
|
||||
background: ${Constants.system.white};
|
||||
color: ${Constants.system.grayDark6};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CARD_WRAPPER = css`
|
||||
width: calc(100% / 10 px);
|
||||
transition: 200ms ease box-shadow;
|
||||
padding: 36px 36px 0 0;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FULL_WIDTH = css`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const STYLES_SPLIT_WIDTH = css`
|
||||
padding: 24px 0;
|
||||
width: 50%;
|
||||
|
||||
:nth-child(2) {
|
||||
padding-left: 18px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
|
||||
:nth-child(2) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
|
||||
:nth-child(2) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CODE_BLOCK = css`
|
||||
box-sizing: border-box;
|
||||
font-family: ${Constants.font.code};
|
||||
background-color: ${Constants.system.black};
|
||||
color: ${Constants.system.white};
|
||||
border-color: ${Constants.system.yellow};
|
||||
font-size: 12px;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
padding: 24px;
|
||||
|
||||
* {
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_HERO_IMG = css`
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_HERO = css`
|
||||
max-width: 1440px;
|
||||
margin: 0px auto 88px auto;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LINE = css`
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const STYLES_PRE = css`
|
||||
box-sizing: border-box;
|
||||
color: #666;
|
||||
font-family: ${Constants.font.code};
|
||||
flex-shrink: 0;
|
||||
min-width: 32px;
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const STYLES_CODE = css`
|
||||
box-sizing: border-box;
|
||||
background-color: ${Constants.system.black};
|
||||
font-family: ${Constants.font.code};
|
||||
color: ${Constants.system.gray};
|
||||
width: 100%;
|
||||
padding-left: 16px;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_NAME = css`
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_GITHUB = css`
|
||||
font-size: ${Constants.typescale.lvl0};
|
||||
text-align: left;
|
||||
`;
|
||||
|
||||
const STYLES_CARD_TEXT = css`
|
||||
padding: 16px 8px 16px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: ${Constants.system.white};
|
||||
color: ${Constants.system.black};
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
:visted {
|
||||
color: ${Constants.system.black};
|
||||
}
|
||||
|
||||
:hover {
|
||||
color: ${Constants.system.black};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SLATE_CARD_EFFECTS = css`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
mix-blend-mode: luminosity;
|
||||
z-index: 2;
|
||||
color: ${Constants.system.black};
|
||||
`;
|
||||
|
||||
const STYLES_FEATURE_CARD_WRAPPER = css`
|
||||
width: 33%;
|
||||
height: auto;
|
||||
padding-right: 24px;
|
||||
|
||||
:nth-last-child() {
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FEATURE_CARD = css`
|
||||
margin: 24px auto;
|
||||
padding: 16px;
|
||||
background-color: #f2f4f8;
|
||||
box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTION_CARD = css`
|
||||
margin-left: 33.3%;
|
||||
width: 66.6%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border: 1px solid ${Constants.system.gray};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_FEATURE_TEXT = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 8px 0 0 0;
|
||||
color: ${Constants.system.grayDark6};
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTION_TEXT = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 8px 0 0 0;
|
||||
color: ${Constants.system.grayDark6};
|
||||
`;
|
||||
|
||||
const STYLES_CONTRIBUTION_IMG = css`
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.1);
|
||||
`;
|
||||
|
||||
const STYLES_CARD_GROUP = css`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: left;
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
`;
|
||||
|
||||
const STYLES_CHAT = css`
|
||||
background: #ffffff;
|
||||
margin: 48px 0px;
|
||||
padding: 32px;
|
||||
line-height: 1.5;
|
||||
box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.1);
|
||||
`;
|
||||
|
||||
const STYLES_HIGHLIGHT_GREEN = css`
|
||||
color: ${Constants.system.green};
|
||||
`;
|
||||
const STYLES_HIGHLIGHT_GRAY = css`
|
||||
color: ${Constants.system.gray};
|
||||
`;
|
||||
|
||||
const STYLES_HIGHLIGHT_YELLOW = css`
|
||||
color: ${Constants.system.yellow};
|
||||
`;
|
||||
|
||||
const STYLES_HIGHLIGHT_BLUE = css`
|
||||
color: ${Constants.system.blue};
|
||||
`;
|
||||
|
||||
const STYLES_DOT = css`
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 8px;
|
||||
background-color: ${Constants.system.grayLight2};
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
`;
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
return {
|
||||
props: { ...context.query },
|
||||
};
|
||||
};
|
||||
|
||||
class CodeWindow extends React.Component {
|
||||
componentDidMount() {
|
||||
Prism.highlightAll();
|
||||
}
|
||||
|
||||
render() {
|
||||
const codeBlockContent = this.props.children + "";
|
||||
const codeBlockToken = codeBlockContent.split("\n");
|
||||
const textMap = codeBlockToken;
|
||||
|
||||
return (
|
||||
<div css={STYLES_CODE_BLOCK} className="language-javascript" style={this.props.style}>
|
||||
{textMap.map((element, index) => {
|
||||
return (
|
||||
<div css={STYLES_LINE} key={`${element}-${index}`}>
|
||||
<div css={STYLES_PRE}>{index}</div>
|
||||
<pre css={STYLES_CODE}>
|
||||
<code>{element}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SlateTeamCards = (props) => {
|
||||
return (
|
||||
<div key={props.id} css={STYLES_CARD_WRAPPER}>
|
||||
<a href={props.url}>
|
||||
<System.HoverTile height={368} width={300}>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
alt={`Github Profile Photo for ${props.handle}`}
|
||||
src={props.preview}
|
||||
/>
|
||||
<div css={STYLES_CARD_TEXT}>
|
||||
<p css={STYLES_CARD_NAME}>{props.name}</p>
|
||||
<p css={STYLES_CARD_GITHUB}>{`@${props.username}`}</p>
|
||||
</div>
|
||||
</System.HoverTile>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ContributionCard = (props) => {
|
||||
return (
|
||||
<div css={STYLES_CONTRIBUTION_CARD}>
|
||||
<div css={STYLES_CONTRIBUTION_TEXT} style={{ marginRight: 8 }}>
|
||||
<span css={STYLES_DOT} />
|
||||
{props.contributor}
|
||||
<br />
|
||||
{props.contribution}
|
||||
</div>
|
||||
<img css={STYLES_CONTRIBUTION_IMG} src={props.illustration} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default class CommunityPage extends React.Component {
|
||||
async componentDidMount() {
|
||||
const response = await Actions.health();
|
||||
}
|
||||
|
||||
render() {
|
||||
const title = `Community`;
|
||||
const description =
|
||||
"Slate is designed and built by a growing community of hackers, artists, and creatives on the web.";
|
||||
const url = "https://slate.host/community";
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url}>
|
||||
<WebsitePrototypeHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_SECTION_HERO}>
|
||||
<div css={STYLES_FULL_WIDTH}>
|
||||
<img
|
||||
css={STYLES_SECTION_HERO_IMG}
|
||||
src="https://slate.textile.io/ipfs/bafkreidwavbkg4kigouxvtvb6wjr2zgqxr62mkdltnujbbbq6t3ciyw6wy"
|
||||
/>
|
||||
<br />
|
||||
<h1 css={STYLES_H1}>
|
||||
<span css={STYLES_HIGHLIGHT_BLUE}>An open invitation</span>
|
||||
<br />
|
||||
to everyone
|
||||
</h1>
|
||||
<p css={STYLES_P}>
|
||||
Slate is designed and built by a growing community of hackers, artists, and
|
||||
creatives on the web.
|
||||
</p>
|
||||
<button
|
||||
css={STYLES_BUTTON}
|
||||
onClick={() =>
|
||||
window.open(
|
||||
"https://slate.textile.io/ipfs/bafybeiekksvkiaa2vwyzaitjb44adb5mfbqaqkagizwuw5odmgcwdmmiha"
|
||||
)
|
||||
}
|
||||
>
|
||||
Contribute to Slate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_FULL_WIDTH}>
|
||||
<h2 css={STYLES_H2}>Core Team</h2>
|
||||
<p css={STYLES_P}>
|
||||
We work on Slate, and you can reach out to us about for anything you might need to
|
||||
know.
|
||||
</p>
|
||||
<div css={STYLES_CARD_GROUP}>
|
||||
{SLATE_CORE_TEAM.map((each) => (
|
||||
<SlateTeamCards
|
||||
key={each.name}
|
||||
preview={each.imageUrl}
|
||||
url={each.url}
|
||||
name={each.name}
|
||||
username={each.username}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_FULL_WIDTH}>
|
||||
<h2 css={STYLES_H2}>Contributors</h2>
|
||||
<p css={STYLES_P}>Our amazing community members helping us make Slate.</p>
|
||||
<div css={STYLES_CARD_GROUP}>
|
||||
{SLATE_CONTRIBUTOR_TEAM.map((each) => (
|
||||
<SlateTeamCards
|
||||
key={each.name}
|
||||
preview={each.imageUrl}
|
||||
url={each.url}
|
||||
name={each.name}
|
||||
username={each.username}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_SPLIT_WIDTH}>
|
||||
<h2 css={STYLES_H2}>
|
||||
<span css={STYLES_HIGHLIGHT_GREEN}>Have an idea</span> for how to make Slate better?
|
||||
</h2>
|
||||
<p css={STYLES_P}>
|
||||
You can create an issue on Github or send us an email with your recommendation.
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
css={STYLES_BUTTON}
|
||||
onClick={() => window.open("https://github.com/filecoin-project/slate/issues")}
|
||||
>
|
||||
Create an issue
|
||||
</button>
|
||||
<button
|
||||
css={STYLES_BUTTON}
|
||||
onClick={() => window.open("https://twitter.com/_slate")}
|
||||
>
|
||||
Tweet us
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SPLIT_WIDTH}>
|
||||
<div css={STYLES_CHAT}>
|
||||
<p>
|
||||
Hey Bucky,
|
||||
<br />
|
||||
<br /> Have you thought about adding a confetti effect to the download button?
|
||||
<br />
|
||||
<br />
|
||||
Best, <br />
|
||||
Susan Weil
|
||||
<p css={STYLES_P}>
|
||||
Three-dimensional Painter <br /> Black Mountain College
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
<div css={STYLES_CHAT}>
|
||||
<p>
|
||||
Hey Susan
|
||||
<br />
|
||||
<br />
|
||||
That would be so fun, will work in it! <br />
|
||||
<br /> Best, <br />
|
||||
Buckminster Fuller
|
||||
<p css={STYLES_P}>
|
||||
Designer, Author, Inventor <br /> Black Mountain College
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_SPLIT_WIDTH}>
|
||||
<h2 css={STYLES_H2}>
|
||||
<span css={STYLES_HIGHLIGHT_YELLOW}>Explore our API and SDK </span>
|
||||
and build on top of Slate.
|
||||
</h2>
|
||||
<p css={STYLES_P}>
|
||||
Checkout the examples below to see how quickly you can get up and running with
|
||||
Slate’s API.
|
||||
</p>
|
||||
<button css={STYLES_BUTTON} onClick={() => window.open("https://slate.host/system")}>
|
||||
Use Slate API
|
||||
</button>
|
||||
</div>
|
||||
<div css={STYLES_SPLIT_WIDTH}>
|
||||
<CodeWindow>
|
||||
{`const response = await fetch('https://slate.host/api/v1/get', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
// NOTE: your API key
|
||||
Authorization: 'SLATE-API-KEY-FROM-ACCOUNT-SETTINGS',
|
||||
},
|
||||
body: JSON.stringify({ data: {
|
||||
// NOTE: optional, if you want your private collections too.
|
||||
private: false
|
||||
}})
|
||||
});
|
||||
|
||||
const json = await response.json();
|
||||
console.log(json);`}
|
||||
</CodeWindow>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -5,25 +5,27 @@ import * as Constants from "~/common/constants";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
import WebsitePrototypeHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/WebsiteFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
padding: 0 88px 128px 88px;
|
||||
margin: -88px auto 0 auto;
|
||||
width: 100%;
|
||||
background-color: ${Constants.system.grayLight6};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
padding: 128px 24px;
|
||||
}
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1440px;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 160px 24px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
@ -74,8 +76,8 @@ const STYLES_CONTENT_BLOCK1 = css`
|
||||
`;
|
||||
|
||||
const STYLES_CONTENT_BLOCK2 = css`
|
||||
margin: -96px 0 0 auto;
|
||||
width: 50%;
|
||||
margin: -244px 0 0 auto;
|
||||
width: 55%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 48px 0 0 0;
|
||||
@ -146,7 +148,7 @@ export default class GuidelinesPage extends React.Component {
|
||||
<div css={STYLES_CONTENT_BLOCK1}>
|
||||
<h1 css={STYLES_H1}>Community Guidelines</h1>
|
||||
<br />
|
||||
<System.P1 style={{ marginLeft: 1 }}>In this page</System.P1>
|
||||
<System.P1>In this page</System.P1>
|
||||
<ul css={STYLES_LIST}>
|
||||
<li>
|
||||
<a css={STYLES_LINK} href="#Friendly Harassment-Free Space">
|
||||
|
||||
1535
pages/index.js
1535
pages/index.js
File diff suppressed because it is too large
Load Diff
@ -2,199 +2,148 @@ import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
import WebsiteHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsiteFooter from "~/components/core/WebsiteFooter";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
width: 100%;
|
||||
margin: -88px auto 0 auto;
|
||||
padding: 0 88px 128px 88px;
|
||||
background-color: ${Constants.system.grayLight6};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 48px 24px;
|
||||
}
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1440px;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl4};
|
||||
letter-spacing: -0.022rem;
|
||||
line-height: 1.3;
|
||||
color: ${Constants.system.grayDark6};
|
||||
margin-bottom: 1rem;
|
||||
width: 95%;
|
||||
padding: 160px 24px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl3};
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H2 = css`
|
||||
font-family: ${Constants.font.medium};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl2};
|
||||
letter-spacing: -0.017rem;
|
||||
line-height: 1.3;
|
||||
color: ${Constants.system.blue};
|
||||
margin-bottom: 1rem;
|
||||
width: 95%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_P = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 4px 0 0 0;
|
||||
color: ${Constants.system.grayDark6};
|
||||
width: 80%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_WRAPPER = css`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 120px 0;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 120px 0 48px 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_SECTION_FLEXWRAPPER = css`
|
||||
const STYLES_HERO_TEXT = css`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_TEXT_BLOCK = css`
|
||||
width: 33.33%;
|
||||
const STYLES_HEADING = css`
|
||||
font-family: ${Constants.font.semiBold};
|
||||
flex-shrink: 0;
|
||||
color: ${Constants.semantic.textBlack};
|
||||
flex-shrink: 0;
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
`;
|
||||
|
||||
const STYLES_HEADING1 = css`
|
||||
${STYLES_HEADING};
|
||||
font-size: 84px;
|
||||
line-height: 88px;
|
||||
letter-spacing: -0.05em;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
font-size: 64px;
|
||||
line-height: 68px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
font-size: 48px;
|
||||
line-height: 52px;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BODY1 = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-size: 24px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_IMG = css`
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 10.8725px 57.9866px rgba(174, 176, 178, 0.3);
|
||||
max-width: calc(50% - 24px);
|
||||
`;
|
||||
|
||||
const STYLES_IMG_HERO = css`
|
||||
${STYLES_IMG};
|
||||
max-width: 100%;
|
||||
border: 12px solid ${Constants.semantic.textBlack};
|
||||
border-radius: 40px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
border: 8px solid ${Constants.semantic.textBlack};
|
||||
border-radius: 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON = css`
|
||||
cursor: poitner;
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: ${Constants.shadow.lightMedium};
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.medium};
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.006px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_PRIMARY = css`
|
||||
margin: 32px 0 0 0;
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
padding: 0 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
${STYLES_BUTTON};
|
||||
color: ${Constants.semantic.textWhite};
|
||||
background-color: ${Constants.system.blue};
|
||||
color: ${Constants.system.white};
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
transition: 200ms ease all;
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_BUTTON_SECONDARY = css`
|
||||
margin: 32px 0 16px 0;
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid ${Constants.system.grayLight2};
|
||||
border-radius: 4px;
|
||||
padding: 0 32px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
background-color: ${Constants.system.grayLight6};
|
||||
color: ${Constants.system.blue};
|
||||
text-decoration: none;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
transition: 200ms ease all;
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
const STYLES_BUTTON_PRIMARY_BIG = css`
|
||||
${STYLES_BUTTON_PRIMARY};
|
||||
padding: 18px 28px 18px 24px;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
`;
|
||||
|
||||
const STYLES_BLUE = css`
|
||||
color: ${Constants.system.blue};
|
||||
`;
|
||||
|
||||
const STYLES_HALFBLOCK = css`
|
||||
width: 50%;
|
||||
margin-bottom: 64px;
|
||||
const STYLES_BUTTON_PRIMARY_BIG_HERO = css`
|
||||
${STYLES_BUTTON_PRIMARY_BIG};
|
||||
margin-bottom: 48px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: 100%;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleCenterBlock = {
|
||||
textAlign: `center`,
|
||||
margin: `0 auto`,
|
||||
};
|
||||
|
||||
const STYLES_IMG = css`
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
const STYLES_FEATURE_IMG = css`
|
||||
display: block;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_VR = css`
|
||||
width: 1px;
|
||||
height: 48px;
|
||||
background-color: ${Constants.system.grayLight2};
|
||||
margin: 0 auto;
|
||||
`;
|
||||
|
||||
const STYLES_IMG_OVERLAY = css`
|
||||
width: 24%;
|
||||
margin: -30% 0 0 70%;
|
||||
display: block;
|
||||
box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@media (max-width: ${Constants.sizes.tablet}px) {
|
||||
margin: -30% 0 0 60%;
|
||||
width: 30%;
|
||||
}
|
||||
margin: 0 20px;
|
||||
width: 60%;
|
||||
border: ${Constants.semantic.borderGrayLight4};
|
||||
border-radius: 16px;
|
||||
box-shadow: ${Constants.shadow.darkMedium};
|
||||
`;
|
||||
|
||||
export default class SlateForChromePage extends React.Component {
|
||||
@ -207,65 +156,27 @@ export default class SlateForChromePage extends React.Component {
|
||||
|
||||
return (
|
||||
<WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
|
||||
<WebsitePrototypeHeader />
|
||||
<WebsiteHeader />
|
||||
<div css={STYLES_ROOT}>
|
||||
<div css={STYLES_CONTAINER}>
|
||||
<div css={STYLES_SECTION_WRAPPER}>
|
||||
<div css={STYLES_TEXT_BLOCK} style={styleCenterBlock}>
|
||||
<h1 css={STYLES_H1}>
|
||||
<span css={STYLES_BLUE}>Upload images to Slate</span> <br />
|
||||
from anywhere on the web
|
||||
</h1>
|
||||
<a
|
||||
css={STYLES_BUTTON_PRIMARY}
|
||||
href="https://chrome.google.com/webstore/detail/slate/gloembacbehhbfbkcfjmloikeeaebnoc"
|
||||
target="_blank"
|
||||
>
|
||||
Add Slate to Chrome
|
||||
</a>
|
||||
<div css={STYLES_VR} />
|
||||
</div>
|
||||
<img
|
||||
css={STYLES_IMG}
|
||||
src="https://slate.textile.io/ipfs/bafybeiarvezzcqx3f7vjmx25kzog3metgz35n4p5gtiexwl7hcgwzev64a"
|
||||
/>
|
||||
<img
|
||||
css={STYLES_IMG_OVERLAY}
|
||||
src="https://slate.textile.io/ipfs/bafkreig2ynqlvfynv3zvft73fh2igyyks5bgmthugtq7azeed6rehd3s5u"
|
||||
/>
|
||||
</div>
|
||||
<div css={STYLES_SECTION_FLEXWRAPPER}>
|
||||
<div css={STYLES_HALFBLOCK}>
|
||||
<h2 css={STYLES_H2}>Contribute</h2>
|
||||
<p css={STYLES_P}>
|
||||
We would love for you to join us. You are welcome to file an issue or submit a
|
||||
pull request on Github.
|
||||
</p>
|
||||
<a
|
||||
css={STYLES_BUTTON_PRIMARY}
|
||||
href="https://github.com/jasonleyser/slate-for-chrome"
|
||||
target="_blank"
|
||||
>
|
||||
View Github
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_HALFBLOCK}>
|
||||
<h2 css={STYLES_H2}>Release</h2>
|
||||
<p css={STYLES_P}>
|
||||
Slate for Chrome is open source and past versions are also available for download.
|
||||
</p>
|
||||
<a
|
||||
css={STYLES_BUTTON_SECONDARY}
|
||||
href="https://slate.textile.io/ipfs/bafybeibxdmhrddveho4mkyveixhhpiabjmtyvp2h7s3byexbkr3if74rwu"
|
||||
download="Slate Chrome extension.zip"
|
||||
>
|
||||
Download Slate for Chrome
|
||||
</a>
|
||||
</div>
|
||||
<div css={STYLES_HEADING1}>Slate web extension</div>
|
||||
<br />
|
||||
<div css={STYLES_BODY1}>
|
||||
Access Slate anytime, anywhere when you browse the Internet.
|
||||
</div>
|
||||
<a css={STYLES_BUTTON_PRIMARY_BIG_HERO}>Get Slate for Chrome</a>
|
||||
<img
|
||||
css={STYLES_IMG_HERO}
|
||||
src="https://slate.textile.io/ipfs/bafybeihsrxgjk5ax4wzbnfnq2kyg4djylrvpsbzrhitvnmcjixupbk5qjm"
|
||||
/>
|
||||
<img
|
||||
css={STYLES_FEATURE_IMG}
|
||||
style={{ margin: "-50% auto 48px auto" }}
|
||||
src="https://slate.textile.io/ipfs/bafkreidm2ffwdjgk5j5w4ja2p7fjrflfeldyhak2qigkpatvhazc5rsvda"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<WebsitePrototypeFooter />
|
||||
<WebsiteFooter />
|
||||
</WebsitePrototypeWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,25 +5,26 @@ import * as Constants from "~/common/constants";
|
||||
import { css } from "@emotion/react";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter";
|
||||
import WebsitePrototypeHeader from "~/components/core/WebsiteHeader";
|
||||
import WebsitePrototypeFooter from "~/components/core/WebsiteFooter";
|
||||
|
||||
const STYLES_ROOT = css`
|
||||
padding: 0 88px 128px 88px;
|
||||
margin: -88px auto 0 auto;
|
||||
width: 100%;
|
||||
background-color: ${Constants.system.grayLight6};
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: block;
|
||||
padding: 128px 24px;
|
||||
}
|
||||
height: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: ${Constants.semantic.bgLight};
|
||||
color: ${Constants.semantic.textGrayDark};
|
||||
`;
|
||||
|
||||
const STYLES_CONTAINER = css`
|
||||
max-width: 1440px;
|
||||
width: 100%;
|
||||
max-width: 1080px;
|
||||
margin: 0 auto;
|
||||
padding: 160px 24px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
max-width: 480px;
|
||||
padding: 96px 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_H1 = css`
|
||||
@ -74,8 +75,8 @@ const STYLES_CONTENT_BLOCK1 = css`
|
||||
`;
|
||||
|
||||
const STYLES_CONTENT_BLOCK2 = css`
|
||||
margin: -120px 0 0 auto;
|
||||
width: 50%;
|
||||
margin: -264px 0 0 auto;
|
||||
width: 55%;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
margin: 48px 0 0 0;
|
||||
@ -88,8 +89,9 @@ const STYLES_LIST = css`
|
||||
font-family: ${Constants.font.text};
|
||||
font-weight: 400;
|
||||
font-size: ${Constants.typescale.lvl1};
|
||||
letter-spacing: -0.011rem;
|
||||
line-height: 1.5;
|
||||
margin: 0px 0 0 4px;
|
||||
margin: 4px 0 0 16px;
|
||||
opacity: 0.7;
|
||||
padding: 0;
|
||||
`;
|
||||
@ -126,6 +128,7 @@ export default class TermsPage extends React.Component {
|
||||
<div css={STYLES_CONTENT_BLOCK1}>
|
||||
<h1 css={STYLES_H1}>Terms of Service</h1>
|
||||
<br />
|
||||
<System.P1>In this page</System.P1>
|
||||
<ul css={STYLES_LIST}>
|
||||
<li>
|
||||
<a css={STYLES_LINK} href="#Storage deals">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user