From 2cce387708c70db6af55e395b70e13cae9d7415a Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 7 Sep 2019 11:47:08 -0700 Subject: [PATCH 01/40] feat: Create placeholders for all top level pages --- gatsby-node.js | 4 ++-- src/components/header.tsx | 11 ++++++----- src/pages/docs.tsx | 17 +++++++++++++++++ src/pages/index.tsx | 17 +++++++++++++++++ 4 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 src/pages/docs.tsx create mode 100644 src/pages/index.tsx diff --git a/gatsby-node.js b/gatsby-node.js index a841e63ed8..343cedf70d 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -110,7 +110,7 @@ exports.createPages = ({ graphql, actions }) => { docPages.forEach(page => { createPage({ - path: `/${page.slug}`, + path: `/learn/${page.slug}`, component: docTemplate, context: { slug: page.slug, @@ -122,7 +122,7 @@ exports.createPages = ({ graphql, actions }) => { }); if (page.slug === 'introduction-to-nodejs') createPage({ - path: `/`, + path: `/learn`, component: docTemplate, context: { slug: page.slug, diff --git a/src/components/header.tsx b/src/components/header.tsx index 73625643b8..48d7c81f85 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -23,13 +23,14 @@ const Header = () => (
  • - - Download - + Learn
  • - - API Docs + Documentation +
    • +
  • + + Download
  • diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx new file mode 100644 index 0000000000..059654b45d --- /dev/null +++ b/src/pages/docs.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Hero from '../components/hero'; +import Layout from '../components/layout'; + +export default () => { + const title = 'API Docs'; + const description = 'Come learn yourself something.'; + + return ( + + +
    +

    Welcome to the API Page!

    +
    +     + ); +}; diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000000..f338fc6d6b --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Hero from '../components/hero'; +import Layout from '../components/layout'; + +export default () => { + const title = 'Home Page'; + const description = 'Welcome to Node.js!'; + + return ( + + +
    +

    Welcome to the Home Page!

    +
    +     + ); +}; From 591762318b90ab0ec15204d7c2d537d0d51af9ae Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 7 Sep 2019 11:51:19 -0700 Subject: [PATCH 02/40] feat: Create placeholder /download page --- src/components/header.tsx | 4 +--- src/pages/download.tsx | 17 +++++++++++++++++ 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 src/pages/download.tsx diff --git a/src/components/header.tsx b/src/components/header.tsx index 48d7c81f85..e688116c41 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -29,9 +29,7 @@ const Header = () => ( Documentation
  • - - Download - + Download
  • diff --git a/src/pages/download.tsx b/src/pages/download.tsx new file mode 100644 index 0000000000..9ad3f05ddc --- /dev/null +++ b/src/pages/download.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Hero from '../components/hero'; +import Layout from '../components/layout'; + +export default () => { + const title = 'Download Node.js'; + const description = 'Come get me!'; + + return ( + + +
    +

    Welcome to the Downloads Page!

    +
    +     + ); +}; From a58b5c3eacb83280ee48b9f1cb375d924a0d7604 Mon Sep 17 00:00:00 2001 From: Jon Church Date: Sat, 7 Sep 2019 15:41:48 -0400 Subject: [PATCH 03/40] feat: Create hooks dir, add useReleaseHistory hook --- src/hooks/index.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/hooks/index.tsx diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx new file mode 100644 index 0000000000..2d4502b45b --- /dev/null +++ b/src/hooks/index.tsx @@ -0,0 +1,16 @@ +import { useState, useEffect } from 'react'; + +export function useReleaseHistory() { + const releasesURL = 'https://nodejs.org/dist/index.json' + const [releaseHistory, setReleaseHistory] = useState() + useEffect(async () => { + try { + const result = await fetch(releasesURL).then(data => data.json()) + setReleaseHistory(result.slice(0, 24)) + } catch (err) { + console.error("Could not get API docs", err) + } + }, []) + + return releaseHistory +} From d29c04eb3a8f4cfd1dab3efdab090af8b0c8fbec Mon Sep 17 00:00:00 2001 From: Jon Church Date: Sat, 7 Sep 2019 15:51:05 -0400 Subject: [PATCH 04/40] feat: Create custom hooks dir, create useReleaseData hook --- src/hooks/index.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx index 2d4502b45b..7f91cb182a 100644 --- a/src/hooks/index.tsx +++ b/src/hooks/index.tsx @@ -2,14 +2,13 @@ import { useState, useEffect } from 'react'; export function useReleaseHistory() { const releasesURL = 'https://nodejs.org/dist/index.json' - const [releaseHistory, setReleaseHistory] = useState() - useEffect(async () => { - try { + const [releaseHistory, setReleaseHistory] = useState([]) + useEffect(() => { + const fetchData = async () => { const result = await fetch(releasesURL).then(data => data.json()) - setReleaseHistory(result.slice(0, 24)) - } catch (err) { - console.error("Could not get API docs", err) + setReleaseHistory(result) } + fetchData() }, []) return releaseHistory From 7d9d3c230c0028b8940baaaeada648fdb917f31d Mon Sep 17 00:00:00 2001 From: Jon Church Date: Sat, 7 Sep 2019 15:52:25 -0400 Subject: [PATCH 05/40] chore: Format useReleaseData with prettier --- src/hooks/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx index 7f91cb182a..5034e8fdd4 100644 --- a/src/hooks/index.tsx +++ b/src/hooks/index.tsx @@ -1,15 +1,15 @@ import { useState, useEffect } from 'react'; export function useReleaseHistory() { - const releasesURL = 'https://nodejs.org/dist/index.json' - const [releaseHistory, setReleaseHistory] = useState([]) + const releasesURL = 'https://nodejs.org/dist/index.json'; + const [releaseHistory, setReleaseHistory] = useState([]); useEffect(() => { const fetchData = async () => { - const result = await fetch(releasesURL).then(data => data.json()) - setReleaseHistory(result) - } - fetchData() - }, []) + const result = await fetch(releasesURL).then(data => data.json()); + setReleaseHistory(result); + }; + fetchData(); + }, []); - return releaseHistory + return releaseHistory; } From 79316f7b236da8db0fef7d9e53fcefd5133e2183 Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 7 Sep 2019 12:56:42 -0700 Subject: [PATCH 06/40] feat: Add API docs hook and render list of modules for POC API page --- src/hooks/index.tsx | 17 ++--------------- src/hooks/useApiDocs.tsx | 34 +++++++++++++++++++++++++++++++++ src/hooks/useReleaseHistory.tsx | 15 +++++++++++++++ src/pages/docs.tsx | 9 +++++++++ 4 files changed, 60 insertions(+), 15 deletions(-) create mode 100644 src/hooks/useApiDocs.tsx create mode 100644 src/hooks/useReleaseHistory.tsx diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx index 5034e8fdd4..f5822c4f6c 100644 --- a/src/hooks/index.tsx +++ b/src/hooks/index.tsx @@ -1,15 +1,2 @@ -import { useState, useEffect } from 'react'; - -export function useReleaseHistory() { - const releasesURL = 'https://nodejs.org/dist/index.json'; - const [releaseHistory, setReleaseHistory] = useState([]); - useEffect(() => { - const fetchData = async () => { - const result = await fetch(releasesURL).then(data => data.json()); - setReleaseHistory(result); - }; - fetchData(); - }, []); - - return releaseHistory; -} +export { useApiData } from './useApiDocs'; +export { useReleaseHistory } from './useReleaseHistory'; diff --git a/src/hooks/useApiDocs.tsx b/src/hooks/useApiDocs.tsx new file mode 100644 index 0000000000..872aae58c5 --- /dev/null +++ b/src/hooks/useApiDocs.tsx @@ -0,0 +1,34 @@ +import { useState, useEffect } from 'react'; + +// TODO: Flesh out API types. +/* tslint:disable */ +interface APIResponse { + classes: any[]; + globals: any[]; + methods: any[]; + miscs: any[]; + modules: any[]; +} +/* tslint:enable */ + +export function useApiData(version: string): APIResponse { + const [apiData, setApiData] = useState({ + classes: [], + globals: [], + methods: [], + miscs: [], + modules: [], + }); + + useEffect(() => { + const fetchData = async () => { + const res = await window.fetch( + `https://nodejs.org/dist/${version}/docs/api/all.json` + ); + setApiData((await res.json()) as APIResponse); + }; + fetchData(); + }, []); + + return apiData; +} diff --git a/src/hooks/useReleaseHistory.tsx b/src/hooks/useReleaseHistory.tsx new file mode 100644 index 0000000000..5034e8fdd4 --- /dev/null +++ b/src/hooks/useReleaseHistory.tsx @@ -0,0 +1,15 @@ +import { useState, useEffect } from 'react'; + +export function useReleaseHistory() { + const releasesURL = 'https://nodejs.org/dist/index.json'; + const [releaseHistory, setReleaseHistory] = useState([]); + useEffect(() => { + const fetchData = async () => { + const result = await fetch(releasesURL).then(data => data.json()); + setReleaseHistory(result); + }; + fetchData(); + }, []); + + return releaseHistory; +} diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index 059654b45d..66698e08a4 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -1,15 +1,24 @@ import React from 'react'; +import { useApiData } from '../hooks'; import Hero from '../components/hero'; import Layout from '../components/layout'; export default () => { const title = 'API Docs'; const description = 'Come learn yourself something.'; + const apiData = useApiData('v12.9.1'); return (
    +

    Welcome to the API Page!

     From d3071d14c6c6b63171ed0c5ad366ff4944577986 Mon Sep 17 00:00:00 2001 From: Jon Church Date: Sat, 7 Sep 2019 16:20:14 -0400 Subject: [PATCH 07/40] feat: Use useReleaseHistory hook to fetch data --- src/pages/download.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/download.tsx b/src/pages/download.tsx index 9ad3f05ddc..13423d5f70 100644 --- a/src/pages/download.tsx +++ b/src/pages/download.tsx @@ -1,8 +1,10 @@ import React from 'react'; +import { useReleaseHistory } from '../hooks' import Hero from '../components/hero'; import Layout from '../components/layout'; export default () => { + const releaseHistory = useReleaseHistory().slice(0, 24) const title = 'Download Node.js'; const description = 'Come get me!'; @@ -11,6 +13,7 @@ export default () => {

    Welcome to the Downloads Page!

    +

    {JSON.stringify(releaseHistory)}

    ); From 554d5ce16e13e5f390cfe186a4302c9d3757bc3a Mon Sep 17 00:00:00 2001 From: Jon Church Date: Sat, 7 Sep 2019 17:10:43 -0400 Subject: [PATCH 08/40] feat: Add release table component, add to downloads page --- src/components/release-table.tsx | 53 ++++++++++++++++++++++++++++++++ src/pages/download.tsx | 7 +++-- 2 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 src/components/release-table.tsx diff --git a/src/components/release-table.tsx b/src/components/release-table.tsx new file mode 100644 index 0000000000..6d8fd693a3 --- /dev/null +++ b/src/components/release-table.tsx @@ -0,0 +1,53 @@ +import React from 'react'; + +const ReleaseTable = ({ releases }) => { + return ( + + + + + + + + + + + + + + {releases.map( + ({ version, date, files, npm, v8, lts }, index: number) => { + const majorVersion = version.substring(1).split('.')[0]; + + return ( + + + + + + + + + + + ); + } + )} + +
    VersionLTSDateV8NPMABISHASUM
    {version}{lts ? lts : ''}{date}{v8}{npm}ABI? + + Changelog + + + + Download + +
    + ); +}; + +export default ReleaseTable; diff --git a/src/pages/download.tsx b/src/pages/download.tsx index 13423d5f70..b08451d81d 100644 --- a/src/pages/download.tsx +++ b/src/pages/download.tsx @@ -1,10 +1,11 @@ import React from 'react'; -import { useReleaseHistory } from '../hooks' +import { useReleaseHistory } from '../hooks'; import Hero from '../components/hero'; import Layout from '../components/layout'; +import ReleaseTable from '../components/release-table'; export default () => { - const releaseHistory = useReleaseHistory().slice(0, 24) + const releaseHistory = useReleaseHistory().slice(0, 24); const title = 'Download Node.js'; const description = 'Come get me!'; @@ -13,7 +14,7 @@ export default () => {

    Welcome to the Downloads Page!

    -

    {JSON.stringify(releaseHistory)}

    +
    ); From 6421f37f527697bbfe6890c30c12e26fc8319353 Mon Sep 17 00:00:00 2001 From: Jon Church Date: Sat, 7 Sep 2019 17:13:32 -0400 Subject: [PATCH 09/40] fix: Off by one error when slicing release history first 25 --- src/pages/download.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/download.tsx b/src/pages/download.tsx index b08451d81d..660c995d8b 100644 --- a/src/pages/download.tsx +++ b/src/pages/download.tsx @@ -5,7 +5,7 @@ import Layout from '../components/layout'; import ReleaseTable from '../components/release-table'; export default () => { - const releaseHistory = useReleaseHistory().slice(0, 24); + const releaseHistory = useReleaseHistory().slice(0, 25); const title = 'Download Node.js'; const description = 'Come get me!'; From 3a48e2671036a445e60ac5465b3e85bf330db4f7 Mon Sep 17 00:00:00 2001 From: Jon Church Date: Sat, 7 Sep 2019 17:18:57 -0400 Subject: [PATCH 10/40] fix: Key rows off version instead of index --- src/components/release-table.tsx | 56 +++++++++++++++----------------- 1 file changed, 27 insertions(+), 29 deletions(-) diff --git a/src/components/release-table.tsx b/src/components/release-table.tsx index 6d8fd693a3..af0199caaa 100644 --- a/src/components/release-table.tsx +++ b/src/components/release-table.tsx @@ -15,36 +15,34 @@ const ReleaseTable = ({ releases }) => { - {releases.map( - ({ version, date, files, npm, v8, lts }, index: number) => { - const majorVersion = version.substring(1).split('.')[0]; + {releases.map(({ version, date, files, npm, v8, lts }) => { + const majorVersion = version.substring(1).split('.')[0]; - return ( - - {version} - {lts ? lts : ''} - {date} - {v8} - {npm} - ABI? - -     - Changelog - - - - - Download - - - - ); - } - )} + return ( + + {version} + {lts ? lts : ''} + {date} + {v8} + {npm} + ABI? + + + Changelog + + + + + Download + + + + ); + })} ); From 6b422919cbb3d2ec67b7fe89d31040d4044b0025 Mon Sep 17 00:00:00 2001 From: Oscar Gonzalez Date: Sat, 7 Sep 2019 15:43:58 -0700 Subject: [PATCH 11/40] feat: Add design tokens and style-guide page (#311) --- src/components/authors-list.tsx | 2 +- src/components/edit-link.tsx | 2 +- src/components/layout.tsx | 5 +- src/components/pagination.tsx | 2 +- src/pages/style-guide.tsx | 39 ++++ src/styles/_tokens.css | 159 +++++++++++++ src/{components => styles}/layout.css | 212 +++++++----------- src/{components => styles}/mobile.css | 15 +- .../__snapshots__/authors-list.test.tsx.snap | 2 +- .../__snapshots__/edit-link.test.tsx.snap | 2 +- .../__snapshots__/pagination.test.tsx.snap | 10 +- 11 files changed, 300 insertions(+), 150 deletions(-) create mode 100644 src/pages/style-guide.tsx create mode 100644 src/styles/_tokens.css rename src/{components => styles}/layout.css (90%) rename src/{components => styles}/mobile.css (89%) diff --git a/src/components/authors-list.tsx b/src/components/authors-list.tsx index 93d82b9c55..7da3c8dfd8 100644 --- a/src/components/authors-list.tsx +++ b/src/components/authors-list.tsx @@ -7,7 +7,7 @@ const list: SerializedStyles = css` flex-wrap: wrap; margin: 5rem 0 2.5rem; align-items: center; - color: var(--gray7); + color: var(--black7); text-transform: uppercase; padding-left: 0; diff --git a/src/components/edit-link.tsx b/src/components/edit-link.tsx index c2fa597a8d..9c8bb3d759 100644 --- a/src/components/edit-link.tsx +++ b/src/components/edit-link.tsx @@ -7,7 +7,7 @@ const edit: SerializedStyles = css` `; const link: SerializedStyles = css` - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 8eb37f5cc1..d419b59c22 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -2,8 +2,9 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; import 'prismjs/themes/prism-okaidia.css'; import React, { useEffect, useRef } from 'react'; import Header from './header'; -import './layout.css'; -import './mobile.css'; +import '../styles/_tokens.css'; +import '../styles/layout.css'; +import '../styles/mobile.css'; import SEO from './seo'; import { isMobileScreen } from '../util/isScreenWithinWidth'; import { notifyWhenStickyHeadersChange } from '../util/notifyWhenStickyHeadersChange'; diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx index f5f4f4deda..543fae0fbb 100644 --- a/src/components/pagination.tsx +++ b/src/components/pagination.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { PaginationInfo } from '../types'; const link: SerializedStyles = css` - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; diff --git a/src/pages/style-guide.tsx b/src/pages/style-guide.tsx new file mode 100644 index 0000000000..ec9f6ba0b8 --- /dev/null +++ b/src/pages/style-guide.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import '../styles/layout.css'; + +type Props = { + heading: string; + tableOfContents: string; +}; + +const StyleGuidePage = ({ heading }: Props) => { + return ( +
    +
    Display1
    +
    Display2
    +
    Display3
    +
    Headline
    +
    Subheading
    +
    Body1
    +
    Body2
    +
    Caption
    +
    Overline
    + +

    H1

    +

    H2

    +

    H3

    +

    + Open Sans is a humanist sans serif typeface designed by Steve Matteson, + Type Director of Ascender Corp. This version contains the complete 897 + character set, which includes the standard ISO Latin 1, Latin CE, Greek + and Cyrillic character sets. Open Sans was designed with an upright + stress, open forms and a neutral, yet friendly appearance. It was + optimized for print, web, and mobile interfaces, and has excellent + legibility characteristics in its letterforms. +

    + This is a link +
    + ); +}; + +export default StyleGuidePage; diff --git a/src/styles/_tokens.css b/src/styles/_tokens.css new file mode 100644 index 0000000000..f9336421ac --- /dev/null +++ b/src/styles/_tokens.css @@ -0,0 +1,159 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap'); +@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); + +body { + /* Colors */ + --brand2: #C5E5B4; + --brand3: #99CC7D; + --brand4: #84BA64; + --brand5: #5FA04E; + --brand6: #417E38; + --brand7: #2C682C; + --brand8: #215127; + --brand9: #1A3F1D; + + --black0: #FFFFFF; + --black1: #F6F7F9; + --black2: #E9EDF0; + --black3: #D9E1E4; + --black4: #CBD4D9; + --black5: #B1BCC2; + --black6: #929FA5; + --black7: #6E7B83; + --black8: #556066; + --black9: #2C3437; + + --warning1: #FDF3E7; + --warning2: #FAD9B0; + --warning3: #F5BC75; + --warning4: #E99C40; + --warning5: #D07912; + --warning6: #AE5F00; + --warning7: #8B4D04; + --warning8: #683D08; + --warning9: #4D2F0B; + + --danger1: #FBF1F0; + --danger2: #FAD3D4; + --danger3: #FAB6B7; + --danger4: #FA8E8E; + --danger5: #F65354; + --danger6: #DE1A1B; + --danger7: #B80C0C; + --danger8: #900E0E; + --danger9: #661514; + + --info1: #E9F4FA; + --info2: #BCE6FC; + --info3: #8ED4F8; + --info4: #52BAED; + --info5: #229AD6; + --info6: #0C7BB3; + --info7: #066291; + --info8: #074D71; + --info9: #0A3953; + + --purple1: #F7F1FB; + --purple2: #EAD9FB; + --purple3: #DBBDF9; + --purple4: #C79BF2; + --purple5: #AF74E8; + --purple6: #9756D6; + --purple7: #7D3CBE; + --purple8: #642B9E; + --purple9: #361B52; + + --pink1: #FBF0F4; + --pink2: #FBD4E6; + --pink3: #FBB4D2; + --pink4: #F68BB7; + --pink5: #ED5393; + --pink6: #D6246E; + --pink7: #B01356; + --pink8: #8B1245; + --pink9: #411526; + + --color-brand-primary: var(--brand5); + + --color-text-primary: var(--black9); + --color-text-secondary: var(--black7); + --color-text-accent: var(--color-brand-primary); + + --color-border-primary: var(--black4); + --color-border-secondary: var(--black3); + --color-border-accent: var(--color-brand-primary); + + --color-fill-app: var(--black0); + --color-fill-canvas: var(--black0); + --color-fill-side-nav: var(--black1); + --color-fill-top-nav: var(--black0); + --color-fill-action: var(--brand5); /*for actionable elements*/ + + /* Typography */ + --base-type-face: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + --base-font-size: 16px; + + --font-size-display1: 3.75rem; /*60px*/ + --font-size-display2: 3rem; /*48px*/ + --font-size-display3: 2.125rem; /*34px*/ + --font-size-headline: 1.5rem; /*24px*/ + --font-size-subheading: 1.25rem; /*20px*/ + --font-size-body1: var(--base-font-size); /*16px*/ + --font-size-body2: 0.875rem; /*14px*/ + --font-size-caption: 0.75rem; /*12px*/ + --font-size-overline: 0.625rem; /*10px*/ + --font-size-code: 0.75rem; /*12px*/ + + --line-height-display1: 4.5rem ; /*72px*/ + --line-height-display2: 3.5625rem; /*57px*/ + --line-height-display3: 3.05rem ; /*40.8px*/ + --line-height-headline: 1.8rem; /*28.8px*/ + --line-height-subheading: 1.875rem; /*30px*/ + --line-height-body1: 1.5rem; /*24px*/ + --line-height-body2: 1.3125rem; /*21px*/ + --line-height-caption: 1.125rem; /*18px*/ + --line-height-overline: 0.9375rem; /*15px*/ + --line-height-code: 2.5rem; /*24px*/ + + --font-weight-light: 100; + --font-weight-regular: normal; + --font-weight-semibold: 600; + --font-weight-bold: 900; + + /* Spacing */ + --space-01: 0.0625rem; /*1px*/ + --space-02: 0.125rem; /*2px*/ + --space-04: 0.25rem; /*4px*/ + --space-08: 0.5rem; /*8px*/ + --space-12: 0.75rem; /*12px*/ + --space-16: 1rem; /*16px*/ + --space-20: 1.25rem; /*20px*/ + --space-24: 1.5rem; /*24px*/ + --space-32: 2rem; /*32px*/ + --space-40: 2.5rem; /*40px*/ + --space-48: 3rem; /*48px*/ + --space-64: 4rem; /*64px*/ + --space-80: 5rem; /*80px*/ + --space-96: 6rem; /*96px*/ + --space-128: 8rem; /*128px*/ + --space-160: 10rem; /*160px*/ +} + +.dark-mode { + /* Colors */ + --color-brand-primary: var(--brand5); + + --color-text-primary: var(--black4); + --color-text-secondary: var(--black6); + --color-text-accent: var(--brand4); + + --color-border-primary: var(--black4); + --color-border-secondary: var(--black3); + --color-border-accent: var(--brand4); + + --color-fill-app: #090C15; + --color-fill-canvas: #090C15; + --color-fill-side-nav: #0D111D; + --color-fill-top-nav: #090C15; + --color-fill-action: var(--brand4); /*for actionable elements*/ +} \ No newline at end of file diff --git a/src/components/layout.css b/src/styles/layout.css similarity index 90% rename from src/components/layout.css rename to src/styles/layout.css index 665bbb75bf..5d92f7dd67 100644 --- a/src/components/layout.css +++ b/src/styles/layout.css @@ -1,109 +1,88 @@ -@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=latin,latin-ext); -@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic&subset=latin,latin-ext); - html { - font-size: 10px; margin: 0; + box-sizing: border-box; } body { - background: var(--gray0); - color: var(--gray9); - font-family: var(--sans-serif); - font-size: 1.8rem; + background: var(--color-fill-app); + color: var(--color-text-primary); + font-size: var(--base-font-size); + font-family: var(--base-type-face); margin: 0; - padding-top: var(--nav-height); /* Set in JavaScript */ --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%); - --banner-gradient: linear-gradient(to right, var(--purple9), var(--blue7)); + --banner-gradient: linear-gradient(to right, var(--accent9), var(--info7)); --nav-height: 6.2rem; --hero-height: 36.0rem; - --sans-serif: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - --serif: 'Merriweather', Georgia, Cambria, "Times New Roman", Times, serif; - - --gray0: #F5F6F7; - --gray1: #EAEDEF; - --gray2: #DAE1E5; - --gray3: #CBD4D8; - --gray4: #B0BCC1; - --gray5: #929FA5; - --gray6: #6F7B82; - --gray7: #556066; - --gray8: #3F484C; - --gray9: #2D3438; - --red0: #FAF0F0; - --red1: #FAD4D4; - --red2: #FAB6B6; - --red3: #FA8E8E; - --red4: #F55353; - --red5: #DE1B1B; - --red6: #B80D0D; - --red7: #8F0E0E; - --red8: #661414; - --red9: #451717; - --orange0: #FCF2E6; - --orange1: #FAD8AF; - --orange2: #F5BC76; - --orange3: #E89C3F; - --orange4: #CF7911; - --orange5: #AD5F00; - --orange6: #8A4D03; - --orange7: #693D07; - --orange8: #4D2F0B; - --orange9: #33210C; - --green0: #ECF2E9; - --green1: #C5E5B5; - --green2: #9ACC7D; - --green3: #83BA63; - --green4: #5FA04D; - --green5: #417F38; - --green6: #2C682C; - --green7: #215127; - --green8: #193F1D; - --green9: #0F260F; - --blue0: #E8F4FA; - --blue1: #BBE5FA; - --blue2: #8DD4F7; - --blue3: #53BAED; - --blue4: #229AD6; - --blue5: #0C7BB3; - --blue6: #066391; - --blue7: #064D70; - --blue8: #093952; - --blue9: #0C2938; - --purple0: #F5F0FA; - --purple1: #EAD9FA; - --purple2: #DABCF7; - --purple3: #C79BF2; - --purple4: #AE74E8; - --purple5: #9656D6; - --purple6: #7D3CBD; - --purple7: #642B9E; - --purple8: #4B2175; - --purple9: #371C52; - --pink0: #FAF0F4; - --pink1: #FAD4E4; - --pink2: #FAB4D1; - --pink3: #F78BB8; - --pink4: #ED5393; - --pink5: #D6246E; - --pink6: #B01355; - --pink7: #8A1244; - --pink8: #611535; - --pink9: #421527; - - --brand-light: var(--green3); - --brand: var(--green5); - --brand-dark: var(--green7); + --brand-light: var(--brand3); + --brand: var(--brand5); + --brand-dark: var(--brand7); +} + +.t-display1, h1 { + font-size: var(--font-size-display1); + line-height: var(--line-height-display1); + font-weight: var(--font-weight-light); + margin-bottom: var(--spacing-80); +} +.t-display2 { + font-size: var(--font-size-display2); + line-height: var(--line-height-display2); + font-weight: var(--font-weight-regular); +} +.t-display3 { + font-size: var(--font-size-display3); + line-height: var(--line-height-display3); + font-weight: var(--font-weight-regular); +} +.t-headline, h2 { + font-size: var(--font-size-headline); + line-height: var(--line-height-headline); + font-weight: var(--font-weight-semibold); + margin-bottom: var(--spacing-24); +} +.t-subheading, h3 { + font-size: var(--font-size-subheading); + line-height: var(--line-height-subheading); + font-weight: var(--font-weight-semibold); + margin-bottom: var(--spacing-08); +} +.t-body1, p { + font-size: var(--font-size-body1); + line-height: var(--line-height-body1); + font-weight: var(--font-weight-regular); + margin-bottom: var(--space-24); +} +.t-body2 { + font-size: var(--font-size-body2); + line-height: var(--line-height-body2); + font-weight: var(--font-weight-regular); +} +.t-caption { + font-size: var(--font-size-caption); + line-height: var(--line-height-caption); + font-weight: var(--font-weight-regular); +} +.t-overline { + font-size: var(--font-size-overline); + line-height: var(--line-height-overline); + font-weight: var(--font-weight-normal); + color: var(--color-text-secondary); + text-transform: uppercase; +} +.t-link, a { + color: var(--color-text-accent); + text-decoration: underline; + cursor: pointer; } /* Start: Syntax Highlight Overrides */ :not(pre) > code[class*="language-"] { - background-color: var(--gray2) !important; - color: var(--gray9) !important; + background-color: var(--black2) !important; + color: var(--black9) !important; padding: 0 6px !important; text-decoration: none; text-shadow: none; @@ -111,14 +90,14 @@ body { pre[class*="language-"], code[class*="language-"] { - color: var(--gray2) !important; - background: var(--gray9) !important; -} -.token.punctuation { color: var(--gray2) !important; } -.token.operator { color: var(--gray2) !important; } -.token.function { color: var(--orange3) !important; } -.token.keyword { color: var(--blue3) !important; } -.token.string { color: var(--green3) !important; } + color: var(--black2) !important; + background: var(--black9) !important; +} +.token.punctuation { color: var(--black2) !important; } +.token.operator { color: var(--black2) !important; } +.token.function { color: var(--warning3) !important; } +.token.keyword { color: var(--info3) !important; } +.token.string { color: var(--brand3) !important; } .token.number { color: var(--purple3) !important; } /* End: Syntax Highlight Overrides */ @@ -129,7 +108,7 @@ main { } :focus { - outline: var(--green3) dotted 2px; + outline: var(--brand3) dotted 2px; } [data-is-focused="true"] { @@ -156,7 +135,6 @@ main { .nav__tabs { text-decoration: none; - font-size: 14px; margin-left: 16px; } @@ -165,7 +143,6 @@ main { color: black; } - .hero { align-items: center; display: flex; @@ -181,7 +158,6 @@ main { .hero h1 { bottom: 28px; color: white; - font-size: 4.2rem; font-weight: 600; left: 460px; max-width: 768px; @@ -229,7 +205,7 @@ main { .side-nav::before { background: var(--banner-gradient); - background-color: var(--gray9); + background-color: var(--black9); background-size: 100vw 100%; clip-path: var(--banner-clip); content: ""; @@ -278,7 +254,7 @@ main { align-items: center; border-radius: 4px; box-sizing: border-box; - color: var(--gray9); + color: var(--black9); cursor: pointer; line-height: 2.4rem; list-style: none; @@ -289,7 +265,7 @@ main { } .side-nav__item { - color: var(--gray9); + color: var(--black9); text-decoration: none; display: block; } @@ -351,7 +327,6 @@ main { color: white; overflow: visible; border: none; - font-size: 1.8rem; text-indent: 3.2rem; line-height: 0; font-weight: 200; @@ -394,9 +369,7 @@ main { /* Start: Article Reader HTML Reset */ .article-reader { - color: var(--gray9); - font-family: var(--serif); - font-size: 1.8rem; + color: var(--black9); font-style: normal; font-weight: 400; line-height: 1.58; @@ -423,10 +396,10 @@ main { } .article-reader a { - color: var(--gray9); + color: var(--black9); font-weight: 600; text-decoration: underline; - text-decoration-color: var(--gray4); + text-decoration-color: var(--black4); transition: all ease-out 0.2s; } @@ -460,20 +433,9 @@ main { padding-bottom: 0.1rem; } -.article-reader h1 { font-size: 4.8rem; } -.article-reader h2 { font-size: 4.0rem; } -.article-reader h3 { font-size: 3.2rem; } -.article-reader h4 { font-size: 2.4rem; } -.article-reader h5 { font-size: 2.0rem; } -.article-reader h6 { - font-size: 1.8rem; - font-weight: 800; -} - .article-reader blockquote { - border-left: 3px solid var(--gray4); - color: var(--gray6); - font-size: 2.0rem; + border-left: 3px solid var(--black4); + color: var(--black6); font-style: italic; font-weight: 200; letter-spacing: 1px; @@ -565,7 +527,7 @@ details, .toc a { font-family: var(--sans-serif); text-decoration: underline; - text-decoration-color: var(--gray4); + text-decoration-color: var(--black4); transition: all ease-out 0.2s; } @@ -584,7 +546,7 @@ details, .autolink-headers { position: absolute; left: -4px; - fill: var(--orange3); + fill: var(--warning3); } /* IntersectionObserver related styles */ diff --git a/src/components/mobile.css b/src/styles/mobile.css similarity index 89% rename from src/components/mobile.css rename to src/styles/mobile.css index 4e875d27f5..55c15456f9 100644 --- a/src/components/mobile.css +++ b/src/styles/mobile.css @@ -26,7 +26,7 @@ position: fixed; left: 0; top: 0; - background-color: var(--gray0); + background-color: var(--black0); transform: translateX(-120%); transition: transform .28s; pointer-events: none; @@ -74,7 +74,7 @@ @media (max-width: 720px) { html { - font-size: 9px; + font-size: 0.5625rem; } body { @@ -173,17 +173,6 @@ margin: 4.2rem 0 0; } - - .article-reader h1 { font-size: 3.2rem; } - .article-reader h2 { font-size: 2.8rem; } - .article-reader h3 { font-size: 2.4rem; } - .article-reader h4 { font-size: 2.2rem; } - .article-reader h5 { font-size: 2.0rem; } - .article-reader h6 { - font-size: 1.8rem; - font-weight: 800; - } - /* Place top sentinels higher up on mobile */ .sticky-sentinel--top { top: -92px; diff --git a/test/components/__snapshots__/authors-list.test.tsx.snap b/test/components/__snapshots__/authors-list.test.tsx.snap index dab35efbcc..0ed20f5614 100644 --- a/test/components/__snapshots__/authors-list.test.tsx.snap +++ b/test/components/__snapshots__/authors-list.test.tsx.snap @@ -12,7 +12,7 @@ exports[`AuthorsList component renders correctly 1`] = ` flex-wrap: wrap; margin: 5rem 0 2.5rem; align-items: center; - color: var(--gray7); + color: var(--black7); text-transform: uppercase; padding-left: 0; diff --git a/test/components/__snapshots__/edit-link.test.tsx.snap b/test/components/__snapshots__/edit-link.test.tsx.snap index 03ea078a5e..a4cc25bae9 100644 --- a/test/components/__snapshots__/edit-link.test.tsx.snap +++ b/test/components/__snapshots__/edit-link.test.tsx.snap @@ -21,7 +21,7 @@ exports[`EditLink component renders correctly 1`] = ` "name": "1dmmrc2", "next": undefined, "styles": " - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; diff --git a/test/components/__snapshots__/pagination.test.tsx.snap b/test/components/__snapshots__/pagination.test.tsx.snap index e70597b24f..2dc1ac23c1 100644 --- a/test/components/__snapshots__/pagination.test.tsx.snap +++ b/test/components/__snapshots__/pagination.test.tsx.snap @@ -25,7 +25,7 @@ exports[`Pagination component only renders links to pages that has a title 1`] = "name": "u0j7sy", "next": undefined, "styles": " - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; @@ -74,7 +74,7 @@ exports[`Pagination component renders correctly when there is no next page 1`] = "name": "u0j7sy", "next": undefined, "styles": " - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; @@ -124,7 +124,7 @@ exports[`Pagination component renders correctly when there is no previous page 1 "name": "u0j7sy", "next": undefined, "styles": " - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; @@ -172,7 +172,7 @@ exports[`Pagination component renders links to the next and previous page 1`] = "name": "u0j7sy", "next": undefined, "styles": " - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; @@ -200,7 +200,7 @@ exports[`Pagination component renders links to the next and previous page 1`] = "name": "u0j7sy", "next": undefined, "styles": " - color: var(--gray7) !important; + color: var(--black7) !important; text-transform: uppercase; text-decoration: none !important; font-size: 1.4rem; From 2544d61a02e5fa0b41973be72473531c140cea43 Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 7 Sep 2019 16:59:33 -0700 Subject: [PATCH 12/40] feat: API Docs Version Switcher (#310) * feat: API Docs preview and version switcher * feat: Add design tokens and style-guide page (#311) * feat: API Docs preview and version switcher * feat: API Page Types * feat: Light/dark toggle in nav --- README.md | 2 +- src/components/header.tsx | 7 +++ src/components/layout.tsx | 2 +- src/hooks/useApiDocs.tsx | 79 ++++++++++++++++++++++---- src/hooks/useReleaseHistory.tsx | 16 +++++- src/pages/docs.tsx | 72 ++++++++++++++++++----- src/styles/layout.css | 27 +++++++++ src/styles/{_tokens.css => tokens.css} | 0 8 files changed, 177 insertions(+), 28 deletions(-) rename src/styles/{_tokens.css => tokens.css} (100%) diff --git a/README.md b/README.md index 1096b0dcd4..510a37a7d3 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@

    -**Watch this repo and [nodejs/website-redesign](https://github.com/nodejs/website-redesign/). This repo is a codebase for the initiative. Ongoing work is also happening in the administrative/planning repo at [nodejs/website-redesign](https://github.com/nodejs/website-redesign/).** +**You can find the latest [Figma design protype here](https://www.figma.com/proto/lOxAGGg5KXb6nwie7zXkz6/NJ---Design-System?node-id=1276%3A10492&viewport=-232%2C-1378%2C0.21998274326324463&scaling=min-zoom).** ## 🚀 Get Started diff --git a/src/components/header.tsx b/src/components/header.tsx index e688116c41..b88bd63987 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -36,6 +36,13 @@ const Header = () => ( GitHub
    • +
  • + +
    • ); diff --git a/src/components/layout.tsx b/src/components/layout.tsx index d419b59c22..3780b97848 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -2,7 +2,7 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; import 'prismjs/themes/prism-okaidia.css'; import React, { useEffect, useRef } from 'react'; import Header from './header'; -import '../styles/_tokens.css'; +import '../styles/tokens.css'; import '../styles/layout.css'; import '../styles/mobile.css'; import SEO from './seo'; diff --git a/src/hooks/useApiDocs.tsx b/src/hooks/useApiDocs.tsx index 872aae58c5..ca345093e3 100644 --- a/src/hooks/useApiDocs.tsx +++ b/src/hooks/useApiDocs.tsx @@ -1,17 +1,70 @@ import { useState, useEffect } from 'react'; +export interface ApiDocsMeta { + added: string[]; + changes: string[]; +} +export interface ApiDocsBase { + type: string; + name: string; + textRaw: string; + displayName?: string; + desc?: string; + meta?: ApiDocsMeta; + introduced_in?: string; +} + +export interface ApiDocsMiscs extends ApiDocsBase { + type: 'misc'; + miscs?: ApiDocsMiscs[]; +} + +export interface ApiDocsMethod extends ApiDocsBase { + type: 'method'; + signatures: ApiDocsSignature[]; +} +export interface ApiDocsSignature extends ApiDocsBase { + params: ApiDocsProp[]; +} -// TODO: Flesh out API types. -/* tslint:disable */ -interface APIResponse { - classes: any[]; - globals: any[]; - methods: any[]; - miscs: any[]; - modules: any[]; +export interface ApiDocsClass extends ApiDocsBase { + type: 'class'; + methods: ApiDocsMethod[]; + properties: ApiDocsProp[]; + signatures: ApiDocsSignature[]; } -/* tslint:enable */ -export function useApiData(version: string): APIResponse { +export interface ApiDocsProp extends ApiDocsBase { + type: string; +} + +export interface ApiDocsModule extends ApiDocsBase { + type: 'module'; + stability: number; + stabilityText: string; + modules?: ApiDocsModule[]; + methods?: ApiDocsMethod[]; + classes?: ApiDocsClass[]; + properties?: ApiDocsProp[]; + miscs?: ApiDocsMiscs[]; +} + +export interface APIResponse { + classes: ApiDocsClass[]; + globals: ApiDocsProp[]; + methods: ApiDocsMethod[]; + miscs: ApiDocsMiscs[]; + modules: ApiDocsModule[]; +} + +export type ApiDocsObj = + | ApiDocsMiscs + | ApiDocsMethod + | ApiDocsSignature + | ApiDocsClass + | ApiDocsProp + | ApiDocsModule; + +export function useApiData(version: string | null): APIResponse { const [apiData, setApiData] = useState({ classes: [], globals: [], @@ -27,8 +80,10 @@ export function useApiData(version: string): APIResponse { ); setApiData((await res.json()) as APIResponse); }; - fetchData(); - }, []); + if (version) { + fetchData(); + } + }, [version]); return apiData; } diff --git a/src/hooks/useReleaseHistory.tsx b/src/hooks/useReleaseHistory.tsx index 5034e8fdd4..14b3552f9d 100644 --- a/src/hooks/useReleaseHistory.tsx +++ b/src/hooks/useReleaseHistory.tsx @@ -1,8 +1,22 @@ import { useState, useEffect } from 'react'; +export interface ReleaseData { + date: string; + version: string; + files: string[]; + lts: boolean; + v8: string; + npm?: string; + modules?: String; + openssl?: string; + security?: boolean; + uv?: string; + zlib?: string; +} + export function useReleaseHistory() { const releasesURL = 'https://nodejs.org/dist/index.json'; - const [releaseHistory, setReleaseHistory] = useState([]); + const [releaseHistory, setReleaseHistory] = useState([]); useEffect(() => { const fetchData = async () => { const result = await fetch(releasesURL).then(data => data.json()); diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index 66698e08a4..8ceb2d0118 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -1,25 +1,71 @@ -import React from 'react'; -import { useApiData } from '../hooks'; -import Hero from '../components/hero'; +import React, { useState } from 'react'; +import { useApiData, useReleaseHistory } from '../hooks'; +import { ApiDocsObj, APIResponse } from '../hooks/useApiDocs'; import Layout from '../components/layout'; +function sideBarSection( + title: string, + section: keyof APIResponse, + data: APIResponse, + setPage: Function +) { + return ( +
  • +

    {title}

    + +
    • + ); +} + export default () => { const title = 'API Docs'; const description = 'Come learn yourself something.'; - const apiData = useApiData('v12.9.1'); + const [version, setVersion] = useState(null); + const [page, setPage] = useState(null); + + // Magical function filters out all major versions less than 6. + // TODO: Remove the magical number for the major version. Fet from dynamic releases data to filter out EOL'd versions. + const releases = useReleaseHistory().filter( + r => parseInt(r.version.slice(1), 10) >= 6 + ); + const apiData = useApiData( + version || (releases[0] && releases[0].version) || null + ); return ( - +
    - -

    Welcome to the API Page!

    + {page && page.desc && ( +

    + )}

    ); diff --git a/src/styles/layout.css b/src/styles/layout.css index 5d92f7dd67..bdc3ad5754 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -9,6 +9,7 @@ body { font-size: var(--base-font-size); font-family: var(--base-type-face); margin: 0; + margin-top: 100px; /* Set in JavaScript */ --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%); @@ -78,6 +79,32 @@ body { cursor: pointer; } +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +body:not(.dark-mode) .dark-mode-only { + display: none; +} + +.dark-mode .light-mode-only { + display: none; +} + +.dark-mode-toggle { + border: none; + background: none; + cursor: pointer; + color: var(--color-text-accent); +} + /* Start: Syntax Highlight Overrides */ :not(pre) > code[class*="language-"] { diff --git a/src/styles/_tokens.css b/src/styles/tokens.css similarity index 100% rename from src/styles/_tokens.css rename to src/styles/tokens.css From ed1e0037004b005b31d59d4a260b053f46c473ae Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 7 Sep 2019 19:08:33 -0700 Subject: [PATCH 13/40] chore: Move base font size to 10px --- src/components/header.tsx | 22 +++++--- src/components/navigation-item.tsx | 2 +- src/styles/layout.css | 53 +++---------------- src/styles/tokens.css | 81 ++++++++++++++++-------------- src/templates/learn.tsx | 1 - 5 files changed, 66 insertions(+), 93 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index b88bd63987..40b289e3fa 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -31,18 +31,26 @@ const Header = () => (
  • Download
    • -
  • - - GitHub - -
    • -
  • -
    • + +
  • + + GitHub + + + + +
    • ); diff --git a/src/components/navigation-item.tsx b/src/components/navigation-item.tsx index eb0faf1965..17f5d472f6 100644 --- a/src/components/navigation-item.tsx +++ b/src/components/navigation-item.tsx @@ -41,7 +41,7 @@ const NavigationItem = ({ return ( diff --git a/src/styles/layout.css b/src/styles/layout.css index bdc3ad5754..a5eb46ce8d 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -6,7 +6,7 @@ html { body { background: var(--color-fill-app); color: var(--color-text-primary); - font-size: var(--base-font-size); + font-size: 1.6rem; font-family: var(--base-type-face); margin: 0; margin-top: 100px; @@ -79,6 +79,12 @@ body { cursor: pointer; } +.t-link:hover, a:hover, .t-link:active, a:active { + color: var(--color-text-accent); + text-decoration: none; + cursor: pointer; +} + .sr-only { position: absolute; width: 1px; @@ -396,11 +402,6 @@ main { /* Start: Article Reader HTML Reset */ .article-reader { - color: var(--black9); - font-style: normal; - font-weight: 400; - line-height: 1.58; - letter-spacing: -.003em; max-width: 768px; padding-left: 4.2rem; width: calc(100% - 36.0rem); @@ -418,51 +419,13 @@ main { border: 0; } -.article-reader p { - margin-bottom: 2.8rem; -} - -.article-reader a { - color: var(--black9); - font-weight: 600; - text-decoration: underline; - text-decoration-color: var(--black4); - transition: all ease-out 0.2s; -} - -.article-reader a:hover { - color: var(--brand-light); - text-decoration: none; -} - -.article-reader h1, -.article-reader h2, -.article-reader h3, -.article-reader h4, -.article-reader h5, -.article-reader h6 { - font-family: var(--sans-serif); - margin-bottom: 0.1rem; - position: relative; -} - -.article-reader h1 { - margin-bottom: 2.8rem; -} - .hero h1 { cursor: pointer; } -.article-reader h2, -.article-reader h3 { - border-bottom: 1px solid #eaecef; - padding-bottom: 0.1rem; -} - .article-reader blockquote { border-left: 3px solid var(--black4); - color: var(--black6); + color: var(--color-text-primary); font-style: italic; font-weight: 200; letter-spacing: 1px; diff --git a/src/styles/tokens.css b/src/styles/tokens.css index f9336421ac..eb2d8497f3 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -1,6 +1,10 @@ @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); +html { + font-size: 10px; +} + body { /* Colors */ --brand2: #C5E5B4; @@ -91,29 +95,28 @@ body { /* Typography */ --base-type-face: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - --base-font-size: 16px; - - --font-size-display1: 3.75rem; /*60px*/ - --font-size-display2: 3rem; /*48px*/ - --font-size-display3: 2.125rem; /*34px*/ - --font-size-headline: 1.5rem; /*24px*/ - --font-size-subheading: 1.25rem; /*20px*/ - --font-size-body1: var(--base-font-size); /*16px*/ - --font-size-body2: 0.875rem; /*14px*/ - --font-size-caption: 0.75rem; /*12px*/ - --font-size-overline: 0.625rem; /*10px*/ - --font-size-code: 0.75rem; /*12px*/ - - --line-height-display1: 4.5rem ; /*72px*/ - --line-height-display2: 3.5625rem; /*57px*/ - --line-height-display3: 3.05rem ; /*40.8px*/ - --line-height-headline: 1.8rem; /*28.8px*/ - --line-height-subheading: 1.875rem; /*30px*/ - --line-height-body1: 1.5rem; /*24px*/ - --line-height-body2: 1.3125rem; /*21px*/ - --line-height-caption: 1.125rem; /*18px*/ - --line-height-overline: 0.9375rem; /*15px*/ - --line-height-code: 2.5rem; /*24px*/ + + --font-size-display1: 6.0rem; + --font-size-display2: 4.8rem; + --font-size-display3: 3.4rem; + --font-size-headline: 2.4rem; + --font-size-subheading: 2.0rem; + --font-size-body1: 1.6rem; + --font-size-body2: 1.4rem; + --font-size-caption: 1.2rem; + --font-size-overline: 1.0rem; + --font-size-code: 1.2rem; + + --line-height-display1: 7.2rem; + --line-height-display2: 5.7rem; + --line-height-display3: 4.08rem; + --line-height-headline: 2.88rem; + --line-height-subheading: 3.0rem; + --line-height-body1: 2.4rem; + --line-height-body2: 2.1rem; + --line-height-caption: 1.8rem; + --line-height-overline: 1.5rem; + --line-height-code: 2.4rem; --font-weight-light: 100; --font-weight-regular: normal; @@ -121,22 +124,22 @@ body { --font-weight-bold: 900; /* Spacing */ - --space-01: 0.0625rem; /*1px*/ - --space-02: 0.125rem; /*2px*/ - --space-04: 0.25rem; /*4px*/ - --space-08: 0.5rem; /*8px*/ - --space-12: 0.75rem; /*12px*/ - --space-16: 1rem; /*16px*/ - --space-20: 1.25rem; /*20px*/ - --space-24: 1.5rem; /*24px*/ - --space-32: 2rem; /*32px*/ - --space-40: 2.5rem; /*40px*/ - --space-48: 3rem; /*48px*/ - --space-64: 4rem; /*64px*/ - --space-80: 5rem; /*80px*/ - --space-96: 6rem; /*96px*/ - --space-128: 8rem; /*128px*/ - --space-160: 10rem; /*160px*/ + --space-01: 0.1rem; + --space-02: 0.2rem; + --space-04: 0.4rem; + --space-08: 0.8rem; + --space-12: 1.2rem; + --space-16: 1.6rem; + --space-20: 2.0rem; + --space-24: 2.4rem; + --space-32: 3.2rem; + --space-40: 4.0rem; + --space-48: 4.8rem; + --space-64: 6.4rem; + --space-80: 8.0rem; + --space-96: 9.6rem; + --space-128: 12.8rem; + --space-160: 16.0rem; } .dark-mode { diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx index facb39f8e0..5a0258a579 100644 --- a/src/templates/learn.tsx +++ b/src/templates/learn.tsx @@ -24,7 +24,6 @@ export default ({ }: Props) => { return ( -
    Date: Sat, 7 Sep 2019 23:36:34 -0700 Subject: [PATCH 14/40] feat: API Page Styling - Add API Summary section at top of page - Fix dark mode on learn page - Add all API doc sections - Fix API object typings --- src/components/header.tsx | 15 ++-- src/components/layout.tsx | 48 ---------- src/hooks/useApiDocs.tsx | 34 ++++++-- src/pages/docs.tsx | 71 +++++++++++++-- src/styles/layout.css | 179 +++++++++++++++++++++++++++----------- 5 files changed, 230 insertions(+), 117 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index 40b289e3fa..c32e5449a6 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -23,15 +23,15 @@ const Header = () => (
  • - Learn + Learn
  • - Documentation + Documentation
  • - Download + Download
    • -
  • +
    • {sideBarSection('Globals', 'globals', apiData, setPage)} + {sideBarSection('Methods', 'methods', apiData, setPage)} + {sideBarSection('Misc', 'miscs', apiData, setPage)} {sideBarSection('Modules', 'modules', apiData, setPage)} + {sideBarSection('Classes', 'classes', apiData, setPage)} -
    - {page && page.desc && ( -

    - )} -

    + {renderArticle(page)} ); }; diff --git a/src/styles/layout.css b/src/styles/layout.css index a5eb46ce8d..a58c932e13 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -26,7 +26,7 @@ body { font-size: var(--font-size-display1); line-height: var(--line-height-display1); font-weight: var(--font-weight-light); - margin-bottom: var(--spacing-80); + margin: 0 0 var(--space-48) 0; } .t-display2 { font-size: var(--font-size-display2); @@ -42,19 +42,19 @@ body { font-size: var(--font-size-headline); line-height: var(--line-height-headline); font-weight: var(--font-weight-semibold); - margin-bottom: var(--spacing-24); + margin: 0 0 var(--space-24) 0; } .t-subheading, h3 { font-size: var(--font-size-subheading); line-height: var(--line-height-subheading); font-weight: var(--font-weight-semibold); - margin-bottom: var(--spacing-08); + margin: 0 0 var(--space-08) 0; } .t-body1, p { font-size: var(--font-size-body1); line-height: var(--line-height-body1); font-weight: var(--font-weight-regular); - margin-bottom: var(--space-24); + margin: 0 0 var(--space-24) 0; } .t-body2 { font-size: var(--font-size-body2); @@ -79,7 +79,7 @@ body { cursor: pointer; } -.t-link:hover, a:hover, .t-link:active, a:active { +.t-link:hover, a:hover, .t-link:focus, a:focus { color: var(--color-text-accent); text-decoration: none; cursor: pointer; @@ -149,7 +149,7 @@ main { } .nav { - background: white; + background: var(--color-fill-app); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.33), 0 2px 3px rgba(0, 0, 0, 0.2); height: var(--nav-height); line-height: var(--nav-height); @@ -173,7 +173,7 @@ main { .nav__tabs > a { text-decoration: none; - color: black; + color: var(--color-text-primary); } .hero { @@ -236,45 +236,17 @@ main { padding-bottom: 230px; } -.side-nav::before { - background: var(--banner-gradient); - background-color: var(--black9); - background-size: 100vw 100%; - clip-path: var(--banner-clip); - content: ""; - display: block; - /* Equivalent of .85 opacity without the transparency! */ - filter: brightness(160%) saturate(45%); - height: 92px; - margin: 0 -2.4rem -92px -2.4rem; - position: sticky; - top: 0; - width: 100vw; - z-index: 998; -} - .side-nav__title { - color: #000; + background: var(--color-fill-app); + color: var(--color-text-primary); font-weight: 200; letter-spacing: 2px; - margin: 2.8rem 0 2.4rem; + padding: 2.8rem 0 0; + box-shadow: 0 25px 20px var(--color-fill-app); + margin: 0 0 2.4rem; position: sticky; - top: 2.8rem; + top: 0; z-index: 999; - transition: color 0.28s; -} - -[data-browser=legacy] .side-nav__title { - background-attachment: fixed; - -webkit-background-clip: text; - background-clip: text; - background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 49%, rgba(255, 255, 255, 1) 51%); - background-position: 0 calc(-50vh + var(--magic-hero-number)); - background-size: 100% 100vh; - color: white; - filter: opacity(0.9); - -webkit-text-fill-color: transparent; - will-change: background-position; } .side-nav__list { @@ -287,7 +259,7 @@ main { align-items: center; border-radius: 4px; box-sizing: border-box; - color: var(--black9); + color: var(--color-text-primary); cursor: pointer; line-height: 2.4rem; list-style: none; @@ -298,7 +270,7 @@ main { } .side-nav__item { - color: var(--black9); + color: var(--color-text-primary); text-decoration: none; display: block; } @@ -409,14 +381,7 @@ main { /* sr-only for desktop */ .article-reader__headline { - position: absolute; - width: 1px; - height: 1px; padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0,0,0,0); - border: 0; } .hero h1 { @@ -556,4 +521,118 @@ details, .sticky-sentinel--bottom { height: 40px; bottom: 0; +} + +.api-key { + padding : 0; + list-style: none; +} + +.api-key > .api-key__item { + margin-bottom: 0.8rem; +} + +.api-key__section { + list-style: none; + display: grid; + grid-template-columns: repeat(5, 20%); + grid-template-columns:repeat(auto-fit, minmax(200px , 1fr)); + /* margin: 0.8rem 0; */ + background: var(--black2); + border-radius: 4px; + grid-gap: 0.8rem; + padding: 0.8rem; + margin: 0.8rem 0; +} + +.dark-mode .api-key__section { + background: var(--black9); +} + +.api-key__item--class, .api-key__item--module { + flex-grow: 1; +} + +.api-key__item, .api-key__item > a { + color: var(--color-text-primary); + text-decoration: none; + display: block; + margin: 0; + overflow: hidden; + white-space: pre; + text-overflow: ellipsis; + border-radius: 4px; + cursor: pointer; + transition: background-color .28s, box-shadow .28s; +} + +.api-key__section .api-key__item:hover, +.api-key__section .api-key__item > a:hover, +.api-key__section .api-key__item:focus, +.api-key__section .api-key__item > a:focus { + background-color: var(--black8); + box-shadow: 0 0 0 0.4rem var(--black8); +} + +.api-key__item--has-children { + grid-column-start: 1; + grid-column-end: -1; +} + +.api-key__section .api-key__item--has-children .api-key__section { + padding-left: 1.8rem; +} + +.api-key__item > a::before { + content: "P"; + width: 2.4rem; + height: 2.4rem; + text-align: center; + line-height: 2.4rem; + font-size: 1.4rem; + color: white; + background-color: var(--info6); + display: inline-block; + border-radius: 50%; + margin-right: 0.8rem; +} + +.api-key__item--global > a::before { + content: "G"; + background-color: var(--warning4); +} + +.api-key__item--event > a::before { + content: "E"; + background-color: var(--danger6); +} + +.api-key__item--class > a::before { + content: "C"; + background-color: var(--warning4); +} + +.api-key__item--method > a::before { + content: "M"; + background-color: var(--purple6); +} + +.api-key__item--Object > a::before { + content: "O"; + background-color: var(--pink6); +} + +.api-key__item--module > a::before { + font-family: 'Material Icons'; + content: "pages"; + background-color: transparent; + color: var(--color-text-accent); + font-size: 3.0rem; + vertical-align: middle; + position: relative; + right: 3px; +} + +.api-key__item--misc { + display: none; } \ No newline at end of file From 8f9df0c14fc2e16fb7ba34156b46aa50eded7d7b Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 7 Sep 2019 23:47:26 -0700 Subject: [PATCH 15/40] fix: Use correct color for API Key interaction in light mode --- src/styles/layout.css | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/styles/layout.css b/src/styles/layout.css index a58c932e13..4e42f0035e 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -545,10 +545,27 @@ details, margin: 0.8rem 0; } + +.api-key__section .api-key__item:hover, +.api-key__section .api-key__item > a:hover, +.api-key__section .api-key__item:focus, +.api-key__section .api-key__item > a:focus { + background-color: var(--black4); + box-shadow: 0 0 0 0.4rem var(--black4); +} + .dark-mode .api-key__section { background: var(--black9); } +.dark-mode .api-key__section .api-key__item:hover, +.dark-mode .api-key__section .api-key__item > a:hover, +.dark-mode .api-key__section .api-key__item:focus, +.dark-mode .api-key__section .api-key__item > a:focus { + background-color: var(--black8); + box-shadow: 0 0 0 0.4rem var(--black8); +} + .api-key__item--class, .api-key__item--module { flex-grow: 1; } @@ -566,13 +583,6 @@ details, transition: background-color .28s, box-shadow .28s; } -.api-key__section .api-key__item:hover, -.api-key__section .api-key__item > a:hover, -.api-key__section .api-key__item:focus, -.api-key__section .api-key__item > a:focus { - background-color: var(--black8); - box-shadow: 0 0 0 0.4rem var(--black8); -} .api-key__item--has-children { grid-column-start: 1; From 4c03eb71541e71c7462c098b81e3a13750e8b40f Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 14 Sep 2019 12:59:50 -0700 Subject: [PATCH 16/40] feat: API docs side menu styles --- src/components/header.tsx | 4 +- src/pages/docs.tsx | 26 ++++-- src/pages/index.tsx | 13 +++ src/pages/konami.js | 61 +++++++++++++ src/styles/docs.css | 177 ++++++++++++++++++++++++++++++++++++++ src/styles/layout.css | 165 ++++++++--------------------------- 6 files changed, 308 insertions(+), 138 deletions(-) create mode 100644 src/pages/konami.js create mode 100644 src/styles/docs.css diff --git a/src/components/header.tsx b/src/components/header.tsx index c32e5449a6..8c36838a1b 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -47,8 +47,8 @@ const Header = () => ( GitHub diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index 7578047210..d82d8d5888 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -3,6 +3,8 @@ import { useApiData, useReleaseHistory } from '../hooks'; import { ApiDocsObj, APIResponse, isModuleObj } from '../hooks/useApiDocs'; import Layout from '../components/layout'; +import '../styles/docs.css'; + function renderArticleOverview(obj: ApiDocsObj, overview: JSX.Element[] = []) { const children: JSX.Element[] = []; if (obj.events) { @@ -70,12 +72,19 @@ function sideBarSection( setPage: Function ) { return ( -
  • -

    {title}

    -
      +
    • +

      + offline_bolt + {title} +

      +
        {data[section].map(module => ( -
      • - setPage(module)}> +
      • + setPage(module)} + className="t-body2 api-nav__sub-list-link" + > {module.displayName || module.name}
        • @@ -102,10 +111,11 @@ export default () => { return ( -
    • ); -}; +} diff --git a/src/pages/konami.js b/src/pages/konami.js index ad3701c7ae..0350b79538 100644 --- a/src/pages/konami.js +++ b/src/pages/konami.js @@ -1,13 +1,12 @@ -(function() { - 'use strict'; - +(function konami() { // http://stackoverflow.com/a/9849276 - function _contains(a, b) { + function contains(a, b) { + // eslint-disable-next-line no-bitwise return !!~a.indexOf(b); } - var konamiCode = { - init: function() { + const konamiCode = { + init() { this.KEY_LEFT = 37; this.KEY_UP = 38; this.KEY_RIGHT = 39; @@ -21,11 +20,11 @@ return this; }, - bindListener: function() { - var buffer = ''; - var lastDate = new Date(); - var konamiCodeEvent = new Event('konamiCode'); - var validKeys = [ + bindListener() { + let buffer = ''; + let lastDate = new Date(); + const konamiCodeEvent = new Event('konamiCode'); + const validKeys = [ this.KEY_LEFT, this.KEY_UP, this.KEY_RIGHT, @@ -36,15 +35,15 @@ document.addEventListener( 'keyup', - function(ev) { + function enableKonami(ev) { if ( - _contains(validKeys, ev.keyCode) && + contains(validKeys, ev.keyCode) && new Date() - lastDate <= this.maxDelay ) { lastDate = new Date(); - buffer = buffer + ev.keyCode; + buffer += ev.keyCode; - if (_contains(buffer, this.CODE_SEQUENCE)) { + if (contains(buffer, this.CODE_SEQUENCE)) { document.dispatchEvent(konamiCodeEvent); buffer = ''; } diff --git a/src/pages/style-guide.tsx b/src/pages/style-guide.tsx index ec9f6ba0b8..ee01e0b669 100644 --- a/src/pages/style-guide.tsx +++ b/src/pages/style-guide.tsx @@ -1,12 +1,7 @@ import React from 'react'; import '../styles/layout.css'; -type Props = { - heading: string; - tableOfContents: string; -}; - -const StyleGuidePage = ({ heading }: Props) => { +const StyleGuidePage = (): JSX.Element => { return (
    Display1
    @@ -31,7 +26,8 @@ const StyleGuidePage = ({ heading }: Props) => { optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.

    - This is a link + {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */} + This is a link
    ); }; diff --git a/src/styles/layout.css b/src/styles/layout.css index 93a6d57e87..d7f8b2b0bf 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -255,7 +255,7 @@ main { position: sticky; top: var(--nav-height); width: 100%; - max-width: 36.0rem; + max-width: 36rem; z-index: 998; } @@ -316,14 +316,14 @@ main { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--brand-light); box-sizing: border-box; - content: ' '; + content: " "; display: block; height: 2.4rem; left: -3.6rem; padding: 2px 4px; position: absolute; top: 1.2rem; - transition: box-shadow .28s; + transition: box-shadow 0.28s; overflow: hidden; width: 2.4rem; } @@ -343,7 +343,7 @@ main { .side-nav__item::after { background: var(--brand-light); - content: ' '; + content: " "; display: block; height: calc(100% - 2.4rem - 8px); left: calc(-2.4rem - 1px); @@ -367,13 +367,14 @@ main { text-indent: 3.2rem; line-height: 0; font-weight: 200; - transition: color .28s, background-color .28s; + transition: color 0.28s, background-color 0.28s; outline: none; background-clip: content-box; z-index: 9999; } -.side-nav__open::before, .side-nav__open::after { +.side-nav__open::before, +.side-nav__open::after { content: ""; width: 100%; height: 3px; @@ -382,7 +383,7 @@ main { left: 0; transform: translateY(-250%); background-color: white; - transition: transform .28s; + transition: transform 0.28s; } .side-nav__open::after { @@ -396,10 +397,10 @@ main { color: transparent; background-color: transparent; } -.side-nav.side-nav--open .side-nav__open::before { +.side-nav.side-nav--open .side-nav__open::before { transform: rotate(-45deg); } -.side-nav.side-nav--open .side-nav__open::after { +.side-nav.side-nav--open .side-nav__open::after { transform: rotate(45deg); } @@ -439,9 +440,341 @@ main { /* End: Article Reader HTML Reset */ .stars { - --stars-small: 1928px 627px #767676, 626px 1242px #767676, 456px 1401px #767676, 1984px 1908px #767676, 391px 722px #767676, 1292px 1098px #767676, 29px 119px #767676, 445px 1913px #767676, 1861px 172px #767676, 1818px 1237px #767676, 1435px 660px #767676, 464px 928px #767676, 1771px 1053px #767676, 1033px 799px #767676, 553px 607px #767676, 1564px 1212px #767676, 915px 1084px #767676, 464px 847px #767676, 1456px 748px #767676, 997px 624px #767676, 1005px 1863px #767676, 1115px 1924px #767676, 1128px 1485px #767676, 827px 1590px #767676, 676px 1679px #767676, 660px 264px #767676, 320px 1327px #767676, 1738px 1375px #767676, 1597px 232px #767676, 457px 1891px #767676, 414px 725px #767676, 878px 248px #767676, 458px 221px #767676, 380px 428px #767676, 1364px 593px #767676, 267px 1967px #767676, 1266px 1579px #767676, 1867px 738px #767676, 1186px 970px #767676, 773px 1262px #767676, 1489px 1718px #767676, 1889px 1693px #767676, 154px 1834px #767676, 683px 484px #767676, 816px 1525px #767676, 1048px 1929px #767676, 1793px 977px #767676, 88px 1353px #767676, 760px 178px #767676, 1135px 521px #767676, 1391px 1168px #767676, 1031px 1017px #767676, 1260px 586px #767676, 1077px 420px #767676, 1693px 431px #767676, 629px 1488px #767676, 958px 533px #767676, 389px 1979px #767676, 1064px 1815px #767676, 1725px 581px #767676, 739px 1529px #767676, 263px 1626px #767676, 1803px 320px #767676, 801px 107px #767676, 1832px 957px #767676, 1828px 374px #767676, 1117px 1432px #767676, 1691px 1206px #767676, 78px 834px #767676, 570px 1935px #767676, 37px 1288px #767676, 29px 1763px #767676, 208px 1143px #767676, 832px 945px #767676, 477px 1782px #767676, 1495px 858px #767676, 287px 1926px #767676, 1399px 782px #767676, 111px 1178px #767676, 1570px 1587px #767676, 1152px 543px #767676, 876px 655px #767676, 895px 1895px #767676, 1140px 1759px #767676, 290px 593px #767676, 1803px 1699px #767676, 1180px 1328px #767676, 1465px 1795px #767676, 825px 1490px #767676, 256px 1972px #767676, 646px 1088px #767676, 65px 1221px #767676, 518px 1205px #767676, 1312px 1346px #767676, 632px 1551px #767676, 1989px 1924px #767676, 1090px 921px #767676, 695px 1486px #767676, 778px 1577px #767676, 174px 22px #767676, 1510px 1991px #767676, 392px 695px #767676, 1230px 773px #767676, 1868px 1191px #767676, 1504px 1619px #767676, 1440px 1116px #767676, 719px 1296px #767676, 900px 1868px #767676, 1553px 967px #767676, 1717px 1036px #767676, 518px 1187px #767676, 1558px 490px #767676, 339px 452px #767676, 1781px 1697px #767676, 1559px 829px #767676, 415px 1078px #767676, 856px 1622px #767676, 1820px 1026px #767676, 1235px 260px #767676, 1809px 1351px #767676, 1751px 765px #767676, 137px 1466px #767676, 1226px 1545px #767676, 660px 1105px #767676, 1076px 905px #767676, 1845px 446px #767676, 853px 1529px #767676, 50px 246px #767676, 1177px 1390px #767676, 1959px 983px #767676, 1616px 1208px #767676, 89px 1238px #767676, 1933px 822px #767676, 1006px 529px #767676, 760px 702px #767676, 1225px 1816px #767676, 1435px 547px #767676, 952px 1724px #767676, 1537px 1640px #767676, 566px 825px #767676, 1173px 349px #767676, 496px 688px #767676, 1799px 1086px #767676, 1913px 1322px #767676, 935px 859px #767676, 1537px 471px #767676, 248px 1467px #767676, 704px 576px #767676, 591px 168px #767676, 1647px 904px #767676, 851px 1971px #767676, 3px 210px #767676, 1397px 1735px #767676, 1234px 958px #767676, 518px 1073px #767676, 972px 553px #767676, 1905px 1892px #767676, 8px 566px #767676, 95px 1205px #767676, 804px 538px #767676, 1542px 810px #767676, 867px 1056px #767676, 1501px 988px #767676, 1388px 895px #767676, 92px 1827px #767676, 61px 1809px #767676, 140px 115px #767676, 1491px 52px #767676, 1669px 1895px #767676, 935px 879px #767676, 1185px 549px #767676, 586px 695px #767676, 1975px 925px #767676, 1663px 1854px #767676, 1567px 15px #767676, 943px 1307px #767676, 568px 1720px #767676, 563px 292px #767676, 1698px 374px #767676, 856px 759px #767676, 1895px 966px #767676, 105px 82px #767676, 1314px 1698px #767676, 826px 746px #767676, 1187px 385px #767676, 956px 368px #767676, 1047px 888px #767676, 1452px 1520px #767676, 168px 1289px #767676, 406px 340px #767676, 1999px 1402px #767676, 1901px 1628px #767676, 1778px 1664px #767676, 1276px 1181px #767676, 1391px 546px #767676, 1465px 1680px #767676, 727px 406px #767676, 1130px 1798px #767676, 972px 1636px #767676, 1463px 1855px #767676, 1542px 1078px #767676, 1470px 1055px #767676, 998px 536px #767676, 1265px 1692px #767676, 395px 459px #767676, 1132px 1527px #767676, 820px 743px #767676, 1533px 1552px #767676, 126px 659px #767676, 1797px 1020px #767676, 790px 1544px #767676, 184px 560px #767676, 243px 915px #767676, 1575px 166px #767676, 346px 1756px #767676, 1428px 611px #767676, 1257px 955px #767676, 1884px 777px #767676, 966px 1336px #767676, 595px 461px #767676, 428px 210px #767676, 664px 1476px #767676, 406px 812px #767676, 1115px 808px #767676, 847px 792px #767676, 982px 269px #767676, 534px 1770px #767676, 133px 20px #767676, 626px 1740px #767676, 1498px 606px #767676, 365px 291px #767676, 725px 666px #767676, 727px 1446px #767676, 505px 675px #767676, 1372px 302px #767676, 1419px 1947px #767676, 1858px 636px #767676, 1961px 2000px #767676, 1659px 1567px #767676, 1794px 746px #767676, 1490px 10px #767676, 704px 1930px #767676, 976px 1630px #767676, 1531px 905px #767676, 990px 1527px #767676, 866px 227px #767676, 1360px 982px #767676, 831px 1288px #767676, 1406px 806px #767676, 131px 45px #767676, 650px 99px #767676, 1760px 1969px #767676, 506px 1481px #767676, 30px 424px #767676, 229px 1881px #767676, 52px 162px #767676, 1154px 1980px #767676, 658px 10px #767676, 344px 1992px #767676, 1649px 1500px #767676, 1179px 1114px #767676, 1072px 171px #767676, 1975px 1027px #767676, 1619px 1224px #767676, 242px 841px #767676, 413px 1533px #767676, 1882px 1745px #767676, 1440px 1050px #767676, 1412px 198px #767676, 879px 1759px #767676, 809px 1456px #767676, 74px 50px #767676, 878px 358px #767676, 283px 433px #767676, 1056px 1773px #767676, 1727px 184px #767676, 1262px 1808px #767676, 560px 727px #767676, 769px 1457px #767676, 1469px 884px #767676, 1651px 1215px #767676, 757px 1131px #767676, 1663px 123px #767676, 814px 1675px #767676, 1163px 1360px #767676, 1930px 803px #767676, 1719px 871px #767676, 1078px 673px #767676, 678px 220px #767676, 1671px 1240px #767676, 1047px 229px #767676, 1066px 41px #767676, 1054px 146px #767676, 919px 1696px #767676, 1600px 7px #767676, 893px 271px #767676, 359px 968px #767676, 195px 1931px #767676, 858px 887px #767676, 930px 1447px #767676, 773px 102px #767676, 1737px 459px #767676, 190px 660px #767676, 271px 454px #767676, 1045px 1368px #767676, 419px 971px #767676, 643px 1171px #767676, 532px 345px #767676, 1766px 641px #767676, 403px 444px #767676, 394px 918px #767676, 1137px 92px #767676, 814px 931px #767676, 254px 342px #767676, 250px 980px #767676, 1558px 1786px #767676, 437px 1396px #767676, 376px 1053px #767676, 982px 227px #767676, 95px 1182px #767676, 1291px 125px #767676, 314px 1936px #767676, 503px 1055px #767676, 714px 1922px #767676, 1390px 1785px #767676, 1297px 199px #767676, 530px 1768px #767676, 998px 1710px #767676, 530px 163px #767676, 151px 1898px #767676, 1001px 675px #767676, 234px 1122px #767676, 1052px 1144px #767676, 1224px 1937px #767676, 1613px 620px #767676, 175px 1058px #767676, 1496px 1422px #767676, 360px 1796px #767676, 1907px 559px #767676, 355px 558px #767676, 1189px 784px #767676, 1170px 568px #767676, 96px 1978px #767676, 932px 1214px #767676, 394px 786px #767676, 1903px 336px #767676, 1137px 1421px #767676, 1563px 15px #767676, 1528px 763px #767676, 1621px 390px #767676, 1440px 1764px #767676, 1764px 85px #767676, 989px 1492px #767676, 877px 1561px #767676, 1009px 1157px #767676, 1737px 462px #767676, 520px 1995px #767676, 36px 247px #767676, 1849px 1938px #767676, 937px 941px #767676, 1864px 1950px #767676, 104px 692px #767676, 149px 1976px #767676, 1394px 1140px #767676, 1609px 629px #767676, 385px 1442px #767676, 1702px 1255px #767676, 413px 840px #767676, 1762px 825px #767676, 1535px 681px #767676, 1894px 988px #767676, 1355px 268px #767676, 541px 766px #767676, 1091px 1807px #767676, 1723px 856px #767676, 1096px 966px #767676, 1619px 1225px #767676, 337px 161px #767676, 664px 1623px #767676, 415px 1418px #767676, 534px 85px #767676, 278px 463px #767676, 405px 1549px #767676, 463px 106px #767676, 1227px 590px #767676, 1131px 849px #767676, 1497px 162px #767676, 1162px 953px #767676, 818px 1263px #767676, 1691px 1480px #767676, 1093px 630px #767676, 1884px 975px #767676, 1238px 517px #767676, 1234px 951px #767676, 1398px 1687px #767676, 1908px 856px #767676, 1307px 863px #767676, 1294px 689px #767676, 60px 442px #767676, 1860px 1115px #767676, 799px 778px #767676, 152px 1451px #767676, 1664px 1828px #767676, 1095px 1189px #767676, 717px 884px #767676, 1759px 1128px #767676, 891px 83px #767676, 1652px 1864px #767676, 289px 1149px #767676, 155px 1525px #767676, 663px 1323px #767676, 829px 545px #767676, 800px 1235px #767676, 687px 1912px #767676, 1655px 1256px #767676, 1721px 1205px #767676, 902px 1680px #767676, 574px 425px #767676, 164px 344px #767676, 131px 578px #767676, 1943px 65px #767676, 565px 1503px #767676, 1358px 1301px #767676, 1218px 381px #767676, 1203px 1601px #767676, 1389px 662px #767676, 779px 1580px #767676, 51px 736px #767676, 126px 266px #767676, 1708px 973px #767676, 790px 112px #767676, 1990px 914px #767676, 90px 1268px #767676, 407px 393px #767676, 27px 304px #767676, 1853px 1296px #767676, 1355px 1174px #767676, 1857px 89px #767676, 260px 776px #767676, 100px 1082px #767676, 695px 1560px #767676, 1576px 222px #767676, 565px 885px #767676, 297px 820px #767676, 1149px 1863px #767676, 187px 1252px #767676, 615px 974px #767676, 760px 1761px #767676, 1412px 1662px #767676, 611px 1154px #767676, 474px 1596px #767676, 1789px 768px #767676, 1634px 192px #767676, 1212px 1340px #767676, 1619px 1512px #767676, 611px 941px #767676, 113px 186px #767676, 1808px 510px #767676, 615px 1367px #767676, 547px 395px #767676, 1626px 1584px #767676, 1773px 397px #767676, 612px 1666px #767676, 361px 93px #767676, 1541px 1812px #767676, 911px 235px #767676, 120px 1681px #767676, 344px 1022px #767676, 1785px 53px #767676, 272px 400px #767676, 777px 573px #767676, 440px 1398px #767676, 1286px 1879px #767676, 1848px 1377px #767676, 1959px 1604px #767676, 1089px 1551px #767676, 1109px 1087px #767676, 1668px 1741px #767676, 1044px 1999px #767676, 660px 1671px #767676, 972px 1028px #767676, 1084px 655px #767676, 877px 1066px #767676, 457px 890px #767676, 424px 1492px #767676, 920px 867px #767676, 1546px 1409px #767676, 1729px 1482px #767676, 92px 1625px #767676, 468px 933px #767676, 1739px 683px #767676, 1130px 1578px #767676, 1340px 287px #767676, 828px 1961px #767676, 1130px 1823px #767676, 1810px 783px #767676, 1350px 631px #767676, 963px 1483px #767676, 1898px 1270px #767676, 1685px 1519px #767676, 1940px 1235px #767676, 57px 266px #767676, 1547px 92px #767676, 673px 1830px #767676, 900px 181px #767676, 132px 923px #767676, 1195px 113px #767676, 414px 1352px #767676, 1568px 304px #767676, 587px 1917px #767676, 269px 964px #767676, 1796px 1955px #767676, 798px 1513px #767676, 942px 615px #767676, 198px 860px #767676, 1473px 1891px #767676, 1519px 298px #767676, 100px 193px #767676, 721px 1199px #767676, 1395px 338px #767676, 25px 671px #767676, 75px 1685px #767676, 290px 214px #767676, 1185px 1821px #767676, 1312px 1188px #767676, 950px 2000px #767676, 1606px 1709px #767676, 931px 1565px #767676, 716px 382px #767676, 1117px 979px #767676, 1752px 1623px #767676, 1080px 766px #767676, 1145px 1667px #767676, 655px 278px #767676, 1679px 632px #767676, 1637px 1896px #767676, 490px 79px #767676, 1663px 266px #767676, 1392px 23px #767676, 718px 133px #767676, 350px 1808px #767676, 847px 1259px #767676, 1285px 271px #767676, 100px 661px #767676, 148px 1919px #767676, 997px 1803px #767676, 1137px 1362px #767676, 1094px 1280px #767676, 266px 645px #767676, 416px 914px #767676, 1994px 916px #767676, 581px 1984px #767676, 932px 296px #767676, 1651px 382px #767676, 615px 1703px #767676, 1144px 1925px #767676, 570px 29px #767676, 1561px 1744px #767676, 2px 1547px #767676, 561px 1310px #767676, 906px 683px #767676, 328px 1735px #767676, 1919px 1653px #767676, 327px 9px #767676, 735px 1315px #767676, 585px 444px #767676, 153px 724px #767676, 1724px 1871px #767676, 887px 410px #767676, 663px 1042px #767676, 251px 1924px #767676, 1663px 1258px #767676, 1413px 1126px #767676, 937px 876px #767676, 676px 1124px #767676, 1487px 1780px #767676, 1141px 1108px #767676, 513px 19px #767676, 1193px 1483px #767676, 1945px 1368px #767676, 1658px 218px #767676, 1858px 898px #767676, 1129px 1255px #767676, 1011px 1219px #767676, 1421px 1179px #767676, 114px 1124px #767676, 1407px 1753px #767676, 491px 1040px #767676, 1178px 1987px #767676, 1710px 1698px #767676, 1315px 1579px #767676, 48px 434px #767676, 1825px 879px #767676, 1381px 628px #767676, 1048px 1140px #767676, 1473px 718px #767676, 1420px 985px #767676, 902px 310px #767676, 1619px 324px #767676, 1083px 148px #767676, 1582px 1740px #767676, 1248px 1761px #767676, 1702px 1717px #767676, 627px 340px #767676, 1931px 1249px #767676, 1736px 627px #767676, 116px 1330px #767676, 96px 594px #767676, 1781px 1832px #767676, 1938px 1861px #767676, 1940px 1444px #767676, 266px 753px #767676, 91px 1090px #767676, 1393px 1746px #767676, 492px 178px #767676, 1556px 147px #767676, 1425px 1611px #767676, 282px 246px #767676, 500px 481px #767676, 515px 1947px #767676, 460px 1104px #767676, 931px 1472px #767676, 344px 226px #767676, 365px 107px #767676, 894px 1122px #767676, 1373px 1116px #767676, 507px 553px #767676, 966px 1895px #767676, 1587px 1357px #767676, 421px 652px #767676, 1893px 1500px #767676, 104px 1558px #767676, 456px 265px #767676, 1257px 1207px #767676, 1172px 906px #767676, 50px 1561px #767676, 1296px 30px #767676, 1098px 1529px #767676, 555px 723px #767676, 1458px 1919px #767676, 1146px 570px #767676, 1894px 973px #767676, 1777px 1570px #767676, 1917px 1004px #767676, 19px 927px #767676, 1882px 512px #767676, 1390px 1497px #767676, 99px 1521px #767676, 1796px 1847px #767676, 126px 1737px #767676, 600px 541px #767676, 1539px 391px #767676, 1689px 1531px #767676, 744px 92px #767676, 1000px 1339px #767676, 1697px 950px #767676, 1534px 745px #767676, 714px 272px #767676, 1931px 1036px #767676, 1063px 1547px #767676, 1790px 1484px #767676, 754px 612px #767676, 886px 878px #767676, 1588px 1882px #767676, 88px 1475px #767676, 920px 666px #767676, 1132px 1954px #767676, 825px 1000px #767676, 179px 1135px #767676, 919px 76px #767676, 1724px 1759px #767676, 1977px 1377px #767676, 1036px 1279px #767676, 1109px 658px #767676, 211px 188px #767676, 187px 180px #767676, 468px 1964px #767676, 1482px 244px #767676, 783px 772px #767676, 978px 431px #767676, 124px 388px #767676, 697px 1195px #767676, 404px 334px #767676, 1248px 572px #767676, 1888px 1144px #767676, 589px 132px #767676, 100px 425px #767676, 593px 648px #767676, 273px 643px #767676, 543px 1941px #767676, 427px 1843px #767676, 680px 293px #767676, 1495px 739px #767676, 526px 631px #767676, 1645px 567px #767676, 991px 949px #767676, 1027px 1570px #767676, 1335px 395px #767676, 1024px 1509px #767676, 1785px 250px #767676; - --stars-medium: 1120px 738px #767676, 533px 827px #767676, 339px 866px #767676, 1335px 1325px #767676, 1021px 435px #767676, 1850px 1972px #767676, 492px 1847px #767676, 1030px 1536px #767676, 1154px 1422px #767676, 533px 945px #767676, 1465px 1670px #767676, 411px 1474px #767676, 413px 526px #767676, 1155px 1946px #767676, 1469px 1277px #767676, 310px 1807px #767676, 936px 387px #767676, 397px 725px #767676, 228px 1790px #767676, 1124px 539px #767676, 1261px 63px #767676, 172px 881px #767676, 1042px 1984px #767676, 1153px 322px #767676, 1955px 662px #767676, 1951px 1981px #767676, 621px 248px #767676, 1589px 534px #767676, 1997px 667px #767676, 618px 660px #767676, 452px 259px #767676, 362px 1762px #767676, 735px 347px #767676, 783px 297px #767676, 1808px 408px #767676, 373px 740px #767676, 543px 1509px #767676, 1125px 1169px #767676, 1625px 483px #767676, 1461px 782px #767676, 460px 1210px #767676, 608px 1119px #767676, 132px 1503px #767676, 169px 660px #767676, 392px 1094px #767676, 1128px 567px #767676, 119px 1617px #767676, 1872px 60px #767676, 1192px 673px #767676, 1115px 1712px #767676, 1192px 873px #767676, 1375px 1486px #767676, 1031px 227px #767676, 510px 1459px #767676, 607px 1047px #767676, 752px 247px #767676, 1556px 135px #767676, 959px 915px #767676, 1071px 365px #767676, 318px 203px #767676, 1000px 573px #767676, 2000px 1250px #767676, 1566px 1478px #767676, 364px 1008px #767676, 1335px 1898px #767676, 580px 1162px #767676, 930px 1091px #767676, 1644px 1040px #767676, 1702px 1127px #767676, 1750px 1105px #767676, 708px 1310px #767676, 29px 392px #767676, 946px 1905px #767676, 407px 1326px #767676, 59px 927px #767676, 1717px 1944px #767676, 674px 301px #767676, 1018px 1346px #767676, 1376px 1697px #767676, 1402px 961px #767676, 1012px 1256px #767676, 999px 923px #767676, 1866px 1360px #767676, 1129px 533px #767676, 117px 797px #767676, 778px 855px #767676, 1809px 1485px #767676, 965px 1725px #767676, 780px 290px #767676, 205px 431px #767676, 1886px 1007px #767676, 163px 1912px #767676, 517px 1106px #767676, 527px 1428px #767676, 1258px 1921px #767676, 1544px 1149px #767676, 1829px 966px #767676, 1626px 1420px #767676, 402px 1275px #767676, 1952px 920px #767676, 738px 1364px #767676, 1598px 1288px #767676, 1461px 951px #767676, 1921px 782px #767676, 57px 943px #767676, 1123px 7px #767676, 763px 1524px #767676, 432px 847px #767676, 1479px 59px #767676, 1761px 258px #767676, 1410px 1609px #767676, 303px 58px #767676, 103px 1478px #767676, 1289px 221px #767676, 1265px 277px #767676, 1153px 1054px #767676, 1468px 314px #767676, 363px 453px #767676, 1946px 70px #767676, 1223px 876px #767676, 1780px 1010px #767676, 782px 1977px #767676, 1480px 1867px #767676, 451px 390px #767676, 1285px 321px #767676, 877px 1682px #767676, 1998px 365px #767676, 817px 1011px #767676, 926px 1147px #767676, 310px 368px #767676, 1234px 922px #767676, 658px 64px #767676, 1409px 200px #767676, 1200px 515px #767676, 1597px 1924px #767676, 1089px 1523px #767676, 1917px 995px #767676, 734px 1392px #767676, 1573px 174px #767676, 209px 1376px #767676, 1987px 1718px #767676, 1650px 796px #767676, 827px 1701px #767676, 1763px 961px #767676, 1387px 834px #767676, 1122px 1326px #767676, 7px 763px #767676, 666px 893px #767676, 1568px 947px #767676, 1460px 53px #767676, 618px 549px #767676, 527px 398px #767676, 1648px 1959px #767676, 1333px 956px #767676, 807px 695px #767676, 875px 147px #767676, 568px 1632px #767676, 986px 1215px #767676, 1057px 1737px #767676, 1352px 851px #767676, 1579px 853px #767676, 66px 1269px #767676, 1775px 1587px #767676, 703px 107px #767676, 393px 1303px #767676, 897px 1414px #767676, 812px 120px #767676, 1553px 1317px #767676, 1394px 606px #767676, 1504px 1659px #767676, 1007px 370px #767676, 964px 1028px #767676, 871px 1349px #767676, 803px 1218px #767676, 1851px 1273px #767676, 57px 432px #767676, 727px 1752px #767676, 1381px 998px #767676, 950px 412px #767676, 1118px 493px #767676, 549px 311px #767676, 1689px 983px #767676, 185px 1432px #767676, 425px 1761px #767676, 547px 291px #767676, 356px 1619px #767676, 516px 294px #767676, 458px 383px #767676, 1634px 1420px #767676, 1202px 1564px #767676, 1526px 821px #767676, 1401px 1242px #767676, 34px 1100px #767676, 1347px 1172px #767676, 854px 821px #767676, 1762px 467px #767676, 410px 1662px #767676, 1804px 19px #767676, 1997px 320px #767676, 1025px 1016px #767676; - --stars-large: 1783px 1852px #767676, 760px 523px #767676, 136px 446px #767676, 1618px 589px #767676, 769px 1696px #767676, 804px 1501px #767676, 1927px 1123px #767676, 46px 1079px #767676, 1682px 728px #767676, 1049px 479px #767676, 1427px 1116px #767676, 1951px 782px #767676, 1556px 827px #767676, 926px 382px #767676, 1851px 863px #767676, 1399px 1900px #767676, 634px 850px #767676, 1939px 1032px #767676, 1571px 1958px #767676, 1648px 1378px #767676, 33px 1171px #767676, 1848px 475px #767676, 1173px 1872px #767676, 1810px 409px #767676, 1957px 328px #767676, 1029px 45px #767676, 333px 584px #767676, 1998px 422px #767676, 480px 1216px #767676, 1432px 1888px #767676, 709px 606px #767676, 555px 1702px #767676, 58px 1863px #767676, 1839px 1633px #767676, 1349px 895px #767676, 1393px 1027px #767676, 799px 218px #767676, 923px 1581px #767676, 1277px 271px #767676, 142px 1086px #767676, 365px 41px #767676, 1135px 1148px #767676, 1101px 1518px #767676, 265px 1855px #767676, 1134px 167px #767676, 997px 770px #767676, 1172px 1332px #767676, 1573px 121px #767676, 1925px 853px #767676, 1951px 200px #767676, 777px 1093px #767676, 996px 278px #767676, 1328px 1296px #767676, 978px 535px #767676, 161px 288px #767676, 1466px 310px #767676, 638px 1368px #767676, 1407px 360px #767676, 704px 658px #767676, 1371px 1152px #767676, 1947px 1808px #767676, 1280px 1392px #767676, 51px 499px #767676, 1862px 1087px #767676, 563px 575px #767676, 165px 689px #767676, 1104px 708px #767676, 1279px 1339px #767676, 1561px 899px #767676, 1046px 49px #767676, 1916px 1992px #767676, 893px 1915px #767676, 1404px 1555px #767676, 1203px 330px #767676, 389px 1239px #767676, 69px 1152px #767676, 1566px 804px #767676, 341px 751px #767676, 1775px 724px #767676, 1281px 685px #767676, 244px 1397px #767676, 619px 1533px #767676, 169px 1812px #767676, 369px 1px #767676, 1705px 1430px #767676, 796px 1998px #767676, 1801px 534px #767676, 749px 1038px #767676, 429px 1533px #767676, 536px 1902px #767676, 261px 1700px #767676, 1630px 511px #767676, 863px 925px #767676, 435px 621px #767676, 221px 191px #767676, 734px 660px #767676, 1032px 1017px #767676, 832px 1594px #767676, 1757px 962px #767676, 652px 1291px #767676; + --stars-small: 1928px 627px #767676, 626px 1242px #767676, + 456px 1401px #767676, 1984px 1908px #767676, 391px 722px #767676, + 1292px 1098px #767676, 29px 119px #767676, 445px 1913px #767676, + 1861px 172px #767676, 1818px 1237px #767676, 1435px 660px #767676, + 464px 928px #767676, 1771px 1053px #767676, 1033px 799px #767676, + 553px 607px #767676, 1564px 1212px #767676, 915px 1084px #767676, + 464px 847px #767676, 1456px 748px #767676, 997px 624px #767676, + 1005px 1863px #767676, 1115px 1924px #767676, 1128px 1485px #767676, + 827px 1590px #767676, 676px 1679px #767676, 660px 264px #767676, + 320px 1327px #767676, 1738px 1375px #767676, 1597px 232px #767676, + 457px 1891px #767676, 414px 725px #767676, 878px 248px #767676, + 458px 221px #767676, 380px 428px #767676, 1364px 593px #767676, + 267px 1967px #767676, 1266px 1579px #767676, 1867px 738px #767676, + 1186px 970px #767676, 773px 1262px #767676, 1489px 1718px #767676, + 1889px 1693px #767676, 154px 1834px #767676, 683px 484px #767676, + 816px 1525px #767676, 1048px 1929px #767676, 1793px 977px #767676, + 88px 1353px #767676, 760px 178px #767676, 1135px 521px #767676, + 1391px 1168px #767676, 1031px 1017px #767676, 1260px 586px #767676, + 1077px 420px #767676, 1693px 431px #767676, 629px 1488px #767676, + 958px 533px #767676, 389px 1979px #767676, 1064px 1815px #767676, + 1725px 581px #767676, 739px 1529px #767676, 263px 1626px #767676, + 1803px 320px #767676, 801px 107px #767676, 1832px 957px #767676, + 1828px 374px #767676, 1117px 1432px #767676, 1691px 1206px #767676, + 78px 834px #767676, 570px 1935px #767676, 37px 1288px #767676, + 29px 1763px #767676, 208px 1143px #767676, 832px 945px #767676, + 477px 1782px #767676, 1495px 858px #767676, 287px 1926px #767676, + 1399px 782px #767676, 111px 1178px #767676, 1570px 1587px #767676, + 1152px 543px #767676, 876px 655px #767676, 895px 1895px #767676, + 1140px 1759px #767676, 290px 593px #767676, 1803px 1699px #767676, + 1180px 1328px #767676, 1465px 1795px #767676, 825px 1490px #767676, + 256px 1972px #767676, 646px 1088px #767676, 65px 1221px #767676, + 518px 1205px #767676, 1312px 1346px #767676, 632px 1551px #767676, + 1989px 1924px #767676, 1090px 921px #767676, 695px 1486px #767676, + 778px 1577px #767676, 174px 22px #767676, 1510px 1991px #767676, + 392px 695px #767676, 1230px 773px #767676, 1868px 1191px #767676, + 1504px 1619px #767676, 1440px 1116px #767676, 719px 1296px #767676, + 900px 1868px #767676, 1553px 967px #767676, 1717px 1036px #767676, + 518px 1187px #767676, 1558px 490px #767676, 339px 452px #767676, + 1781px 1697px #767676, 1559px 829px #767676, 415px 1078px #767676, + 856px 1622px #767676, 1820px 1026px #767676, 1235px 260px #767676, + 1809px 1351px #767676, 1751px 765px #767676, 137px 1466px #767676, + 1226px 1545px #767676, 660px 1105px #767676, 1076px 905px #767676, + 1845px 446px #767676, 853px 1529px #767676, 50px 246px #767676, + 1177px 1390px #767676, 1959px 983px #767676, 1616px 1208px #767676, + 89px 1238px #767676, 1933px 822px #767676, 1006px 529px #767676, + 760px 702px #767676, 1225px 1816px #767676, 1435px 547px #767676, + 952px 1724px #767676, 1537px 1640px #767676, 566px 825px #767676, + 1173px 349px #767676, 496px 688px #767676, 1799px 1086px #767676, + 1913px 1322px #767676, 935px 859px #767676, 1537px 471px #767676, + 248px 1467px #767676, 704px 576px #767676, 591px 168px #767676, + 1647px 904px #767676, 851px 1971px #767676, 3px 210px #767676, + 1397px 1735px #767676, 1234px 958px #767676, 518px 1073px #767676, + 972px 553px #767676, 1905px 1892px #767676, 8px 566px #767676, + 95px 1205px #767676, 804px 538px #767676, 1542px 810px #767676, + 867px 1056px #767676, 1501px 988px #767676, 1388px 895px #767676, + 92px 1827px #767676, 61px 1809px #767676, 140px 115px #767676, + 1491px 52px #767676, 1669px 1895px #767676, 935px 879px #767676, + 1185px 549px #767676, 586px 695px #767676, 1975px 925px #767676, + 1663px 1854px #767676, 1567px 15px #767676, 943px 1307px #767676, + 568px 1720px #767676, 563px 292px #767676, 1698px 374px #767676, + 856px 759px #767676, 1895px 966px #767676, 105px 82px #767676, + 1314px 1698px #767676, 826px 746px #767676, 1187px 385px #767676, + 956px 368px #767676, 1047px 888px #767676, 1452px 1520px #767676, + 168px 1289px #767676, 406px 340px #767676, 1999px 1402px #767676, + 1901px 1628px #767676, 1778px 1664px #767676, 1276px 1181px #767676, + 1391px 546px #767676, 1465px 1680px #767676, 727px 406px #767676, + 1130px 1798px #767676, 972px 1636px #767676, 1463px 1855px #767676, + 1542px 1078px #767676, 1470px 1055px #767676, 998px 536px #767676, + 1265px 1692px #767676, 395px 459px #767676, 1132px 1527px #767676, + 820px 743px #767676, 1533px 1552px #767676, 126px 659px #767676, + 1797px 1020px #767676, 790px 1544px #767676, 184px 560px #767676, + 243px 915px #767676, 1575px 166px #767676, 346px 1756px #767676, + 1428px 611px #767676, 1257px 955px #767676, 1884px 777px #767676, + 966px 1336px #767676, 595px 461px #767676, 428px 210px #767676, + 664px 1476px #767676, 406px 812px #767676, 1115px 808px #767676, + 847px 792px #767676, 982px 269px #767676, 534px 1770px #767676, + 133px 20px #767676, 626px 1740px #767676, 1498px 606px #767676, + 365px 291px #767676, 725px 666px #767676, 727px 1446px #767676, + 505px 675px #767676, 1372px 302px #767676, 1419px 1947px #767676, + 1858px 636px #767676, 1961px 2000px #767676, 1659px 1567px #767676, + 1794px 746px #767676, 1490px 10px #767676, 704px 1930px #767676, + 976px 1630px #767676, 1531px 905px #767676, 990px 1527px #767676, + 866px 227px #767676, 1360px 982px #767676, 831px 1288px #767676, + 1406px 806px #767676, 131px 45px #767676, 650px 99px #767676, + 1760px 1969px #767676, 506px 1481px #767676, 30px 424px #767676, + 229px 1881px #767676, 52px 162px #767676, 1154px 1980px #767676, + 658px 10px #767676, 344px 1992px #767676, 1649px 1500px #767676, + 1179px 1114px #767676, 1072px 171px #767676, 1975px 1027px #767676, + 1619px 1224px #767676, 242px 841px #767676, 413px 1533px #767676, + 1882px 1745px #767676, 1440px 1050px #767676, 1412px 198px #767676, + 879px 1759px #767676, 809px 1456px #767676, 74px 50px #767676, + 878px 358px #767676, 283px 433px #767676, 1056px 1773px #767676, + 1727px 184px #767676, 1262px 1808px #767676, 560px 727px #767676, + 769px 1457px #767676, 1469px 884px #767676, 1651px 1215px #767676, + 757px 1131px #767676, 1663px 123px #767676, 814px 1675px #767676, + 1163px 1360px #767676, 1930px 803px #767676, 1719px 871px #767676, + 1078px 673px #767676, 678px 220px #767676, 1671px 1240px #767676, + 1047px 229px #767676, 1066px 41px #767676, 1054px 146px #767676, + 919px 1696px #767676, 1600px 7px #767676, 893px 271px #767676, + 359px 968px #767676, 195px 1931px #767676, 858px 887px #767676, + 930px 1447px #767676, 773px 102px #767676, 1737px 459px #767676, + 190px 660px #767676, 271px 454px #767676, 1045px 1368px #767676, + 419px 971px #767676, 643px 1171px #767676, 532px 345px #767676, + 1766px 641px #767676, 403px 444px #767676, 394px 918px #767676, + 1137px 92px #767676, 814px 931px #767676, 254px 342px #767676, + 250px 980px #767676, 1558px 1786px #767676, 437px 1396px #767676, + 376px 1053px #767676, 982px 227px #767676, 95px 1182px #767676, + 1291px 125px #767676, 314px 1936px #767676, 503px 1055px #767676, + 714px 1922px #767676, 1390px 1785px #767676, 1297px 199px #767676, + 530px 1768px #767676, 998px 1710px #767676, 530px 163px #767676, + 151px 1898px #767676, 1001px 675px #767676, 234px 1122px #767676, + 1052px 1144px #767676, 1224px 1937px #767676, 1613px 620px #767676, + 175px 1058px #767676, 1496px 1422px #767676, 360px 1796px #767676, + 1907px 559px #767676, 355px 558px #767676, 1189px 784px #767676, + 1170px 568px #767676, 96px 1978px #767676, 932px 1214px #767676, + 394px 786px #767676, 1903px 336px #767676, 1137px 1421px #767676, + 1563px 15px #767676, 1528px 763px #767676, 1621px 390px #767676, + 1440px 1764px #767676, 1764px 85px #767676, 989px 1492px #767676, + 877px 1561px #767676, 1009px 1157px #767676, 1737px 462px #767676, + 520px 1995px #767676, 36px 247px #767676, 1849px 1938px #767676, + 937px 941px #767676, 1864px 1950px #767676, 104px 692px #767676, + 149px 1976px #767676, 1394px 1140px #767676, 1609px 629px #767676, + 385px 1442px #767676, 1702px 1255px #767676, 413px 840px #767676, + 1762px 825px #767676, 1535px 681px #767676, 1894px 988px #767676, + 1355px 268px #767676, 541px 766px #767676, 1091px 1807px #767676, + 1723px 856px #767676, 1096px 966px #767676, 1619px 1225px #767676, + 337px 161px #767676, 664px 1623px #767676, 415px 1418px #767676, + 534px 85px #767676, 278px 463px #767676, 405px 1549px #767676, + 463px 106px #767676, 1227px 590px #767676, 1131px 849px #767676, + 1497px 162px #767676, 1162px 953px #767676, 818px 1263px #767676, + 1691px 1480px #767676, 1093px 630px #767676, 1884px 975px #767676, + 1238px 517px #767676, 1234px 951px #767676, 1398px 1687px #767676, + 1908px 856px #767676, 1307px 863px #767676, 1294px 689px #767676, + 60px 442px #767676, 1860px 1115px #767676, 799px 778px #767676, + 152px 1451px #767676, 1664px 1828px #767676, 1095px 1189px #767676, + 717px 884px #767676, 1759px 1128px #767676, 891px 83px #767676, + 1652px 1864px #767676, 289px 1149px #767676, 155px 1525px #767676, + 663px 1323px #767676, 829px 545px #767676, 800px 1235px #767676, + 687px 1912px #767676, 1655px 1256px #767676, 1721px 1205px #767676, + 902px 1680px #767676, 574px 425px #767676, 164px 344px #767676, + 131px 578px #767676, 1943px 65px #767676, 565px 1503px #767676, + 1358px 1301px #767676, 1218px 381px #767676, 1203px 1601px #767676, + 1389px 662px #767676, 779px 1580px #767676, 51px 736px #767676, + 126px 266px #767676, 1708px 973px #767676, 790px 112px #767676, + 1990px 914px #767676, 90px 1268px #767676, 407px 393px #767676, + 27px 304px #767676, 1853px 1296px #767676, 1355px 1174px #767676, + 1857px 89px #767676, 260px 776px #767676, 100px 1082px #767676, + 695px 1560px #767676, 1576px 222px #767676, 565px 885px #767676, + 297px 820px #767676, 1149px 1863px #767676, 187px 1252px #767676, + 615px 974px #767676, 760px 1761px #767676, 1412px 1662px #767676, + 611px 1154px #767676, 474px 1596px #767676, 1789px 768px #767676, + 1634px 192px #767676, 1212px 1340px #767676, 1619px 1512px #767676, + 611px 941px #767676, 113px 186px #767676, 1808px 510px #767676, + 615px 1367px #767676, 547px 395px #767676, 1626px 1584px #767676, + 1773px 397px #767676, 612px 1666px #767676, 361px 93px #767676, + 1541px 1812px #767676, 911px 235px #767676, 120px 1681px #767676, + 344px 1022px #767676, 1785px 53px #767676, 272px 400px #767676, + 777px 573px #767676, 440px 1398px #767676, 1286px 1879px #767676, + 1848px 1377px #767676, 1959px 1604px #767676, 1089px 1551px #767676, + 1109px 1087px #767676, 1668px 1741px #767676, 1044px 1999px #767676, + 660px 1671px #767676, 972px 1028px #767676, 1084px 655px #767676, + 877px 1066px #767676, 457px 890px #767676, 424px 1492px #767676, + 920px 867px #767676, 1546px 1409px #767676, 1729px 1482px #767676, + 92px 1625px #767676, 468px 933px #767676, 1739px 683px #767676, + 1130px 1578px #767676, 1340px 287px #767676, 828px 1961px #767676, + 1130px 1823px #767676, 1810px 783px #767676, 1350px 631px #767676, + 963px 1483px #767676, 1898px 1270px #767676, 1685px 1519px #767676, + 1940px 1235px #767676, 57px 266px #767676, 1547px 92px #767676, + 673px 1830px #767676, 900px 181px #767676, 132px 923px #767676, + 1195px 113px #767676, 414px 1352px #767676, 1568px 304px #767676, + 587px 1917px #767676, 269px 964px #767676, 1796px 1955px #767676, + 798px 1513px #767676, 942px 615px #767676, 198px 860px #767676, + 1473px 1891px #767676, 1519px 298px #767676, 100px 193px #767676, + 721px 1199px #767676, 1395px 338px #767676, 25px 671px #767676, + 75px 1685px #767676, 290px 214px #767676, 1185px 1821px #767676, + 1312px 1188px #767676, 950px 2000px #767676, 1606px 1709px #767676, + 931px 1565px #767676, 716px 382px #767676, 1117px 979px #767676, + 1752px 1623px #767676, 1080px 766px #767676, 1145px 1667px #767676, + 655px 278px #767676, 1679px 632px #767676, 1637px 1896px #767676, + 490px 79px #767676, 1663px 266px #767676, 1392px 23px #767676, + 718px 133px #767676, 350px 1808px #767676, 847px 1259px #767676, + 1285px 271px #767676, 100px 661px #767676, 148px 1919px #767676, + 997px 1803px #767676, 1137px 1362px #767676, 1094px 1280px #767676, + 266px 645px #767676, 416px 914px #767676, 1994px 916px #767676, + 581px 1984px #767676, 932px 296px #767676, 1651px 382px #767676, + 615px 1703px #767676, 1144px 1925px #767676, 570px 29px #767676, + 1561px 1744px #767676, 2px 1547px #767676, 561px 1310px #767676, + 906px 683px #767676, 328px 1735px #767676, 1919px 1653px #767676, + 327px 9px #767676, 735px 1315px #767676, 585px 444px #767676, + 153px 724px #767676, 1724px 1871px #767676, 887px 410px #767676, + 663px 1042px #767676, 251px 1924px #767676, 1663px 1258px #767676, + 1413px 1126px #767676, 937px 876px #767676, 676px 1124px #767676, + 1487px 1780px #767676, 1141px 1108px #767676, 513px 19px #767676, + 1193px 1483px #767676, 1945px 1368px #767676, 1658px 218px #767676, + 1858px 898px #767676, 1129px 1255px #767676, 1011px 1219px #767676, + 1421px 1179px #767676, 114px 1124px #767676, 1407px 1753px #767676, + 491px 1040px #767676, 1178px 1987px #767676, 1710px 1698px #767676, + 1315px 1579px #767676, 48px 434px #767676, 1825px 879px #767676, + 1381px 628px #767676, 1048px 1140px #767676, 1473px 718px #767676, + 1420px 985px #767676, 902px 310px #767676, 1619px 324px #767676, + 1083px 148px #767676, 1582px 1740px #767676, 1248px 1761px #767676, + 1702px 1717px #767676, 627px 340px #767676, 1931px 1249px #767676, + 1736px 627px #767676, 116px 1330px #767676, 96px 594px #767676, + 1781px 1832px #767676, 1938px 1861px #767676, 1940px 1444px #767676, + 266px 753px #767676, 91px 1090px #767676, 1393px 1746px #767676, + 492px 178px #767676, 1556px 147px #767676, 1425px 1611px #767676, + 282px 246px #767676, 500px 481px #767676, 515px 1947px #767676, + 460px 1104px #767676, 931px 1472px #767676, 344px 226px #767676, + 365px 107px #767676, 894px 1122px #767676, 1373px 1116px #767676, + 507px 553px #767676, 966px 1895px #767676, 1587px 1357px #767676, + 421px 652px #767676, 1893px 1500px #767676, 104px 1558px #767676, + 456px 265px #767676, 1257px 1207px #767676, 1172px 906px #767676, + 50px 1561px #767676, 1296px 30px #767676, 1098px 1529px #767676, + 555px 723px #767676, 1458px 1919px #767676, 1146px 570px #767676, + 1894px 973px #767676, 1777px 1570px #767676, 1917px 1004px #767676, + 19px 927px #767676, 1882px 512px #767676, 1390px 1497px #767676, + 99px 1521px #767676, 1796px 1847px #767676, 126px 1737px #767676, + 600px 541px #767676, 1539px 391px #767676, 1689px 1531px #767676, + 744px 92px #767676, 1000px 1339px #767676, 1697px 950px #767676, + 1534px 745px #767676, 714px 272px #767676, 1931px 1036px #767676, + 1063px 1547px #767676, 1790px 1484px #767676, 754px 612px #767676, + 886px 878px #767676, 1588px 1882px #767676, 88px 1475px #767676, + 920px 666px #767676, 1132px 1954px #767676, 825px 1000px #767676, + 179px 1135px #767676, 919px 76px #767676, 1724px 1759px #767676, + 1977px 1377px #767676, 1036px 1279px #767676, 1109px 658px #767676, + 211px 188px #767676, 187px 180px #767676, 468px 1964px #767676, + 1482px 244px #767676, 783px 772px #767676, 978px 431px #767676, + 124px 388px #767676, 697px 1195px #767676, 404px 334px #767676, + 1248px 572px #767676, 1888px 1144px #767676, 589px 132px #767676, + 100px 425px #767676, 593px 648px #767676, 273px 643px #767676, + 543px 1941px #767676, 427px 1843px #767676, 680px 293px #767676, + 1495px 739px #767676, 526px 631px #767676, 1645px 567px #767676, + 991px 949px #767676, 1027px 1570px #767676, 1335px 395px #767676, + 1024px 1509px #767676, 1785px 250px #767676; + --stars-medium: 1120px 738px #767676, 533px 827px #767676, 339px 866px #767676, + 1335px 1325px #767676, 1021px 435px #767676, 1850px 1972px #767676, + 492px 1847px #767676, 1030px 1536px #767676, 1154px 1422px #767676, + 533px 945px #767676, 1465px 1670px #767676, 411px 1474px #767676, + 413px 526px #767676, 1155px 1946px #767676, 1469px 1277px #767676, + 310px 1807px #767676, 936px 387px #767676, 397px 725px #767676, + 228px 1790px #767676, 1124px 539px #767676, 1261px 63px #767676, + 172px 881px #767676, 1042px 1984px #767676, 1153px 322px #767676, + 1955px 662px #767676, 1951px 1981px #767676, 621px 248px #767676, + 1589px 534px #767676, 1997px 667px #767676, 618px 660px #767676, + 452px 259px #767676, 362px 1762px #767676, 735px 347px #767676, + 783px 297px #767676, 1808px 408px #767676, 373px 740px #767676, + 543px 1509px #767676, 1125px 1169px #767676, 1625px 483px #767676, + 1461px 782px #767676, 460px 1210px #767676, 608px 1119px #767676, + 132px 1503px #767676, 169px 660px #767676, 392px 1094px #767676, + 1128px 567px #767676, 119px 1617px #767676, 1872px 60px #767676, + 1192px 673px #767676, 1115px 1712px #767676, 1192px 873px #767676, + 1375px 1486px #767676, 1031px 227px #767676, 510px 1459px #767676, + 607px 1047px #767676, 752px 247px #767676, 1556px 135px #767676, + 959px 915px #767676, 1071px 365px #767676, 318px 203px #767676, + 1000px 573px #767676, 2000px 1250px #767676, 1566px 1478px #767676, + 364px 1008px #767676, 1335px 1898px #767676, 580px 1162px #767676, + 930px 1091px #767676, 1644px 1040px #767676, 1702px 1127px #767676, + 1750px 1105px #767676, 708px 1310px #767676, 29px 392px #767676, + 946px 1905px #767676, 407px 1326px #767676, 59px 927px #767676, + 1717px 1944px #767676, 674px 301px #767676, 1018px 1346px #767676, + 1376px 1697px #767676, 1402px 961px #767676, 1012px 1256px #767676, + 999px 923px #767676, 1866px 1360px #767676, 1129px 533px #767676, + 117px 797px #767676, 778px 855px #767676, 1809px 1485px #767676, + 965px 1725px #767676, 780px 290px #767676, 205px 431px #767676, + 1886px 1007px #767676, 163px 1912px #767676, 517px 1106px #767676, + 527px 1428px #767676, 1258px 1921px #767676, 1544px 1149px #767676, + 1829px 966px #767676, 1626px 1420px #767676, 402px 1275px #767676, + 1952px 920px #767676, 738px 1364px #767676, 1598px 1288px #767676, + 1461px 951px #767676, 1921px 782px #767676, 57px 943px #767676, + 1123px 7px #767676, 763px 1524px #767676, 432px 847px #767676, + 1479px 59px #767676, 1761px 258px #767676, 1410px 1609px #767676, + 303px 58px #767676, 103px 1478px #767676, 1289px 221px #767676, + 1265px 277px #767676, 1153px 1054px #767676, 1468px 314px #767676, + 363px 453px #767676, 1946px 70px #767676, 1223px 876px #767676, + 1780px 1010px #767676, 782px 1977px #767676, 1480px 1867px #767676, + 451px 390px #767676, 1285px 321px #767676, 877px 1682px #767676, + 1998px 365px #767676, 817px 1011px #767676, 926px 1147px #767676, + 310px 368px #767676, 1234px 922px #767676, 658px 64px #767676, + 1409px 200px #767676, 1200px 515px #767676, 1597px 1924px #767676, + 1089px 1523px #767676, 1917px 995px #767676, 734px 1392px #767676, + 1573px 174px #767676, 209px 1376px #767676, 1987px 1718px #767676, + 1650px 796px #767676, 827px 1701px #767676, 1763px 961px #767676, + 1387px 834px #767676, 1122px 1326px #767676, 7px 763px #767676, + 666px 893px #767676, 1568px 947px #767676, 1460px 53px #767676, + 618px 549px #767676, 527px 398px #767676, 1648px 1959px #767676, + 1333px 956px #767676, 807px 695px #767676, 875px 147px #767676, + 568px 1632px #767676, 986px 1215px #767676, 1057px 1737px #767676, + 1352px 851px #767676, 1579px 853px #767676, 66px 1269px #767676, + 1775px 1587px #767676, 703px 107px #767676, 393px 1303px #767676, + 897px 1414px #767676, 812px 120px #767676, 1553px 1317px #767676, + 1394px 606px #767676, 1504px 1659px #767676, 1007px 370px #767676, + 964px 1028px #767676, 871px 1349px #767676, 803px 1218px #767676, + 1851px 1273px #767676, 57px 432px #767676, 727px 1752px #767676, + 1381px 998px #767676, 950px 412px #767676, 1118px 493px #767676, + 549px 311px #767676, 1689px 983px #767676, 185px 1432px #767676, + 425px 1761px #767676, 547px 291px #767676, 356px 1619px #767676, + 516px 294px #767676, 458px 383px #767676, 1634px 1420px #767676, + 1202px 1564px #767676, 1526px 821px #767676, 1401px 1242px #767676, + 34px 1100px #767676, 1347px 1172px #767676, 854px 821px #767676, + 1762px 467px #767676, 410px 1662px #767676, 1804px 19px #767676, + 1997px 320px #767676, 1025px 1016px #767676; + --stars-large: 1783px 1852px #767676, 760px 523px #767676, 136px 446px #767676, + 1618px 589px #767676, 769px 1696px #767676, 804px 1501px #767676, + 1927px 1123px #767676, 46px 1079px #767676, 1682px 728px #767676, + 1049px 479px #767676, 1427px 1116px #767676, 1951px 782px #767676, + 1556px 827px #767676, 926px 382px #767676, 1851px 863px #767676, + 1399px 1900px #767676, 634px 850px #767676, 1939px 1032px #767676, + 1571px 1958px #767676, 1648px 1378px #767676, 33px 1171px #767676, + 1848px 475px #767676, 1173px 1872px #767676, 1810px 409px #767676, + 1957px 328px #767676, 1029px 45px #767676, 333px 584px #767676, + 1998px 422px #767676, 480px 1216px #767676, 1432px 1888px #767676, + 709px 606px #767676, 555px 1702px #767676, 58px 1863px #767676, + 1839px 1633px #767676, 1349px 895px #767676, 1393px 1027px #767676, + 799px 218px #767676, 923px 1581px #767676, 1277px 271px #767676, + 142px 1086px #767676, 365px 41px #767676, 1135px 1148px #767676, + 1101px 1518px #767676, 265px 1855px #767676, 1134px 167px #767676, + 997px 770px #767676, 1172px 1332px #767676, 1573px 121px #767676, + 1925px 853px #767676, 1951px 200px #767676, 777px 1093px #767676, + 996px 278px #767676, 1328px 1296px #767676, 978px 535px #767676, + 161px 288px #767676, 1466px 310px #767676, 638px 1368px #767676, + 1407px 360px #767676, 704px 658px #767676, 1371px 1152px #767676, + 1947px 1808px #767676, 1280px 1392px #767676, 51px 499px #767676, + 1862px 1087px #767676, 563px 575px #767676, 165px 689px #767676, + 1104px 708px #767676, 1279px 1339px #767676, 1561px 899px #767676, + 1046px 49px #767676, 1916px 1992px #767676, 893px 1915px #767676, + 1404px 1555px #767676, 1203px 330px #767676, 389px 1239px #767676, + 69px 1152px #767676, 1566px 804px #767676, 341px 751px #767676, + 1775px 724px #767676, 1281px 685px #767676, 244px 1397px #767676, + 619px 1533px #767676, 169px 1812px #767676, 369px 1px #767676, + 1705px 1430px #767676, 796px 1998px #767676, 1801px 534px #767676, + 749px 1038px #767676, 429px 1533px #767676, 536px 1902px #767676, + 261px 1700px #767676, 1630px 511px #767676, 863px 925px #767676, + 435px 621px #767676, 221px 191px #767676, 734px 660px #767676, + 1032px 1017px #767676, 832px 1594px #767676, 1757px 962px #767676, + 652px 1291px #767676; height: 100%; left: 0; overflow: hidden; @@ -474,7 +807,7 @@ main { width: 2px; } -.stars>.medium::after { +.stars > .medium::after { content: " "; background: transparent; box-shadow: var(--stars-medium); diff --git a/src/styles/mobile.css b/src/styles/mobile.css index 55c15456f9..caad0340c9 100644 --- a/src/styles/mobile.css +++ b/src/styles/mobile.css @@ -1,7 +1,7 @@ @media (max-width: 1262px) and (min-width: 721px) { body { --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 100%); - --hero-height: 36.0rem; + --hero-height: 36rem; } .article-reader { @@ -13,7 +13,7 @@ } .side-nav { - margin-right: -36.0rem; + margin-right: -36rem; margin-bottom: calc(-100vh + var(--nav-height)); pointer-events: none; overflow: hidden; @@ -28,7 +28,7 @@ top: 0; background-color: var(--black0); transform: translateX(-120%); - transition: transform .28s; + transition: transform 0.28s; pointer-events: none; z-index: -1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.33), 2px 0 3px rgba(0, 0, 0, 0.2); @@ -50,7 +50,7 @@ .side-nav__list { transform: translateX(-120%); - transition: transform .28s; + transition: transform 0.28s; pointer-events: none; } @@ -63,13 +63,13 @@ left: 20rem; } - .side-nav__open, .side-nav.side-nav--open .side-nav__open { + .side-nav__open, + .side-nav.side-nav--open .side-nav__open { top: 34px; margin-top: 0; display: block; pointer-events: all; } - } @media (max-width: 720px) { @@ -80,7 +80,12 @@ body { --nav-height: 5.2rem; --hero-height: 92px; - --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 calc(100% - 32px)); + --banner-clip: polygon( + 0 0, + 100% 0, + 100% calc(100% - 52px), + 0 calc(100% - 32px) + ); } .hero { @@ -156,7 +161,7 @@ .article-reader { width: 100%; - padding: 0 1.0rem; + padding: 0 1rem; box-sizing: border-box; } diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx index 5a0258a579..aff1a9c1b7 100644 --- a/src/templates/learn.tsx +++ b/src/templates/learn.tsx @@ -1,17 +1,15 @@ import { graphql } from 'gatsby'; import React from 'react'; import Article from '../components/article'; -import Hero from '../components/hero'; import Layout from '../components/layout'; import Navigation from '../components/navigation'; import { LearnPageContext, LearnPageData } from '../types'; -type Props = { +interface Props { data: LearnPageData; pageContext: LearnPageContext; -}; - -export default ({ +} +const LearnLayout = ({ data: { doc: { frontmatter: { title, description }, @@ -21,22 +19,21 @@ export default ({ }, }, pageContext: { slug, next, previous, relativePath, navigationData }, -}: Props) => { - return ( - - -
    - - ); -}; +}: Props): React.ReactNode => ( + + +
    + +); +export default LearnLayout; export const query = graphql` query DocBySlug($slug: String!) { diff --git a/src/util/createSlug.js b/src/util/createSlug.js index ab3f525f04..4a8500b01f 100644 --- a/src/util/createSlug.js +++ b/src/util/createSlug.js @@ -11,11 +11,14 @@ function createSlug(title) { slug = slug.replace(set.from, set.to); }); - return slug - .replace(/[^\w\-]+/g, '') // Remove any non word characters - .replace(/--+/g, '-') // Replace multiple hyphens with single - .replace(/^-/, '') // Remove any leading hyphen - .replace(/-$/, ''); // Remove any trailing hyphen + return ( + slug + // eslint-disable-next-line no-useless-escape + .replace(/[^\w\-]+/g, '') // Remove any non word characters + .replace(/--+/g, '-') // Replace multiple hyphens with single + .replace(/^-/, '') // Remove any leading hyphen + .replace(/-$/, '') + ); // Remove any trailing hyphen } module.exports = createSlug; diff --git a/src/util/isScreenWithinWidth.ts b/src/util/isScreenWithinWidth.ts index 86ea88a43b..ec3a9f2f5f 100644 --- a/src/util/isScreenWithinWidth.ts +++ b/src/util/isScreenWithinWidth.ts @@ -2,9 +2,9 @@ * If the width of the viewport is lesser than this value * it means that the website is viewed in a tablet or mobile */ -const MAX_SMALL_SCREEN_WIDTH: number = 1262; +const MAX_SMALL_SCREEN_WIDTH = 1262; -const MAX_MOBILE_SCREEN_WIDTH: number = 720; +const MAX_MOBILE_SCREEN_WIDTH = 720; const isScreenWithinWidth = (maxWidth: number): boolean => { // Get viewport width @@ -17,7 +17,8 @@ const isScreenWithinWidth = (maxWidth: number): boolean => { return w <= maxWidth; }; -export const isSmallScreen = () => isScreenWithinWidth(MAX_SMALL_SCREEN_WIDTH); +export const isSmallScreen = (): boolean => + isScreenWithinWidth(MAX_SMALL_SCREEN_WIDTH); -export const isMobileScreen = () => +export const isMobileScreen = (): boolean => isScreenWithinWidth(MAX_MOBILE_SCREEN_WIDTH); diff --git a/src/util/notifyWhenStickyHeadersChange.ts b/src/util/notifyWhenStickyHeadersChange.ts deleted file mode 100644 index d3bf6d44bd..0000000000 --- a/src/util/notifyWhenStickyHeadersChange.ts +++ /dev/null @@ -1,178 +0,0 @@ -import { StickyChange, SentinelObserverSetupOptions } from '../types'; - -/** - * Dispatches a `stickychange` custom event. - */ -const fireStickyChange = (stuck: boolean, target: HTMLElement): void => { - const detail: StickyChange = { stuck, target }; - const event: CustomEvent = new CustomEvent('stickychange', { - detail, - }); - document.dispatchEvent(event); -}; - -/** - * Adds DOM nodes (aka sentinels) in each sticky section to act as waypoints for - * figuring out scroll position. - */ -const addSentinels = ( - container: HTMLElement, - stickyElementsClassName: string, - className: string -): HTMLDivElement[] => { - const stickyElements: HTMLElement[] = Array.from( - container.querySelectorAll(`.${stickyElementsClassName}`) - ) as HTMLElement[]; - const sentinels: HTMLDivElement[] = stickyElements.map( - (stickyElement: HTMLElement) => { - const sentinel: HTMLDivElement = document.createElement('div'); - sentinel.classList.add('sticky-sentinel', className); - const appendedSentinel: HTMLDivElement = stickyElement.parentElement!.appendChild( - sentinel - ); - - return appendedSentinel; - } - ); - - return sentinels; -}; - -/** - * Sets up an intersection observer to notify when elements with the class - * `.sticky-sentinel--top` become visible/invisible at the top of the container. - */ -const observeTopSentinels = ({ - container, - stickyElementsClassName, - root = container, - headerRootMargin, -}: SentinelObserverSetupOptions): void => { - const callback: IntersectionObserverCallback = ( - entries: IntersectionObserverEntry[] - ) => { - entries.forEach((entry: IntersectionObserverEntry) => { - const targetBoundsInfo: ClientRect = entry.boundingClientRect; - const targetParentElement: HTMLElement | null = - entry.target.parentElement; - const stickyElement: HTMLElement | null = - targetParentElement && - (targetParentElement.querySelector( - `.${stickyElementsClassName}` - ) as HTMLElement); - const rootBoundsInfo: ClientRect = entry.rootBounds; - - // Started sticking - if (stickyElement && targetBoundsInfo.bottom < rootBoundsInfo.top) { - fireStickyChange(true, stickyElement); - } - - // Stopped sticking - if ( - stickyElement && - targetBoundsInfo.bottom >= rootBoundsInfo.top && - targetBoundsInfo.bottom < rootBoundsInfo.bottom - ) { - fireStickyChange(false, stickyElement); - } - }); - }; - const options: IntersectionObserverInit = { - root, - rootMargin: headerRootMargin || '0px', - threshold: [0], - }; - const observer: IntersectionObserver = new IntersectionObserver( - callback, - options - ); - - // Add the top sentinels to each section and attach an observer - const topSentinels: HTMLDivElement[] = addSentinels( - container, - stickyElementsClassName, - 'sticky-sentinel--top' - ); - topSentinels.forEach((sentinel: HTMLDivElement) => - observer.observe(sentinel) - ); -}; - -/** - * Sets up an intersection observer to notify when elements with the class - * `.sticky-sentinel--bottom` become visible/invisible at the bottom of the - * container. - */ -const observeBottomSentinels = ({ - container, - stickyElementsClassName, - root = container, - footerRootMargin, -}: SentinelObserverSetupOptions): void => { - const callback: IntersectionObserverCallback = ( - entries: IntersectionObserverEntry[] - ) => { - entries.forEach((entry: IntersectionObserverEntry) => { - const targetBoundsInfo: ClientRect = entry.boundingClientRect; - const targetParentElement: HTMLElement | null = - entry.target.parentElement; - const stickyElement: HTMLElement | null = - targetParentElement && - (targetParentElement.querySelector( - `.${stickyElementsClassName}` - ) as HTMLElement); - const rootBoundsInfo: ClientRect = entry.rootBounds; - const ratio: number = entry.intersectionRatio; - - // Started sticking - if ( - stickyElement && - targetBoundsInfo.bottom > rootBoundsInfo.top && - ratio === 1 - ) { - fireStickyChange(true, stickyElement); - } - - // Stopped sticking - if ( - stickyElement && - targetBoundsInfo.top < rootBoundsInfo.top && - targetBoundsInfo.bottom < rootBoundsInfo.bottom - ) { - fireStickyChange(false, stickyElement); - } - }); - }; - const options: IntersectionObserverInit = { - root, - rootMargin: footerRootMargin || '0px', - // Get callback slightly before element is 100% visible/invisible - threshold: [1], - }; - const observer: IntersectionObserver = new IntersectionObserver( - callback, - options - ); - - // Add the bottom sentinels to each section and attach an observer - const bottomSentinels: HTMLDivElement[] = addSentinels( - container, - stickyElementsClassName, - 'sticky-sentinel--bottom' - ); - bottomSentinels.forEach((sentinel: HTMLDivElement) => - observer.observe(sentinel) - ); -}; - -/** - * Notifies when elements that have the class `stickyElementsClassName` - * (specified in `setupOptions`) begin to stick or not. - * Note: these should be children of the `container` element. - */ -export const notifyWhenStickyHeadersChange = ( - setupOptions: SentinelObserverSetupOptions -): void => { - observeTopSentinels(setupOptions); - observeBottomSentinels(setupOptions); -}; diff --git a/src/util/outlineOnKeyboardNav.ts b/src/util/outlineOnKeyboardNav.ts index 9662f5cc8c..2d298637b4 100644 --- a/src/util/outlineOnKeyboardNav.ts +++ b/src/util/outlineOnKeyboardNav.ts @@ -7,11 +7,32 @@ const MOUSEDOWN_EVENT = 'mousedown'; let IS_MOUSE_EVENT = false; +export function handleKeyDown(event: KeyboardEvent): void { + if (event.keyCode === TAB_KEYCODE) { + IS_MOUSE_EVENT = false; + } +} + +export function handleMouseDown(): void { + IS_MOUSE_EVENT = true; +} + +export function handleFocus(event: Event): void { + if (IS_MOUSE_EVENT && event.target && event.target !== event.currentTarget) { + (event.target as Element).setAttribute(FOCUS_ATTR, 'true'); + } +} + +export function handleBlur(event: Event): void { + if (event.target !== event.currentTarget) { + (event.target as Element).removeAttribute(FOCUS_ATTR); + } +} /** * Attaches listeners for keydown, mousedown, focus, and blur to the document, * which handle adding or removing focus outline css class for mouse events. */ -export function addFocusOutlineListeners() { +export function addFocusOutlineListeners(): void { const docEl = window.document.documentElement; IS_MOUSE_EVENT = false; @@ -24,7 +45,7 @@ export function addFocusOutlineListeners() { /** * Detaches listeners */ -export function removeFocusOutlineListeners() { +export function removeFocusOutlineListeners(): void { const docEl = window.document.documentElement; if (docEl) { @@ -34,25 +55,3 @@ export function removeFocusOutlineListeners() { docEl.removeEventListener(BLUR_EVENT, handleBlur, true); } } - -export function handleKeyDown(event: KeyboardEvent) { - if (event.keyCode === TAB_KEYCODE) { - IS_MOUSE_EVENT = false; - } -} - -export function handleMouseDown(event: MouseEvent) { - IS_MOUSE_EVENT = true; -} - -export function handleFocus(event: Event) { - if (IS_MOUSE_EVENT && event.target && event.target !== event.currentTarget) { - (event.target as Element).setAttribute(FOCUS_ATTR, 'true'); - } -} - -export function handleBlur(event: Event) { - if (event.target !== event.currentTarget) { - (event.target as Element).removeAttribute(FOCUS_ATTR); - } -} diff --git a/src/util/scrollTo.tsx b/src/util/scrollTo.tsx index 045aa80572..89e554f369 100644 --- a/src/util/scrollTo.tsx +++ b/src/util/scrollTo.tsx @@ -1,12 +1,15 @@ import { isMobileScreen } from './isScreenWithinWidth'; +/* eslint-disable */ +// this is from stack overflow I assume const easeInOutCubic = (t: number, b: number, c: number, d: number) => (t /= d / 2) < 1 ? (c / 2) * t * t * t + b : (c / 2) * ((t -= 2) * t * t + 2) + b; +/* eslint-enable */ export function scrollTo( - scrollTo: number, + scrollToPoint: number, element: HTMLElement | null = null, duration: number = 333 ): Promise { @@ -15,12 +18,12 @@ export function scrollTo( window.pageYOffset || document.documentElement.scrollTop) - ((element && element.clientTop) || 0); - const change = scrollTo - start; + const change = scrollToPoint - start; let previousTime = window.performance.now(); let currentTime = 0; - return new Promise((resolve, _reject) => { - const animateScroll = () => { + return new Promise((resolve): void => { + const animateScroll = (): void => { const time = window.performance.now(); const increment = time - previousTime; previousTime = time; @@ -41,10 +44,16 @@ export function scrollTo( const SPEED_MODIFIER = 0.9; const BASE_TIME = 500; +interface ScrollParams { + newScrollPos: number; + scrollWindow: null | HTMLElement; + scrollTime: number; +} + export const calcNavScrollParams = ( linkHeight: number, navElement: HTMLElement -) => { +): ScrollParams => { const navRect = navElement.getBoundingClientRect(); let newScrollPos: number; let scrollWindow: HTMLElement | null; diff --git a/src/util/tocFormatter.ts b/src/util/tocFormatter.ts index 422b1b36aa..aa28f4e6da 100644 --- a/src/util/tocFormatter.ts +++ b/src/util/tocFormatter.ts @@ -1,5 +1,5 @@ // See related issue: https://github.com/gatsbyjs/gatsby/issues/8982 -export function fixTocCodeTag(tocLinks: string = '') { +export function fixTocCodeTag(tocLinks: string = ''): string { const lessThanSignRegex = /</gi; return tocLinks.replace(lessThanSignRegex, '<'); diff --git a/test-setup.js b/test-setup.js index 530bd30b3c..d08bba40ab 100644 --- a/test-setup.js +++ b/test-setup.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line no-underscore-dangle global.___loader = { enqueue: jest.fn(), }; diff --git a/test/__mocks__/gatsby.js b/test/__mocks__/gatsby.js index b6535f1ab5..ee36affb2b 100644 --- a/test/__mocks__/gatsby.js +++ b/test/__mocks__/gatsby.js @@ -1,14 +1,13 @@ const React = require('react'); + const gatsby = jest.requireActual('gatsby'); module.exports = { ...gatsby, graphql: jest.fn(), - Link: jest.fn().mockImplementation(({ to, ...rest }) => - React.createElement('a', { + Link: jest.fn().mockImplementation(({ to, ...rest }) => React.createElement('a', { ...rest, href: to, - }) - ), + })), StaticQuery: jest.fn(), }; diff --git a/test/util/outlineOnKeyboardNav.test.js b/test/util/outlineOnKeyboardNav.test.js index 55fe031537..d37f00eb99 100644 --- a/test/util/outlineOnKeyboardNav.test.js +++ b/test/util/outlineOnKeyboardNav.test.js @@ -4,6 +4,7 @@ import { handleKeyDown, handleBlur, } from '../../src/util/outlineOnKeyboardNav'; + describe('Tests for focus and blur handlers', () => { const FOCUS_ATTR = 'data-is-focused'; const TAB_KEYCODE = 9; diff --git a/tslint.json b/tslint.json deleted file mode 100644 index 10e7dfce13..0000000000 --- a/tslint.json +++ /dev/null @@ -1,83 +0,0 @@ -{ - "extends": ["tslint-react", "tslint-config-prettier"], - "jsRules": { - "no-empty": true - }, - "rules": { - "array-type": [true, "array"], - "arrow-return-shorthand": true, - "ban": false, - "class-name": true, - "comment-format": [true, "check-space"], - "curly": true, - "eofline": false, - "forin": true, - "import-blacklist": [true, "lodash-es"], - "indent": [true, "spaces"], - "interface-name": [true, "never-prefix"], - "jsdoc-format": true, - "jsx-boolean-value": [true, "never"], - "jsx-no-lambda": false, - "jsx-no-multiline-js": false, - "label-position": true, - "newline-before-return": true, - "no-any": true, - "no-arg": true, - "no-bitwise": true, - "no-console": [ - true, - "log", - "error", - "debug", - "info", - "time", - "timeEnd", - "trace" - ], - "no-consecutive-blank-lines": true, - "no-construct": true, - "no-debugger": true, - "no-duplicate-variable": true, - "no-empty": true, - "no-eval": true, - "no-implicit-dependencies": [true, "dev"], - "no-string-literal": true, - "no-switch-case-fall-through": true, - "no-trailing-whitespace": false, - "no-unnecessary-callback-wrapper": true, - "no-unused-expression": true, - "one-line": [ - true, - "check-catch", - "check-else", - "check-open-brace", - "check-whitespace" - ], - "prefer-const": true, - "quotemark": [true, "single", "jsx-double"], - "radix": true, - "switch-default": true, - "triple-equals": [true, "allow-null-check"], - "typedef": [true, "parameter", "property-declaration"], - "typedef-whitespace": [ - true, - { - "call-signature": "nospace", - "index-signature": "nospace", - "parameter": "nospace", - "property-declaration": "nospace", - "variable-declaration": "nospace" - } - ], - "whitespace": [ - true, - "check-branch", - "check-decl", - "check-module", - "check-operator", - "check-separator", - "check-type", - "check-typecast" - ] - } -} diff --git a/yarn.lock b/yarn.lock index c39019691e..0bb15d886d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1665,6 +1665,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636" integrity sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A== +"@types/json5@^0.0.29": + version "0.0.29" + resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee" + integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4= + "@types/minimatch@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" @@ -1774,7 +1779,7 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@^1.13.0": +"@typescript-eslint/eslint-plugin@^1.13.0", "@typescript-eslint/eslint-plugin@^1.4.2": version "1.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-1.13.0.tgz#22fed9b16ddfeb402fd7bcde56307820f6ebc49f" integrity sha512-WQHCozMnuNADiqMtsNzp96FNox5sOVpU8Xt4meaT4em8lOG1SrOv92/mUbEHQVh90sldKSfcOc/I0FOb/14G1g== @@ -1785,7 +1790,7 @@ regexpp "^2.0.1" tsutils "^3.7.0" -"@typescript-eslint/experimental-utils@1.13.0": +"@typescript-eslint/experimental-utils@1.13.0", "@typescript-eslint/experimental-utils@^1.13.0": version "1.13.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-1.13.0.tgz#b08c60d780c0067de2fb44b04b432f540138301e" integrity sha512-zmpS6SyqG4ZF64ffaJ6uah6tWWWgZ8m+c54XXgwFtUv0jNz8aJAVx8chMCvnk7yl6xwn8d+d96+tWp7fXzTuDg== @@ -3113,11 +3118,6 @@ buffer@^5.2.0, buffer@^5.2.1: base64-js "^1.0.2" ieee754 "^1.1.4" -builtin-modules@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f" - integrity sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8= - builtin-modules@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" @@ -3336,7 +3336,7 @@ chalk@2.3.1: escape-string-regexp "^1.0.5" supports-color "^5.2.0" -chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2: +chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== @@ -3665,7 +3665,7 @@ command-exists@^1.2.2: resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.8.tgz#715acefdd1223b9c9b37110a149c6392c2852291" integrity sha512-PM54PkseWbiiD/mMsbvW351/u+dafwTJ0ye2qB60G1aGQP9j3xK2gmMDc+R34L3nDtx4qMCitXT75mkbkGJDLw== -commander@^2.11.0, commander@^2.12.1, commander@^2.20.0, commander@~2.20.0: +commander@^2.11.0, commander@^2.20.0, commander@~2.20.0: version "2.20.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422" integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ== @@ -3782,7 +3782,7 @@ configstore@^5.0.0: write-file-atomic "^3.0.0" xdg-basedir "^4.0.0" -confusing-browser-globals@^1.0.7: +confusing-browser-globals@^1.0.5, confusing-browser-globals@^1.0.7: version "1.0.8" resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.8.tgz#93ffec1f82a6e2bf2bc36769cc3a92fa20e502f3" integrity sha512-lI7asCibVJ6Qd3FGU7mu4sfG4try4LX3+GVS+Gv8UlrEf2AeW57piecapnog2UHZSbcX/P/1UDWVaTsblowlZg== @@ -4448,6 +4448,11 @@ deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= +deepmerge@^2.0.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + deepmerge@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.0.0.tgz#3e3110ca29205f120d7cb064960a39c3d2087c09" @@ -4620,11 +4625,6 @@ diff-sequences@^24.9.0: resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5" integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew== -diff@^3.2.0: - version "3.5.0" - resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" - integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== - diffie-hellman@^5.0.0: version "5.0.3" resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875" @@ -5094,6 +5094,31 @@ escodegen@^1.9.1: optionalDependencies: source-map "~0.6.1" +eslint-config-airbnb-base@^13.2.0: + version "13.2.0" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.2.0.tgz#f6ea81459ff4dec2dda200c35f1d8f7419d57943" + integrity sha512-1mg/7eoB4AUeB0X1c/ho4vb2gYkNH8Trr/EgCT/aGmKhhG+F6vF5s8+iRBlWAzFIAphxIdp3YfEKgEl0f9Xg+w== + dependencies: + confusing-browser-globals "^1.0.5" + object.assign "^4.1.0" + object.entries "^1.1.0" + +eslint-config-airbnb@^17.1.0: + version "17.1.1" + resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-17.1.1.tgz#2272e0b86bb1e2b138cdf88d07a3b6f4cda3d626" + integrity sha512-xCu//8a/aWqagKljt+1/qAM62BYZeNq04HmdevG5yUGWpja0I/xhqd6GdLRch5oetEGFiJAnvtGuTEAese53Qg== + dependencies: + eslint-config-airbnb-base "^13.2.0" + object.assign "^4.1.0" + object.entries "^1.1.0" + +eslint-config-prettier@^4.1.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-4.3.0.tgz#c55c1fcac8ce4518aeb77906984e134d9eb5a4f0" + integrity sha512-sZwhSTHVVz78+kYD3t5pCWSYEdVSBR0PXnwjDRsUs8ytIrK8PLXw+6FKp8r3Z7rx4ZszdetWlXYKOHoUrrwPlA== + dependencies: + get-stdin "^6.0.0" + eslint-config-react-app@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-4.0.1.tgz#23fd0fd7ea89442ef1e733f66a7207674b23c8db" @@ -5109,6 +5134,15 @@ eslint-import-resolver-node@^0.3.2: debug "^2.6.9" resolve "^1.5.0" +eslint-import-resolver-typescript@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-1.1.1.tgz#e6d42172b95144ef16610fe104ef38340edea591" + integrity sha512-jqSfumQ+H5y3FUJ6NjRkbOQSUOlbBucGTN3ELymOtcDBbPjVdm/luvJuCfCaIXGh8sEF26ma1qVdtDgl9ndhUg== + dependencies: + debug "^4.0.1" + resolve "^1.4.0" + tsconfig-paths "^3.6.0" + eslint-loader@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.2.1.tgz#28b9c12da54057af0845e2a6112701a2f6bf8337" @@ -5143,7 +5177,7 @@ eslint-plugin-graphql@^3.0.3: graphql-config "^2.0.1" lodash "^4.11.1" -eslint-plugin-import@^2.18.2: +eslint-plugin-import@^2.16.0, eslint-plugin-import@^2.18.2: version "2.18.2" resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6" integrity sha512-5ohpsHAiUBRNaBWAF08izwUGlbrJoJJ+W9/TBwsGoR1MnlgfwMIKrFeSjWbt6moabiXW9xNvtFz+97KHRfI4HQ== @@ -5160,7 +5194,14 @@ eslint-plugin-import@^2.18.2: read-pkg-up "^2.0.0" resolve "^1.11.0" -eslint-plugin-jsx-a11y@^6.2.3: +eslint-plugin-jest@^22.17.0: + version "22.17.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.17.0.tgz#dc170ec8369cd1bff9c5dd8589344e3f73c88cf6" + integrity sha512-WT4DP4RoGBhIQjv+5D0FM20fAdAUstfYAf/mkufLNTojsfgzc5/IYW22cIg/Q4QBavAZsROQlqppiWDpFZDS8Q== + dependencies: + "@typescript-eslint/experimental-utils" "^1.13.0" + +eslint-plugin-jsx-a11y@^6.2.1, eslint-plugin-jsx-a11y@^6.2.3: version "6.2.3" resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa" integrity sha512-CawzfGt9w83tyuVekn0GDPU9ytYtxyxyFZ3aSWROmnRRFQFT2BiPJd7jvRdzNDi6oLWaS2asMeYSNMjWTV4eNg== @@ -5175,12 +5216,19 @@ eslint-plugin-jsx-a11y@^6.2.3: has "^1.0.3" jsx-ast-utils "^2.2.1" -eslint-plugin-react-hooks@^1.7.0: +eslint-plugin-prettier@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.0.tgz#8695188f95daa93b0dc54b249347ca3b79c4686d" + integrity sha512-XWX2yVuwVNLOUhQijAkXz+rMPPoCr7WFiAl8ig6I7Xn+pPVhDhzg4DxHpmbeb0iqjO9UronEA3Tb09ChnFVHHA== + dependencies: + prettier-linter-helpers "^1.0.0" + +eslint-plugin-react-hooks@^1.4.0, eslint-plugin-react-hooks@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04" integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA== -eslint-plugin-react@^7.14.3: +eslint-plugin-react@^7.12.4, eslint-plugin-react@^7.14.3: version "7.14.3" resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13" integrity sha512-EzdyyBWC4Uz2hPYBiEJrKCUi2Fn+BJ9B/pJQcjw5X+x/H2Nm59S4MJIvL4O5NEE0+WbnQwEBxWY03oUk+Bc3FA== @@ -5215,7 +5263,7 @@ eslint-visitor-keys@^1.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2" integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A== -eslint@^5.16.0: +eslint@^5.14.1, eslint@^5.16.0: version "5.16.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea" integrity sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg== @@ -5597,6 +5645,11 @@ fast-deep-equal@^2.0.1: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49" integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk= +fast-diff@^1.1.2: + version "1.2.0" + resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03" + integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w== + fast-glob@^2.0.2, fast-glob@^2.2.2: version "2.2.7" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d" @@ -11273,6 +11326,13 @@ prepend-http@^2.0.0: resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-2.0.0.tgz#e92434bfa5ea8c19f41cdfd401d741a3c819d897" integrity sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc= +prettier-linter-helpers@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" + integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w== + dependencies: + fast-diff "^1.1.2" + prettier@^1.16.4: version "1.18.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.18.2.tgz#6823e7c5900017b4bd3acf46fe9ac4b4d7bda9ea" @@ -12228,7 +12288,7 @@ resolve@1.1.7: resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b" integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs= -resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1: +resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0, resolve@^1.8.1: version "1.12.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6" integrity sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w== @@ -13744,49 +13804,22 @@ ts-pnp@^1.1.2: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552" integrity sha512-f5Knjh7XCyRIzoC/z1Su1yLLRrPrFCgtUAh/9fCSP6NKbATwpOL1+idQVXQokK9GRFURn/jYPGPfegIctwunoA== -tslib@^1.6.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: +tsconfig-paths@^3.6.0: + version "3.8.0" + resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.8.0.tgz#4e34202d5b41958f269cf56b01ed95b853d59f72" + integrity sha512-zZEYFo4sjORK8W58ENkRn9s+HmQFkkwydDG7My5s/fnfr2YYCaiyXe/HBUcIgU8epEKOXwiahOO+KZYjiXlWyQ== + dependencies: + "@types/json5" "^0.0.29" + deepmerge "^2.0.1" + json5 "^1.0.1" + minimist "^1.2.0" + strip-bom "^3.0.0" + +tslib@^1.6.0, tslib@^1.8.1, tslib@^1.9.0: version "1.10.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== -tslint-config-prettier@^1.15.0: - version "1.18.0" - resolved "https://registry.yarnpkg.com/tslint-config-prettier/-/tslint-config-prettier-1.18.0.tgz#75f140bde947d35d8f0d238e0ebf809d64592c37" - integrity sha512-xPw9PgNPLG3iKRxmK7DWr+Ea/SzrvfHtjFt5LBl61gk2UBG/DB9kCXRjv+xyIU1rUtnayLeMUVJBcMX8Z17nDg== - -tslint-react@^3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-3.6.0.tgz#7f462c95c4a0afaae82507f06517ff02942196a1" - integrity sha512-AIv1QcsSnj7e9pFir6cJ6vIncTqxfqeFF3Lzh8SuuBljueYzEAtByuB6zMaD27BL0xhMEqsZ9s5eHuCONydjBw== - dependencies: - tsutils "^2.13.1" - -tslint@^5.11.0: - version "5.19.0" - resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.19.0.tgz#a2cbd4a7699386da823f6b499b8394d6c47bb968" - integrity sha512-1LwwtBxfRJZnUvoS9c0uj8XQtAnyhWr9KlNvDIdB+oXyT+VpsOAaEhEgKi1HrZ8rq0ki/AAnbGSv4KM6/AfVZw== - dependencies: - "@babel/code-frame" "^7.0.0" - builtin-modules "^1.1.1" - chalk "^2.3.0" - commander "^2.12.1" - diff "^3.2.0" - glob "^7.1.1" - js-yaml "^3.13.1" - minimatch "^3.0.4" - mkdirp "^0.5.1" - resolve "^1.3.2" - semver "^5.3.0" - tslib "^1.8.0" - tsutils "^2.29.0" - -tsutils@^2.13.1, tsutils@^2.29.0: - version "2.29.0" - resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-2.29.0.tgz#32b488501467acbedd4b85498673a0812aca0b99" - integrity sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA== - dependencies: - tslib "^1.8.1" - tsutils@^3.7.0: version "3.17.1" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" From dd9ce7a0498a51f6a3e89ea9c8f93cc592d8906e Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 14 Sep 2019 13:50:05 -0700 Subject: [PATCH 18/40] feat: Basic learn page side bar styles --- src/components/header.tsx | 5 +- src/components/navigation-item.tsx | 2 +- src/components/navigation-section.tsx | 47 +- src/pages/docs.tsx | 24 +- src/styles/docs.css | 1 - src/styles/layout.css | 593 -------------------------- src/styles/learn.css | 166 +++++++ src/templates/learn.tsx | 2 + 8 files changed, 212 insertions(+), 628 deletions(-) create mode 100644 src/styles/learn.css diff --git a/src/components/header.tsx b/src/components/header.tsx index 06d8116c4c..73baa3552a 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -28,7 +28,10 @@ const Header = (): JSX.Element => ( Learn
  • - Documentation + Docs +
    • +
  • + Community
  • Download diff --git a/src/components/navigation-item.tsx b/src/components/navigation-item.tsx index a3062ed058..8fc6b0e19a 100644 --- a/src/components/navigation-item.tsx +++ b/src/components/navigation-item.tsx @@ -19,7 +19,7 @@ const NavigationItem = ({ onClick, autoScroll, }: Props): JSX.Element => { - let className = 'side-nav__item '; + let className = 't-body2 side-nav__item '; if (isRead) { className += 'side-nav__item--done'; } else if (isActive) { diff --git a/src/components/navigation-section.tsx b/src/components/navigation-section.tsx index 40961630f9..79cc12e26d 100644 --- a/src/components/navigation-section.tsx +++ b/src/components/navigation-section.tsx @@ -19,27 +19,32 @@ const NavigationSection = ({ onItemClick, readSections, autoScroll, -}: Props): JSX.Element => ( -
      -

      {title}

      - {section.map( - (item: NavigationSectionItem): JSX.Element => { - const isRead: boolean = readSections.has(item.slug); +}: Props): JSX.Element => { + return ( +
        +

        + offline_bolt + {title} +

        + {section.map( + (item: NavigationSectionItem): JSX.Element => { + const isRead: boolean = readSections.has(item.slug); - return ( - - ); - } - )} -
      -); + return ( + + ); + } + )} +
    + ); +}; export default NavigationSection; diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index bad341ef16..e7ed1d4d11 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -90,17 +90,19 @@ function sideBarSection( {title}
    • ); diff --git a/src/styles/docs.css b/src/styles/docs.css index 3ebb67f3a0..b04a6f128d 100644 --- a/src/styles/docs.css +++ b/src/styles/docs.css @@ -10,7 +10,6 @@ width: 100%; } - .api-nav__list { list-style: none; padding: 0 var(--space-20); diff --git a/src/styles/layout.css b/src/styles/layout.css index d7f8b2b0bf..173a969fb0 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -208,202 +208,6 @@ main { color: var(--color-text-primary); } -.hero { - align-items: center; - display: flex; - grid-column-end: 3; - grid-column-start: 1; - height: var(--hero-height); - position: sticky; - top: -206px; - width: 100%; - z-index: 998; -} - -.hero h1 { - bottom: 28px; - color: white; - font-weight: 600; - left: 460px; - max-width: 768px; - position: relative; - z-index: 999; -} - -.diagonal-hero-bg { - background: var(--banner-gradient); - clip-path: var(--banner-clip); - content: ""; - /* Equivalent of .85 opacity without the transparency! */ - filter: brightness(160%) saturate(45%); - height: 100%; - left: 0; - overflow: hidden; - position: absolute; - top: 0; - width: 100%; -} - -.side-nav { - /* Needed since overflow: none will disable position: sticky on children */ - clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); - height: calc(100vh - var(--nav-height)); - margin-top: -92px; - overflow: auto; - overflow-x: hidden; - padding: 0 2.4rem; - position: sticky; - top: var(--nav-height); - width: 100%; - max-width: 36rem; - z-index: 998; -} - -.side-nav__open { - display: none; -} - -.side-nav > :last-child { - /* To allow side menu to scroll to bottom when not sticky */ - padding-bottom: 230px; -} - -.side-nav__title { - background: var(--color-fill-app); - color: var(--color-text-primary); - font-weight: 200; - letter-spacing: 2px; - padding: 2.8rem 0 0; - box-shadow: 0 25px 20px var(--color-fill-app); - margin: 0 0 2.4rem; - position: sticky; - top: 0; - z-index: 999; -} - -.side-nav__list { - margin: 0; - padding: 0; - position: relative; -} - -.side-nav__item { - align-items: center; - border-radius: 4px; - box-sizing: border-box; - color: var(--color-text-primary); - cursor: pointer; - line-height: 2.4rem; - list-style: none; - margin-left: 4.8rem; - padding: 1.2rem; - position: relative; - width: calc(100% - 4.8rem); -} - -.side-nav__item { - color: var(--color-text-primary); - text-decoration: none; - display: block; -} - -.side-nav__item:last-of-type::after { - display: none; -} - -.side-nav__item::before { - background-size: 2.4rem; - border-radius: 50%; - box-shadow: inset 0 0 0 2px var(--brand-light); - box-sizing: border-box; - content: " "; - display: block; - height: 2.4rem; - left: -3.6rem; - padding: 2px 4px; - position: absolute; - top: 1.2rem; - transition: box-shadow 0.28s; - overflow: hidden; - width: 2.4rem; -} - -.side-nav__item.side-nav__item--done::before { - content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0OC44IDQ0OC44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDguOCA0NDguODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjaGVjayI+CgkJPHBvbHlnb24gcG9pbnRzPSIxNDIuOCwzMjMuODUgMzUuNywyMTYuNzUgMCwyNTIuNDUgMTQyLjgsMzk1LjI1IDQ0OC44LDg5LjI1IDQxMy4xLDUzLjU1ICAgIiBmaWxsPSIjZjVmNmY3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); -} - -.side-nav__item.side-nav__item--done::before, -.side-nav__item.side-nav__item--active::before { - box-shadow: inset 0 0 0 2.4rem var(--brand-light); -} - -.side-nav__item:hover::before { - box-shadow: inset 0 0 0 2.4rem var(--brand-light) !important; -} - -.side-nav__item::after { - background: var(--brand-light); - content: " "; - display: block; - height: calc(100% - 2.4rem - 8px); - left: calc(-2.4rem - 1px); - position: absolute; - top: calc(3.6rem + 4px); - width: 2px; -} - -.side-nav__open { - display: none; - position: sticky; - top: 1.8rem; - margin-left: -0.8rem; - width: 20px; - height: calc(24px + 3px); - padding: 12px 0; - background: white; - color: white; - overflow: visible; - border: none; - text-indent: 3.2rem; - line-height: 0; - font-weight: 200; - transition: color 0.28s, background-color 0.28s; - outline: none; - background-clip: content-box; - z-index: 9999; -} - -.side-nav__open::before, -.side-nav__open::after { - content: ""; - width: 100%; - height: 3px; - position: absolute; - top: calc(50% - 1.5px); - left: 0; - transform: translateY(-250%); - background-color: white; - transition: transform 0.28s; -} - -.side-nav__open::after { - transform: translateY(250%); -} - -.side-nav.side-nav--open .side-nav__open { - top: calc(var(--nav-height) + 1.8rem); - margin-bottom: -35px; - margin-top: 16px; - color: transparent; - background-color: transparent; -} -.side-nav.side-nav--open .side-nav__open::before { - transform: rotate(-45deg); -} -.side-nav.side-nav--open .side-nav__open::after { - transform: rotate(45deg); -} - /* Start: Article Reader HTML Reset */ .article-reader { @@ -439,403 +243,6 @@ main { /* End: Article Reader HTML Reset */ -.stars { - --stars-small: 1928px 627px #767676, 626px 1242px #767676, - 456px 1401px #767676, 1984px 1908px #767676, 391px 722px #767676, - 1292px 1098px #767676, 29px 119px #767676, 445px 1913px #767676, - 1861px 172px #767676, 1818px 1237px #767676, 1435px 660px #767676, - 464px 928px #767676, 1771px 1053px #767676, 1033px 799px #767676, - 553px 607px #767676, 1564px 1212px #767676, 915px 1084px #767676, - 464px 847px #767676, 1456px 748px #767676, 997px 624px #767676, - 1005px 1863px #767676, 1115px 1924px #767676, 1128px 1485px #767676, - 827px 1590px #767676, 676px 1679px #767676, 660px 264px #767676, - 320px 1327px #767676, 1738px 1375px #767676, 1597px 232px #767676, - 457px 1891px #767676, 414px 725px #767676, 878px 248px #767676, - 458px 221px #767676, 380px 428px #767676, 1364px 593px #767676, - 267px 1967px #767676, 1266px 1579px #767676, 1867px 738px #767676, - 1186px 970px #767676, 773px 1262px #767676, 1489px 1718px #767676, - 1889px 1693px #767676, 154px 1834px #767676, 683px 484px #767676, - 816px 1525px #767676, 1048px 1929px #767676, 1793px 977px #767676, - 88px 1353px #767676, 760px 178px #767676, 1135px 521px #767676, - 1391px 1168px #767676, 1031px 1017px #767676, 1260px 586px #767676, - 1077px 420px #767676, 1693px 431px #767676, 629px 1488px #767676, - 958px 533px #767676, 389px 1979px #767676, 1064px 1815px #767676, - 1725px 581px #767676, 739px 1529px #767676, 263px 1626px #767676, - 1803px 320px #767676, 801px 107px #767676, 1832px 957px #767676, - 1828px 374px #767676, 1117px 1432px #767676, 1691px 1206px #767676, - 78px 834px #767676, 570px 1935px #767676, 37px 1288px #767676, - 29px 1763px #767676, 208px 1143px #767676, 832px 945px #767676, - 477px 1782px #767676, 1495px 858px #767676, 287px 1926px #767676, - 1399px 782px #767676, 111px 1178px #767676, 1570px 1587px #767676, - 1152px 543px #767676, 876px 655px #767676, 895px 1895px #767676, - 1140px 1759px #767676, 290px 593px #767676, 1803px 1699px #767676, - 1180px 1328px #767676, 1465px 1795px #767676, 825px 1490px #767676, - 256px 1972px #767676, 646px 1088px #767676, 65px 1221px #767676, - 518px 1205px #767676, 1312px 1346px #767676, 632px 1551px #767676, - 1989px 1924px #767676, 1090px 921px #767676, 695px 1486px #767676, - 778px 1577px #767676, 174px 22px #767676, 1510px 1991px #767676, - 392px 695px #767676, 1230px 773px #767676, 1868px 1191px #767676, - 1504px 1619px #767676, 1440px 1116px #767676, 719px 1296px #767676, - 900px 1868px #767676, 1553px 967px #767676, 1717px 1036px #767676, - 518px 1187px #767676, 1558px 490px #767676, 339px 452px #767676, - 1781px 1697px #767676, 1559px 829px #767676, 415px 1078px #767676, - 856px 1622px #767676, 1820px 1026px #767676, 1235px 260px #767676, - 1809px 1351px #767676, 1751px 765px #767676, 137px 1466px #767676, - 1226px 1545px #767676, 660px 1105px #767676, 1076px 905px #767676, - 1845px 446px #767676, 853px 1529px #767676, 50px 246px #767676, - 1177px 1390px #767676, 1959px 983px #767676, 1616px 1208px #767676, - 89px 1238px #767676, 1933px 822px #767676, 1006px 529px #767676, - 760px 702px #767676, 1225px 1816px #767676, 1435px 547px #767676, - 952px 1724px #767676, 1537px 1640px #767676, 566px 825px #767676, - 1173px 349px #767676, 496px 688px #767676, 1799px 1086px #767676, - 1913px 1322px #767676, 935px 859px #767676, 1537px 471px #767676, - 248px 1467px #767676, 704px 576px #767676, 591px 168px #767676, - 1647px 904px #767676, 851px 1971px #767676, 3px 210px #767676, - 1397px 1735px #767676, 1234px 958px #767676, 518px 1073px #767676, - 972px 553px #767676, 1905px 1892px #767676, 8px 566px #767676, - 95px 1205px #767676, 804px 538px #767676, 1542px 810px #767676, - 867px 1056px #767676, 1501px 988px #767676, 1388px 895px #767676, - 92px 1827px #767676, 61px 1809px #767676, 140px 115px #767676, - 1491px 52px #767676, 1669px 1895px #767676, 935px 879px #767676, - 1185px 549px #767676, 586px 695px #767676, 1975px 925px #767676, - 1663px 1854px #767676, 1567px 15px #767676, 943px 1307px #767676, - 568px 1720px #767676, 563px 292px #767676, 1698px 374px #767676, - 856px 759px #767676, 1895px 966px #767676, 105px 82px #767676, - 1314px 1698px #767676, 826px 746px #767676, 1187px 385px #767676, - 956px 368px #767676, 1047px 888px #767676, 1452px 1520px #767676, - 168px 1289px #767676, 406px 340px #767676, 1999px 1402px #767676, - 1901px 1628px #767676, 1778px 1664px #767676, 1276px 1181px #767676, - 1391px 546px #767676, 1465px 1680px #767676, 727px 406px #767676, - 1130px 1798px #767676, 972px 1636px #767676, 1463px 1855px #767676, - 1542px 1078px #767676, 1470px 1055px #767676, 998px 536px #767676, - 1265px 1692px #767676, 395px 459px #767676, 1132px 1527px #767676, - 820px 743px #767676, 1533px 1552px #767676, 126px 659px #767676, - 1797px 1020px #767676, 790px 1544px #767676, 184px 560px #767676, - 243px 915px #767676, 1575px 166px #767676, 346px 1756px #767676, - 1428px 611px #767676, 1257px 955px #767676, 1884px 777px #767676, - 966px 1336px #767676, 595px 461px #767676, 428px 210px #767676, - 664px 1476px #767676, 406px 812px #767676, 1115px 808px #767676, - 847px 792px #767676, 982px 269px #767676, 534px 1770px #767676, - 133px 20px #767676, 626px 1740px #767676, 1498px 606px #767676, - 365px 291px #767676, 725px 666px #767676, 727px 1446px #767676, - 505px 675px #767676, 1372px 302px #767676, 1419px 1947px #767676, - 1858px 636px #767676, 1961px 2000px #767676, 1659px 1567px #767676, - 1794px 746px #767676, 1490px 10px #767676, 704px 1930px #767676, - 976px 1630px #767676, 1531px 905px #767676, 990px 1527px #767676, - 866px 227px #767676, 1360px 982px #767676, 831px 1288px #767676, - 1406px 806px #767676, 131px 45px #767676, 650px 99px #767676, - 1760px 1969px #767676, 506px 1481px #767676, 30px 424px #767676, - 229px 1881px #767676, 52px 162px #767676, 1154px 1980px #767676, - 658px 10px #767676, 344px 1992px #767676, 1649px 1500px #767676, - 1179px 1114px #767676, 1072px 171px #767676, 1975px 1027px #767676, - 1619px 1224px #767676, 242px 841px #767676, 413px 1533px #767676, - 1882px 1745px #767676, 1440px 1050px #767676, 1412px 198px #767676, - 879px 1759px #767676, 809px 1456px #767676, 74px 50px #767676, - 878px 358px #767676, 283px 433px #767676, 1056px 1773px #767676, - 1727px 184px #767676, 1262px 1808px #767676, 560px 727px #767676, - 769px 1457px #767676, 1469px 884px #767676, 1651px 1215px #767676, - 757px 1131px #767676, 1663px 123px #767676, 814px 1675px #767676, - 1163px 1360px #767676, 1930px 803px #767676, 1719px 871px #767676, - 1078px 673px #767676, 678px 220px #767676, 1671px 1240px #767676, - 1047px 229px #767676, 1066px 41px #767676, 1054px 146px #767676, - 919px 1696px #767676, 1600px 7px #767676, 893px 271px #767676, - 359px 968px #767676, 195px 1931px #767676, 858px 887px #767676, - 930px 1447px #767676, 773px 102px #767676, 1737px 459px #767676, - 190px 660px #767676, 271px 454px #767676, 1045px 1368px #767676, - 419px 971px #767676, 643px 1171px #767676, 532px 345px #767676, - 1766px 641px #767676, 403px 444px #767676, 394px 918px #767676, - 1137px 92px #767676, 814px 931px #767676, 254px 342px #767676, - 250px 980px #767676, 1558px 1786px #767676, 437px 1396px #767676, - 376px 1053px #767676, 982px 227px #767676, 95px 1182px #767676, - 1291px 125px #767676, 314px 1936px #767676, 503px 1055px #767676, - 714px 1922px #767676, 1390px 1785px #767676, 1297px 199px #767676, - 530px 1768px #767676, 998px 1710px #767676, 530px 163px #767676, - 151px 1898px #767676, 1001px 675px #767676, 234px 1122px #767676, - 1052px 1144px #767676, 1224px 1937px #767676, 1613px 620px #767676, - 175px 1058px #767676, 1496px 1422px #767676, 360px 1796px #767676, - 1907px 559px #767676, 355px 558px #767676, 1189px 784px #767676, - 1170px 568px #767676, 96px 1978px #767676, 932px 1214px #767676, - 394px 786px #767676, 1903px 336px #767676, 1137px 1421px #767676, - 1563px 15px #767676, 1528px 763px #767676, 1621px 390px #767676, - 1440px 1764px #767676, 1764px 85px #767676, 989px 1492px #767676, - 877px 1561px #767676, 1009px 1157px #767676, 1737px 462px #767676, - 520px 1995px #767676, 36px 247px #767676, 1849px 1938px #767676, - 937px 941px #767676, 1864px 1950px #767676, 104px 692px #767676, - 149px 1976px #767676, 1394px 1140px #767676, 1609px 629px #767676, - 385px 1442px #767676, 1702px 1255px #767676, 413px 840px #767676, - 1762px 825px #767676, 1535px 681px #767676, 1894px 988px #767676, - 1355px 268px #767676, 541px 766px #767676, 1091px 1807px #767676, - 1723px 856px #767676, 1096px 966px #767676, 1619px 1225px #767676, - 337px 161px #767676, 664px 1623px #767676, 415px 1418px #767676, - 534px 85px #767676, 278px 463px #767676, 405px 1549px #767676, - 463px 106px #767676, 1227px 590px #767676, 1131px 849px #767676, - 1497px 162px #767676, 1162px 953px #767676, 818px 1263px #767676, - 1691px 1480px #767676, 1093px 630px #767676, 1884px 975px #767676, - 1238px 517px #767676, 1234px 951px #767676, 1398px 1687px #767676, - 1908px 856px #767676, 1307px 863px #767676, 1294px 689px #767676, - 60px 442px #767676, 1860px 1115px #767676, 799px 778px #767676, - 152px 1451px #767676, 1664px 1828px #767676, 1095px 1189px #767676, - 717px 884px #767676, 1759px 1128px #767676, 891px 83px #767676, - 1652px 1864px #767676, 289px 1149px #767676, 155px 1525px #767676, - 663px 1323px #767676, 829px 545px #767676, 800px 1235px #767676, - 687px 1912px #767676, 1655px 1256px #767676, 1721px 1205px #767676, - 902px 1680px #767676, 574px 425px #767676, 164px 344px #767676, - 131px 578px #767676, 1943px 65px #767676, 565px 1503px #767676, - 1358px 1301px #767676, 1218px 381px #767676, 1203px 1601px #767676, - 1389px 662px #767676, 779px 1580px #767676, 51px 736px #767676, - 126px 266px #767676, 1708px 973px #767676, 790px 112px #767676, - 1990px 914px #767676, 90px 1268px #767676, 407px 393px #767676, - 27px 304px #767676, 1853px 1296px #767676, 1355px 1174px #767676, - 1857px 89px #767676, 260px 776px #767676, 100px 1082px #767676, - 695px 1560px #767676, 1576px 222px #767676, 565px 885px #767676, - 297px 820px #767676, 1149px 1863px #767676, 187px 1252px #767676, - 615px 974px #767676, 760px 1761px #767676, 1412px 1662px #767676, - 611px 1154px #767676, 474px 1596px #767676, 1789px 768px #767676, - 1634px 192px #767676, 1212px 1340px #767676, 1619px 1512px #767676, - 611px 941px #767676, 113px 186px #767676, 1808px 510px #767676, - 615px 1367px #767676, 547px 395px #767676, 1626px 1584px #767676, - 1773px 397px #767676, 612px 1666px #767676, 361px 93px #767676, - 1541px 1812px #767676, 911px 235px #767676, 120px 1681px #767676, - 344px 1022px #767676, 1785px 53px #767676, 272px 400px #767676, - 777px 573px #767676, 440px 1398px #767676, 1286px 1879px #767676, - 1848px 1377px #767676, 1959px 1604px #767676, 1089px 1551px #767676, - 1109px 1087px #767676, 1668px 1741px #767676, 1044px 1999px #767676, - 660px 1671px #767676, 972px 1028px #767676, 1084px 655px #767676, - 877px 1066px #767676, 457px 890px #767676, 424px 1492px #767676, - 920px 867px #767676, 1546px 1409px #767676, 1729px 1482px #767676, - 92px 1625px #767676, 468px 933px #767676, 1739px 683px #767676, - 1130px 1578px #767676, 1340px 287px #767676, 828px 1961px #767676, - 1130px 1823px #767676, 1810px 783px #767676, 1350px 631px #767676, - 963px 1483px #767676, 1898px 1270px #767676, 1685px 1519px #767676, - 1940px 1235px #767676, 57px 266px #767676, 1547px 92px #767676, - 673px 1830px #767676, 900px 181px #767676, 132px 923px #767676, - 1195px 113px #767676, 414px 1352px #767676, 1568px 304px #767676, - 587px 1917px #767676, 269px 964px #767676, 1796px 1955px #767676, - 798px 1513px #767676, 942px 615px #767676, 198px 860px #767676, - 1473px 1891px #767676, 1519px 298px #767676, 100px 193px #767676, - 721px 1199px #767676, 1395px 338px #767676, 25px 671px #767676, - 75px 1685px #767676, 290px 214px #767676, 1185px 1821px #767676, - 1312px 1188px #767676, 950px 2000px #767676, 1606px 1709px #767676, - 931px 1565px #767676, 716px 382px #767676, 1117px 979px #767676, - 1752px 1623px #767676, 1080px 766px #767676, 1145px 1667px #767676, - 655px 278px #767676, 1679px 632px #767676, 1637px 1896px #767676, - 490px 79px #767676, 1663px 266px #767676, 1392px 23px #767676, - 718px 133px #767676, 350px 1808px #767676, 847px 1259px #767676, - 1285px 271px #767676, 100px 661px #767676, 148px 1919px #767676, - 997px 1803px #767676, 1137px 1362px #767676, 1094px 1280px #767676, - 266px 645px #767676, 416px 914px #767676, 1994px 916px #767676, - 581px 1984px #767676, 932px 296px #767676, 1651px 382px #767676, - 615px 1703px #767676, 1144px 1925px #767676, 570px 29px #767676, - 1561px 1744px #767676, 2px 1547px #767676, 561px 1310px #767676, - 906px 683px #767676, 328px 1735px #767676, 1919px 1653px #767676, - 327px 9px #767676, 735px 1315px #767676, 585px 444px #767676, - 153px 724px #767676, 1724px 1871px #767676, 887px 410px #767676, - 663px 1042px #767676, 251px 1924px #767676, 1663px 1258px #767676, - 1413px 1126px #767676, 937px 876px #767676, 676px 1124px #767676, - 1487px 1780px #767676, 1141px 1108px #767676, 513px 19px #767676, - 1193px 1483px #767676, 1945px 1368px #767676, 1658px 218px #767676, - 1858px 898px #767676, 1129px 1255px #767676, 1011px 1219px #767676, - 1421px 1179px #767676, 114px 1124px #767676, 1407px 1753px #767676, - 491px 1040px #767676, 1178px 1987px #767676, 1710px 1698px #767676, - 1315px 1579px #767676, 48px 434px #767676, 1825px 879px #767676, - 1381px 628px #767676, 1048px 1140px #767676, 1473px 718px #767676, - 1420px 985px #767676, 902px 310px #767676, 1619px 324px #767676, - 1083px 148px #767676, 1582px 1740px #767676, 1248px 1761px #767676, - 1702px 1717px #767676, 627px 340px #767676, 1931px 1249px #767676, - 1736px 627px #767676, 116px 1330px #767676, 96px 594px #767676, - 1781px 1832px #767676, 1938px 1861px #767676, 1940px 1444px #767676, - 266px 753px #767676, 91px 1090px #767676, 1393px 1746px #767676, - 492px 178px #767676, 1556px 147px #767676, 1425px 1611px #767676, - 282px 246px #767676, 500px 481px #767676, 515px 1947px #767676, - 460px 1104px #767676, 931px 1472px #767676, 344px 226px #767676, - 365px 107px #767676, 894px 1122px #767676, 1373px 1116px #767676, - 507px 553px #767676, 966px 1895px #767676, 1587px 1357px #767676, - 421px 652px #767676, 1893px 1500px #767676, 104px 1558px #767676, - 456px 265px #767676, 1257px 1207px #767676, 1172px 906px #767676, - 50px 1561px #767676, 1296px 30px #767676, 1098px 1529px #767676, - 555px 723px #767676, 1458px 1919px #767676, 1146px 570px #767676, - 1894px 973px #767676, 1777px 1570px #767676, 1917px 1004px #767676, - 19px 927px #767676, 1882px 512px #767676, 1390px 1497px #767676, - 99px 1521px #767676, 1796px 1847px #767676, 126px 1737px #767676, - 600px 541px #767676, 1539px 391px #767676, 1689px 1531px #767676, - 744px 92px #767676, 1000px 1339px #767676, 1697px 950px #767676, - 1534px 745px #767676, 714px 272px #767676, 1931px 1036px #767676, - 1063px 1547px #767676, 1790px 1484px #767676, 754px 612px #767676, - 886px 878px #767676, 1588px 1882px #767676, 88px 1475px #767676, - 920px 666px #767676, 1132px 1954px #767676, 825px 1000px #767676, - 179px 1135px #767676, 919px 76px #767676, 1724px 1759px #767676, - 1977px 1377px #767676, 1036px 1279px #767676, 1109px 658px #767676, - 211px 188px #767676, 187px 180px #767676, 468px 1964px #767676, - 1482px 244px #767676, 783px 772px #767676, 978px 431px #767676, - 124px 388px #767676, 697px 1195px #767676, 404px 334px #767676, - 1248px 572px #767676, 1888px 1144px #767676, 589px 132px #767676, - 100px 425px #767676, 593px 648px #767676, 273px 643px #767676, - 543px 1941px #767676, 427px 1843px #767676, 680px 293px #767676, - 1495px 739px #767676, 526px 631px #767676, 1645px 567px #767676, - 991px 949px #767676, 1027px 1570px #767676, 1335px 395px #767676, - 1024px 1509px #767676, 1785px 250px #767676; - --stars-medium: 1120px 738px #767676, 533px 827px #767676, 339px 866px #767676, - 1335px 1325px #767676, 1021px 435px #767676, 1850px 1972px #767676, - 492px 1847px #767676, 1030px 1536px #767676, 1154px 1422px #767676, - 533px 945px #767676, 1465px 1670px #767676, 411px 1474px #767676, - 413px 526px #767676, 1155px 1946px #767676, 1469px 1277px #767676, - 310px 1807px #767676, 936px 387px #767676, 397px 725px #767676, - 228px 1790px #767676, 1124px 539px #767676, 1261px 63px #767676, - 172px 881px #767676, 1042px 1984px #767676, 1153px 322px #767676, - 1955px 662px #767676, 1951px 1981px #767676, 621px 248px #767676, - 1589px 534px #767676, 1997px 667px #767676, 618px 660px #767676, - 452px 259px #767676, 362px 1762px #767676, 735px 347px #767676, - 783px 297px #767676, 1808px 408px #767676, 373px 740px #767676, - 543px 1509px #767676, 1125px 1169px #767676, 1625px 483px #767676, - 1461px 782px #767676, 460px 1210px #767676, 608px 1119px #767676, - 132px 1503px #767676, 169px 660px #767676, 392px 1094px #767676, - 1128px 567px #767676, 119px 1617px #767676, 1872px 60px #767676, - 1192px 673px #767676, 1115px 1712px #767676, 1192px 873px #767676, - 1375px 1486px #767676, 1031px 227px #767676, 510px 1459px #767676, - 607px 1047px #767676, 752px 247px #767676, 1556px 135px #767676, - 959px 915px #767676, 1071px 365px #767676, 318px 203px #767676, - 1000px 573px #767676, 2000px 1250px #767676, 1566px 1478px #767676, - 364px 1008px #767676, 1335px 1898px #767676, 580px 1162px #767676, - 930px 1091px #767676, 1644px 1040px #767676, 1702px 1127px #767676, - 1750px 1105px #767676, 708px 1310px #767676, 29px 392px #767676, - 946px 1905px #767676, 407px 1326px #767676, 59px 927px #767676, - 1717px 1944px #767676, 674px 301px #767676, 1018px 1346px #767676, - 1376px 1697px #767676, 1402px 961px #767676, 1012px 1256px #767676, - 999px 923px #767676, 1866px 1360px #767676, 1129px 533px #767676, - 117px 797px #767676, 778px 855px #767676, 1809px 1485px #767676, - 965px 1725px #767676, 780px 290px #767676, 205px 431px #767676, - 1886px 1007px #767676, 163px 1912px #767676, 517px 1106px #767676, - 527px 1428px #767676, 1258px 1921px #767676, 1544px 1149px #767676, - 1829px 966px #767676, 1626px 1420px #767676, 402px 1275px #767676, - 1952px 920px #767676, 738px 1364px #767676, 1598px 1288px #767676, - 1461px 951px #767676, 1921px 782px #767676, 57px 943px #767676, - 1123px 7px #767676, 763px 1524px #767676, 432px 847px #767676, - 1479px 59px #767676, 1761px 258px #767676, 1410px 1609px #767676, - 303px 58px #767676, 103px 1478px #767676, 1289px 221px #767676, - 1265px 277px #767676, 1153px 1054px #767676, 1468px 314px #767676, - 363px 453px #767676, 1946px 70px #767676, 1223px 876px #767676, - 1780px 1010px #767676, 782px 1977px #767676, 1480px 1867px #767676, - 451px 390px #767676, 1285px 321px #767676, 877px 1682px #767676, - 1998px 365px #767676, 817px 1011px #767676, 926px 1147px #767676, - 310px 368px #767676, 1234px 922px #767676, 658px 64px #767676, - 1409px 200px #767676, 1200px 515px #767676, 1597px 1924px #767676, - 1089px 1523px #767676, 1917px 995px #767676, 734px 1392px #767676, - 1573px 174px #767676, 209px 1376px #767676, 1987px 1718px #767676, - 1650px 796px #767676, 827px 1701px #767676, 1763px 961px #767676, - 1387px 834px #767676, 1122px 1326px #767676, 7px 763px #767676, - 666px 893px #767676, 1568px 947px #767676, 1460px 53px #767676, - 618px 549px #767676, 527px 398px #767676, 1648px 1959px #767676, - 1333px 956px #767676, 807px 695px #767676, 875px 147px #767676, - 568px 1632px #767676, 986px 1215px #767676, 1057px 1737px #767676, - 1352px 851px #767676, 1579px 853px #767676, 66px 1269px #767676, - 1775px 1587px #767676, 703px 107px #767676, 393px 1303px #767676, - 897px 1414px #767676, 812px 120px #767676, 1553px 1317px #767676, - 1394px 606px #767676, 1504px 1659px #767676, 1007px 370px #767676, - 964px 1028px #767676, 871px 1349px #767676, 803px 1218px #767676, - 1851px 1273px #767676, 57px 432px #767676, 727px 1752px #767676, - 1381px 998px #767676, 950px 412px #767676, 1118px 493px #767676, - 549px 311px #767676, 1689px 983px #767676, 185px 1432px #767676, - 425px 1761px #767676, 547px 291px #767676, 356px 1619px #767676, - 516px 294px #767676, 458px 383px #767676, 1634px 1420px #767676, - 1202px 1564px #767676, 1526px 821px #767676, 1401px 1242px #767676, - 34px 1100px #767676, 1347px 1172px #767676, 854px 821px #767676, - 1762px 467px #767676, 410px 1662px #767676, 1804px 19px #767676, - 1997px 320px #767676, 1025px 1016px #767676; - --stars-large: 1783px 1852px #767676, 760px 523px #767676, 136px 446px #767676, - 1618px 589px #767676, 769px 1696px #767676, 804px 1501px #767676, - 1927px 1123px #767676, 46px 1079px #767676, 1682px 728px #767676, - 1049px 479px #767676, 1427px 1116px #767676, 1951px 782px #767676, - 1556px 827px #767676, 926px 382px #767676, 1851px 863px #767676, - 1399px 1900px #767676, 634px 850px #767676, 1939px 1032px #767676, - 1571px 1958px #767676, 1648px 1378px #767676, 33px 1171px #767676, - 1848px 475px #767676, 1173px 1872px #767676, 1810px 409px #767676, - 1957px 328px #767676, 1029px 45px #767676, 333px 584px #767676, - 1998px 422px #767676, 480px 1216px #767676, 1432px 1888px #767676, - 709px 606px #767676, 555px 1702px #767676, 58px 1863px #767676, - 1839px 1633px #767676, 1349px 895px #767676, 1393px 1027px #767676, - 799px 218px #767676, 923px 1581px #767676, 1277px 271px #767676, - 142px 1086px #767676, 365px 41px #767676, 1135px 1148px #767676, - 1101px 1518px #767676, 265px 1855px #767676, 1134px 167px #767676, - 997px 770px #767676, 1172px 1332px #767676, 1573px 121px #767676, - 1925px 853px #767676, 1951px 200px #767676, 777px 1093px #767676, - 996px 278px #767676, 1328px 1296px #767676, 978px 535px #767676, - 161px 288px #767676, 1466px 310px #767676, 638px 1368px #767676, - 1407px 360px #767676, 704px 658px #767676, 1371px 1152px #767676, - 1947px 1808px #767676, 1280px 1392px #767676, 51px 499px #767676, - 1862px 1087px #767676, 563px 575px #767676, 165px 689px #767676, - 1104px 708px #767676, 1279px 1339px #767676, 1561px 899px #767676, - 1046px 49px #767676, 1916px 1992px #767676, 893px 1915px #767676, - 1404px 1555px #767676, 1203px 330px #767676, 389px 1239px #767676, - 69px 1152px #767676, 1566px 804px #767676, 341px 751px #767676, - 1775px 724px #767676, 1281px 685px #767676, 244px 1397px #767676, - 619px 1533px #767676, 169px 1812px #767676, 369px 1px #767676, - 1705px 1430px #767676, 796px 1998px #767676, 1801px 534px #767676, - 749px 1038px #767676, 429px 1533px #767676, 536px 1902px #767676, - 261px 1700px #767676, 1630px 511px #767676, 863px 925px #767676, - 435px 621px #767676, 221px 191px #767676, 734px 660px #767676, - 1032px 1017px #767676, 832px 1594px #767676, 1757px 962px #767676, - 652px 1291px #767676; - height: 100%; - left: 0; - overflow: hidden; - top: 0; - width: 100%; - z-index: -1; -} - -.stars > .small { - background: transparent; - box-shadow: var(--stars-small); - height: 1px; - width: 1px; -} - -.stars > .small::after { - content: " "; - background: transparent; - box-shadow: var(--stars-small); - height: 1px; - position: absolute; - top: 2000px; - width: 1px; -} - -.stars > .medium { - background: transparent; - box-shadow: var(--stars-medium); - height: 2px; - width: 2px; -} - -.stars > .medium::after { - content: " "; - background: transparent; - box-shadow: var(--stars-medium); - height: 2px; - position: absolute; - top: 2000px; - width: 2px; -} - -.stars > .big { - background: transparent; - border-radius: 100%; - box-shadow: var(--stars-large); - height: 3px; - width: 3px; -} - -.stars > .big::after { - content: " "; - background: transparent; - border-radius: 100%; - box-shadow: var(--stars-large); - height: 3px; - position: absolute; - top: 2000px; - width: 3px; -} - /* TOC */ details, .toc { diff --git a/src/styles/learn.css b/src/styles/learn.css new file mode 100644 index 0000000000..310cbf9e87 --- /dev/null +++ b/src/styles/learn.css @@ -0,0 +1,166 @@ + +.side-nav { + /* Needed since overflow: none will disable position: sticky on children */ + clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); + background-color: var(--color-fill-side-nav); + height: calc(100vh - var(--nav-height)); + overflow: auto; + overflow-x: hidden; + padding: 0 var(--space-20); + position: sticky; + top: var(--nav-height); + width: 100%; + max-width: 36.0rem; + box-sizing: border-box; + z-index: 998; +} + +.side-nav__open { + display: none; +} + +.side-nav > :last-child { + /* To allow side menu to scroll to bottom when not sticky */ + padding-bottom: 230px; +} + +.side-nav__title { + color: var(--color-text-primary); + font-weight: 600; + margin: 0 0 calc(var(--space-20) - (var(--space-12) / 2)) 0; + display: flex; + align-items: center; + background-color: var(--color-fill-side-nav); + padding: var(--space-20) 0 0; + box-shadow: 0 25px 20px var(--color-fill-side-nav); + margin: 0 0 2.4rem; + position: sticky; + top: 0; + z-index: 999; +} + +.side-nav__list { + margin: 0; + padding: 0; + position: relative; +} + +.side-nav__item { + align-items: center; + border-radius: 4px; + box-sizing: border-box; + color: var(--color-text-primary); + cursor: pointer; + list-style: none; + margin: 0 0 0 var(--space-24); + padding: calc(var(--space-12) / 2) 0 calc(var(--space-12) / 2) var(--space-08) ; + position: relative; +} + +.side-nav__item { + color: var(--color-text-primary); + text-decoration: none; + display: block; +} + +.side-nav__item:last-of-type::after { + display: none; +} + +.side-nav__item::before { + background-size: 2.4rem; + border-radius: 50%; + box-shadow: inset 0 0 0 2px var(--color-border-accent); + box-sizing: border-box; + content: ' '; + display: block; + height: 2.4rem; + left: -2.4rem; + padding: 2px 4px; + position: absolute; + top: 0.6rem; + transition: box-shadow .28s; + overflow: hidden; + width: 2.4rem; + line-height: 2.6rem; +} + +.side-nav__item.side-nav__item--done::before { + content: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQ0OC44IDQ0OC44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NDguOCA0NDguODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJjaGVjayI+CgkJPHBvbHlnb24gcG9pbnRzPSIxNDIuOCwzMjMuODUgMzUuNywyMTYuNzUgMCwyNTIuNDUgMTQyLjgsMzk1LjI1IDQ0OC44LDg5LjI1IDQxMy4xLDUzLjU1ICAgIiBmaWxsPSIjZjVmNmY3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); +} + +.side-nav__item.side-nav__item--active { + color: var(--color-text-accent); + font-weight: 600; +} + +.side-nav__item.side-nav__item--done::before, +.side-nav__item.side-nav__item--active::before { + box-shadow: inset 0 0 0 2.4rem var(--color-border-accent); +} + +.side-nav__item:hover::before { + box-shadow: inset 0 0 0 2.4rem var(--color-border-accent) !important; +} + +.side-nav__item::after { + background: var(--color-border-accent); + content: ' '; + display: block; + height: calc(100% - 1.2rem - 8px); + left: calc(-1.2rem - 1px); + position: absolute; + top: calc(2.4rem + 4px); + width: 2px; +} + +.side-nav__open { + display: none; + position: sticky; + top: 1.8rem; + margin-left: -0.8rem; + width: 20px; + height: calc(24px + 3px); + padding: 12px 0; + background: white; + color: white; + overflow: visible; + border: none; + text-indent: 3.2rem; + line-height: 0; + font-weight: 200; + transition: color .28s, background-color .28s; + outline: none; + background-clip: content-box; + z-index: 9999; +} + +.side-nav__open::before, .side-nav__open::after { + content: ""; + width: 100%; + height: 3px; + position: absolute; + top: calc(50% - 1.5px); + left: 0; + transform: translateY(-250%); + background-color: white; + transition: transform .28s; +} + +.side-nav__open::after { + transform: translateY(250%); +} + +.side-nav.side-nav--open .side-nav__open { + top: calc(var(--nav-height) + 1.8rem); + margin-bottom: -35px; + margin-top: 16px; + color: transparent; + background-color: transparent; +} +.side-nav.side-nav--open .side-nav__open::before { + transform: rotate(-45deg); +} +.side-nav.side-nav--open .side-nav__open::after { + transform: rotate(45deg); +} diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx index aff1a9c1b7..c81cd6aedd 100644 --- a/src/templates/learn.tsx +++ b/src/templates/learn.tsx @@ -5,6 +5,8 @@ import Layout from '../components/layout'; import Navigation from '../components/navigation'; import { LearnPageContext, LearnPageData } from '../types'; +import '../styles/learn.css'; + interface Props { data: LearnPageData; pageContext: LearnPageContext; From 3ffd68111da9eb1a9ec0dd521a4e39c2239f6110 Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Sat, 14 Sep 2019 15:29:18 -0700 Subject: [PATCH 19/40] feat: Basic API docs content rendering --- src/pages/community.tsx | 15 ++++++ src/pages/docs.tsx | 115 ++++++++++++++++++++++++++++++++++++++-- src/styles/docs.css | 42 ++++++++++++--- src/styles/layout.css | 5 ++ src/styles/tokens.css | 6 ++- 5 files changed, 173 insertions(+), 10 deletions(-) create mode 100644 src/pages/community.tsx diff --git a/src/pages/community.tsx b/src/pages/community.tsx new file mode 100644 index 0000000000..86dc934e59 --- /dev/null +++ b/src/pages/community.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import Layout from '../components/layout'; + +export default function DownloadPage(): JSX.Element { + const title = 'Download Node.js'; + const description = 'Come get me!'; + + return ( + +
    +

    Welcome to the Community Page!

    +
    +     + ); +} diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index e7ed1d4d11..62ba47953f 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -1,6 +1,14 @@ +/* eslint-disable react/no-danger */ import React, { useState } from 'react'; import { useApiData, useReleaseHistory } from '../hooks'; -import { ApiDocsObj, APIResponse } from '../hooks/useApiDocs'; +import { + ApiDocsObj, + APIResponse, + isMethodObj, + isEventObj, + isClassObj, + isModuleObj, +} from '../hooks/useApiDocs'; import Layout from '../components/layout'; import '../styles/docs.css'; @@ -56,6 +64,107 @@ function renderArticleOverview( return overview; } +function renderArticleSections( + pages: ApiDocsObj[], + sections: JSX.Element[] = [], + depth = 0 +): JSX.Element[] { + /* eslint-disable-next-line no-restricted-syntax */ + for (const page of pages) { + const children = []; + + if (depth === 0) { + sections.push(
    ); + children.push( +

    + {page.displayName || page.name} +

    + ); + } else if (depth === 1) { + children.push( +

    + {page.displayName || page.name} +

    + ); + } else if (depth === 2) { + children.push( +

    + {page.displayName || page.name} +

    + ); + } else if (depth === 3) { + children.push( +
    + {page.displayName || page.name} +
    + ); + } else if (depth === 4) { + children.push( +
    + {page.displayName || page.name} +
    + ); + } + + if (isModuleObj(page)) { + children.push( +
  • + Module: ({page.type}){' '} + {page.desc &&

    } +

    • + ); + } else if (isMethodObj(page)) { + children.push( +
  • + Method: ({page.type}){' '} + {page.desc &&

    } +

    • + ); + } else if (isEventObj(page)) { + children.push( +
  • + Event: ({page.type}){' '} + {page.desc &&

    } +

    • + ); + } else if (isClassObj(page)) { + children.push( +
  • + Class: ({page.type}){' '} + {page.desc &&

    } +

    • + ); + } else { + children.push( +
  • + Property: ({page.type}){' '} + {page.desc &&

    } +

    • + ); + } + + if (page.events) { + renderArticleSections(page.events, children, depth + 1); + } + if (page.methods) { + renderArticleSections(page.methods, children, depth + 1); + } + if (page.properties) { + renderArticleSections(page.properties, children, depth + 1); + } + if (page.classes) { + renderArticleSections(page.classes, children, depth + 1); + } + if (page.modules) { + renderArticleSections(page.modules, children, depth + 1); + } + + sections.push(
    {children}
    ); + } + + return sections; +} + function renderArticle(page: ApiDocsObj | null): JSX.Element { if (!page) { return
    No Page Found
    ; @@ -71,8 +180,8 @@ function renderArticle(page: ApiDocsObj | null): JSX.Element { renderArticleOverview(mod, []) )} - {/* eslint-disable-next-line react/no-danger */} {page.desc &&

    } + {renderArticleSections([page])}

    ); } @@ -94,7 +203,7 @@ function sideBarSection( (module: ApiDocsObj): JSX.Element => (
  • setPage(module)} className="t-body2 api-nav__sub-list-link" > diff --git a/src/styles/docs.css b/src/styles/docs.css index b04a6f128d..d611291293 100644 --- a/src/styles/docs.css +++ b/src/styles/docs.css @@ -135,32 +135,62 @@ margin-right: 0.8rem; } -.api-key__item--global > a::before { +.api-docs__section .api-docs__section { + margin-left: var(--space-32); +} + +.api-docs__title { + font-family: var(--mono); + font-size: var(--font-size-code); + line-height: 2.4rem; + font-weight: 400; +} + +.api-docs__title.api-key__item--module { + font-family: var(--sans); +} + +.api-docs__title::before { + content: "P"; + font-family: var(--sans); + width: 2.4rem; + height: 2.4rem; + text-align: center; + line-height: 2.4rem; + font-size: 1.4rem; + color: white; + background-color: var(--info6); + display: inline-block; + border-radius: 50%; + margin-right: 0.8rem; +} + +.api-key__item--global > a::before, .api-docs__title--global::before { content: "G"; background-color: var(--warning4); } -.api-key__item--event > a::before { +.api-key__item--event > a::before, .api-docs__title--event::before { content: "E"; background-color: var(--danger6); } -.api-key__item--class > a::before { +.api-key__item--class > a::before, .api-docs__title--class::before { content: "C"; background-color: var(--warning4); } -.api-key__item--method > a::before { +.api-key__item--method > a::before, .api-docs__title--method::before { content: "M"; background-color: var(--purple6); } -.api-key__item--Object > a::before { +.api-key__item--Object > a::before, .api-docs__title--Object::before { content: "O"; background-color: var(--pink6); } -.api-key__item--module > a::before { +.api-key__item--module > a::before, .api-docs__title--module::before { font-family: 'Material Icons'; content: "pages"; background-color: transparent; diff --git a/src/styles/layout.css b/src/styles/layout.css index 173a969fb0..e83706ea44 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -217,6 +217,11 @@ main { width: calc(100% - 36.0rem); } +.article-reader hr { + border: none; + border-bottom: 0.4rem solid var(--black2); +} + /* sr-only for desktop */ .article-reader__headline { padding: 0; diff --git a/src/styles/tokens.css b/src/styles/tokens.css index eb2d8497f3..2af34de5b3 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -6,6 +6,10 @@ html { } body { + + --mono: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + --sans: 'Open Sans', sans-serif; + /* Colors */ --brand2: #C5E5B4; --brand3: #99CC7D; @@ -105,7 +109,7 @@ body { --font-size-body2: 1.4rem; --font-size-caption: 1.2rem; --font-size-overline: 1.0rem; - --font-size-code: 1.2rem; + --font-size-code: 1.6rem; --line-height-display1: 7.2rem; --line-height-display2: 5.7rem; From 0f745ed051955d5246a4ef165d7a7e8d4de00c30 Mon Sep 17 00:00:00 2001 From: Adam Miller Date: Mon, 16 Sep 2019 12:33:22 -0700 Subject: [PATCH 20/40] fix: Google Cloud Build (#317) --- package.json | 3 +- src/pages/index.tsx | 13 +-- src/pages/konami.js | 60 -------------- src/util/konami.ts | 45 +++++++++++ .../__snapshots__/authors-list.test.tsx.snap | 2 +- .../__snapshots__/edit-link.test.tsx.snap | 2 +- .../__snapshots__/header.test.tsx.snap | 81 +++++++++++++++++-- .../__snapshots__/pagination.test.tsx.snap | 10 +-- test/pages/__snapshots__/404.test.tsx.snap | 3 +- .../__snapshots__/learn.test.tsx.snap | 3 - yarn.lock | 8 +- 11 files changed, 133 insertions(+), 97 deletions(-) delete mode 100644 src/pages/konami.js create mode 100644 src/util/konami.ts diff --git a/package.json b/package.json index 0639f48280..8ad059edd6 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,7 @@ "react": "^16.8.0", "react-dom": "^16.8.0", "react-emotion": "^10.0.0", - "react-helmet": "^5.2.0", - "typescript": "^3.1.1" + "react-helmet": "^5.2.0" }, "keywords": [ "gatsby", diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5e9fabac9f..264933372e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -2,18 +2,7 @@ import React from 'react'; import Hero from '../components/hero'; import Layout from '../components/layout'; -import './konami.js'; - -let discoMode: NodeJS.Timeout | null = null; -document.addEventListener('konamiCode', (): void => { - if (discoMode) { - return clearInterval(discoMode); - } - discoMode = setInterval( - (): boolean => document.body.classList.toggle('dark-mode'), - 300 - ); -}); +import '../util/konami'; export default function HomePage(): JSX.Element { const title = 'Home Page'; diff --git a/src/pages/konami.js b/src/pages/konami.js deleted file mode 100644 index 0350b79538..0000000000 --- a/src/pages/konami.js +++ /dev/null @@ -1,60 +0,0 @@ -(function konami() { - // http://stackoverflow.com/a/9849276 - function contains(a, b) { - // eslint-disable-next-line no-bitwise - return !!~a.indexOf(b); - } - - const konamiCode = { - init() { - this.KEY_LEFT = 37; - this.KEY_UP = 38; - this.KEY_RIGHT = 39; - this.KEY_DOWN = 40; - this.KEY_A = 65; - this.KEY_B = 66; - this.CODE_SEQUENCE = '38384040373937396665'; // ⬆ ⬆ ⬇ ⬇ ⬅ ➡ ⬅ ➡ b a - this.maxDelay = 1500; - - this.bindListener(); - - return this; - }, - bindListener() { - let buffer = ''; - let lastDate = new Date(); - const konamiCodeEvent = new Event('konamiCode'); - const validKeys = [ - this.KEY_LEFT, - this.KEY_UP, - this.KEY_RIGHT, - this.KEY_DOWN, - this.KEY_A, - this.KEY_B, - ]; - - document.addEventListener( - 'keyup', - function enableKonami(ev) { - if ( - contains(validKeys, ev.keyCode) && - new Date() - lastDate <= this.maxDelay - ) { - lastDate = new Date(); - buffer += ev.keyCode; - - if (contains(buffer, this.CODE_SEQUENCE)) { - document.dispatchEvent(konamiCodeEvent); - buffer = ''; - } - } else { - lastDate = new Date(); - buffer = ''; - } - }.bind(this) - ); - }, - }; - - return konamiCode.init(); -})(); diff --git a/src/util/konami.ts b/src/util/konami.ts new file mode 100644 index 0000000000..6358e15671 --- /dev/null +++ b/src/util/konami.ts @@ -0,0 +1,45 @@ +// SSR Protection +if (typeof window !== `undefined`) { + // eslint-disable-next-line no-bitwise + const contains = (a: string, b: string): boolean => !!~a.indexOf(b); + + // Left, Up, Right, Down, A, B + const VALID_KEYS = new Set([37, 38, 39, 40, 65, 66]); + // ⬆ ⬆ ⬇ ⬇ ⬅ ➡ ⬅ ➡ b a + const CODE_SEQUENCE = '38384040373937396665'; + // 1.5s cooldown + const MAX_DELAY = 1500; + // Our Custom Event + const KONAMI_EVENT = new Event('konamiCode'); + + (function initKonami(): void { + let buffer = ''; + let lastDate = Date.now(); + + document.addEventListener('keyup', function triggerKonami({ + keyCode, + }): void { + if (!VALID_KEYS.has(keyCode)) { + return; + } + buffer = `${Date.now() - lastDate >= MAX_DELAY ? '' : buffer}${keyCode}`; + lastDate = Date.now(); + if (!contains(buffer, CODE_SEQUENCE)) { + return; + } + document.dispatchEvent(KONAMI_EVENT); + buffer = ''; + }); + })(); + + let discoMode: NodeJS.Timeout | null = null; + document.addEventListener('konamiCode', (): void => { + if (discoMode) { + return clearInterval(discoMode); + } + discoMode = setInterval( + (): boolean => document.body.classList.toggle('dark-mode'), + 300 + ); + }); +} diff --git a/test/components/__snapshots__/authors-list.test.tsx.snap b/test/components/__snapshots__/authors-list.test.tsx.snap index 0ed20f5614..1865acb5dd 100644 --- a/test/components/__snapshots__/authors-list.test.tsx.snap +++ b/test/components/__snapshots__/authors-list.test.tsx.snap @@ -5,7 +5,7 @@ exports[`AuthorsList component renders correctly 1`] = ` css={ Object { "map": undefined, - "name": "1bgkbt8", + "name": "ekkwel", "next": undefined, "styles": " display: flex; diff --git a/test/components/__snapshots__/edit-link.test.tsx.snap b/test/components/__snapshots__/edit-link.test.tsx.snap index a4cc25bae9..51e0e8f485 100644 --- a/test/components/__snapshots__/edit-link.test.tsx.snap +++ b/test/components/__snapshots__/edit-link.test.tsx.snap @@ -18,7 +18,7 @@ exports[`EditLink component renders correctly 1`] = ` css={ Object { "map": undefined, - "name": "1dmmrc2", + "name": "1fo9rdi", "next": undefined, "styles": " color: var(--black7) !important; diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap index d1bc394a06..89542ee104 100644 --- a/test/components/__snapshots__/header.test.tsx.snap +++ b/test/components/__snapshots__/header.test.tsx.snap @@ -43,30 +43,97 @@ exports[`Tests for Header component renders correctly 1`] = ` className="nav__tabs" > - Download + Learn
  • + Docs + +
    • +
  • + + Community + +
    • +
  • + - API Docs + Download
    • +
  • +
  • + +
  • - GitHub + + GitHub + + + +
    • diff --git a/test/components/__snapshots__/pagination.test.tsx.snap b/test/components/__snapshots__/pagination.test.tsx.snap index 2dc1ac23c1..c4507383bf 100644 --- a/test/components/__snapshots__/pagination.test.tsx.snap +++ b/test/components/__snapshots__/pagination.test.tsx.snap @@ -22,7 +22,7 @@ exports[`Pagination component only renders links to pages that has a title 1`] = css={ Object { "map": undefined, - "name": "u0j7sy", + "name": "1guobqr", "next": undefined, "styles": " color: var(--black7) !important; @@ -71,7 +71,7 @@ exports[`Pagination component renders correctly when there is no next page 1`] = css={ Object { "map": undefined, - "name": "u0j7sy", + "name": "1guobqr", "next": undefined, "styles": " color: var(--black7) !important; @@ -121,7 +121,7 @@ exports[`Pagination component renders correctly when there is no previous page 1 css={ Object { "map": undefined, - "name": "u0j7sy", + "name": "1guobqr", "next": undefined, "styles": " color: var(--black7) !important; @@ -169,7 +169,7 @@ exports[`Pagination component renders links to the next and previous page 1`] = css={ Object { "map": undefined, - "name": "u0j7sy", + "name": "1guobqr", "next": undefined, "styles": " color: var(--black7) !important; @@ -197,7 +197,7 @@ exports[`Pagination component renders links to the next and previous page 1`] = css={ Object { "map": undefined, - "name": "u0j7sy", + "name": "1guobqr", "next": undefined, "styles": " color: var(--black7) !important; diff --git a/test/pages/__snapshots__/404.test.tsx.snap b/test/pages/__snapshots__/404.test.tsx.snap index 8b3aee13ec..8a5ee499b3 100644 --- a/test/pages/__snapshots__/404.test.tsx.snap +++ b/test/pages/__snapshots__/404.test.tsx.snap @@ -20,13 +20,12 @@ exports[`404 page renders correctly 1`] = ` The page you're trying to access does not exist. Go back to the Homepage or find what you're looking for in the menu.

    - Take me back to the + Take me back to the Homepage - →

    diff --git a/test/templates/__snapshots__/learn.test.tsx.snap b/test/templates/__snapshots__/learn.test.tsx.snap index d002e67f72..ae210445a8 100644 --- a/test/templates/__snapshots__/learn.test.tsx.snap +++ b/test/templates/__snapshots__/learn.test.tsx.snap @@ -5,9 +5,6 @@ exports[`Learn Template renders correctly 1`] = ` description="test-description" title="test-title" > - Date: Fri, 27 Sep 2019 14:22:20 -0400 Subject: [PATCH 21/40] Feat/download content (#316) * fix: Only disable next line for react/danger in article * feat: Create ReleaseToggle component * feat: Create ReleaseCards component * chore: Add material-design placeholder icons to release cards * feat: Create and use detectOS util function * fix: Check if navigator is defined before using, fixes ssr --- src/components/article.tsx | 2 +- src/components/release-cards.tsx | 44 +++++++++++++++++++++++++++++++ src/components/release-toggle.tsx | 28 ++++++++++++++++++++ src/pages/download.tsx | 28 +++++++++++++++++--- src/util/detectOS.ts | 20 ++++++++++++++ 5 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 src/components/release-cards.tsx create mode 100644 src/components/release-toggle.tsx create mode 100644 src/util/detectOS.ts diff --git a/src/components/article.tsx b/src/components/article.tsx index 1e96d7852c..0f88c2fc25 100644 --- a/src/components/article.tsx +++ b/src/components/article.tsx @@ -27,7 +27,7 @@ const Article = ({

    {title}

    - {/* eslint-disable react/no-danger */} + {/* eslint-disable-next-line react/no-danger */}
    diff --git a/src/components/release-cards.tsx b/src/components/release-cards.tsx new file mode 100644 index 0000000000..99555aaad3 --- /dev/null +++ b/src/components/release-cards.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { ReleaseData } from '../hooks/useReleaseHistory'; + +interface Props { + line?: ReleaseData; +} + +export default function ReleaseCards({ line }: Props): JSX.Element { + const fileName = line && line.version; + return ( +
    +
    + cloud +

    Windows Installer

    + + node-{line && line.version}.x86.msi + +
    +
    + cloud +

    Mac Installer

    + + node-{line && line.version}.pkg + +
    + +
    + ); +} diff --git a/src/components/release-toggle.tsx b/src/components/release-toggle.tsx new file mode 100644 index 0000000000..914129363f --- /dev/null +++ b/src/components/release-toggle.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +interface Props { + onToggle: Function; + selected: boolean; +} + +export default function ReleaseToggle({ + onToggle, + selected, +}: Props): JSX.Element { + const handleClick = (): void => { + onToggle(!selected); + }; + + const id = Math.random() * (100000 - 1) + 1; + return ( + + ); +} diff --git a/src/pages/download.tsx b/src/pages/download.tsx index 7292595131..42af535697 100644 --- a/src/pages/download.tsx +++ b/src/pages/download.tsx @@ -1,19 +1,39 @@ -import React from 'react'; -import { useReleaseHistory } from '../hooks'; +import React, { useState } from 'react'; +import { useReleaseHistory } from '../hooks/useReleaseHistory'; import Hero from '../components/hero'; import Layout from '../components/layout'; import ReleaseTable from '../components/release-table'; +import ReleaseToggle from '../components/release-toggle'; +import ReleaseCards from '../components/release-cards'; + +import { detectOS } from '../util/detectOS'; export default function DownloadPage(): JSX.Element { - const releaseHistory = useReleaseHistory().slice(0, 25); + const releaseHistory = useReleaseHistory().slice(0, 50); + const [ltsSelected, setLtsSelected] = useState(true); + + const userOS = detectOS(); const title = 'Download Node.js'; const description = 'Come get me!'; + const lts = releaseHistory.find((release): boolean => release && release.lts); + const current = releaseHistory.find( + (release): boolean => release && !release.lts + ); + + const selectedLine = ltsSelected ? lts : current; + return (
    -

    Welcome to the Downloads Page!

    +

    + Download the Node.js source code, a pre-built installer for your + platform, or install via package manager. +

    +

    You are currently on a {userOS} machine

    + +
    diff --git a/src/util/detectOS.ts b/src/util/detectOS.ts new file mode 100644 index 0000000000..d5101aade9 --- /dev/null +++ b/src/util/detectOS.ts @@ -0,0 +1,20 @@ +export enum UserOS { + MAC = 'MAC', + WIN = 'WIN', + UNIX = 'UNIX', + LINUX = 'LINUX', + MOBILE = 'MOBILE', + UNKNOWN = 'UNKNOWN', +} + +export function detectOS(): UserOS { + let OS = UserOS.UNKNOWN; + if (typeof navigator !== `undefined`) { + if (navigator.appVersion.indexOf('Win') !== -1) OS = UserOS.WIN; + if (navigator.appVersion.indexOf('Mac') !== -1) OS = UserOS.MAC; + if (navigator.appVersion.indexOf('X11') !== -1) OS = UserOS.UNIX; + if (navigator.appVersion.indexOf('Linux') !== -1) OS = UserOS.LINUX; + // not currently checking for mobile devices + } + return OS; +} From 19bd84ae8c0e8b79b6b4f10280b4b7253e5f35d1 Mon Sep 17 00:00:00 2001 From: Oscar Gonzalez Date: Fri, 27 Sep 2019 11:42:49 -0700 Subject: [PATCH 22/40] feat: Home page (#325) --- README.md | 2 +- src/components/header.tsx | 74 +++-- src/components/hero.tsx | 28 +- src/components/layout.tsx | 11 +- .../beginners-guide-illustration.svg | 5 + .../illustrations/do-more-illustration.svg | 12 + src/images/illustrations/dots.svg | 92 ++++++ src/images/illustrations/leafs-back.svg | 20 ++ src/images/illustrations/leafs-front.svg | 18 ++ .../illustrations/leafs-illustration.svg | 19 ++ src/images/illustrations/leafs-middle.svg | 39 +++ .../illustrations/pentagon-illustration1.svg | 3 + .../illustrations/pentagon-illustration2.svg | 3 + src/images/logos/ibm-logo.svg | 3 + src/images/logos/linkedin-logo.svg | 18 ++ src/images/logos/microsoft-logo.svg | 24 ++ src/images/logos/netflix-logo.svg | 12 + src/images/logos/nodejs-logo-dark-mode.svg | 67 ++++ src/images/logos/nodejs-logo-light-mode.svg | 67 ++++ src/images/logos/paypal-logo.svg | 20 ++ src/images/placeholder-img.png | Bin 0 -> 1718 bytes src/pages/community.tsx | 8 +- src/pages/docs.tsx | 60 ++-- src/pages/download.tsx | 4 +- src/pages/index.tsx | 147 ++++++++- src/styles/index.css | 291 ++++++++++++++++++ src/styles/layout.css | 61 +++- src/styles/mobile.css | 32 +- src/styles/tokens.css | 2 +- src/templates/learn.tsx | 26 +- 30 files changed, 1039 insertions(+), 129 deletions(-) create mode 100644 src/images/illustrations/beginners-guide-illustration.svg create mode 100644 src/images/illustrations/do-more-illustration.svg create mode 100644 src/images/illustrations/dots.svg create mode 100644 src/images/illustrations/leafs-back.svg create mode 100644 src/images/illustrations/leafs-front.svg create mode 100644 src/images/illustrations/leafs-illustration.svg create mode 100644 src/images/illustrations/leafs-middle.svg create mode 100644 src/images/illustrations/pentagon-illustration1.svg create mode 100644 src/images/illustrations/pentagon-illustration2.svg create mode 100644 src/images/logos/ibm-logo.svg create mode 100644 src/images/logos/linkedin-logo.svg create mode 100644 src/images/logos/microsoft-logo.svg create mode 100644 src/images/logos/netflix-logo.svg create mode 100644 src/images/logos/nodejs-logo-dark-mode.svg create mode 100644 src/images/logos/nodejs-logo-light-mode.svg create mode 100644 src/images/logos/paypal-logo.svg create mode 100644 src/images/placeholder-img.png create mode 100644 src/styles/index.css diff --git a/README.md b/README.md index 510a37a7d3..13eb273232 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@


    - +

    diff --git a/src/components/header.tsx b/src/components/header.tsx index 73baa3552a..f96cee335c 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,47 +1,57 @@ import { Link } from 'gatsby'; import React from 'react'; -import { css, SerializedStyles } from '@emotion/core'; +import logoLight from '../images/logos/nodejs-logo-light-mode.svg'; +import logoDark from '../images/logos/nodejs-logo-dark-mode.svg'; -/* eslint-disable-next-line @typescript-eslint/no-var-requires */ -const logo = require('../images/logo.svg'); +const activeStyleTab = { + fontWeight: 'var(--font-weight-semibold)', + color: 'var(--color-text-accent)', + borderBottom: 'var(--space-04) inset var(--color-text-accent)', +}; -const ulStyles: SerializedStyles = css` - @media (max-width: 380px) { - padding: 0; - } - margin: 0 auto; - padding: 0 4.8rem; - display: flex; - align-items: center; - list-style: none; -`; - -const Header = (): JSX.Element => ( +const Header = () => (
    + + + ); diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 2383bbe9b3..4b29e1e34f 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -12,14 +12,21 @@ interface Props { title?: string; description?: string; img?: string; + href: string; } -const Layout = ({ children, title, description, img }: Props): JSX.Element => { +const Layout = ({ + children, + title, + description, + img, + location, +}: Props): JSX.Element => { return (
    -
    {children}
    + {children} ); }; diff --git a/src/images/illustrations/beginners-guide-illustration.svg b/src/images/illustrations/beginners-guide-illustration.svg new file mode 100644 index 0000000000..df515b6d05 --- /dev/null +++ b/src/images/illustrations/beginners-guide-illustration.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/images/illustrations/do-more-illustration.svg b/src/images/illustrations/do-more-illustration.svg new file mode 100644 index 0000000000..c3dbd55774 --- /dev/null +++ b/src/images/illustrations/do-more-illustration.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/illustrations/dots.svg b/src/images/illustrations/dots.svg new file mode 100644 index 0000000000..c34167a198 --- /dev/null +++ b/src/images/illustrations/dots.svg @@ -0,0 +1,92 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/illustrations/leafs-back.svg b/src/images/illustrations/leafs-back.svg new file mode 100644 index 0000000000..6e2f941aca --- /dev/null +++ b/src/images/illustrations/leafs-back.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/illustrations/leafs-front.svg b/src/images/illustrations/leafs-front.svg new file mode 100644 index 0000000000..e2d37cd52f --- /dev/null +++ b/src/images/illustrations/leafs-front.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/images/illustrations/leafs-illustration.svg b/src/images/illustrations/leafs-illustration.svg new file mode 100644 index 0000000000..feb3e249ab --- /dev/null +++ b/src/images/illustrations/leafs-illustration.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/images/illustrations/leafs-middle.svg b/src/images/illustrations/leafs-middle.svg new file mode 100644 index 0000000000..b3bec44e45 --- /dev/null +++ b/src/images/illustrations/leafs-middle.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/illustrations/pentagon-illustration1.svg b/src/images/illustrations/pentagon-illustration1.svg new file mode 100644 index 0000000000..927e26d057 --- /dev/null +++ b/src/images/illustrations/pentagon-illustration1.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/illustrations/pentagon-illustration2.svg b/src/images/illustrations/pentagon-illustration2.svg new file mode 100644 index 0000000000..b04ff063b4 --- /dev/null +++ b/src/images/illustrations/pentagon-illustration2.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logos/ibm-logo.svg b/src/images/logos/ibm-logo.svg new file mode 100644 index 0000000000..501d50f317 --- /dev/null +++ b/src/images/logos/ibm-logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/logos/linkedin-logo.svg b/src/images/logos/linkedin-logo.svg new file mode 100644 index 0000000000..4f6068e177 --- /dev/null +++ b/src/images/logos/linkedin-logo.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/images/logos/microsoft-logo.svg b/src/images/logos/microsoft-logo.svg new file mode 100644 index 0000000000..88caee938f --- /dev/null +++ b/src/images/logos/microsoft-logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logos/netflix-logo.svg b/src/images/logos/netflix-logo.svg new file mode 100644 index 0000000000..25c65e0a82 --- /dev/null +++ b/src/images/logos/netflix-logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/images/logos/nodejs-logo-dark-mode.svg b/src/images/logos/nodejs-logo-dark-mode.svg new file mode 100644 index 0000000000..2fa3fdf7f1 --- /dev/null +++ b/src/images/logos/nodejs-logo-dark-mode.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logos/nodejs-logo-light-mode.svg b/src/images/logos/nodejs-logo-light-mode.svg new file mode 100644 index 0000000000..dec54b7efa --- /dev/null +++ b/src/images/logos/nodejs-logo-light-mode.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/logos/paypal-logo.svg b/src/images/logos/paypal-logo.svg new file mode 100644 index 0000000000..b1e7ec73a6 --- /dev/null +++ b/src/images/logos/paypal-logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/placeholder-img.png b/src/images/placeholder-img.png new file mode 100644 index 0000000000000000000000000000000000000000..8767684e53181220059f395c2fc22a3e2af05531 GIT binary patch literal 1718 zcmd5-`!~}I0H2~;Y*F4a^E#H~Iaj&OcGwV3Zb>8}uXID+$uO0!2@zfI*Y&uSydMYm zdd#C)xVCVw_ajVOW;V>&W?y&rzv!IL<9t59eSZ49yzXodkyeuifj|(4t5_GY_lWuK z*szEU92 z2`2}vwd)fJ)?%pBIS&=Wc055YMbjFqo4T3q;;8S!)7heX<^}58Vs)>oq{uy&Y@XEu z`%A5`s?OHqbSg9} zp)BxYX3t)@36UCgg|T;Wq(!P9W2bbQGd>Y{+?BQhfD3a40)AzjZH9RbasLd**96zR5m8I>p0Pkx&jAI~lo;gwdiAS`Wx zA?Hh@QR5~60Hj8GoCaP~&!Tv2^KjR4r6a>sq~zu8)c^sSNq)Y{KE@YE%`ow)y%pxy zLN$iifpMJS^QLVC#yL*2FaX*9;q9b@>5A=@)Lsenz%=y3!mry_bJkplxoR=BbqAvz zqC9@-GmVt4?Ja2Mj9mKsifL@c^UE`wx8Xv#IIHyFk4$@hGEh+g#V$W3$K!AhZ$ZmT zUbMD#b3<2h!x#Z3P07j06U*!%e=3CnW@!lw52EqjoAtB0TO=MoiyDFoR*es9?;}{U z(Fsivmv5}YYs-uSaWpcS{8%lM)5{05R+H{IX$WNyp#{2CEY1I9l-jGCKM_^GTBJb^l6TRA(_Y1yB>P z{lSHNbrh$WC>wJfGT!kwLBFG;!;L^hRG*rjceCXh?zGlB3_cJ|Y1h$QG29=Y_~B*G zp+}rCo%|MDH2yb@(**RQ%7+WEr3}@1_W_F+X~-$2$qAy&Xu50yrZ7xzH}O&+jbB;N z`6w7!_V#5d*m<_f=WL^kZB_UVBZ5Ool6y38BVKXmt4^$%vr+D!maZN^EbibufnmUT zV?Sw<;!TEEA03L^O)1`R2RmZG&bK2Yx5yDKK@ReLadGjhWx79iWiQ55awpyk^_4A0 z+}OHLa&#V<=>=CB4`)^1O3_92i+0%gtF5~+2TbW8FJ?j0BOht`*|W%M-5R{Y9-3Yu zoTv^%+&)}2><9Mwvh?4FNE?oqC-T3%arKF)86^v1D4kQ;P4FO{%H_WD3p*y*IGHqP zfp1I3UMir7((h4Sn(;&whP%_I~AihXt{3!Mp6N()>&3@QFp@{ymsapA5ob!1aGXeiqrdNp#U(U8{MW&R|f7ys8> z|K0I2ZJg&_fS$j_LTsh+j*ri8WJ(GF22LE36S$}pSh`oj3VK0!IjF`Fg(I3^*9T-| z@#T5`%$zK57XN1?KwzYk*SNyOo1f9hw$2rK7oLRtY#%JgZN0f5EE|2AA?k`f(U5I; zAV-F!TXvPsB8!Dzrg?S>itPJ9G^S2Y6bn3Ut6J09^_d9+hiMWRTHhz&X`eLwY<8i? zU88NbZ>Yz&;JA7luteY literal 0 HcmV?d00001 diff --git a/src/pages/community.tsx b/src/pages/community.tsx index 86dc934e59..02f1a8a647 100644 --- a/src/pages/community.tsx +++ b/src/pages/community.tsx @@ -7,9 +7,11 @@ export default function DownloadPage(): JSX.Element { return ( -
    -

    Welcome to the Community Page!

    -
    +
    +
    +

    Welcome to the Community Page!

    +
    +
    ); } diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx index 62ba47953f..968b13acdc 100644 --- a/src/pages/docs.tsx +++ b/src/pages/docs.tsx @@ -233,34 +233,36 @@ export default function APIDocsPage(): JSX.Element { ); return ( - - - {renderArticle(page)} - +
    + + + {renderArticle(page)} + +
    ); } diff --git a/src/pages/download.tsx b/src/pages/download.tsx index 42af535697..05bb99ce06 100644 --- a/src/pages/download.tsx +++ b/src/pages/download.tsx @@ -1,6 +1,5 @@ import React, { useState } from 'react'; -import { useReleaseHistory } from '../hooks/useReleaseHistory'; -import Hero from '../components/hero'; +import { useReleaseHistory } from '../hooks'; import Layout from '../components/layout'; import ReleaseTable from '../components/release-table'; import ReleaseToggle from '../components/release-toggle'; @@ -25,7 +24,6 @@ export default function DownloadPage(): JSX.Element { return ( -

    Download the Node.js source code, a pre-built installer for your diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 264933372e..50622412c1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,19 +1,150 @@ import React from 'react'; +import { Link } from 'gatsby'; import Hero from '../components/hero'; import Layout from '../components/layout'; - import '../util/konami'; -export default function HomePage(): JSX.Element { - const title = 'Home Page'; +import '../styles/index.css'; + +import featureImg from '../images/placeholder-img.png'; + +import logoImg1 from '../images/logos/ibm-logo.svg'; +import logoImg2 from '../images/logos/linkedin-logo.svg'; +import logoImg3 from '../images/logos/microsoft-logo.svg'; +import logoImg4 from '../images/logos/netflix-logo.svg'; +import logoImg5 from '../images/logos/paypal-logo.svg'; + +import GetStartedIllustration1 from '../images/illustrations/beginners-guide-illustration.svg'; +import GetStartedIllustration2 from '../images/illustrations/do-more-illustration.svg'; + +import pentagonIllustration1 from '../images/illustrations/pentagon-illustration1.svg'; +import pentagonIllustration2 from '../images/illustrations/pentagon-illustration2.svg'; +import leafsIllustrationFront from '../images/illustrations/leafs-front.svg'; +import leafsIllustrationMiddle from '../images/illustrations/leafs-middle.svg'; +import leafsIllustrationBack from '../images/illustrations/leafs-back.svg'; +import dotsIllustration from '../images/illustrations/dots.svg'; + +const nodeFeature1 = + 'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. '; +const nodeFeature2 = + 'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. '; +const nodeFeature3 = + 'Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos meh. '; + +const NodeFeature = ({ img, featureText }: Props) => { + return ( +

    + node feature +

    {featureText}

    +
    + ); +}; + +export default function Index(): JSX.Element { + const title = 'The power of JavaScript minus the browser'; + const subTitle = + 'Node.js is a free, open-sourced, cross-platform JavaScript run-time environment that lets developers write command line tools and server-side scripts outside of a browser.'; const description = 'Welcome to Node.js!'; return ( - - -
    -

    Welcome to the Home Page!

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

    + Join the community +

    +
    +

    + We’ll never share your information and always respect your inbox - + quality content only, we promise.{' '} +

    +
    + + +
    +
    +
    + +
    +

    + Trusted by development teams around the world +

    +

    Including IBM, LinkedIn, Microsoft, Netflix, and PayPal.

    +
    + ibm logo + linkedin logo + microsoft logo + netflix logo + paypal logo +
    +
    + +
    + + +
    A beginner’s guide
    +

    + Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos + meh. +

    + + + + +
    Do even more with Node
    +

    + Lorem ipsum dolor amet pug vape +1 poke pour-over kitsch tacos + meh. +

    + +
    + + + Get Started + +
    + + +
    ); } + +interface Props { + img: string; + featureText: string; +} diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000000..1f56e8fbb1 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,291 @@ +.home-page { + max-width: 960px; + margin: 0 auto; + margin-bottom: var(--space-80); + position: relative; + + --section-margin-bottom: 340px; +} + +.pentagon-illustration-big1 { + position: absolute; + top: 1200px; + z-index: -1; + right: 0; +} + +.pentagon-illustration-big2 { + position: absolute; + z-index: -2; + left: 0; + bottom: -2000px; +} + +.double-background { + position: absolute; + width: 100%; + height: 1954px; + top: 808px; + background: var(--color-fill-canvas); + z-index: -10; +} + +.home-page-hero { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + padding-top: var(--space-96); + margin-bottom: 160px; +} + +.home-page-hero h1, p { + margin: 0; +} + +.home-page-hero h1 { + max-width: 840px; +} + +.home-page-hero .sub-title { + max-width: 780px; + color: var(--color-text-secondary); + margin: var(--space-32) 0 var(--space-80) 0; + font-weight: var(--font-weight-light); +} + +.download-lts-container { + position: relative; +} + +.download-lts-container .links { + color: var(--color-text-secondary); + margin: var(--space-08) 0 0 0; + position: absolute; + left: calc(var(--space-16) * -1); +} + +.home-page-hero .btn-ctas { + display: flex; +} + +.home-page-hero .btn-ctas button { + border: none; + box-sizing: border-box; + width: 20rem; + height: 5.6rem; + padding: 0 var(--space-16); + font-weight: var(--font-weight-semibold); + margin: 0; +} + +.home-page-hero .btn-ctas .download-lts-cta { + border-radius: 5.6rem; + background: var(--color-fill-action); + color: var(--black0); + margin-right: var(--space-32); + position: relative; +} + +.home-page-hero .btn-ctas .learn-cta { + border-radius: 5.6rem; + border: var(--color-fill-action) var(--space-02) solid; + color: var(--color-fill-action); +} + +.node-demo-container { + position: relative; +} + +.node-demo { + width: 832px; + margin: 0 auto; + margin-bottom: 240px; + height: 374px; + background: var(--black9); + border-radius: var(--space-04); + box-shadow: 5px 10px 50px rgba(0, 0, 0, .25); + color: var(--black0); + z-index: 2; +} + +.leafs-front { + position: absolute; + top: 145px; + right: -16px; + z-index: -1; + animation: leafs-animation 10s infinite alternate ease-in-out; + filter: drop-shadow(10px 5px 50px rgba(0, 0, 0, .1)); +} + +.leafs-middle { + position: absolute; + top: -32px; + right: 20px; + z-index: -2; + animation: leafs-animation 15s infinite alternate ease-in-out; + filter: drop-shadow(6px 5px 25px rgba(0, 0, 0, .1)); +} + +.leafs-back { + position: absolute; + top: -48px; + left: -62px; + z-index: -3; + animation: leafs-animation 18s infinite alternate ease-in-out; +} + +.dots { + position: absolute; + top: 180px; + left: -24px; + z-index: -4; +} + +.node-features { + width: 100%; + display: flex; + align-items: center; + justify-content: space-around; + margin-bottom: var(--section-margin-bottom); +} + +.node-features__feature { + max-width: 188px; + color: var(--color-text-secondary); +} + +.node-features__feature, p { + margin-top: var(--space-24); +} + +.join-node .accent { + color: var(--pink5); +} + +.join-node { + width: 200%; + margin: 0 auto; + margin-bottom: var(--section-margin-bottom); + max-width: 851px; +} + +.join-node-form-container { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.input-subscribe { + box-sizing: border-box; + padding: var(--space-16) var(--space-24); + border-radius: 3px; + border: var(--space-02) solid var(--color-border-primary); + height: 5.6rem; +} + +.join-node p { + max-width: 390px; + color: var(--color-text-secondary); +} + +.see-more-events { + margin-top: var(--space-48); + color: var(--pink5); + display: block; +} + +.see-more-events span { + margin-left: var(--space-08); +} + +.btn-subscribe { + border: none; + box-sizing: border-box; + height: 5.6rem; + padding: 0 var(--space-24); + font-weight: var(--font-weight-semibold); + background: var(--color-fill-action); + border-radius: var(--space-04); + color: var(--black0); + margin: 0; + margin-left: var(--space-08); + cursor: pointer; +} + +.trusted-by { + margin-bottom: var(--section-margin-bottom); + text-align: center; + width: 100%; +} + +.trusted-by p { + color: var(--color-text-secondary); + margin-bottom: var(--space-64); +} + +.trusted-by .logos-container { + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + filter: grayscale(); +} + +.get-started-callouts { + width: 100%; + display: flex; + flex-direction: row; + text-align: center; + justify-content: space-between; + margin-bottom: var(--space-80); +} + +.get-started-callout { + text-decoration: none; + display: flex; + flex-direction: column; +} + +.get-started-callout h5 { + color: var(--color-text-primary); + margin: 0; + margin-top: var(--space-24); +} + +.get-started-callout p { + margin-top: var(--space-16); + color: var(--color-text-secondary); + width: 422px; +} + +.btn-primary { + display: block; + width: 141px; + margin: 0 auto; + cursor: pointer; + border: none; + box-sizing: border-box; + padding: var(--space-08) var(--space-24); + font-weight: var(--font-weight-semibold); + background: var(--color-fill-action); + color: var(--black0); + border-radius: var(--space-04); + text-decoration: none; + line-height: var(--line-height-body1); +} + +.btn-primary:hover, .btn-primary:focus { + color: var(--black0); +} + +@keyframes leafs-animation { + 50% { + transform: rotate(5deg); + } + 100% { + transform: rotate(8deg); + } +} + \ No newline at end of file diff --git a/src/styles/layout.css b/src/styles/layout.css index e83706ea44..e7ea6807e4 100644 --- a/src/styles/layout.css +++ b/src/styles/layout.css @@ -28,44 +28,52 @@ body { font-weight: var(--font-weight-light); margin: 0 0 var(--space-48) 0; } + .t-display2 { font-size: var(--font-size-display2); line-height: var(--line-height-display2); font-weight: var(--font-weight-regular); } + .t-display3 { font-size: var(--font-size-display3); line-height: var(--line-height-display3); font-weight: var(--font-weight-regular); } + .t-headline, h2 { font-size: var(--font-size-headline); line-height: var(--line-height-headline); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-24) 0; } + .t-subheading, h3 { font-size: var(--font-size-subheading); line-height: var(--line-height-subheading); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-08) 0; } + .t-body1, p { font-size: var(--font-size-body1); line-height: var(--line-height-body1); font-weight: var(--font-weight-regular); margin: 0 0 var(--space-24) 0; } + .t-body2 { font-size: var(--font-size-body2); line-height: var(--line-height-body2); font-weight: var(--font-weight-regular); } + .t-caption { font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: var(--font-weight-regular); } + .t-overline { font-size: var(--font-size-overline); line-height: var(--line-height-overline); @@ -73,6 +81,7 @@ body { color: var(--color-text-secondary); text-transform: uppercase; } + .t-link, a { color: var(--color-text-accent); text-decoration: underline; @@ -106,6 +115,24 @@ body { border: 0; } +::placeholder { + color: var(--black3); +} + +button, input { + font-family: var(--base-type-face); + font-size: var(--font-size-body); + background: transparent; +} + +button { + cursor: pointer; +} + +input { + color: var(--color-text-primary); +} + body:not(.dark-mode) .dark-mode-only { display: none; } @@ -181,10 +208,12 @@ main { } .nav { + display: flex; + align-items: center; + flex-direction: row; background: var(--color-fill-app); - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.33), 0 2px 3px rgba(0, 0, 0, 0.2); + border-bottom: var(--space-01) solid var(--black2); height: var(--nav-height); - line-height: var(--nav-height); left: 0; position: fixed; right: 0; @@ -192,20 +221,40 @@ main { z-index: 999; } +.dark-mode .nav { + border: none; +} + .nav__logo { - display: block; - height: 42px; - margin: 0 24px 0 0; + height: var(--space-32); + margin-left: var(--space-24); +} + +.nav__tabs__container { + margin-left: 120px; + list-style: none; + display: flex; + align-items: center; + max-width: 352px; + justify-content: space-between; + width: 100%; +} + +.nav .right-container { + display: flex; + padding-right: var(--space-24); + list-style: none; } .nav__tabs { text-decoration: none; - margin-left: 16px; + margin-left: var(--space-16); } .nav__tabs > a { text-decoration: none; color: var(--color-text-primary); + padding: var(--space-24) var(--space-16) calc(var(--space-24) - 2px) var(--space-16) } /* Start: Article Reader HTML Reset */ diff --git a/src/styles/mobile.css b/src/styles/mobile.css index caad0340c9..e53ce94d2e 100644 --- a/src/styles/mobile.css +++ b/src/styles/mobile.css @@ -1,7 +1,6 @@ @media (max-width: 1262px) and (min-width: 721px) { body { --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 100%); - --hero-height: 36rem; } .article-reader { @@ -13,7 +12,7 @@ } .side-nav { - margin-right: -36rem; + margin-right: -36.0rem; margin-bottom: calc(-100vh + var(--nav-height)); pointer-events: none; overflow: hidden; @@ -28,7 +27,7 @@ top: 0; background-color: var(--black0); transform: translateX(-120%); - transition: transform 0.28s; + transition: transform .28s; pointer-events: none; z-index: -1; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.33), 2px 0 3px rgba(0, 0, 0, 0.2); @@ -50,7 +49,7 @@ .side-nav__list { transform: translateX(-120%); - transition: transform 0.28s; + transition: transform .28s; pointer-events: none; } @@ -59,17 +58,14 @@ pointer-events: all; } - .hero h1 { - left: 20rem; - } - .side-nav__open, - .side-nav.side-nav--open .side-nav__open { + .side-nav__open, .side-nav.side-nav--open .side-nav__open { top: 34px; margin-top: 0; display: block; pointer-events: all; } + } @media (max-width: 720px) { @@ -79,21 +75,7 @@ body { --nav-height: 5.2rem; - --hero-height: 92px; - --banner-clip: polygon( - 0 0, - 100% 0, - 100% calc(100% - 52px), - 0 calc(100% - 32px) - ); - } - - .hero { - top: var(--nav-height); - } - - .hero h1 { - display: none; + --banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 52px), 0 calc(100% - 32px)); } .nav ul { @@ -161,7 +143,7 @@ .article-reader { width: 100%; - padding: 0 1rem; + padding: 0 1.0rem; box-sizing: border-box; } diff --git a/src/styles/tokens.css b/src/styles/tokens.css index 2af34de5b3..1e86eeab94 100644 --- a/src/styles/tokens.css +++ b/src/styles/tokens.css @@ -92,7 +92,7 @@ body { --color-border-accent: var(--color-brand-primary); --color-fill-app: var(--black0); - --color-fill-canvas: var(--black0); + --color-fill-canvas: var(--black1); --color-fill-side-nav: var(--black1); --color-fill-top-nav: var(--black0); --color-fill-action: var(--brand5); /*for actionable elements*/ diff --git a/src/templates/learn.tsx b/src/templates/learn.tsx index c81cd6aedd..560413af39 100644 --- a/src/templates/learn.tsx +++ b/src/templates/learn.tsx @@ -22,18 +22,20 @@ const LearnLayout = ({ }, pageContext: { slug, next, previous, relativePath, navigationData }, }: Props): React.ReactNode => ( - - -
    - +
    + + +
    + +
    ); export default LearnLayout; From 517603a4ed8300bd3fbb7214dd8a963df09ff1c7 Mon Sep 17 00:00:00 2001 From: Saleh Abdel Motaal Date: Mon, 28 Oct 2019 15:03:22 -0400 Subject: [PATCH 23/40] feat: Enhanced Dark Mode prototype (#352) * feat: Enhanced Dark Mode Toggle Features This adds a new `utils/DarkModeController` controller wrapped in a new `components/controls` component. --- src/components/controls.tsx | 80 +++++++++ src/components/header.tsx | 18 +- src/components/layout.tsx | 5 +- src/util/DarkModeController.js | 161 ++++++++++++++++++ .../__snapshots__/header.test.tsx.snap | 111 ++++++------ .../__snapshots__/hero.test.tsx.snap | 52 ++++-- .../__snapshots__/learn.test.tsx.snap | 114 +++++++------ 7 files changed, 418 insertions(+), 123 deletions(-) create mode 100644 src/components/controls.tsx create mode 100644 src/util/DarkModeController.js diff --git a/src/components/controls.tsx b/src/components/controls.tsx new file mode 100644 index 0000000000..49b49924b1 --- /dev/null +++ b/src/components/controls.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { css } from '@emotion/core'; +import DarkModeController from '../util/DarkModeController'; + +const controlsStyles = { + header: css/* scss */ ` + position: fixed; + padding: 0.25ch 1ch; + margin-bottom: 1ch; + margin-top: -1ch; + right: 0; + z-index: 999; + box-sizing: border-box; + will-change: transform; + + display: grid; + grid-auto-flow: column dense; + grid-gap: 1ch; + align-items: center; + + opacity: 0.9; + color: var(--color-text-accent, #999); + background-color: var(--black9, #9993); + border-top-left-radius: 1ch; + border-bottom-left-radius: 1ch; + + min-width: max-content; + width: 0; + white-space: normal; + text-size-adjust: 100%; + text-shadow: #333f46 0px 0.875px 0px; + user-select: none; + `, + button: css/* scss */ ` + color: inherit; + border: none; + width: max-content; + display: contents; + `, + controls: css/* scss */ ` + color: inherit; + `, +}; + +interface Props { + lightModeIcon?: string; + darkModeIcon?: string; + controller?: DarkModeController; +} + +const Controls = ({ + lightModeIcon = 'wb_sunny', + darkModeIcon = 'nights_stay', + controller = new DarkModeController(), +}: Props) => ( +
    +
    + + + +
    +
    +); + +export default Controls; diff --git a/src/components/header.tsx b/src/components/header.tsx index f96cee335c..9f3b01197b 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -2,6 +2,7 @@ import { Link } from 'gatsby'; import React from 'react'; import logoLight from '../images/logos/nodejs-logo-light-mode.svg'; import logoDark from '../images/logos/nodejs-logo-dark-mode.svg'; +import DarkModeController from '../util/DarkModeController'; const activeStyleTab = { fontWeight: 'var(--font-weight-semibold)', @@ -9,7 +10,11 @@ const activeStyleTab = { borderBottom: 'var(--space-04) inset var(--color-text-accent)', }; -const Header = () => ( +interface Props { + darkModeController?: DarkModeController; +} + +const Header = ({ darkModeController }: Props) => (