From 0f80c3e8136d34bbd42b2b78e5cf9e832a22de2c Mon Sep 17 00:00:00 2001 From: tarafanlin <35607644+tarafanlin@users.noreply.github.com> Date: Sun, 13 Sep 2020 22:03:03 -0700 Subject: [PATCH] community page styling + link fixes --- pages/_/marketing-candidate/community.js | 328 +++++++++-------------- pages/_/marketing-candidate/download.js | 1 + 2 files changed, 130 insertions(+), 199 deletions(-) diff --git a/pages/_/marketing-candidate/community.js b/pages/_/marketing-candidate/community.js index 9d0c4820..2b73e777 100644 --- a/pages/_/marketing-candidate/community.js +++ b/pages/_/marketing-candidate/community.js @@ -6,9 +6,10 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper"; import WebsitePrototypeHeader from "~/components/core/NewWebsitePrototypeHeader"; import WebsitePrototypeFooter from "~/components/core/NewWebsitePrototypeFooter"; import IssuesList from "~/components/core/marketing/IssuesList"; -import CodeTerminal from "~/components/core/marketing/CodeTerminal"; +import CodeBlock from "~/components/system/CodeBlock"; import { css, keyframes } from "@emotion/react"; +import { SceneUtils } from "three"; const STYLES_ROOT = css` display: flex; @@ -20,56 +21,47 @@ const STYLES_ROOT = css` `; const STYLES_H1 = css` - font: ${Constants.font.semiBold}; - font-size: ${Constants.typescale.lvl7}; - line-height: 1.25; + font-size: ${Constants.typescale.lvl5}; + font-family: ${Constants.font.medium}; + font-weight: 400; + line-height: 1.3; + padding: 0px 0px 16px 0px; + letter-spacing: -0.021rem; width: 100%; color: ${Constants.system.slate}; - @media (max-width: ${Constants.sizes.tablet}px) { - font-size: ${Constants.typescale.lvl6}; - padding: 0px 0px 16px 0px; - } - @media (max-width: ${Constants.sizes.mobile}px) { - font-size: ${Constants.typescale.lvl5}; - padding: 0px 0px 8px 0px; + font-size: ${Constants.typescale.lvl3}; } `; const STYLES_H2 = css` - font-size: ${Constants.typescale.lvl5}; - line-height: 1.25; - padding: 16px 0px 0 0px; + font-size: ${Constants.typescale.lvl3}; + font-family: ${Constants.font.medium}; + font-weight: 400; + line-height: 1.3; + letter-spacing: -0.019rem; + padding: 0 0 16px 0; width: 100%; - color: ${Constants.system.black}; - - @media (max-width: ${Constants.sizes.tablet}px) { - font-size: ${Constants.typescale.lvl4}; - padding: 8px 0px 0px 0px; - } + color: ${Constants.system.slate}; @media (max-width: ${Constants.sizes.mobile}px) { - font-size: ${Constants.typescale.lvl3}; - padding: 8px 0px 0 0px; - line-height: 1.5; + font-size: ${Constants.typescale.lvl2}; } `; const STYLES_H3 = css` - font-size: ${Constants.typescale.lvl3}; + font-size: ${Constants.typescale.lvl2}; + font-family: ${Constants.font.text}; + font-weight: 400; line-height: 1.5; - padding: 16px 0px 0px 0px; + letter-spacing: -0.014rem; + padding: 0 0 8px 0; color: ${Constants.system.slate}; - - @media (max-width: ${Constants.sizes.tablet}px) { - font-size: ${Constants.typescale.lvl2}; - padding: 8px 0px 0px 0px; - } + opacity: 0.7; @media (max-width: ${Constants.sizes.mobile}px) { font-size: ${Constants.typescale.lvl1}; - padding: 8px 0px 0px 0px; } `; @@ -86,16 +78,18 @@ const STYLES_SECTION_HERO = css` } `; -const STYLES_TEXT_BLOCK = css` +const STYLES_BLOCK = css` display: flex; flex-direction: column; - justify-content: center; - width: 56vw; + justify-content: space-between; + max-width: 56vw; + width: 100%; align-self: center; + margin-bottom: 16px; @media (max-width: ${Constants.sizes.mobile}px) { - width: 88vw; - right: 24px; + width: 100%; + max-width: 100vw; } `; @@ -122,7 +116,7 @@ const STYLES_BUTTON_PRIMARY = css` border: 0; min-height: 48px; padding: 0px 24px 0px 24px; - margin: 20px 0px; + margin: 24px 0 16px 0; display: inline-flex; align-items: center; justify-content: center; @@ -137,9 +131,9 @@ const STYLES_BUTTON_PRIMARY = css` box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); :hover { - background-color: ${Constants.system.pitchBlack}; + background-color: ${Constants.system.white}; box-shadow: 0px 10px 90px 20px rgba(207, 206, 211, 0.3); - color: ${Constants.system.wall}; + color: ${Constants.system.slate}; } :focus { @@ -152,45 +146,23 @@ const STYLES_BUTTON_PRIMARY = css` `; const STYLES_SECTION_WRAPPER = css` + width: 100vw; + padding: 32px 88px; display: flex; flex-direction: column; - padding: 88px; - width: 100vw; + justify-content: center; + background: ${Constants.system.foreground}; @media (max-width: ${Constants.sizes.mobile}px) { - padding: 88px 24px; + padding: 64px 24px; display: block; } `; -const STYLES_SECTION_CHILD_FULL = css` - margin: 80px 0 0 0; - display: flex; - justify-content: space-between; - - @media (max-width: ${Constants.sizes.mobile}px) { - flex-direction: column; - } -`; -const STYLES_SECTION_CHILD_SPLIT = css` - width: 64%; - height: 40vh; - - @media (max-width: ${Constants.sizes.mobile}px) { - height: 24vh; - width: 100%; - flex-direction: column; - } -`; const STYLES_CARD_GROUP = css` display: flex; - margin-top: 48px; - flex-flow: row wrap; - - @media (max-width: ${Constants.sizes.tablet}px) { - align-items: left; - 4margin-top: 16px; - } + flex-wrap: wrap; + align-items: left; `; const STYLES_CARD_NAME = css` @@ -249,49 +221,43 @@ const SLATE_CORE_TEAM = [ name: "Jason Leyser", url: "https://github.com/jasonleyser", username: "jasonleyser", - imageUrl: - "https://slate.textile.io/ipfs/bafkreidw22xqcr6fo6m7k25qe3yemby6w4dlawbsu6yxs7qjnpu5gyoiwm" + imageUrl: "https://avatars3.githubusercontent.com/u/60402678?s=400&u=b7d840718b781d4266fff7fb59e688d369ec1e6b&v=4", }, { id: 2, name: "Cake", - url: "https://github.com/STYLES_CARD_GROUPmylee", + url: "https://github.com/jimmylee", username: "jimmylee", - imageUrl: - "https://slate.textile.io/ipfs/bafkreigxoyf43vw3p2hbc4ycsyh2og36cgy3s47xkb2n4w3i7auv2a6cei" + imageUrl: "https://avatars0.githubusercontent.com/u/310223?s=400&u=62a15c1b5791b953fc5153a4b3f491f4b0bf2ae5&v=4", }, { id: 3, name: "Martina Long", url: "https://github.com/martinalong", username: "martinalong", - imageUrl: - "https://slate.textile.io/ipfs/bafkreiasfgunf66fxncazlfzff3vp2btfe4j55jxgb2epcthrnvwkthwrq" + imageUrl: "https://avatars2.githubusercontent.com/u/33686587?s=400&u=d1841da2872f30f7f8cb80e67cdc9b385d0f50e1&v=4", }, { id: 4, name: "Haris Butt", url: "https://github.com/harisbutt", username: "harisbutt", - imageUrl: - "https://slate.textile.io/ipfs/bafkreih3tbsh6f4m3m2yv3uyc7cupriovl4b354rsyyxuh6l5sv7ftdgzq" + imageUrl: "https://avatars2.githubusercontent.com/u/13544493?s=400&u=264f4b9241b2520ba13e4eb4d71042b05adc5f74&v=4", }, { id: 5, name: "Tara Lin", url: "https://github.com/tarafanlin", username: "tarafanlin", - imageUrl: - "https://slate.textile.io/ipfs/bafkreieuxq4itewoes3wnpfxw2dfat6oi6rsy2snix7tvtgv7d7bgre64q" + imageUrl: "https://avatars2.githubusercontent.com/u/35607644?s=400&u=48483bdf251e5293fefb30ae993bfa04d06601a6&v=4", }, { id: 6, name: "William Felker", url: "https://slate.host/gndclouds/urban-gardens", username: "gndclouds", - imageUrl: - "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/" - } + imageUrl: "https://bafkreih2b33oaftlflmsg6njtu7i54f2nwws5gfhhf5w4qaezcejs6gjte.ipfs.slate.textile.io/", + }, ]; const SLATE_CONTRIBUTOR_TEAM = [ { @@ -299,92 +265,79 @@ const SLATE_CONTRIBUTOR_TEAM = [ name: "Pooja Shah", url: "https://github.com/pooja", username: "pooja", - imageUrl: - "https://slate.textile.io/ipfs/bafkreier4xffhrpconlprzxvzslqsovykqet7xj6zhhptxgu4nm2qw5i3u" + 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" + imageUrl: "https://slate.textile.io/ipfs/bafkreigvs53l22cuswtc4dtgndmc3aqns2unpc5xndnzx5gjdbw4yv6qhm", }, { id: 4, name: "Aaron Stula", url: "https://github.com/asutula", username: "asutula", - imageUrl: - "https://slate.textile.io/ipfs/bafkreig3vnxyqqsxnrs24zpbbuc6jh5wvdsa7w6fx5gvi4j3t7rhoelhlm" + 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" + 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" + 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" + 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" + 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" + imageUrl: "https://slate.textile.io/ipfs/bafkreihdkapriwuzfh42zkhs3kwj5qki43dvyu6mq5j3rug3uf6i7egs6y", }, { id: 9, name: "Colin S. McCaleb", url: "https://github.com/uonai", username: "uonai", - imageUrl: - "https://slate.textile.io/ipfs/bafkreigbjyxbmc2cirha3g4y2rmlrntau2l2gjy4ft3y6ii3kyh4ifw5li" - } + imageUrl: "https://slate.textile.io/ipfs/bafkreigbjyxbmc2cirha3g4y2rmlrntau2l2gjy4ft3y6ii3kyh4ifw5li", + }, ]; -export const getServerSideProps = async context => { +export const getServerSideProps = async (context) => { return { - props: { ...context.query } + props: { ...context.query }, }; }; -const SlateTeamCards = props => { +const SlateTeamCards = (props) => { return (
- {`Github + {`Github

{props.name}

{`@${props.handle}`}

@@ -401,18 +354,16 @@ export default class CommunityPage extends React.Component { super(props); this.state = { - issues: [] + issues: [], }; } async componentDidMount() { try { - const response = await fetch( - `https://api.github.com/repos/filecoin-project/slate/issues?labels=For+the+public` - ); + const response = await fetch(`https://api.github.com/repos/filecoin-project/slate/issues?labels=For+the+public`); const issues = await response.json(); this.setState({ - issues + issues, }); } catch (e) {} } @@ -427,32 +378,22 @@ export default class CommunityPage extends React.Component { let count = 0; return ( - +
-
+
blocks evolving into different structures

Community

-

- Slate is designed and built by a growing community of hackers, - artists, and creatives on the web. +

+ Slate is designed and built by a growing community of hackers, artists, and creatives on the web.

-
-
-
@@ -460,96 +401,85 @@ export default class CommunityPage extends React.Component {
-
+

Core Team

-
-
- {SLATE_CORE_TEAM.map(each => ( - - ))} +
+ {SLATE_CORE_TEAM.map((each) => ( + + ))} +
-
+

Contributors

-
-
- {SLATE_CONTRIBUTOR_TEAM.map(each => ( - - ))} +
+ {SLATE_CONTRIBUTOR_TEAM.map((each) => ( + + ))} +
-
+

Get involved

-

- The Slate Project is the byproduct of a growing community of - contributors from around the world. We’d love for you to join - us, get involved in the project and contribute. +

+ The Slate Project is the byproduct of a growing community of contributors from around the world. We’d + love for you to join us, get involved in the project and contribute.

-
-

Contribute

-
- -

- Find something you want to work on and file an issue. If you - see something you want to fix or change, submit a pull - request. -

-
-
- +
+
+
+
+

Contribute

+

+ Find something you want to work on and file an issue. If you see something you want to fix or change, + submit a pull request. +

+ +
+
- - - -
-

Design System

-
-

- Check out our open source design system for your projects. -

-
-
- - -
-
- -
+
+
+
+
+

Integrate

+

+ Explore our API and SDK and build on top of Slate. Check out our open source design system for your + projects. +

+
+ npm install --save slate-react-system +
+
+
+ ); diff --git a/pages/_/marketing-candidate/download.js b/pages/_/marketing-candidate/download.js index e22a5048..aff2c100 100644 --- a/pages/_/marketing-candidate/download.js +++ b/pages/_/marketing-candidate/download.js @@ -53,6 +53,7 @@ const STYLES_H3 = css` letter-spacing: -0.014rem; padding: 0 0 8px 0; color: ${Constants.system.slate}; + opacity: 0.7; @media (max-width: ${Constants.sizes.mobile}px) { font-size: ${Constants.typescale.lvl1};