nickzuber/meteorite
1
1
Fork 0
mirror of https://github.com/nickzuber/meteorite.git synced 2024-09-11 11:36:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

More home page progress

Browse Source
This commit is contained in:
Nicholas Zuber 2019-04-08 00:18:45 -04:00
parent fd4964b36b
commit 5e0b8cc2c1
4 changed files with 276 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
package-lock.json generated
View File

@ -1910,7 +1910,8 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true "bundled": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -1928,11 +1929,13 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "bundled": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -1945,15 +1948,18 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -2056,7 +2062,8 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true "bundled": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -2066,6 +2073,7 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -2078,17 +2086,20 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true "bundled": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -2105,6 +2116,7 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -2177,7 +2189,8 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -2187,6 +2200,7 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -2262,7 +2276,8 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true "bundled": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -2292,6 +2307,7 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -2309,6 +2325,7 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -2347,11 +2364,13 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "bundled": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true "bundled": true,
"optional": true
} }
} }
}, },
@ -2700,6 +2719,11 @@
"warning": "^3.0.0" "warning": "^3.0.0"
} }
}, },
"@rehooks/component-size": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@rehooks/component-size/-/component-size-1.0.2.tgz",
"integrity": "sha512-bjuKCFEIr1eDNvK/ET2SWl/xCKloywupJyfKQqZ6GaEKhnlCI2YV10rv9wTNrbSnzoHraktig9YYC0e69RowLA=="
},
"@svgr/core": { "@svgr/core": {
"version": "2.4.1", "version": "2.4.1",
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-2.4.1.tgz", "resolved": "https://registry.npmjs.org/@svgr/core/-/core-2.4.1.tgz",
@ -7134,7 +7158,8 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true "bundled": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -7152,11 +7177,13 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "bundled": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -7169,15 +7196,18 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -7280,7 +7310,8 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true "bundled": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -7290,6 +7321,7 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -7302,17 +7334,20 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true "bundled": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -7329,6 +7364,7 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -7401,7 +7437,8 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -7411,6 +7448,7 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -7486,7 +7524,8 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.1", "version": "5.1.1",
"bundled": true "bundled": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -7516,6 +7555,7 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -7533,6 +7573,7 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -7571,11 +7612,13 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "bundled": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true "bundled": true,
"optional": true
} }
} }
}, },
@ -9250,7 +9293,8 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true "bundled": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -9268,11 +9312,13 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "bundled": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -9285,15 +9331,18 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -9396,7 +9445,8 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true "bundled": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -9406,6 +9456,7 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -9418,17 +9469,20 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true "bundled": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -9445,6 +9499,7 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -9517,7 +9572,8 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -9527,6 +9583,7 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -9602,7 +9659,8 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true "bundled": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -9632,6 +9690,7 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@ -9649,6 +9708,7 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -9687,11 +9747,13 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "bundled": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true "bundled": true,
"optional": true
} }
} }
}, },
@ -15221,7 +15283,7 @@
"dependencies": { "dependencies": {
"minimist": { "minimist": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
} }
} }

1
package.json
View File

@ -6,6 +6,7 @@
"@emotion/core": "^10.0.10", "@emotion/core": "^10.0.10",
"@emotion/styled": "^10.0.10", "@emotion/styled": "^10.0.10",
"@reach/router": "^1.2.1", "@reach/router": "^1.2.1",
"@rehooks/component-size": "^1.0.2",
"@svgr/webpack": "2.4.1", "@svgr/webpack": "2.4.1",
"ajv": "^6.10.0", "ajv": "^6.10.0",
"axios": "^0.18.0", "axios": "^0.18.0",

BIN
src/images/demo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 745 KiB

After

Width:  |  Height:  |  Size: 401 KiB

206
src/pages/Home/Scene.js
View File

