diff --git a/now.json b/now.json
index 1a6ed17..265b7c9 100644
--- a/now.json
+++ b/now.json
@@ -12,6 +12,8 @@
{"src": "^/favicon.ico", "dest": "/iconCircle.png"},
{"src": "^/iconCircle.png", "dest": "/iconCircle.png"},
{"src": "^/app-icon.png", "dest": "/app-icon.png"},
+ {"src": "^/new-app-icon.png", "dest": "/new-app-icon.png"},
+ {"src": "^/new-app-icon-rounded.png", "dest": "/new-app-icon-rounded.png"},
{"src": "^/manifest.json", "dest": "/manifest.json"},
{"src": "^/asset-manifest.json", "dest": "/asset-manifest.json"},
{"src": "^/service-worker.js", "headers": {"cache-control": "s-maxage=0"}, "dest": "/service-worker.js"},
diff --git a/public/manifest.json b/public/manifest.json
index 9d0dc8a..c3f9df6 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,12 +3,42 @@
"name": "Meteorite – Smarter GitHub Notifications",
"icons": [
{
- "src": "app-icon.png",
+ "src": "new-app-icon.png",
+ "sizes": "48x48",
+ "type": "image/png"
+ },
+ {
+ "src": "new-app-icon.png",
+ "sizes": "72x72",
+ "type": "image/png"
+ },
+ {
+ "src": "new-app-icon.png",
+ "sizes": "96x96",
+ "type": "image/png"
+ },
+ {
+ "src": "new-app-icon.png",
+ "sizes": "144x144",
+ "type": "image/png"
+ },
+ {
+ "src": "new-app-icon.png",
"sizes": "192x192",
"type": "image/png"
},
{
- "src": "app-icon-taskbar.png",
+ "src": "new-app-icon.png",
+ "sizes": "256x256",
+ "type": "image/png"
+ },
+ {
+ "src": "new-app-icon.png",
+ "sizes": "384x384",
+ "type": "image/png"
+ },
+ {
+ "src": "new-app-icon-rounded.png",
"sizes": "512x512",
"type": "image/png"
}
diff --git a/public/new-app-icon-rounded.png b/public/new-app-icon-rounded.png
new file mode 100644
index 0000000..a510e0f
Binary files /dev/null and b/public/new-app-icon-rounded.png differ
diff --git a/public/new-app-icon.png b/public/new-app-icon.png
new file mode 100644
index 0000000..faca320
Binary files /dev/null and b/public/new-app-icon.png differ
diff --git a/src/components/Confetti/index.js b/src/components/Confetti/index.js
new file mode 100644
index 0000000..fc5f8e4
--- /dev/null
+++ b/src/components/Confetti/index.js
@@ -0,0 +1,143 @@
+/** @jsx jsx */
+
+import {css, jsx} from '@emotion/core';
+
+function color (rand) {
+ // const c = [
+ // '#4caf50',
+ // '#e91e63',
+ // '#4C84FF',
+ // '#e6d435',
+ // '#B424E6',
+ // ];
+ const c = [
+ '#B424E6',
+ '#1ACA6B',
+ '#E62465',
+ '#FFCD4C',
+ '#4C84FF',
+ '#E9519A',
+ ];
+ return c[~~(c.length * rand)];
+}
+
+function opacity (xid, max) {
+ // Max value (best possible score).
+ const cap = 1;
+ // 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 = 8;
+ const result = Math.min(1, cap * Math.pow(
+ Math.E,
+ (-0.5) * (Math.pow(xid - best, 2) / (Math.pow(distribution, 2)))
+ ));
+ return Math.max(1 - result, 0.05) * 1.75;
+}
+
+function range (min, max, rand) {
+ min = Math.ceil(min);
+ max = Math.floor(max);
+ return Math.floor(rand * (max - min + 1)) + min;
+}
+
+function getConfetti (seed) {
+ const stroke = color(seed);
+ const rotation = ~~(seed * 180);
+
+ const svgs = [
+ (
+
+
+
+ ),
+ (
+
+
+ ),
+ (
+
+
+ ),
+ (
+
+
+ ),
+ (
+
+
+ ),
+ (
+
+
+
+ ),
+ (
+
+
+
+ )
+ ];
+ // css={css`transform: rotate(${rotation}deg);`}
+
+ return svgs[~~(seed * svgs.length)];
+}
+
+const Confetti = ({offset, row, seed, index, max}) => {
+ const start = row * 160;
+ const end = start + 160;
+ const topDelta = range(start, end, seed) - 120;
+ const fade = opacity(index, max);
+ offset -= 320;
+ return (
+
+ {getConfetti(seed)}
+
+ );
+}
+
+export default function ConfettiSection ({spacing = 82, amount = 18}) {
+ const row = new Array(amount).fill(0).map((_, i) => i * spacing);
+
+ return (
+
+ {row.map((offset, i) =>
+ );
+}
diff --git a/src/pages/Home/Scene.js b/src/pages/Home/Scene.js
index 6d684d4..b894252 100644
--- a/src/pages/Home/Scene.js
+++ b/src/pages/Home/Scene.js
@@ -3,9 +3,10 @@
import React from 'react';
import styled from '@emotion/styled';
import {css, jsx} from '@emotion/core';
-import {Link as RouterLink} from '@reach/router';
+import {navigate, Link as RouterLink} from '@reach/router';
import {routes} from '../../constants';
import Logo from '../../components/Logo';
+import ConfettiSection from '../../components/Confetti';
import headerPng from '../../images/safari-header.png';
import regularScreenshotPng from '../../images/traditional-screenshot.png';
@@ -28,580 +29,8 @@ import '../../styles/font.css';
const hash = process.env.GIT_HASH ? `#${process.env.GIT_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',
- // '#B424E6',
- // ];
- const c = [
- '#B424E6',
- '#1ACA6B',
- '#E62465',
- '#FFCD4C',
- '#4C84FF',
- '#E9519A',
- ];
- return c[~~(c.length * rand)];
-}
-
-function opacity (xid, max) {
- // Max value (best possible score).
- const cap = 1;
- // 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 = 8;
- const result = Math.min(1, cap * Math.pow(
- Math.E,
- (-0.5) * (Math.pow(xid - best, 2) / (Math.pow(distribution, 2)))
- ));
- return Math.max(1 - result, 0.05) * 1.75;
-}
-
-// function createImagePlaceholder (highlight) {
-// return (
-//
-// {/* navigation backdrop */}
-//
-// {/* buttons */}
-//
-//
-//
-// {/* url */}
-//
-// {/* webpage header */}
-//
-//
-// {/* status headers */}
-//
-//
-//
-//
-//
-//
-// {/* notificaton row */}
-//
-//
-//
-//
-// {highlight === 'badges' ? (
-//
-// ) : (
-//
-// )}
-//
-//
-// {highlight === 'badges' ? (
-//
-// ) : (
-//
-// )}
-//
-//
-//
-//
-//
-//
-//
-//
-//
-// {highlight === 'badges' ? (
-//
-// ) : (
-//
-// )}
-//
-//
-//
-//
-//
-// );
-// }
-
-// const Arrow = ({style}) => {
-// return (
-//
-//
-//
-//
-// );
-// }
-
-// const NotificationsRowExample = styled('div')({
-// position: 'relative',
-// height: 59,
-// width: 745,
-// borderRadius: 8,
-// margin: '158px auto 124px',
-// background: `url(${rowExample}) center center no-repeat`,
-// backgroundSize: 'cover',
-// backgroundColor: '#fff',
-// boxShadow: '0 2px 8px rgba(0, 0, 0, 0.51)',
-// });
-
-// const ImageContainer = styled('div')({
-// position: 'absolute',
-// height: 390,
-// width: 685,
-// top: 155,
-// left: '50%',
-// background: `url(${screenshot}) center center no-repeat`,
-// backgroundSize: 'cover',
-// backgroundColor: '#fff',
-// boxShadow: 'rgba(84,70,35,0) 0px 2px 8px, rgba(68, 58, 32, 0.16) 0px 1px 9px 4px',
-// marginLeft: 100,
-// borderRadius: 8,
-// display: 'block',
-// '@media (max-width: 1000px)': {
-// display: 'none'
-// }
-// });
-
-// const WidthContainer = styled('div')({
-// margin: '0 auto',
-// width: '100%',
-// maxWidth: 1500,
-// display: 'flex',
-// alignItems: 'center',
-// flexDirection: 'row',
-// }, ({override = false}) => ({
-// '@media (max-width: 1400px)': {
-// flexDirection: override ? 'row' : 'column'
-// }
-// }));
-
-// const Section = styled('div')({
-// position: 'relative',
-// width: '100%',
-// minHeight: 300,
-// display: 'flex',
-// alignItems: 'center',
-// flexDirection: 'column',
-// margin: '28px auto 0',
-// padding: '60px 0'
-// }, ({alt}) => alt && ({
-// background: 'rgb(255, 254, 252)',
-// 'h2': {
-// marginTop: 0,
-// marginLeft: 15,
-// fontSize: 42,
-// textAlign: 'left',
-// fontWeight: 600
-// }
-// }));
-
-// const Item = styled('div')({
-// flex: 1,
-// display: 'block',
-// padding: '24px 72px',
-// 'h2': {
-// marginTop: 0,
-// marginLeft: 15,
-// fontSize: 42,
-// textAlign: 'left',
-// fontWeight: 600
-// },
-// 'p': {
-// fontSize: 18
-// }
-// }, ({flex}) => ({
-// flex
-// }));
-// const ItemText = styled('div')({
-// display: 'flex',
-// minWidth: 200,
-// flexDirection: 'row',
-// margin: '20px 0',
-// 'p': {
-// flex: .9,
-// margin: 0
-// },
-// 'div': {
-// flex: .1,
-// marginTop: 3
-// },
-// });
-
-// const ImagePlaceholder = styled('div')({
-// position: 'relative',
-// display: 'block',
-// height: 400,
-// width: 600,
-// background: '#fff',
-// borderRadius: 8,
-// boxShadow: '0 2px 8px rgba(179, 179, 179, 0.25)'
-// // '-webkit-mask-image': 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)'
-// });
-
-// const Header = styled('h1')({
-// padding: '0 20px',
-// margin: '0 0 24px',
-// letterSpacing: '-1.0px',
-// width: '50%',
-// });
-
-// const SubHeader = styled(Header)({
-// fontWeight: 500,
-// maxWidth: 460,
-// fontSize: 24,
-// marginBottom: 30,
-// letterSpacing: '-0.25px'
-// });
-
-// const LandingHeader = styled('div')({
-// position: 'relative',
-// width: '90%',
-// margin: '22px 20px 54px',
-// maxWidth: 1500,
-// display: 'flex',
-// justifyContent: 'space-between',
-// });
-
-// const LandingMessage = styled(LandingHeader)({
-// marginLeft: '5%',
-// flexDirection: 'column',
-// textAlign: 'left',
-// maxWidth: 1500,
-// 'h1': {
-// display: 'block'
-// },
-// '@media (max-width: 1000px)': {
-// textAlign: 'center',
-// 'h1': {
-// marginLeft: 'auto',
-// marginRight: 'auto',
-// width: 500
-// },
-// 'div': {
-// marginLeft: 'auto !important',
-// marginRight: 'auto !important',
-// },
-// }
-// });
-
-// const SmallLink = styled('a')({
-// cursor: 'pointer',
-// fontSize: '12px',
-// lineHeight: '18px',
-// fontWeight: '700',
-// textDecoration: 'none',
-// ':hover': {
-// textDecoration: 'underline'
-// }
-// });
-
-// const SmallText = styled('span')({
-// fontSize: '12px',
-// fontWeight: '500',
-// 'a': {
-// color: 'rgba(255, 255, 255, .9)',
-// fontWeight: 600,
-// margin: '0 3px',
-// textDecoration: 'none'
-// },
-// 'a:hover': {
-// color: 'rgba(255, 255, 255, 1)',
-// textDecoration: 'underline'
-// }
-// });
-
-// const BottomLinkContainer = styled(LandingHeader)({
-// maxWidth: 350,
-// width: '100%',
-// margin: '32px 20px 0',
-// });
-
-// const LinkButton = styled('a')({boxShadow: '0 0 0 transparent'});
-// const U = styled('span')({
-// color: 'inherit'
-// });
-
-// const UnofficialReleaseTag = styled('span')({
-// color: 'white',
-// position: 'absolute',
-// left: '44px',
-// bottom: '9px',
-// fontSize: '11px',
-// background: '#f42839',
-// fontWeight: '800',
-// padding: '2px 4px',
-// borderRadius: '4px',
-// textTransform: 'uppercase',
-// });
-
-// ===========================================================================
-// ABOVE IS OLD CODE
-// ===========================================================================
+const WIDTH_FOR_MEDIUM_SCREENS = '1100px';
+const WIDTH_FOR_SMALL_SCREENS = '800px';
const PageContainer = styled('div')`
overflow: hidden;
@@ -630,7 +59,11 @@ const Container = styled('div')`
display: flex;
justify-content: space-between;
align-items: center;
- padding: 12px 0;
+ box-sizing: border-box;
+ padding: 12px 24px;
+ @media (max-width: ${WIDTH_FOR_MEDIUM_SCREENS}) {
+ width: 100%;
+ }
`;
const NewTag = styled('span')`
@@ -662,14 +95,19 @@ const Header = styled('h1')`
position: relative;
text-align: left;
width: 680px;
+ max-width: 680px;
margin: 0;
z-index: 2;
font-size: 72px;
line-height: 78px;
margin: 0 auto 12px;
-
font-family: medium-marketing-display-font,Georgia,Cambria,Times New Roman,Times,serif;
font-weight: 500;
+ @media (max-width: ${WIDTH_FOR_SMALL_SCREENS}) {
+ width: 100%;
+ font-size: 4rem;
+ line-height: 4.25rem;
+ }
`;
const SubHeader = styled(Header)`
@@ -678,12 +116,16 @@ const SubHeader = styled(Header)`
line-height: 26px;
font-weight: 600;
width: 680px;
+ max-width: 680px;
margin: 0 auto;
-
font-family: medium-content-sans-serif-font, Inter UI, system-ui, sans-serif;
font-weight: 500;
-
color: #b3b0a9;
+ @media (max-width: ${WIDTH_FOR_SMALL_SCREENS}) {
+ width: 100%;
+ font-size: 24px;
+ line-height: 26px;
+ }
`;
const ItemNumber = styled('span')`
@@ -700,6 +142,9 @@ const ItemContainer = styled('div')`
align-items: center;
padding: 12px 24px;
flex-direction: column;
+ @media (max-width: ${WIDTH_FOR_MEDIUM_SCREENS}) {
+ width: 100%;
+ }
`;
const ItemHeader = styled(Header)`
@@ -758,113 +203,46 @@ const CompanyPerson = styled('div')`
}
`;
-function getConfetti (seed) {
- const stroke = color(seed);
- const rotation = ~~(seed * 180);
-
- const svgs = [
- (
-
-
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- (
-
-
- ),
- (
-
-
-
- ),
- (
-
-
-
- )
- ];
- // css={css`transform: rotate(${rotation}deg);`}
-
- return svgs[~~(seed * svgs.length)];
-}
-
-const Confetti = ({offset, row, seed, index, max}) => {
- const start = row * 160;
- const end = start + 160;
- const topDelta = range(start, end, seed) - 120;
- const fade = opacity(index, max);
- offset -= 320;
- return (
-
- {getConfetti(seed)}
-
- );
-}
-
-function ConfettiSection () {
- const SPACING = 82;
- const AMOUNT = 18;
-
- const row = new Array(AMOUNT).fill(0).map((_, i) => i * SPACING);
-
- return (
-
- {row.map((offset, i) =>
- );
-}
+const IconLink = styled('span')`
+ position: relative;
+ cursor: pointer;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
+ user-select: none;
+ height: 40px;
+ width: 40px;
+ transition: all 150ms ease;
+ i {
+ color: inherit;
+ }
+ &:before {
+ content: "";
+ transition: all 150ms ease;
+ background: #BFC5D122;
+ border-radius: 100%;
+ display: block;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ transform: scale(0);
+ }
+ &:hover:before {
+ transform: scale(1);
+ }
+ &:active:before {
+ background: #BFC5D144;
+ }
+`;
const DemoScreenshotHeader = styled('img')`
background: #f7f6f3;
width: 960px;
+ max-width: 960px;
+ min-width: 580px;
display: block;
box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px, rgb(245, 245, 245) 0px -1px 0px;
border-top-left-radius: 4px;
@@ -872,7 +250,12 @@ const DemoScreenshotHeader = styled('img')`
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
z-index: 3;
+ @media (max-width: ${WIDTH_FOR_MEDIUM_SCREENS}) {
+ width: 100%;
+ margin-left: 50%;
+ }
`;
+
const DemoScreenshot = styled(DemoScreenshotHeader)`
border-top-left-radius: 0;
border-top-right-radius: 0;
@@ -885,14 +268,30 @@ const IPhoneScreenshotContainer = styled('img')`
bottom: -32px;
right: -32px;
width: 214px;
+ max-width: 214px;
+ min-width: 107px;
display: block;
background: none;
z-index: 5;
+ @media (max-width: ${WIDTH_FOR_MEDIUM_SCREENS}) {
+ width: 25%;
+ left: 21%;
+ top: 0;
+ bottom: auto;
+ right: auto;
+ }
`;
+
const IPhoneScreenshot = styled(IPhoneScreenshotContainer)`
z-index: 4;
transform: scale(0.88);
- bottom: -48px;
+ @media (max-width: ${WIDTH_FOR_MEDIUM_SCREENS}) {
+ width: 25%;
+ left: 21%;
+ top: -12px;
+ bottom: auto;
+ right: auto;
+ }
`;
const SmallText = styled('p')`
@@ -902,6 +301,9 @@ const SmallText = styled('p')`
display: inline-block;
color: #37352f;
z-index: 2;
+ @media (max-width: ${WIDTH_FOR_MEDIUM_SCREENS}) {
+ display: none;
+ }
`;
const SmallLink = styled('a')`
@@ -917,25 +319,11 @@ const SmallLink = styled('a')`
&:hover {
text-decoration: underline;
}
+ @media (max-width: ${WIDTH_FOR_MEDIUM_SCREENS}) {
+ display: none;
+ }
`;
-// 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}) {
const [showBorder, setShowBorder] = React.useState(false);
@@ -993,6 +381,9 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
&:active {
background: rgba(55, 53, 47, 0.16);
}
+ @media (max-width: ${WIDTH_FOR_SMALL_SCREENS}) {
+ display: none;
+ }
}
`}>
Desktop
@@ -1004,6 +395,9 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
margin-left: 10px;
margin-right: 10px;
display: inline-block;
+ @media (max-width: ${WIDTH_FOR_SMALL_SCREENS}) {
+ display: none;
+ }
`} />
{loggedIn ? (
<>
@@ -1020,15 +414,26 @@ export default function Scene ({loggedIn, onLogout, ...props}) {
)}
+
+ {/* @TODO implement the menu */}
+
+
+