@ -3,6 +3,7 @@
import React from 'react'; import React from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import {css, jsx, keyframes} from '@emotion/core'; import {css, jsx, keyframes} from '@emotion/core';
import useComponentSize from '@rehooks/component-size'
import {Link as RouterLink} from '@reach/router'; import {Link as RouterLink} from '@reach/router';
import {routes} from '../../constants'; import {routes} from '../../constants';
import Curve from '../../components/Curve'; import Curve from '../../components/Curve';
@ -12,8 +13,37 @@ import demoPng from '../../images/demo.png';
import rowExample from '../../images/row.png'; import rowExample from '../../images/row.png';
import '../../styles/gradient.css'; import '../../styles/gradient.css';
const hash = process.env.GIT_HASH ? `#${process.env.GIT_HASH}` : ''; // const hash = process.env.GIT_HASH ? `#${process.env.GIT_HASH}` : '';
const version = require('../../../package.json').version + hash; // const version = require('../../../package.json').version + hash;
function range (min, max, rand) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(rand * (max - min + 1)) + min;
}
function color (rand) {
const c = [
'#4caf50',
'#e91e63',
'#4C84FF',
'#e6d435',
];
return c[~~(c.length * rand)];
}
function opacity (xid, max) {
// Max value (best possible score).
const cap = .5;
// Best value to base distribution on (the center value).
const best = Math.floor(max / 2);
// How spread out the distribution is from the best value.
const distribution = 4;
return .5 - Math.min(0.2, cap * Math.pow(
Math.E,
(-0.5) * (Math.pow(xid - best, 2) / (Math.pow(distribution, 2)))
));
}
// function createImagePlaceholder (highlight) { // function createImagePlaceholder (highlight) {
// return ( // return (
@ -552,6 +582,7 @@ const version = require('../../../package.json').version + hash;
// =========================================================================== // ===========================================================================
const PageContainer = styled('div')` const PageContainer = styled('div')`
overflow: hidden;
background: #fcf8f3; background: #fcf8f3;
position: relative; position: relative;
height: 100%; height: 100%;
@ -559,11 +590,12 @@ const PageContainer = styled('div')`
display: block; display: block;
`; `;
const FixedCounter = styled('div')` const FixedContainer = styled('div')`
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 10;
`; `;
const Container = styled('div')` const Container = styled('div')`
@ -602,20 +634,110 @@ const LogoTitle = styled('span')`
`; `;
const Header = styled('h1')` const Header = styled('h1')`
margin-top: 0; position: relative;
font-size: 4rem; margin: 0;
z-index: 2;
font-size: 64px;
line-height: 78px;
font-weight: 800; font-weight: 800;
hyphens: auto; hyphens: auto;
`; `;
function getConfetti (seed) {
const stroke = color(seed);
if (seed > 0.8) {
return (
<svg css={css`transform: rotate(${~~(seed * 180)}deg);`} width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 0L11.1962 9H0.803848L6 0Z" fill={stroke}/>
</svg>
);
}
if (seed > 0.6) {
return (
<svg css={css`transform: rotate(${~~(seed * 180)}deg);`} width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C0.517508 6.06139 6.6799 11.5502 2 16" stroke={stroke} stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
);
}
if (seed > 0.4) {
return (
<svg css={css`transform: rotate(${~~(seed * 180)}deg);`} width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 0L8 6.5L4 13L0 6.5L4 0Z" fill={stroke} />
</svg>
);
}
if (seed > 0.2) {
return (
<svg css={css`transform: rotate(${~~(seed * 180)}deg);`} width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 6.6393C8 9.44331 2.33469 14 0.577298 14C-1.1801 14 1.63591 9.44331 1.63591 6.6393C1.63591 3.83529 -0.119245 0 1.63815 0C3.39555 0 8 3.83529 8 6.6393Z"
fill={stroke}
/>
</svg>
);
}
return (
<svg css={css`transform: rotate(${~~(seed * 180)}deg);`} width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.15408 5.477C8.15168 8.67191 7 13.5 5.15408 11.5C3.30816 9.5 2.90284 9.34138 1.15517 5.47695C-2.00009 -1.49991 3.99732 1.50011 5.15408 3.977C6.15408 1.47707 11.5 -2 9.15408 5.477Z"
fill={stroke}/>
</svg>
);
}
const Confetti = ({offset, row, seed, index, max}) => {
const start = row * 120;
const end = start + 120;
const topDelta = range(start, end, seed) - 120;
const fade = opacity(index, max);
offset -= 180;
return (
<div css={css`
z-index: 1;
opacity: ${fade};
transform: scale(1.2);
position: absolute;
left: ${offset}px;
top: ${topDelta}px;
`}
>
{getConfetti(seed)}
</div>
);
}
function ConfettiSection () {
const SPACING = 82;
const AMOUNT = 17;
const row = new Array(AMOUNT).fill(0).map((_, i) => i * SPACING);
return (
<div css={css`
z-index: 0;
`}>
{row.map((offset, i) => <Confetti index={i} row={0} offset={offset} seed={Math.random()} max={AMOUNT} />)}
{row.map((offset, i) => <Confetti index={i} row={1} offset={offset} seed={Math.random()} max={AMOUNT} />)}
{row.map((offset, i) => <Confetti index={i} row={2} offset={offset} seed={Math.random()} max={AMOUNT} />)}
{row.map((offset, i) => <Confetti index={i} row={3} offset={offset} seed={Math.random()} max={AMOUNT} />)}
{row.map((offset, i) => <Confetti index={i} row={4} offset={offset} seed={Math.random()} max={AMOUNT} />)}
{row.map((offset, i) => <Confetti index={i} row={5} offset={offset} seed={Math.random()} max={AMOUNT} />)}
</div>
);
}
const SubHeader = styled(Header)` const SubHeader = styled(Header)`
font-size: 22px; font-size: 22px;
line-height: 26px;
font-weight: 600; font-weight: 600;
`; `;
const DemoScreenshot = styled('img')` const DemoScreenshot = styled('img')`
max-width: 960px; max-width: 960px;
display: block; display: block;
box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px, rgb(245, 245, 245) 0px -1px 0px;
border-radius: 4px;
z-index: 2;
`; `;
const SmallText = styled('p')` const SmallText = styled('p')`
@ -624,6 +746,7 @@ const SmallText = styled('p')`
font-weight: 500; font-weight: 500;
display: inline-block; display: inline-block;
color: #37352f; color: #37352f;
z-index: 2;
`; `;
const SmallLink = styled('a')` const SmallLink = styled('a')`
@ -632,32 +755,51 @@ const SmallLink = styled('a')`
font-weight: 500; font-weight: 500;
display: inline-block; display: inline-block;
color: #37352f; color: #37352f;
z-index: 2;
transition: all 200ms ease; transition: all 200ms ease;
`; `;
// const Confetti = styled('div')`
// position: absolute;
// left: ${props => props.offset}px;
// top: ${props => props.top
// ? (-1) * range(28, 42, props.seed) + 'px'
// : 'auto'
// };
// bottom: ${props => props.bottom
// ? (-1) * range(28, 42, props.seed) + 'px'
// : 'auto'
// };
// transform: rotate(${props => ~~(props.seed * 180)}deg);
// height: 16px;
// width: 7px;
// background: ${props => color(props.seed)};
// `;
export default function Scene ({loggedIn, onLogout, ...props}) { export default function Scene ({loggedIn, onLogout, ...props}) {
const [showBorder, setShowBorder] = React.useState(false); const [showBorder, setShowBorder] = React.useState(false);
React.useEffect(() => { // React.useEffect(() => {
const PAGE_OFFSET = 100; // const PAGE_OFFSET = 100;
const onScroll = () => { // const onScroll = () => {
if (window.pageYOffset >= PAGE_OFFSET) { // if (window.pageYOffset >= PAGE_OFFSET) {
setShowBorder(true); // setShowBorder(true);
} else if (window.pageYOffset < PAGE_OFFSET) { // } else if (window.pageYOffset < PAGE_OFFSET) {
setShowBorder(false); // setShowBorder(false);
} // }
}; // };
window.addEventListener('scroll', onScroll); // window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll); // return () => window.removeEventListener('scroll', onScroll);
}, []); // }, []);
return ( return (
<PageContainer css={css`padding-top: 84px;`}> <PageContainer css={css`padding-top: 84px;`}>
<FixedCounter css={css` <FixedContainer css={css`
transition: all 200ms ease; transition: all 200ms ease;
background: #fcf8f3;
box-shadow: ${showBorder box-shadow: ${showBorder
? 'rgba(84, 70, 35, 0) 0px 2px 8px, rgba(84,70,35,0.15) 0px 1px 3px' ? 'rgba(84, 70, 35, 0) 0px 2px 8px, rgba(84,70,35,0.15) 0px 1px 3px'
: '0 0 0 white' : 'none'
}; };
`}> `}>
<Container> <Container>
@ -719,7 +861,7 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
)} )}
</div> </div>
</Container> </Container>
</FixedCounter> </FixedContainer>
<Container css={css` <Container css={css`
margin: 36px auto; margin: 36px auto;
@ -727,24 +869,31 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
flex-direction: column; flex-direction: column;
`}> `}>
<div css={css` <div css={css`
margin: 0 auto; position: relative;
margin: 0 auto 64px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 12px 0; padding: 12px 0;
flex-direction: row; flex-direction: row;
`}> `}>
<Header>{'Control'}<br />{'your GitHub notifications'}</Header> <ConfettiSection />
<div> <Header>
{'Control'}<br />
{'your GitHub notifications'}
</Header>
<div css={css`margin: 0 32px;`}>
<SubHeader> <SubHeader>
{'Prioritize the tasks that keep you and your team most productive by organizing your notifications'} {'Prioritize the tasks that keep you and your team most productive by organizing your notifications'}
</SubHeader> </SubHeader>
<div css={css` <div css={css`
z-index: 2;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
margin: 24px 0; margin: 18px 0;
span { span {
z-index: 2;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
margin-right: 24px; margin-right: 24px;
@ -758,18 +907,19 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
line-height: 1; line-height: 1;
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
background: rgba(69, 124, 255, 0.12); background: rgb(230, 234, 244);
font-weight: 500; font-weight: 500;
box-shadow: rgba(15, 15, 15, 0.1) 0px 1px 2px, rgba(65, 119, 255, 0.29) 0px 0px 0px 1px inset; box-shadow: rgba(15, 15, 15, 0.1) 0px 1px 2px, rgba(65, 119, 255, 0.29) 0px 0px 0px 1px inset;
transition: all 200ms ease; transition: all 200ms ease;
&:hover { &:hover {
background: rgba(69, 124, 255, 0.18); background: rgb(217, 223, 239);
} }
&:active { &:active {
background: rgba(69, 124, 255, 0.22); background: rgb(193, 206, 243);
} }
} }
i { i {
z-index: 2;
margin-left: 8px; margin-left: 8px;
color: #457cff; color: #457cff;
} }
@ -795,11 +945,13 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
</span> </span>
</div> </div>
<div css={css` <div css={css`
z-index: 2;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
margin: 12px 0; margin: 12px 0;
i { i {
z-index: 2;
color: #37352f; color: #37352f;
margin-right: 4px; margin-right: 4px;
font-size: 10px; font-size: 10px;