Website v2 - Redesign + Copy + Mailchimp + Google Analytics (#22)
Website v2 - Redesign + Copy + Mailchimp + Google Analytics
1
.eslintignore
Normal file
@ -0,0 +1 @@
|
||||
pages/index.mdx
|
50
components/AnimatedLexend.js
Normal file
@ -0,0 +1,50 @@
|
||||
import styled from "@emotion/styled";
|
||||
import {
|
||||
useSpring,
|
||||
useTransition,
|
||||
useChain,
|
||||
animated,
|
||||
config
|
||||
} from "react-spring";
|
||||
import useOnScreen from "../lib/useOnScreen";
|
||||
import { useRef, useState } from "react";
|
||||
|
||||
const Container = styled("div")`
|
||||
margin: 3rem auto;
|
||||
pre {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 5rem auto 1rem;
|
||||
max-width: 740px;
|
||||
}
|
||||
`;
|
||||
const Text = styled(animated.span)``;
|
||||
|
||||
export default ({ children }) => {
|
||||
const ref = useRef();
|
||||
const onScreen = useOnScreen(ref, "0px");
|
||||
const [reversed, setReversed] = useState(false);
|
||||
|
||||
const animation = useSpring({
|
||||
lxnd: 0,
|
||||
from: {
|
||||
lxnd: 100
|
||||
},
|
||||
reset: onScreen,
|
||||
reverse: onScreen && reversed,
|
||||
onRest: () => onScreen && setReversed(!reversed)
|
||||
});
|
||||
|
||||
return (
|
||||
<animated.span
|
||||
ref={ref}
|
||||
style={{
|
||||
fontVariationSettings: animation.lxnd.interpolate(
|
||||
x => `'LXND' ${x.toFixed()}`
|
||||
)
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</animated.span>
|
||||
);
|
||||
};
|
80
components/AnimatedText.js
Normal file
@ -0,0 +1,80 @@
|
||||
import { useSpring, useTrail, animated, config } from "react-spring";
|
||||
import useOnScreen from "../lib/useOnScreen";
|
||||
import { useRef } from "react";
|
||||
import styled from "@emotion/styled";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const list = {
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
},
|
||||
hidden: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const items = {
|
||||
hidden: e => ({
|
||||
height: "0",
|
||||
opacity: 0,
|
||||
y: 30
|
||||
}),
|
||||
visible: {
|
||||
height: "1rem",
|
||||
opacity: 1,
|
||||
y: 0
|
||||
}
|
||||
};
|
||||
|
||||
const spring = {
|
||||
type: "spring",
|
||||
damping: 10,
|
||||
stiffness: 90,
|
||||
mass: 1
|
||||
};
|
||||
|
||||
const Word = styled(motion.div)`
|
||||
display: inline-block;
|
||||
margin: 0 0.292em;
|
||||
`;
|
||||
|
||||
const Span = styled(motion.span)`
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 0.11em;
|
||||
&:nth-of-type(1) {
|
||||
margin-left: -0.14em !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const AnimatedText = ({ delay = 0, children }) => {
|
||||
const ref = useRef();
|
||||
const onScreen = useOnScreen(ref, "0px");
|
||||
const letters = children.split(" ");
|
||||
return (
|
||||
<Word
|
||||
href="#download"
|
||||
ref={ref}
|
||||
initial="hidden"
|
||||
animate={onScreen ? "visible" : "hidden"}
|
||||
variants={list}
|
||||
>
|
||||
{letters.map((letter, index) => (
|
||||
<Span
|
||||
letter={letter}
|
||||
key={`${letter}-${index}`}
|
||||
variants={items}
|
||||
transition={spring}
|
||||
>
|
||||
{letter}
|
||||
</Span>
|
||||
))}
|
||||
</Word>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnimatedText;
|
@ -1,17 +1,18 @@
|
||||
import { useSpring, animated } from 'react-spring'
|
||||
import styled from "@emotion/styled"
|
||||
import { Button } from '../components'
|
||||
import useHover from '../lib/useHover'
|
||||
import { useSpring, animated } from "react-spring";
|
||||
import styled from "@emotion/styled";
|
||||
import { Button } from "../components";
|
||||
import useHover from "../lib/useHover";
|
||||
|
||||
const Box = styled('div')`
|
||||
border: 1px solid rgba(0,0,0,0.24);
|
||||
const Box = styled("div")`
|
||||
border: 1px solid rgba(0, 0, 0, 0.24);
|
||||
background: red;
|
||||
padding: 3px;
|
||||
margin: 5rem 0 6rem;
|
||||
`
|
||||
`;
|
||||
|
||||
const FormContainer = styled(animated.form)`
|
||||
box-shadow: 0px 0.392rem 0.618rem 0 rgba(0,0,0,0.12), 0px 0.618rem 1rem 0 rgba(0,0,0,0.07);
|
||||
box-shadow: 0px 0.392rem 0.618rem 0 rgba(0, 0, 0, 0.12),
|
||||
0px 0.618rem 1rem 0 rgba(0, 0, 0, 0.07);
|
||||
border: 0.392rem solid red;
|
||||
padding: 1rem 3rem;
|
||||
max-width: 700px;
|
||||
@ -27,11 +28,12 @@ const FormContainer = styled(animated.form)`
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
display: block;
|
||||
font-variation-settings: 'LXND' 40;
|
||||
margin: 0 0.392rem;
|
||||
font-variation-settings: "LXND" 40;
|
||||
margin: 0.392rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=text], input[type=email] {
|
||||
input[type="text"],
|
||||
input[type="email"] {
|
||||
margin: 0.618rem 0 0.618rem;
|
||||
font-family: "Lexend", Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4;
|
||||
@ -40,13 +42,16 @@ const FormContainer = styled(animated.form)`
|
||||
font-size: 1.8rem;
|
||||
-webkit-appearance: none;
|
||||
border: 0px;
|
||||
border-bottom: 1px dashed rgba(0,0,0,0.24);
|
||||
border: 1px dashed rgba(0, 0, 0, 0.24);
|
||||
background: rgba(0, 0, 0, 0.01);
|
||||
border-radius: 0.192rem;
|
||||
padding: 0.192rem 0.618rem;
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-bottom: 1px dashed rgba(0,0,0,1);
|
||||
border-bottom: 1px dashed rgba(0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
input[type=checkbox] {
|
||||
input[type="checkbox"] {
|
||||
margin-right: 0.618rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
@ -57,60 +62,81 @@ const FormContainer = styled(animated.form)`
|
||||
margin-top: 0.618rem;
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
||||
`;
|
||||
|
||||
const Form = ({ children, ...props }) => {
|
||||
const [hoverRef, hovering] = useHover()
|
||||
const [hoverRef, hovering] = useHover();
|
||||
|
||||
const animation = useSpring({
|
||||
transform: hovering ? 'translate3d(0,0,0) scale(1.024) rotate(0deg)' : 'translate3d(0,0,0) scale(1) rotate(0deg)',
|
||||
transform: hovering
|
||||
? "translate3d(0,0,0) scale(1.024) rotate(0deg)"
|
||||
: "translate3d(0,0,0) scale(1) rotate(0deg)",
|
||||
config: {
|
||||
mass: 0.24,
|
||||
tension: 200,
|
||||
friction: 5
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return (
|
||||
<FormContainer
|
||||
ref={hoverRef}
|
||||
style={animation}
|
||||
{...props}>
|
||||
<FormContainer ref={hoverRef} style={animation} {...props}>
|
||||
{children}
|
||||
</FormContainer>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const EmailForm = props => {
|
||||
return (
|
||||
<Box>
|
||||
<Form action="https://mailthis.to/info@lexend.com" method="POST">
|
||||
<input type="hidden" name="_subject" value="Lexend form submission"/>
|
||||
<input type="hidden" name="_after" value="http://www.lexend.com/"/>
|
||||
<input type="hidden" name="_honeypot" value=""/>
|
||||
<input type="hidden" name="_confirmation" value="Excellent! We'll be in touch once there are updates."/>
|
||||
<Form
|
||||
method="POST"
|
||||
action="https://gmail.us3.list-manage.com/subscribe/post?u=d209f7a4c880d02da0497bbec&id=c894fd858d"
|
||||
method="post"
|
||||
id="mc-embedded-subscribe-form"
|
||||
name="mc-embedded-subscribe-form"
|
||||
className="validate"
|
||||
target="_blank"
|
||||
noValidate
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="name">Your First Name:</label>
|
||||
<input type="text" name="FNAME" id="name" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email">Your Email:</label>
|
||||
<input type="email" name="EMAIL" id="email" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="name">Your Name:</label>
|
||||
<input type="text" name="name" id="name" placeholder="Sherlock"/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email">Your Email:</label>
|
||||
<input type="email" name="email" id="email" placeholder="sh.holmes@science.net"/>
|
||||
</div>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" name="contribute"/>
|
||||
I'd love to help contribute
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<Button value="submit">Keep me updated, send me details</Button>
|
||||
</div>
|
||||
</Form>
|
||||
<div id="mce-responses" className="clear">
|
||||
<div
|
||||
className="response"
|
||||
id="mce-error-response"
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
<div
|
||||
className="response"
|
||||
id="mce-success-response"
|
||||
style={{ display: "none" }}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{ position: "absolute", left: "-5000px" }}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
name="b_d209f7a4c880d02da0497bbec_c894fd858d"
|
||||
tabIndex="-1"
|
||||
defaultValue=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button value="submit">Subscribe & Send me these fonts</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailForm
|
||||
export default EmailForm;
|
||||
|
@ -8,10 +8,10 @@ const Footer = styled("footer")`
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
z-index: 10;
|
||||
p {
|
||||
font-size: 0.718rem;
|
||||
margin: 0 1rem 0;
|
||||
margin: 0 0.392rem 0;
|
||||
padding: 0;
|
||||
a {
|
||||
font-size: 0.8em;
|
||||
@ -29,14 +29,6 @@ export default () => {
|
||||
return (
|
||||
<Footer>
|
||||
<p>
|
||||
Type design by the talented{" "}
|
||||
<a href="http://thomasjockin.com/" target="_blank">
|
||||
Thomas Jockin
|
||||
</a>
|
||||
, endebted by the fine research of{" "}
|
||||
<a href="http://www.lexend.com" target="_blank">
|
||||
Dr. Bonnie Shaver-Troup.
|
||||
</a>{" "}
|
||||
Site design & development by{" "}
|
||||
<a href="https://micahrich.com/" target="_blank">
|
||||
Micah Rich
|
||||
|
@ -1,17 +1,17 @@
|
||||
import { css, Global } from '@emotion/core'
|
||||
import Head from 'next/head'
|
||||
import Nav from './Nav'
|
||||
import Footer from './Footer'
|
||||
import Logo from './Logo'
|
||||
import { css, Global } from "@emotion/core";
|
||||
import Head from "next/head";
|
||||
import Nav from "./Nav";
|
||||
import Footer from "./Footer";
|
||||
import Logo from "./Logo";
|
||||
|
||||
const global = css`
|
||||
@font-face {
|
||||
font-family: 'Lexend';
|
||||
src: url('static/fonts/lexendgx.woff2') format('woff2'),
|
||||
url('static/fonts/lexendgx.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-optical-sizing: auto;
|
||||
font-family: "Lexend";
|
||||
src: url("static/fonts/lexendgx.woff2") format("woff2"),
|
||||
url("static/fonts/lexendgx.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
html,
|
||||
@ -36,10 +36,39 @@ const global = css`
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
strong {
|
||||
font-weight: normal;
|
||||
color: red;
|
||||
}
|
||||
hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
margin: 4rem auto -2rem;
|
||||
max-width: 960px;
|
||||
position: relative;
|
||||
&:before {
|
||||
display: block;
|
||||
content: " ";
|
||||
border-bottom: 1px dashed red;
|
||||
font-variation-settings: "LXND" 0;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
z-index: 10;
|
||||
color: red;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.7rem;
|
||||
line-height: 1.2;
|
||||
@ -53,13 +82,14 @@ const global = css`
|
||||
margin: 3rem 0 0.618rem;
|
||||
}
|
||||
h6 {
|
||||
color: #A9A9A9;
|
||||
font-variation-settings: 'LXND' 20;
|
||||
color: #a9a9a9;
|
||||
font-variation-settings: "LXND" 20;
|
||||
line-height: 1.4;
|
||||
}
|
||||
a {
|
||||
p > a,
|
||||
h6 > a {
|
||||
color: red;
|
||||
font-variation-settings: 'LXND' 80;
|
||||
font-variation-settings: "LXND" 80;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-decoration: none;
|
||||
@ -72,12 +102,13 @@ const global = css`
|
||||
}
|
||||
p {
|
||||
max-width: 700px;
|
||||
color: rgba(0,0,0,0.76);
|
||||
color: rgba(0, 0, 0, 0.76);
|
||||
line-height: 1.6;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
ul, ol {
|
||||
color: rgba(0,0,0,0.76);
|
||||
ul,
|
||||
ol {
|
||||
color: rgba(0, 0, 0, 0.76);
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
line-height: 1.6;
|
||||
@ -90,67 +121,142 @@ const global = css`
|
||||
margin: 0.618rem 0 0.392rem;
|
||||
}
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
counter-reset: list-counter;
|
||||
li {
|
||||
counter-increment: list-counter;
|
||||
&:before {
|
||||
content: " • ";
|
||||
border: 2px solid red;
|
||||
color: red;
|
||||
border-radius: 100px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1rem;
|
||||
margin-left: -0.618rem;
|
||||
margin-right: 0.618rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
ol li:before {
|
||||
content: counter(list-counter) " ";
|
||||
}
|
||||
pre {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.06);
|
||||
background: rgba(0, 0, 0, 0.06);
|
||||
border-radius: 0.292rem;
|
||||
padding: 0.618rem;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
code {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.8rem;
|
||||
border: 1px solid rgba(0,0,0,0.12);
|
||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||
border-radius: 0.192rem;
|
||||
padding: 0.392rem 0.618rem;
|
||||
background: white;
|
||||
overflow-x: auto;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export default ({ children }) => {
|
||||
return (
|
||||
<>
|
||||
<Global
|
||||
styles={global}
|
||||
/>
|
||||
<Global styles={global} />
|
||||
<Head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="https://thomasjockin.github.io/lexend/static/favicon/apple-touch-icon.png"/>
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="https://thomasjockin.github.io/lexend/static/favicon/favicon-32x32.png"/>
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="https://thomasjockin.github.io/lexend/static/favicon/favicon-16x16.png"/>
|
||||
<link rel="manifest" href="https://thomasjockin.github.io/lexend/static/favicon/site.webmanifest"/>
|
||||
<link rel="mask-icon" href="https://thomasjockin.github.io/lexend/static/favicon/safari-pinned-tab.svg" color="#5bbad5"/>
|
||||
<link rel="shortcut icon" href="https://thomasjockin.github.io/lexend/static/favicon/favicon.ico"/>
|
||||
<meta name="msapplication-TileColor" content="#b91d47"/>
|
||||
<meta name="msapplication-config" content="https://thomasjockin.github.io/lexend/static/favicon/browserconfig.xml"/>
|
||||
<meta name="theme-color" content="#ffffff"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="https://thomasjockin.github.io/lexend/static/favicon/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="https://thomasjockin.github.io/lexend/static/favicon/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="https://thomasjockin.github.io/lexend/static/favicon/favicon-16x16.png"
|
||||
/>
|
||||
<link
|
||||
rel="manifest"
|
||||
href="https://thomasjockin.github.io/lexend/static/favicon/site.webmanifest"
|
||||
/>
|
||||
<link
|
||||
rel="mask-icon"
|
||||
href="https://thomasjockin.github.io/lexend/static/favicon/safari-pinned-tab.svg"
|
||||
color="#5bbad5"
|
||||
/>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="https://thomasjockin.github.io/lexend/static/favicon/favicon.ico"
|
||||
/>
|
||||
<meta name="msapplication-TileColor" content="#b91d47" />
|
||||
<meta
|
||||
name="msapplication-config"
|
||||
content="https://thomasjockin.github.io/lexend/static/favicon/browserconfig.xml"
|
||||
/>
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
|
||||
<title>Lexend — Change the way the world reads.</title>
|
||||
<meta name="title" content="Lexend — Change the way the world reads." />
|
||||
<meta
|
||||
name="description"
|
||||
content="Lexend — Change the way the world reads."
|
||||
/>
|
||||
|
||||
<title>Lexend — A Variable Font Designed for Reading</title>
|
||||
<meta name="title" content="Lexend — A Variable Font Designed for Reading"/>
|
||||
<meta name="description" content="Lexend is a variable font empirically shown to significantly improve reading-proficiency."/>
|
||||
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content="https://thomasjockin.github.io/lexend/"/>
|
||||
<meta property="og:title" content="Lexend — A Variable Font Designed for Reading"/>
|
||||
<meta property="og:description" content="Lexend is a variable font empirically shown to significantly improve reading-proficiency."/>
|
||||
<meta property="og:image" content="https://thomasjockin.github.io/lexend/static/social/lexend.jpg"/>
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image"/>
|
||||
<meta property="twitter:url" content="https://thomasjockin.github.io/lexend/"/>
|
||||
<meta property="twitter:title" content="Lexend — A Variable Font Designed for Reading"/>
|
||||
<meta property="twitter:description" content="Lexend is a variable font empirically shown to significantly improve reading-proficiency."/>
|
||||
<meta property="twitter:image" content="https://thomasjockin.github.io/lexend/static/social/lexend.jpg"/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta
|
||||
property="og:url"
|
||||
content="https://thomasjockin.github.io/lexend/"
|
||||
/>
|
||||
<meta
|
||||
property="og:title"
|
||||
content="Lexend — Change the way the world reads."
|
||||
/>
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Lexend — Change the way the world reads."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://thomasjockin.github.io/lexend/static/social/lexend-v2.png"
|
||||
/>
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta
|
||||
property="twitter:url"
|
||||
content="https://thomasjockin.github.io/lexend/"
|
||||
/>
|
||||
<meta
|
||||
property="twitter:title"
|
||||
content="Lexend — Change the way the world reads."
|
||||
/>
|
||||
<meta
|
||||
property="twitter:description"
|
||||
content="Lexend — Change the way the world reads."
|
||||
/>
|
||||
<meta
|
||||
property="twitter:image"
|
||||
content="https://thomasjockin.github.io/lexend/static/social/lexend-v2.png"
|
||||
/>
|
||||
</Head>
|
||||
<Nav>
|
||||
<Logo/>
|
||||
<Logo />
|
||||
</Nav>
|
||||
{ children }
|
||||
<Footer/>
|
||||
<div className="content">{children}</div>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
@ -1,49 +1,74 @@
|
||||
import styled from "@emotion/styled";
|
||||
import { useTrail, animated } from "react-spring";
|
||||
import { motion } from "framer-motion";
|
||||
import { useState } from "react";
|
||||
import useHover from '../lib/useHover'
|
||||
import useHover from "../lib/useHover";
|
||||
|
||||
const config = { mass: 0.2, tension: 100, friction: 10 }
|
||||
const items = "LEXEND".split("")
|
||||
const isE = letter => letter === "E"
|
||||
const config = { mass: 0.2, tension: 100, friction: 10 };
|
||||
const letters = "LEXEND".split("");
|
||||
const isE = letter => letter === "E";
|
||||
|
||||
const list = {
|
||||
visible: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
},
|
||||
hidden: {
|
||||
transition: {
|
||||
staggerChildren: 0.1
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const items = {
|
||||
hidden: e => ({
|
||||
width: e ? 0 : "1rem",
|
||||
opacity: e ? 0 : 1,
|
||||
fontVariationSettings: "'LXND' 0"
|
||||
}),
|
||||
visible: {
|
||||
width: "1.618rem",
|
||||
opacity: 1,
|
||||
fontVariationSettings: "'LXND' 100"
|
||||
}
|
||||
};
|
||||
|
||||
const spring = {
|
||||
type: "spring",
|
||||
damping: 10,
|
||||
stiffness: 90,
|
||||
mass: 1
|
||||
};
|
||||
|
||||
export default () => {
|
||||
|
||||
const [hoverRef, hovering] = useHover()
|
||||
|
||||
const trail = useTrail(items.length, {
|
||||
config,
|
||||
opacity: hovering ? 1 : 0,
|
||||
x: hovering ? 0 : 20,
|
||||
width: hovering ? 25 : 0,
|
||||
fontVariationSettings: hovering ? "'LXND' 100" : "'LXND' 0",
|
||||
from: {
|
||||
opacity: 0,
|
||||
x: 20,
|
||||
width: 0,
|
||||
padding: 0,
|
||||
fontVariationSettings: "'LXND' 0"
|
||||
}
|
||||
});
|
||||
const [hoverRef, hovering] = useHover();
|
||||
|
||||
return (
|
||||
<Logo ref={hoverRef}>
|
||||
{trail.map(({ x, width, opacity, ...rest }, index) => (
|
||||
<Span key={`logo-${items[index]}`} style={{
|
||||
x: isE(items[index]) ? x : null,
|
||||
width: isE(items[index]) ? width : null,
|
||||
opacity: isE(items[index]) ? opacity : null,
|
||||
...rest }}
|
||||
>
|
||||
{items[index]}
|
||||
</Span>
|
||||
))}
|
||||
|
||||
<Logo>
|
||||
<motion.a
|
||||
href="#download"
|
||||
ref={hoverRef}
|
||||
initial="hidden"
|
||||
animate={hovering ? "visible" : "hidden"}
|
||||
variants={list}
|
||||
>
|
||||
{letters.map((letter, index) => (
|
||||
<Span
|
||||
letter={letter}
|
||||
key={`${letter}-${index}`}
|
||||
custom={letter === "E"}
|
||||
variants={items}
|
||||
transition={spring}
|
||||
>
|
||||
{letter}
|
||||
</Span>
|
||||
))}
|
||||
</motion.a>
|
||||
</Logo>
|
||||
);
|
||||
};
|
||||
|
||||
const Logo = styled("h1")`
|
||||
const Logo = styled(motion.h1)`
|
||||
font-size: 1.4rem;
|
||||
cursor: default;
|
||||
background: red;
|
||||
@ -53,10 +78,21 @@ const Logo = styled("h1")`
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
a {
|
||||
color: white;
|
||||
span:first-of-type {
|
||||
margin-right: -2px;
|
||||
}
|
||||
span:last-of-type {
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Span = styled(animated.span)`
|
||||
const Span = styled(motion.span)`
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
&:nth-of-type(4) { right: -1px; }
|
||||
&:nth-of-type(4) {
|
||||
right: -1px;
|
||||
}
|
||||
`;
|
||||
|
31
components/LogoList.js
Normal file
@ -0,0 +1,31 @@
|
||||
import styled from "@emotion/styled";
|
||||
|
||||
const List = styled("div")`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
padding: 0 1rem;
|
||||
margin: 1rem auto;
|
||||
max-width: 1200px;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
const Logo = styled("img")`
|
||||
padding: 0.392rem;
|
||||
margin: 2rem auto;
|
||||
flex: 1 1 auto;
|
||||
max-height: 3.618rem;
|
||||
`;
|
||||
|
||||
const LogoList = () => (
|
||||
<List>
|
||||
<Logo src="/static/images/logos/adobe.svg" />
|
||||
<Logo src="/static/images/logos/stanford.svg" />
|
||||
<Logo src="/static/images/logos/google.svg" />
|
||||
<Logo src="/static/images/logos/apple.svg" />
|
||||
<Logo src="/static/images/logos/microsoft.svg" />
|
||||
<Logo src="/static/images/logos/hp.svg" />
|
||||
</List>
|
||||
);
|
||||
export default LogoList;
|
134
components/TeamHeadshots.js
Normal file
@ -0,0 +1,134 @@
|
||||
import styled from "@emotion/styled";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
const List = styled("div")`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem auto;
|
||||
div:nth-child(1) {
|
||||
order: 1;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
order: 3;
|
||||
}
|
||||
div:nth-child(3) {
|
||||
order: 2;
|
||||
}
|
||||
p {
|
||||
font-size: 0.918rem;
|
||||
max-width: 600px;
|
||||
}
|
||||
@media (max-width: 1600px) {
|
||||
max-width: 1440px;
|
||||
div:nth-child(1) {
|
||||
order: 1;
|
||||
z-index: 11;
|
||||
}
|
||||
div:nth-child(2) {
|
||||
order: 2;
|
||||
}
|
||||
div:nth-child(3) {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Headshot = styled(motion.div)`
|
||||
padding: 0;
|
||||
margin: 2rem;
|
||||
flex: 1 1 10%;
|
||||
background: url(${props => props.src}) no-repeat center center;
|
||||
background-size: cover;
|
||||
border: 0.192rem solid white;
|
||||
min-height: 70vh;
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
border-radius: 0.618rem;
|
||||
position: sticky;
|
||||
top: 3rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
transition: all 180ms ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
|
||||
0 28px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 5rem 1rem 1rem;
|
||||
background: rgba(0, 0, 0, 0.24);
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.8));
|
||||
color: white;
|
||||
text-shadow: 0px 1px 0px rgba(0,0,0,0.7);
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-variation-settings: 'LXND' 64;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
line-height: 1.7;
|
||||
content: "${props => props.name}";
|
||||
text-align: center;
|
||||
}
|
||||
&:before {
|
||||
font-size: 0.718rem;
|
||||
font-variation-settings: 'LXND' 100;
|
||||
padding: 3rem 1rem 2.292rem;
|
||||
z-index: 11;
|
||||
background: transparent;
|
||||
}
|
||||
&:after {
|
||||
z-index: 10;
|
||||
font-size: 0.618rem;
|
||||
color: rgba(255,255,255,0.7);
|
||||
letter-spacing: 3px;
|
||||
font-variation-settings: 'LXND' 50;
|
||||
content: "${props => props.title}";
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
position: relative;
|
||||
min-height: 40vh;
|
||||
position: relative;
|
||||
margin: 1rem auto 4rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const spring = {
|
||||
type: "spring",
|
||||
damping: 5,
|
||||
stiffness: 80,
|
||||
mass: 2
|
||||
};
|
||||
|
||||
const TeamHeadshots = ({ children }) => {
|
||||
return (
|
||||
<List>
|
||||
<Headshot
|
||||
name="Dr. Bonnie Shaver-Troup"
|
||||
title="Educational Therapist"
|
||||
src="/static/images/bonnie.jpeg"
|
||||
transition={spring}
|
||||
initial={{ y: 0, rotate: -2, scale: 0.99 }}
|
||||
whileHover={{ y: -10, rotate: -4, scale: 1 }}
|
||||
/>
|
||||
<Headshot
|
||||
name="Thomas Jockin"
|
||||
title="Type Designer & Educator"
|
||||
src="/static/images/thomas-jockin.jpg"
|
||||
transition={spring}
|
||||
initial={{ y: 0, rotate: 1, scale: 0.99 }}
|
||||
whileHover={{ y: -10, rotate: 3, scale: 1 }}
|
||||
/>
|
||||
{children}
|
||||
</List>
|
||||
);
|
||||
};
|
||||
export default TeamHeadshots;
|
@ -1,70 +1,114 @@
|
||||
import styled from '@emotion/styled'
|
||||
import { css } from '@emotion/core'
|
||||
import styled from "@emotion/styled";
|
||||
import { jsx, css, keyframes } from "@emotion/core";
|
||||
|
||||
export const Flex = styled('section')`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 4rem auto;
|
||||
align-items: flex-start;
|
||||
`
|
||||
const fadeIn = keyframes`
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
export const Right = styled('main')`
|
||||
margin: 1rem auto;
|
||||
padding: 0 1rem;
|
||||
max-width: ${ props => props.width || '45%'};
|
||||
width: ${ props => props.width || 'auto'};
|
||||
min-width: 400px;
|
||||
${ props => props.sticky && css`
|
||||
position: sticky;
|
||||
top: ${ props.top || '1rem'};
|
||||
`}
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
position: static;
|
||||
}
|
||||
`
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Left = styled('main')`
|
||||
margin: 2.618rem auto;
|
||||
padding: 0 1rem;
|
||||
max-width: ${ props => props.width || '45%'};
|
||||
width: ${ props => props.width || 'auto'};
|
||||
height: ${ props => props.height || 'auto'};
|
||||
${ props => props.sticky && css`
|
||||
position: sticky;
|
||||
top: ${ props.top || '1rem'};
|
||||
`}
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
position: static;
|
||||
}
|
||||
`
|
||||
export const Banner = styled("h6")`
|
||||
background: red;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
margin: 0 auto -6.618rem;
|
||||
font-size: 0.818rem;
|
||||
line-height: 1.6;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
strong {
|
||||
color: white;
|
||||
font-variation-settings: "LXND" 100;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 85%;
|
||||
padding: 0 0.292rem;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
text-align: left;
|
||||
}
|
||||
`;
|
||||
export const Flex = styled("section")`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: ${props => props.margin || "4rem auto"};
|
||||
align-items: ${props => props.align || "flex-start"};
|
||||
justify-content: ${props => props.justify || "flex-start"};
|
||||
max-width: 1440px;
|
||||
`;
|
||||
|
||||
export const Right = styled("main")`
|
||||
margin: 1rem auto;
|
||||
padding: 0 1rem;
|
||||
max-width: ${props => props.width || "720px"};
|
||||
width: ${props => props.width || "auto"};
|
||||
min-width: 400px;
|
||||
${props =>
|
||||
props.sticky &&
|
||||
css`
|
||||
position: sticky;
|
||||
top: ${props.top || "1rem"};
|
||||
`}
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
min-width: auto;
|
||||
position: static;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Left = styled("main")`
|
||||
margin: 2.618rem auto;
|
||||
padding: 0 1rem;
|
||||
max-width: ${props => props.width || "720px"};
|
||||
width: ${props => props.width || "auto"};
|
||||
height: ${props => props.height || "auto"};
|
||||
${props =>
|
||||
props.sticky &&
|
||||
css`
|
||||
position: sticky;
|
||||
top: ${props.top || "1rem"};
|
||||
`}
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
position: static;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Button = styled("button")`
|
||||
-webkit-appearance:none;
|
||||
font-family: "Lexend", Helvetica, Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
padding: 0.618em 1em;
|
||||
transition: all 300ms ease-in;
|
||||
outline: none;
|
||||
min-width: 70px;
|
||||
background: ${props => props.started ? 'white' : 'red'};
|
||||
color: ${props => props.started ? 'black' : 'white'};
|
||||
@media (max-width: 1020px) {
|
||||
width: 100%;
|
||||
margin-top: 0.392rem;
|
||||
}
|
||||
`
|
||||
-webkit-appearance: none;
|
||||
font-family: "Lexend", Helvetica, Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
padding: 0.618em 1em;
|
||||
transition: all 300ms ease-in;
|
||||
outline: none;
|
||||
min-width: 70px;
|
||||
background: ${props => (props.started ? "white" : "red")};
|
||||
color: ${props => (props.started ? "black" : "white")};
|
||||
@media (max-width: 1020px) {
|
||||
width: 100%;
|
||||
margin-top: 0.392rem;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Intro = styled('section')`
|
||||
export const Section = styled("section")`
|
||||
padding: 1rem;
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
${props =>
|
||||
props.margin &&
|
||||
css`
|
||||
margin: ${props.margin};
|
||||
`}
|
||||
h1 {
|
||||
font-size: 7.2vw;
|
||||
line-height: 1.1;
|
||||
@ -76,34 +120,63 @@ export const Intro = styled('section')`
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
width: 100%;
|
||||
font-size: 12vw;
|
||||
font-size: 10vw;
|
||||
line-height: 1.2;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
h2, h3, h4, h5, h6 {
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
max-width: 60%;
|
||||
margin: 1rem auto 0.618rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.4rem;
|
||||
line-height: 1.4;
|
||||
font-size: 3.2rem;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin-top: 7rem;
|
||||
font-size: 2.1rem;
|
||||
@media (max-width: 960px) {
|
||||
font-size: 1.8rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: -3.618rem;
|
||||
margin-top: 3rem;
|
||||
font-size: 1.4rem;
|
||||
strong {
|
||||
color: red;
|
||||
font-weight: normal;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
font-size: 0.918rem;
|
||||
margin-bottom: -6rem;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
max-width: 30%;
|
||||
margin: 0 auto;
|
||||
font-variation-settings: 'LXND' 20;
|
||||
font-variation-settings: "LXND" 20;
|
||||
@media (max-width: 960px) {
|
||||
max-width: 88%;
|
||||
}
|
||||
a {
|
||||
font-variation-settings: 'LXND' 80;
|
||||
font-variation-settings: "LXND" 80;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-decoration: none;
|
||||
@ -116,8 +189,8 @@ export const Intro = styled('section')`
|
||||
}
|
||||
|
||||
p {
|
||||
font-variation-settings: 'LXND' 10;
|
||||
color: rgba(0,0,0,0.76);
|
||||
font-variation-settings: "LXND" 10;
|
||||
color: rgba(0, 0, 0, 0.76);
|
||||
line-height: 1.6;
|
||||
font-size: 1.2rem;
|
||||
max-width: 800px;
|
||||
@ -130,32 +203,71 @@ export const Intro = styled('section')`
|
||||
a {
|
||||
color: red;
|
||||
}
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
max-width: 720px;
|
||||
margin: 1.618rem auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const QuoteContainer = styled("div")`
|
||||
margin: 0.618rem 1.618rem;
|
||||
flex: 1 1 45%;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
&:nth-of-type(1) {
|
||||
.image {
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
blockquote {
|
||||
font-weight: normal;
|
||||
display: block;
|
||||
box-shadow: 0.392rem 0.618rem 1rem rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0;
|
||||
max-width: 760px;
|
||||
background: white;
|
||||
padding: 0.618rem 2.618rem;
|
||||
padding: 0;
|
||||
margin: 4rem auto 1rem;
|
||||
position: relative;
|
||||
left: -2rem;
|
||||
border: 0.618rem solid red;
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
flex: 1 1 auto;
|
||||
font-size: 1rem;
|
||||
line-height: 1.618;
|
||||
margin: 3rem 1rem 1rem;
|
||||
}
|
||||
.image {
|
||||
order: 2;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 200px;
|
||||
max-width: 530px;
|
||||
background: url(${props => props.background}) no-repeat center center;
|
||||
background-size: cover;
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
background: none;
|
||||
max-width: 100%;
|
||||
order: 1 !important;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
max-width: 100%;
|
||||
margin: 0 1rem 3rem;
|
||||
font-variation-settings: "LXND" 20;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
&:before {
|
||||
font-weight: normal;
|
||||
content:"“";
|
||||
content: "“";
|
||||
font-size: 9.6rem;
|
||||
position: absolute;
|
||||
top: -4.618rem;
|
||||
@ -164,26 +276,65 @@ export const Intro = styled('section')`
|
||||
}
|
||||
&:after {
|
||||
font-weight: normal;
|
||||
content:"”";
|
||||
content: "”";
|
||||
font-size: 9.6rem;
|
||||
position: absolute;
|
||||
bottom: -8.618rem;
|
||||
right: 1.618rem;
|
||||
color: black;
|
||||
}
|
||||
img {
|
||||
max-width: 400px;
|
||||
position: absolute;
|
||||
right: -40%;
|
||||
bottom: -4%;
|
||||
filter: drop-shadow(0.618rem 0.618rem 0.392rem rgba(0,0,0,0.12));
|
||||
@media (max-width: 960px) {
|
||||
display: none;
|
||||
max-width: 220px;
|
||||
position: static;
|
||||
margin-top: -8rem;
|
||||
margin-left: 4rem;
|
||||
@media (max-width: 1220px) {
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
display: block;
|
||||
background: none !important;
|
||||
padding: 0 !important;
|
||||
.image {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
export const Intro = styled("section")`
|
||||
background: red;
|
||||
padding: 20vh 10vw;
|
||||
h1 {
|
||||
animation: ${fadeIn} 900ms ease-in-out;
|
||||
font-size: 3.2vw;
|
||||
line-height: 1.392;
|
||||
color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
strong {
|
||||
color: white;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
padding: 8vh 6vw;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Quote = ({ source, children, background, ...props }) => (
|
||||
<QuoteContainer background={background} {...props}>
|
||||
<blockquote>
|
||||
<div className="image">
|
||||
<img src={background} />
|
||||
</div>
|
||||
<div>
|
||||
{children}
|
||||
<h6>— {source}</h6>
|
||||
</div>
|
||||
</blockquote>
|
||||
</QuoteContainer>
|
||||
);
|
||||
|
@ -1,69 +1,77 @@
|
||||
import { useState, useEffect, createContext, useContext } from 'react'
|
||||
import { sample, randomNumber } from '../lib/array.js'
|
||||
import useVariableFont from "react-variable-fonts"
|
||||
import texts from '../data/texts'
|
||||
import ms from 'ms'
|
||||
import TypeChoices from './useTypeChoices'
|
||||
|
||||
const ReadingSimulatorContext = createContext()
|
||||
import { useState, useEffect, createContext, useContext } from "react";
|
||||
import { sample, randomNumber } from "../lib/array.js";
|
||||
import useVariableFont from "react-variable-fonts";
|
||||
import texts from "../data/texts";
|
||||
import ms from "ms";
|
||||
import TypeChoices from "./useTypeChoices";
|
||||
|
||||
const ReadingSimulatorContext = createContext();
|
||||
|
||||
export const ReadingSimulatorProvider = ({ children }) => {
|
||||
const { content } = useContext(TypeChoices);
|
||||
const words = content.match(/\b(\w+\W+)/g);
|
||||
|
||||
const { content } = useContext(TypeChoices)
|
||||
const words = content.match(/\b(\w+\W+)/g)
|
||||
const [wpm, setWPM] = useState(100);
|
||||
const [index, setIndex] = useState(0);
|
||||
const [started, setStarted] = useState(false);
|
||||
const [timer, setTimer] = useState(0);
|
||||
const [errors, setErrors] = useState([]);
|
||||
|
||||
const [wpm, setWPM] = useState(300)
|
||||
const [index, setIndex] = useState(0)
|
||||
const [started, setStarted] = useState(false)
|
||||
const [timer, setTimer] = useState(0)
|
||||
const [errors, setErrors] = useState([])
|
||||
useEffect(
|
||||
() => {
|
||||
const numberOfErrors = randomNumber(words) + 7;
|
||||
let randomArrayOfIndexes = sample(words, numberOfErrors);
|
||||
randomArrayOfIndexes = randomArrayOfIndexes.filter(i => i !== 0);
|
||||
setErrors(randomArrayOfIndexes);
|
||||
},
|
||||
[content]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const numberOfErrors = randomNumber(words) + 7
|
||||
let randomArrayOfIndexes = sample(
|
||||
words,
|
||||
numberOfErrors
|
||||
)
|
||||
randomArrayOfIndexes = randomArrayOfIndexes.filter(i => i !== 0)
|
||||
setErrors(randomArrayOfIndexes)
|
||||
}, [content])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const wpms = ms(`${1/wpm}m`)
|
||||
if (started) {
|
||||
if (index >= words.length - 1) {
|
||||
setStarted(false)
|
||||
useEffect(
|
||||
() => {
|
||||
const wpms = ms(`${1 / wpm}m`);
|
||||
if (started) {
|
||||
if (index >= words.length - 1) {
|
||||
setStarted(false);
|
||||
}
|
||||
if (index <= words.length - 1) {
|
||||
const wordCounter = setInterval(() => {
|
||||
setIndex(index + 1);
|
||||
setTimer(index * wpms);
|
||||
}, wpms);
|
||||
return () => clearInterval(wordCounter);
|
||||
}
|
||||
}
|
||||
if (index <= words.length - 1) {
|
||||
const wordCounter = setInterval(() => {
|
||||
setIndex(index + 1)
|
||||
setTimer(index*wpms)
|
||||
}, wpms)
|
||||
return () => clearInterval(wordCounter)
|
||||
}
|
||||
}
|
||||
}, [started, index])
|
||||
},
|
||||
[started, index]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setIndex(0)
|
||||
setTimer(0)
|
||||
return () => {}
|
||||
}, [wpm])
|
||||
useEffect(
|
||||
() => {
|
||||
setIndex(0);
|
||||
setTimer(0);
|
||||
return () => {};
|
||||
},
|
||||
[wpm]
|
||||
);
|
||||
|
||||
return (
|
||||
<ReadingSimulatorContext.Provider
|
||||
value={{
|
||||
words,
|
||||
wpm,
|
||||
setWPM,
|
||||
index,
|
||||
setIndex,
|
||||
errors,
|
||||
timer,
|
||||
started,
|
||||
setStarted
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</ReadingSimulatorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
return <ReadingSimulatorContext.Provider value={{
|
||||
words,
|
||||
wpm,
|
||||
setWPM,
|
||||
index,
|
||||
setIndex,
|
||||
errors,
|
||||
timer,
|
||||
started,
|
||||
setStarted
|
||||
}}>{children}</ReadingSimulatorContext.Provider>
|
||||
}
|
||||
|
||||
export default ReadingSimulatorContext
|
||||
export default ReadingSimulatorContext;
|
||||
|
@ -1,9 +1,8 @@
|
||||
const withMDX = require('@zeit/next-mdx')({
|
||||
const withMDX = require("@zeit/next-mdx")({
|
||||
extension: /\.mdx?$/
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
module.exports = withMDX({
|
||||
pageExtensions: ['js', 'jsx', 'mdx'],
|
||||
assetPrefix: process.env.NODE_ENV === 'production' ? '/lexend' : ''
|
||||
})
|
||||
pageExtensions: ["js", "jsx", "mdx"]
|
||||
// assetPrefix: process.env.NODE_ENV === "production" ? "/lexend" : ""
|
||||
});
|
||||
|
5
now.json
@ -1,4 +1,7 @@
|
||||
{
|
||||
"version": 2,
|
||||
"builds": [{ "src": "package.json", "use": "@now/static-build" }]
|
||||
"builds": [{ "src": "package.json", "use": "@now/static-build" }],
|
||||
"env": {
|
||||
"ASSETPREFIX": ""
|
||||
}
|
||||
}
|
||||
|
@ -21,9 +21,11 @@
|
||||
"@nivo/bar": "^0.58.0",
|
||||
"@zeit/next-mdx": "^1.2.0",
|
||||
"babel-plugin-emotion": "^10.0.9",
|
||||
"framer-motion": "^1.6.5",
|
||||
"markdown-to-jsx": "^6.9.4",
|
||||
"ms": "^2.1.1",
|
||||
"next": "^8.1.0",
|
||||
"next-ga": "^2.3.4",
|
||||
"parse-ms": "^2.1.0",
|
||||
"pretty-ms": "^5.0.0",
|
||||
"react": "^16.8.6",
|
||||
|
13
pages/_app.js
Normal file
@ -0,0 +1,13 @@
|
||||
import React from "react";
|
||||
import App from "next/app";
|
||||
import Router from "next/router";
|
||||
import withGA from "next-ga";
|
||||
|
||||
class MyApp extends App {
|
||||
render() {
|
||||
const { Component, pageProps } = this.props;
|
||||
return <Component {...pageProps} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default withGA("UA-147631342-1", Router)(MyApp);
|
275
pages/index.mdx
@ -1,99 +1,179 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import useVariableFont from "react-variable-fonts"
|
||||
import { Flex, Left, Right, Intro } from '../components'
|
||||
import { TypeChoicesProvider } from '../lib/useTypeChoices'
|
||||
import { ReadingSimulatorProvider } from '../lib/useReadingSimulator'
|
||||
import AnimatedNumber from '../components/AnimatedNumber'
|
||||
import styled from '@emotion/styled'
|
||||
import texts from '../data/texts'
|
||||
import Page from '../components/Page'
|
||||
import Layout from '../components/Layout'
|
||||
import ReadingSimulator from '../components/ReadingSimulator'
|
||||
import { TotalNumberOfWords, TotalAmountOfTime, TotalNumberOfErrors, TotalNumberOfCorrectWords, TotalWordsCorrectPerMinute } from '../components/ReadingStatistics'
|
||||
import Text from '../components/Text'
|
||||
import Tester from '../components/Tester'
|
||||
import Chart from '../components/Chart'
|
||||
import ChartStats from '../components/ChartStats'
|
||||
import Form from '../components/EmailForm'
|
||||
import ArabicExample from '../components/ArabicExample'
|
||||
import { css } from '@emotion/core'
|
||||
import { useState, useEffect } from "react";
|
||||
import useVariableFont from "react-variable-fonts";
|
||||
import { Flex, Left, Right, Section, Intro, Quote, Banner } from "../components";
|
||||
import { TypeChoicesProvider } from "../lib/useTypeChoices";
|
||||
import { ReadingSimulatorProvider } from "../lib/useReadingSimulator";
|
||||
import AnimatedNumber from "../components/AnimatedNumber";
|
||||
import AnimatedLexend from "../components/AnimatedLexend";
|
||||
import LogoList from "../components/LogoList";
|
||||
import TeamHeadshots from "../components/TeamHeadshots";
|
||||
import styled from "@emotion/styled";
|
||||
import texts from "../data/texts";
|
||||
import Page from "../components/Page";
|
||||
import Layout from "../components/Layout";
|
||||
import ReadingSimulator from "../components/ReadingSimulator";
|
||||
import {
|
||||
TotalNumberOfWords,
|
||||
TotalAmountOfTime,
|
||||
TotalNumberOfErrors,
|
||||
TotalNumberOfCorrectWords,
|
||||
TotalWordsCorrectPerMinute
|
||||
} from "../components/ReadingStatistics";
|
||||
import Text from "../components/Text";
|
||||
import Tester from "../components/Tester";
|
||||
import Chart from "../components/Chart";
|
||||
import ChartStats from "../components/ChartStats";
|
||||
import Form from "../components/EmailForm";
|
||||
import ArabicExample from "../components/ArabicExample";
|
||||
import AnimatedText from "../components/AnimatedText";
|
||||
|
||||
|
||||
<Intro>
|
||||
|
||||
# Lexend is a variable font empirically shown to significantly improve reading-proficiency.
|
||||
|
||||
As prescription eyeglasses achieve proficiency for persons with short-sightedness, Lexend employs variable font technology to prescribe a personalized axis setting according to the Shaver-Troup Formulations.
|
||||
|
||||
> ![](https://thomasjockin.github.io/lexend/static/images/noordzji-cover-cut.png) The word is the condition for reading. The word consists of both white and black forms in rhythm units. If the rhythm is weak; the word is poorly formed. If the rhythm is absent; there is no word. Reading is a spatial manner of intervals in both length and breadth.... Ignoring the white by pedagogy places civilization at risk. What is civilization if not the cultural community dependent on reading?
|
||||
|
||||
###### Excerpts from “The Stroke” by Gerrit Noordzij
|
||||
|
||||
# The US Department of Education reports that **only <AnimatedNumber key="us-dept-of-ed">36</AnimatedNumber>% of students are reading-proficient.** This would appear to confirm Noordzij’s hyperbolic warning.
|
||||
|
||||
###### [Source](https://www.nationsreportcard.gov/reading_math_2015/#reading?grade=4) • Retrieved 30 August 2017
|
||||
|
||||
# What if we could <strong><AnimatedText>change the way the world reads—</AnimatedText></strong> starting with a font designed to adjust specifically for your needs?
|
||||
|
||||
</Intro>
|
||||
|
||||
<Flex>
|
||||
<Section>
|
||||
|
||||
### For more than <strong><AnimatedNumber key="dept-of-ed-years">60</AnimatedNumber> years</strong> the **U.S. Department of Education** has found that nearly <strong><AnimatedNumber key="dept-of-ed-70">70%</AnimatedNumber></strong> of the population experiences **some reading difficulty.**
|
||||
|
||||
<Flex justify="center">
|
||||
|
||||
<Quote source="Lise, 37, Tech Business Strategist" position="left" background="https://source.unsplash.com/B8qIaoeKcfU/900x900" title="Photo by Joel Muniz (unsplash.com/@jmuniz)">
|
||||
|
||||
I read for a living — it’s basically been exhausting. It’s a relief to be able to read without stress, without my eyes getting tired.
|
||||
|
||||
</Quote>
|
||||
|
||||
|
||||
<Quote source="Travis, 16, High School Sophomore" background="/static/images/travis.jpg" title="Photo by Thought Catalog (unsplash.com/@thoughtcatalog)">
|
||||
|
||||
Recently, I started using LEXEND to study my Spanish vocabulary list and raised my Spanish grade from a D to a B in just a few weeks.
|
||||
|
||||
</Quote>
|
||||
|
||||
|
||||
<Quote source="Mrs. C, 1st Grade Teacher, California" width="820px" background="/static/images/c.jpg" title="Photo by Emmanuel Phaeton (unsplash.com/@phaeton_vision)">
|
||||
|
||||
With Lexend, my student was reading and _loving_ it. Her participation in the classroom has increased to the point where I have to remind her to “be quiet” in class. Her self-esteem has improved measurably and she is obviously proud of what she is now able to do.
|
||||
|
||||
</Quote>
|
||||
|
||||
</Flex>
|
||||
|
||||
</Section>
|
||||
|
||||
|
||||
<Flex margin="0 auto">
|
||||
<Left sticky>
|
||||
<Page>
|
||||
<ReadingSimulator family="Lexend" disabled={['family']} />
|
||||
<ReadingSimulator family="Times New Roman" disabled={['family']} />
|
||||
</Page>
|
||||
</Left>
|
||||
|
||||
<Right>
|
||||
|
||||
## Reading-Proficiency is measured in fluency.
|
||||
## What makes a good reader?
|
||||
|
||||
There is a consensus that reading fluency is one of the defining characteristics of good readers, and a lack of fluency is a common characteristic of poor readers.
|
||||
There is a consensus among researchers and educators that reading fluency is one of the defining characteristics of good readers, and a lack of fluency is a common characteristic of poor readers.
|
||||
|
||||
Differences in reading fluency not only distinguish good readers from poor, but a lack of reading fluency is also a reliable predictor of reading comprehension problems. Once struggling readers learn sound-symbol relationships through intervention and become accurate decoders, their lack of fluency emerges as the next hurdle they face on their way to reading proficiency.
|
||||
This is important — because it means we’re approaching this problem from an already established perspective, something that educators have been using for decades.
|
||||
|
||||
This lack of fluent reading is a problem for poor readers because they tend to read in a labored, disconnected fashion with a focus on decoding at the word level that makes comprehension of the text difficult, if not impossible.
|
||||
Differences in reading fluency not only distinguish good readers from poor, but a lack of reading fluency is also a reliable predictor of reading comprehension problems.
|
||||
|
||||
Once struggling readers learn the relationship between sounds and letters, their lack of fluency emerges as the next hurdle they face on their way to reading proficiency.
|
||||
|
||||
This lack of fluent reading is a problem for poor readers because they tend to read in a labored, disconnected fashion — with a focus on decoding at the word level that makes comprehension of the text difficult, if not impossible.
|
||||
|
||||
|
||||
###### [Source](https://www.fcrr.org/publications/publicationspdffiles/hudson_lane_pullen_readingfluency_2005.pdf)
|
||||
###### [Source • The Reading Teacher](https://www.fcrr.org/publications/publicationspdffiles/hudson_lane_pullen_readingfluency_2005.pdf)
|
||||
|
||||
## Fluency is measured in Words Correct Per Minute.
|
||||
|
||||
A student reads a story with <TotalNumberOfWords/> words in <TotalAmountOfTime/>. She made <TotalNumberOfErrors/> errors. To determine WCPM (Words Correct Per Minute):
|
||||
|
||||
1. <p>Count the total number of words.</p>
|
||||
<pre><code><TotalNumberOfWords/> words</code></pre>
|
||||
2. <p>Count the number of mistakes.</p>
|
||||
<pre><code><TotalNumberOfErrors/> mistakes</code></pre>
|
||||
3. <p>Take the number of words minus the number of mistakes = number of words read correctly.</p>
|
||||
<pre><code><TotalNumberOfWords/> words - <TotalNumberOfErrors/> mistakes = <TotalNumberOfCorrectWords/> correct words</code></pre>
|
||||
4. <p>Convert the time it took to read the passage to seconds.</p>
|
||||
<pre><code><TotalAmountOfTime/> to read = <TotalAmountOfTime as="seconds"/>s</code></pre>
|
||||
5. <p>Convert the number of seconds to a decimal by dividing the number of seconds by 60. This is the total reading time.</p>
|
||||
<pre><code><TotalAmountOfTime as="seconds"/>s / 60 = <TotalAmountOfTime as="decimal"/> total reading time</code></pre>
|
||||
6. <p>Divide the number of words read correctly by the total reading time in decimal form.</p>
|
||||
<pre><code><TotalNumberOfCorrectWords/> / <TotalAmountOfTime as="decimal"/> = <TotalWordsCorrectPerMinute/> Words Correct per Minute (WCPM)</code></pre>
|
||||
1. Count the total number of words.
|
||||
<pre>
|
||||
<code>
|
||||
<TotalNumberOfWords /> words
|
||||
</code>
|
||||
</pre>
|
||||
2. Count the number of mistakes.
|
||||
<pre>
|
||||
<code>
|
||||
<TotalNumberOfErrors /> mistakes
|
||||
</code>
|
||||
</pre>
|
||||
3. Take the number of words minus the number of mistakes = number of words read correctly.
|
||||
<pre>
|
||||
<code>
|
||||
<TotalNumberOfWords /> words - <TotalNumberOfErrors /> mistakes ={" "}
|
||||
<TotalNumberOfCorrectWords /> correct words
|
||||
</code>
|
||||
</pre>
|
||||
4. Convert the time it took to read the passage to seconds.
|
||||
<pre>
|
||||
<code>
|
||||
<TotalAmountOfTime /> to read = <TotalAmountOfTime as="seconds" />s
|
||||
</code>
|
||||
</pre>
|
||||
5. Convert the number of seconds to a decimal by dividing the number of seconds by 60. This is the total reading time.
|
||||
<pre>
|
||||
<code>
|
||||
<TotalAmountOfTime as="seconds" />s / 60 ={" "}
|
||||
<TotalAmountOfTime as="decimal" /> total reading time
|
||||
</code>
|
||||
</pre>
|
||||
6. Divide the number of words read correctly by the total reading time in decimal form.
|
||||
<pre>
|
||||
<code>
|
||||
<TotalNumberOfCorrectWords /> / <TotalAmountOfTime as="decimal" /> ={" "}
|
||||
<TotalWordsCorrectPerMinute /> Words Correct per Minute (WCPM)
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
</Right>
|
||||
|
||||
</Flex>
|
||||
|
||||
<Flex>
|
||||
|
||||
<Section margin="8rem auto 4rem">
|
||||
|
||||
## What if we could turn it around… with typography?
|
||||
|
||||
In 1999, as an educational therapist, Bonnie Shaver-Troup, working with clients, began observing that reading issues masked the individual’s true capability and intelligence.
|
||||
|
||||
In 2000, Bonnie theorized that reading performance would improve
|
||||
through use of:
|
||||
|
||||
1. A sans-serif font to reduce cognitive noise
|
||||
2. Expanded scaling to improve potential for character recognition
|
||||
3. Hyper-expansion of character spacing, which creates a greater lag time and reduces potential crowding and masking effects
|
||||
|
||||
These changes led to the development of seven specially-designed fonts, which create an immediate improvement in reading performance.
|
||||
|
||||
This is where **Lexend** was formed.
|
||||
|
||||
|
||||
</Section>
|
||||
|
||||
|
||||
<Flex margin="0 auto">
|
||||
|
||||
<Left>
|
||||
|
||||
## The Shaver-Troup Formulations
|
||||
## A variable font empirically shown to significantly improve reading-proficiency.
|
||||
|
||||
As an Educational Therapist, Dr. Bonnie Shaver-Troup observed that reading issues masked the individual’s true capability and intelligence. Shaver-Troup theorized that these issues were a sensitivity to typographical factors. She began manipulating multiple text factors to find a match between text format and an individual’s optimized visual processing capabilities.
|
||||
|
||||
In clinical practice with both children and adults, Dr. Shaver-Troup used a fluency test to measure the effectiveness of the solution. Test results supported her theory; making the modifications to typography allowed the reader to instantaneously improve Words Correct per Minute (WCPM) scores, which research correlates to increased comprehension.
|
||||
Working with Dr. Bonnie Shaver-Troup, utilizing her theory and the LEXEND beta font designs, educator and type designer, Thomas Jockin began formulating an advanced set of typographic variables to coordinate with one simple idea:
|
||||
|
||||
### The Shaver-Troup Formulations Examined
|
||||
Three factors were manipulated in increasing intensity. These factors were:
|
||||
A font, much like the prescription in a pair of eyeglasses, should change based on the reader’s unique needs.
|
||||
|
||||
- Hyper expansion of character spacing
|
||||
- Expanded font-outline shapes
|
||||
- Sans-serif font to reduce noise
|
||||
Combining some of the newest technology in font software and an educated history in professional type design, the two began experimenting & testing how to pull the most important typographic factors in reading-proficiency into a variable font that was designed specifically to fluctuate based on a reader’s Words Correct per Minute score — a typographic system that could be changed to make the words more readable, based on who’s reading them.
|
||||
|
||||
### The Demonstration of Effectiveness
|
||||
## The Demonstration of Effectiveness
|
||||
|
||||
20 third graders, eight males and twelve females, read for one minute in five fonts.
|
||||
|
||||
@ -114,6 +194,7 @@ Each student read out loud a passage set in a control of Times New Roman, then f
|
||||
|
||||
</Flex>
|
||||
|
||||
|
||||
<Flex>
|
||||
|
||||
<Left sticky height="76vh">
|
||||
@ -124,7 +205,7 @@ Each student read out loud a passage set in a control of Times New Roman, then f
|
||||
</Left>
|
||||
|
||||
<Right width="50%">
|
||||
<Chart/>
|
||||
<Chart />
|
||||
</Right>
|
||||
|
||||
</Flex>
|
||||
@ -145,7 +226,6 @@ Each student read out loud a passage set in a control of Times New Roman, then f
|
||||
|
||||
5 had the best score with Lexend Giga
|
||||
|
||||
|
||||
110 Avg WCPM for Times New Roman
|
||||
|
||||
128 Avg WCPM for Lexend
|
||||
@ -154,12 +234,27 @@ Each student read out loud a passage set in a control of Times New Roman, then f
|
||||
|
||||
</ChartStats>
|
||||
|
||||
|
||||
<Section margin="8rem auto 0">
|
||||
|
||||
|
||||
<LogoList/>
|
||||
|
||||
Lexend has been discussed in two Stanford labs, at HP & Microsoft, was listed on Apple K-12 Assistive Technology from 2003-2005, has recently been referenced in research and patents by Adobe, and is available both on Google Fonts & as an open-source download.
|
||||
|
||||
|
||||
|
||||
</Section>
|
||||
|
||||
|
||||
|
||||
|
||||
<Flex>
|
||||
<Left>
|
||||
|
||||
## A Virtue of Variable Font Technology
|
||||
## The Valuable Virtues of Variable Font Technology
|
||||
|
||||
As the study demonstrates, while the Lexend series were beneficial to a large sample of students, no one setting worked best for all students. Diverse readers need different axis settings like people require different eyeglass prescriptions.
|
||||
As the study demonstrates, while the Lexend series were beneficial to a large sample of students, no one setting worked best for all students. Diverse readers call for diverse axis settings just like every individual person requires their own individual eyeglass prescription.
|
||||
|
||||
Eyeglass prescriptions are not six strict settings. There are more granular settings possible.
|
||||
|
||||
@ -177,42 +272,44 @@ Variable font technology allows for continuous selection of the Lexend Series to
|
||||
</Right>
|
||||
</Flex>
|
||||
|
||||
<Intro>
|
||||
|
||||
<Section>
|
||||
|
||||
## Team and History
|
||||
|
||||
<TeamHeadshots>
|
||||
|
||||
<div>
|
||||
|
||||
Founded in 2000, LEXEND came about from a desire to make reading easier for everyone. As an Educational Therapist, Bonnie Shaver-Troup, EdD, observed that reading issues masked the individual’s true capability and intelligence. She theorized that these issues were a sensitivity to typographical factors and began manipulating multiple text factors to find a match between text format and an individual’s optimized visual processing capabilities.
|
||||
|
||||
After careful research and years of testing a LEXEND beta font, Bonnie was able to determine that while traditional approaches to reading issues focused on cognitive-based solutions, perception-based solutions were faster and more efficient in helping improve reading performance and cognition.
|
||||
|
||||
After meeting Thomas Jockin in 2017 — typeface designer and founder of TypeThursday — they combined forces to design an online variable-font solution that would ultimately give the reader complete control over their own reading experience and improve retention and comprehension.
|
||||
|
||||
What began as a seed in the home office of an educational therapist has become a world-class reading solution available to English-language readers across the world.
|
||||
|
||||
</div>
|
||||
|
||||
</TeamHeadshots>
|
||||
|
||||
|
||||
# Speculative Interlude
|
||||
</Section>
|
||||
|
||||
At the end of the 2018 project, Thomas identified research by Dr. Nadine Chahine on reading proficiency in Arabic. The conclusion and implication of her research support the reasonable proposal to apply the Shaver-Troup Formulation into an Arabic variable font.
|
||||
<Section id="download" margin="4rem auto">
|
||||
|
||||
Aspects of hyper-extension are already familiar in Arabic. The lengthening of text for justification is named kashida which can aid in legibility:
|
||||
## Download Lexend for free — and start **changing the way the world reads** today.
|
||||
|
||||
>The kashida is used to give a better character layout on the baseline, and to lessen the cluttering at the joint point between two successive letters of the same word
|
||||
Enter your name & email below to get a download link, a few awesome tips on how best to utilize this incredible resource, and heads-up when new versions of Lexend are improved and updated.
|
||||
|
||||
###### Mohamed Jamal Eddine Benatia,Mohamed Elyaakoubi and Azzeddine Lazrek [Source](http://www.tug.org/TUGboat/tb27-2/tb87benatia.pdf)
|
||||
</Section>
|
||||
|
||||
Working with Dr. Chahine and financial support from Google, the Lexend team wishes to investigate if the Shaver-Troup Formulations applied to the Arabic script has the same beneficial fluency properties as we have demonstrated in the Latin script. If proven true, the implications are the following:
|
||||
|
||||
- A richer understanding of human perception that is cross-cultural in scope
|
||||
- Demonstration of evidence-based design practices in regard to legibility
|
||||
- A contribution to expanding reading-proficiency around the world
|
||||
|
||||
<ArabicExample/>
|
||||
|
||||
## Stay Connected
|
||||
|
||||
For updates when Lexend will be available on Google Fonts, news on original research, and to contribute, sign up to Thomas Jockin's Lexend newsletter.
|
||||
|
||||
|
||||
</Intro>
|
||||
|
||||
<Form/>
|
||||
<Form />
|
||||
|
||||
export default ({ children }) => (
|
||||
<Layout>
|
||||
<TypeChoicesProvider>
|
||||
<ReadingSimulatorProvider>
|
||||
{children}
|
||||
</ReadingSimulatorProvider>
|
||||
<ReadingSimulatorProvider>{children}</ReadingSimulatorProvider>
|
||||
</TypeChoicesProvider>
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
|
@ -1,6 +1,6 @@
|
||||
# Lexend Website
|
||||
|
||||
<img width="1093" alt="Screen Shot 2019-06-08 at 7 26 26 PM" src="https://user-images.githubusercontent.com/25366/59153730-83bfec80-8a2f-11e9-8c25-a188c906e3ed.png">
|
||||
<img width="1093" alt="Screen Shot 2019-06-08 at 7 26 26 PM" src="https://user-images.githubusercontent.com/25366/64728959-329a1b80-d4aa-11e9-9025-f6536102a21e.png">
|
||||
|
||||
An awesome, function website for an awesome, functional font — Lexend is a font designed specifically to increase to reading-proficiency, and it's got some data to back it up. We designed this sucker to show it.
|
||||
|
||||
|
BIN
static/images/bonnie.jpeg
Normal file
After Width: | Height: | Size: 296 KiB |
BIN
static/images/c.jpg
Normal file
After Width: | Height: | Size: 45 KiB |
BIN
static/images/fake-bonnie.jpeg
Normal file
After Width: | Height: | Size: 1.0 MiB |
1
static/images/logos/adobe.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path d="M146.837 75.427l48.86 115.946h-32.014l-14.616-36.932h-35.773zM119.81 7.77H43.074v183.613zm54.035 0h76.694v183.613zm65.663 257.013c.062-6.77-1.924-11.516-5.727-11.516-4.338 0-6.183 6.352-6.314 11.516h12.042zm-12.086 8.477c.14 8.72 4.726 11.56 10.417 11.56 3.608 0 6.7-.802 8.984-1.66l1.616 8.624c-3.18 1.37-8.09 2.23-12.798 2.23-12.867 0-19.894-8.793-19.894-23.81 0-16.118 8.15-25.798 18.796-25.798 10.285 0 15.985 8.555 15.985 22.52 0 3.197-.133 4.998-.344 6.402l-22.764-.068zm-40.49 3.01c0 1.204.22 2.33.475 3.083 1.203 4.033 3.24 5.025 4.874 5.025 4.64 0 6.51-5.877 6.51-15.275 0-8.555-1.977-14.447-6.562-14.447-2.274 0-4.19 2.47-4.848 5.12-.23.835-.448 2.134-.448 3.03v13.465zm-11.99-51.08h11.99v25.118h.192c2.362-3.707 5.507-5.824 10.074-5.824 9.038 0 13.58 10.277 13.58 23.715 0 16.978-6.773 26.067-15.548 26.067-4.18 0-6.965-1.854-9.477-6.55h-.253l-.667 5.77H174.54c.175-3.997.402-9.47.402-13.79V225.19zm-24.487 59.882c4.576 0 5.71-8.625 5.71-15.766 0-6.79-1.134-15.635-5.91-15.635-5.06 0-6.124 8.847-6.124 15.636 0 8.195 1.336 15.766 6.22 15.766h.105zm-.228 9.196c-11.05 0-17.98-8.87-17.98-24.75 0-17.33 8.898-25.033 18.26-25.033 10.9 0 17.734 9.303 17.734 24.752 0 19.85-10.705 25.03-17.916 25.03h-.097zm-36.73-30.495c0-.887 0-1.924-.177-2.873-.465-3.285-2.213-6.244-5.024-6.244-4.822 0-6.596 6.947-6.596 15.072 0 9.336 2.53 14.65 6.43 14.65 1.782 0 3.837-.914 4.953-4.832.272-.78.413-1.826.413-3.047v-12.727zm11.988-38.584v54.507c0 4.32.22 9.635.396 13.79h-10.354l-.676-5.544h-.246c-1.74 3.418-5.524 6.324-10.048 6.324-9.916 0-14.834-10.943-14.834-24.76 0-16.836 7.333-25.023 15.326-25.023 4.18 0 6.886 2.047 8.248 5.008h.202V225.19h11.987zM70.94 268.11L68.51 253.7c-.694-4.155-1.58-10.647-2.257-15.144h-.263c-.71 4.53-1.704 11.207-2.433 15.178l-2.618 14.377H70.94zm-11.31 9.392l-3.163 15.994h-11.68l14.57-66.54h14.316l13.236 66.54H75.166l-3.092-15.994H59.63zM276.14 22.237h1.74c2.143 0 3.9-.71 3.9-2.59 0-1.415-1.038-2.724-3.76-2.724-.853 0-1.433 0-1.88.062v5.252zm0 9.134h-2.916V15.176c1.353-.193 2.715-.457 4.857-.457 2.59 0 4.207.527 5.243 1.31.905.71 1.423 1.8 1.423 3.363 0 2.074-1.362 3.426-3.1 3.883v.123c1.413.264 2.317 1.555 2.643 3.96.387 2.53.71 3.488.975 4.015h-2.978c-.387-.526-.72-2.01-1.045-4.136-.316-1.958-1.414-2.73-3.426-2.73h-1.68v6.867zm2.653-20.534c-6.412 0-11.594 5.375-11.594 12.112s5.183 12.112 11.656 12.112c6.41.07 11.532-5.375 11.532-12.112s-5.12-12.112-11.532-12.112h-.06zm.06-2.46c8.02 0 14.432 6.483 14.432 14.51 0 8.16-6.412 14.634-14.492 14.634a14.578 14.578 0 0 1-14.633-14.633c0-8.028 6.543-14.51 14.633-14.51h.06z"/></svg>
|
After Width: | Height: | Size: 2.6 KiB |
4
static/images/logos/apple.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="170px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170" version="1.1" height="170px">
|
||||
<path d="m150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929 0.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002 0.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-0.9 2.61-1.85 5.11-2.86 7.51zm-31.26-123.01c0 8.1021-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375-0.119-0.972-0.188-1.995-0.188-3.07 0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.3113 11.45-8.597 4.62-2.2516 8.99-3.4968 13.1-3.71 0.12 1.0831 0.17 2.1663 0.17 3.2409z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
1
static/images/logos/google.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 433 171"><path d="M71.922 120.4c14.64 0 25.672-4.79 34.308-13.79 8.89-8.9 11.65-21.36 11.65-31.44 0-3.13-.24-6-.72-8.41H71.922V80.2h32.158c-.96 7.56-3.49 13.08-7.314 16.92-4.688 4.67-12 9.84-24.844 9.84-19.797 0-35.28-15.96-35.28-35.76 0-19.8 15.483-35.77 35.28-35.77 10.672 0 18.485 4.21 24.235 9.61l9.483-9.48C97.594 27.89 86.922 22 71.922 22 44.797 22 22 44.07 22 71.2c0 27.12 22.797 49.2 49.922 49.2zm82.568 0c17.51 0 31.79-13.44 31.79-31.69 0-18.35-14.28-31.67-31.79-31.67-17.54 0-31.82 13.32-31.82 31.67 0 18.25 14.28 31.69 31.82 31.69zm0-12.48c-9.61 0-17.9-7.92-17.9-19.21 0-11.39 8.29-19.18 17.9-19.18 9.59 0 17.87 7.79 17.87 19.18 0 11.29-8.28 19.21-17.87 19.21zm69.35 12.48c17.52 0 31.8-13.44 31.8-31.69 0-18.35-14.28-31.67-31.8-31.67-17.53 0-31.81 13.32-31.81 31.67 0 18.25 14.28 31.69 31.81 31.69zm0-12.48c-9.6 0-17.89-7.92-17.89-19.21 0-11.39 8.29-19.18 17.89-19.18 9.6 0 17.88 7.79 17.88 19.18 0 11.29-8.28 19.21-17.88 19.21zM292 148.84c16.31 0 30.13-9.59 30.13-33V58.96h-13.21v5.16h-.48c-3.13-3.72-9.13-7.08-16.67-7.08-15.85 0-30.36 13.92-30.36 31.8 0 17.77 14.51 31.56 30.36 31.56 7.54 0 13.54-3.36 16.67-7.2h.48v4.56c0 12.13-6.48 18.6-16.92 18.6-8.51 0-13.8-6.11-15.97-11.29l-12.11 5.05c3.49 8.41 12.72 18.72 28.08 18.72zm.95-40.92c-9.59 0-17.64-8.03-17.64-19.08 0-11.16 8.05-19.31 17.64-19.31 9.49 0 16.93 8.15 16.93 19.31 0 11.05-7.44 19.08-16.93 19.08zm52.69-82.56h-13.92v93.12h13.92zm38.16 95.04c14.51 0 22.92-8.87 26.4-14.04l-10.81-7.19c-3.59 5.26-8.51 8.75-15.59 8.75s-12.13-3.24-15.36-9.6l42.36-17.53-1.44-3.59c-2.64-7.08-10.69-20.16-27.12-20.16-16.32 0-29.88 12.85-29.88 31.67 0 17.77 13.44 31.69 31.44 31.69zm-17.64-32.64c-.36-12.23 9.48-18.48 16.56-18.48 5.52 0 10.2 2.76 11.77 6.72zm0 0"/></svg>
|
After Width: | Height: | Size: 1.7 KiB |
1
static/images/logos/hp.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 433.701 433.701"><path class="logotype logotext" d="M216.85 432.85c-2.147 0-4.285-.038-6.42-.1l44.144-121.318h60.75c10.663 0 22.368-8.197 26.015-18.212l47.89-131.546c7.836-21.537-4.5-39.157-27.417-39.157h-84.28L206.82 316.833h-.027l-40.09 110.153C71.594 404.376.85 318.878.85 216.85c0-99.085 66.72-182.58 157.683-208.026l-41.365 113.693h-.012L48.39 311.432l45.777.004 58.48-160.53h34.405l-58.48 160.53 45.76.008 54.498-149.77c7.84-21.537-4.497-39.157-27.393-39.157h-38.48L207.14 1.077c3.22-.143 6.454-.227 9.708-.227 119.294 0 216 96.706 216 216 0 119.293-96.706 216-216 216zm130.692-282.06h-34.395L264.98 282.948h34.396l48.166-132.158z"/></svg>
|
After Width: | Height: | Size: 698 B |
1
static/images/logos/microsoft.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 717.7 205.13"><path d="M172.11 106.02H106v66.11h66.11zm-73 0H33v66.11h66.11zm73-73.02H106v66.113h66.11zm-72.99 0H33v66.113h66.12zm571.39 62.943v28.207c0 3.61.63 6.2 1.89 7.68 1.27 1.46 3.35 2.2 6.06 2.2.75 0 1.7-.16 2.83-.48 1.14-.31 2.08-.73 2.84-1.24l.57-.39v11.57l-.19.11c-.82.49-2.27.94-4.35 1.4-2.08.44-4.1.66-6.05.66-11.79 0-17.73-6.4-17.73-19.03V95.943h-21.1v48.287h-14.23V95.943h-9.91v-11.46h9.91v-8.27c0-4.154.92-7.908 2.73-11.16 1.81-3.253 4.4-5.813 7.7-7.606 3.29-1.79 7.06-2.694 11.21-2.694 3.29 0 5.95.354 7.9 1.056l.25.09v12.07l-.53-.234c-2.09-.934-4.17-1.408-6.18-1.408-2.79 0-4.99.897-6.52 2.663-1.54 1.79-2.33 4.47-2.33 7.972v7.52h21.1V70.98l.26-.08 13.37-4.09.5-.147v17.82h14.19v11.46zm-91.14 38.087c5.19 0 9.17-1.68 11.81-4.98 2.66-3.34 4.01-8.33 4.01-14.81 0-6.41-1.43-11.33-4.26-14.617-2.82-3.29-6.74-4.95-11.67-4.95-5.09 0-9.12 1.74-11.99 5.17-2.89 3.447-4.36 8.407-4.36 14.737 0 6.14 1.47 10.98 4.35 14.37 2.88 3.37 6.95 5.08 12.11 5.08m.64-50.988c9.28 0 16.63 2.762 21.87 8.21 5.23 5.44 7.88 13.028 7.88 22.528 0 9.62-2.82 17.42-8.4 23.18-5.57 5.78-13.25 8.7-22.8 8.7-9.16 0-16.57-2.77-22.01-8.25-5.44-5.49-8.21-13.01-8.21-22.37 0-9.84 2.84-17.717 8.41-23.417 5.58-5.694 13.4-8.58 23.26-8.58m-54.6 0c2.05 0 4.41.243 7 .723 2.62.485 4.77 1.084 6.4 1.783l.22.1v12.987l-.58-.39c-1.77-1.2-3.89-2.19-6.3-2.92-2.41-.73-4.83-1.11-7.2-1.11-2.56 0-4.6.58-6.06 1.71-1.45 1.13-2.16 2.52-2.16 4.263 0 1.96.58 3.5 1.71 4.6 1.16 1.14 4 2.61 8.43 4.39 5.56 2.24 9.55 4.78 11.85 7.54 2.31 2.78 3.48 6.22 3.48 10.25 0 5.59-2.18 10.15-6.48 13.58-4.27 3.39-10.13 5.11-17.4 5.11-2.36 0-5.07-.31-8.05-.92-3-.62-5.53-1.41-7.55-2.33l-.22-.11v-13.7l.6.43c2.41 1.74 5.09 3.1 7.96 4.04s5.48 1.42 7.78 1.42c6.18 0 9.19-1.95 9.19-5.96 0-1.41-.29-2.55-.88-3.39-.6-.85-1.67-1.73-3.17-2.6-1.53-.88-3.95-2.01-7.19-3.34-3.86-1.66-6.76-3.28-8.65-4.84-1.9-1.56-3.33-3.43-4.25-5.55-.92-2.12-1.39-4.61-1.39-7.41 0-5.403 2.17-9.863 6.43-13.263 4.23-3.377 9.78-5.09 16.48-5.09m-59.99 50.983c5.19 0 9.16-1.68 11.8-4.98 2.66-3.34 4.01-8.32 4.01-14.8 0-6.41-1.43-11.33-4.26-14.623-2.81-3.29-6.74-4.95-11.67-4.95-5.09 0-9.12 1.74-11.99 5.17-2.89 3.453-4.35 8.413-4.35 14.743 0 6.14 1.46 10.97 4.35 14.36 2.87 3.37 6.94 5.08 12.11 5.08m.63-50.988c9.28 0 16.64 2.762 21.87 8.215 5.24 5.44 7.89 13.033 7.89 22.533 0 9.61-2.83 17.41-8.4 23.17-5.58 5.78-13.26 8.7-22.8 8.7-9.17 0-16.58-2.77-22.02-8.25-5.44-5.49-8.2-13.01-8.2-22.36 0-9.84 2.83-17.723 8.4-23.423 5.58-5.698 13.4-8.585 23.26-8.585m-53.26 11.785h.15c1.31-3.36 3.03-6.06 5.41-8.016 2.71-2.234 5.87-3.37 9.4-3.37 2.34 0 4.19.282 5.5.84l.23.1v14.177l-.6-.43c-.65-.47-1.75-.92-3.27-1.33-1.54-.41-2.96-.62-4.23-.62-3.73 0-6.79 1.61-9.08 4.803-2.33 3.22-3.51 7.49-3.51 12.69v30.55h-14.05V84.482h14.05v10.355zm-39.22-11.785c2.51 0 5.15.283 7.86.843 2.71.562 4.9 1.303 6.5 2.2l.19.107v13.57l-.59-.43c-4.26-3.09-8.76-4.66-13.38-4.66-5.4 0-9.84 1.83-13.18 5.438-3.36 3.62-5.06 8.53-5.06 14.59 0 6.02 1.63 10.8 4.85 14.21 3.22 3.4 7.64 5.12 13.16 5.12 1.98 0 4.25-.44 6.73-1.3 2.49-.87 4.81-2.08 6.87-3.58l.6-.43v12.87l-.19.11c-4.57 2.63-10.27 3.96-16.95 3.96-5.72 0-10.89-1.25-15.36-3.73-4.49-2.48-8.02-6.06-10.52-10.63-2.5-4.57-3.76-9.75-3.76-15.39 0-6.45 1.3-12.23 3.87-17.167 2.58-4.96 6.36-8.86 11.27-11.593 4.89-2.725 10.64-4.108 17.09-4.108m-41.92 61.178H317.6V84.482h14.05zm-6.88-85.19c2.44 0 4.49.81 6.11 2.41 1.62 1.604 2.45 3.554 2.45 5.797 0 2.29-.85 4.223-2.52 5.75-1.65 1.515-3.68 2.285-6.04 2.285-2.35 0-4.38-.77-6.01-2.29-1.65-1.522-2.48-3.456-2.48-5.745 0-2.324.84-4.294 2.51-5.86 1.65-1.56 3.67-2.347 5.98-2.347m-35.53 21.044l-25.45 64.146h-10.17l-25.86-64.152h-.46v64.152h-13.48V60.86h20.66l24.49 61.92 25.23-61.92h19.85v83.36h-14.34V80.074z"/></svg>
|
After Width: | Height: | Size: 3.7 KiB |
13
static/images/logos/stanford.svg
Executable file
After Width: | Height: | Size: 12 KiB |
BIN
static/images/thomas-jockin.jpg
Normal file
After Width: | Height: | Size: 333 KiB |
BIN
static/images/travis.jpg
Normal file
After Width: | Height: | Size: 102 KiB |
BIN
static/social/lexend-v2.png
Normal file
After Width: | Height: | Size: 136 KiB |
91
yarn.lock
@ -992,6 +992,21 @@
|
||||
react-measure "^2.2.4"
|
||||
react-motion "^0.5.2"
|
||||
|
||||
"@popmotion/easing@^1.0.1", "@popmotion/easing@^1.0.2":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@popmotion/easing/-/easing-1.0.2.tgz#17d925c45b4bf44189e5a38038d149df42d8c0b4"
|
||||
integrity sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw==
|
||||
|
||||
"@popmotion/popcorn@^0.4.2":
|
||||
version "0.4.2"
|
||||
resolved "https://registry.yarnpkg.com/@popmotion/popcorn/-/popcorn-0.4.2.tgz#ff9f5334e8e808ed02237b7b9c928619d1eb68ff"
|
||||
integrity sha512-wu0tEwK3KUZ9BoqfcqC3DfdfRDws/oHXwZKJMVtuhXSrF/PtqvilsPjAk93nh8M+orAnbe8ZyxQmop9+4oJs2g==
|
||||
dependencies:
|
||||
"@popmotion/easing" "^1.0.1"
|
||||
framesync "^4.0.1"
|
||||
hey-listen "^1.0.8"
|
||||
style-value-types "^3.1.6"
|
||||
|
||||
"@types/node@*":
|
||||
version "12.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.2.tgz#3452a24edf9fea138b48fad4a0a028a683da1e40"
|
||||
@ -2197,7 +2212,7 @@ debug@^3.1.0, debug@^3.2.6:
|
||||
dependencies:
|
||||
ms "^2.1.1"
|
||||
|
||||
debug@^4.1.0:
|
||||
debug@^4.0.0, debug@^4.1.0:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
|
||||
integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
|
||||
@ -2662,6 +2677,28 @@ fragment-cache@^0.2.1:
|
||||
dependencies:
|
||||
map-cache "^0.2.2"
|
||||
|
||||
framer-motion@^1.6.5:
|
||||
version "1.6.5"
|
||||
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-1.6.5.tgz#bb496b68f2f850506dbd08da27fa4a200f9c2b5d"
|
||||
integrity sha512-Plg25ywwVI6bu2M/9Q9pIljudMRNDnlXF+wYOvZomxqzujqAL+dnMv9CxammZaDje88qMDULzuySFXxp2fcC0g==
|
||||
dependencies:
|
||||
"@popmotion/easing" "^1.0.2"
|
||||
"@popmotion/popcorn" "^0.4.2"
|
||||
framesync "^4.0.4"
|
||||
hey-listen "^1.0.8"
|
||||
popmotion "9.0.0-beta-8"
|
||||
style-value-types "^3.1.6"
|
||||
stylefire "^6.0.10"
|
||||
tslib "^1.10.0"
|
||||
|
||||
framesync@^4.0.0, framesync@^4.0.1, framesync@^4.0.4:
|
||||
version "4.0.4"
|
||||
resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.0.4.tgz#79c42c0118f26821c078570db0ff81fb863516a2"
|
||||
integrity sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==
|
||||
dependencies:
|
||||
hey-listen "^1.0.8"
|
||||
tslib "^1.10.0"
|
||||
|
||||
fresh@0.5.2:
|
||||
version "0.5.2"
|
||||
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
|
||||
@ -2960,6 +2997,11 @@ header-case@^1.0.0:
|
||||
no-case "^2.2.0"
|
||||
upper-case "^1.1.3"
|
||||
|
||||
hey-listen@^1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
|
||||
integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
|
||||
|
||||
hmac-drbg@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
|
||||
@ -3838,6 +3880,14 @@ neo-async@^2.5.0:
|
||||
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
|
||||
integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
|
||||
|
||||
next-ga@^2.3.4:
|
||||
version "2.3.4"
|
||||
resolved "https://registry.yarnpkg.com/next-ga/-/next-ga-2.3.4.tgz#0bec23e7c2eea35485af0b342e7794bbbdb61d04"
|
||||
integrity sha512-mIol83ehPCz9Z+QtK6ig1w9Db4ShoyhjS6NgDnTIVJuBQ1iobiZap2xXn6KtYWBc+AH5DdTCBtZRF8PP5yJAVA==
|
||||
dependencies:
|
||||
debug "^4.0.0"
|
||||
react-ga "^2.5.3"
|
||||
|
||||
next-server@8.1.0:
|
||||
version "8.1.0"
|
||||
resolved "https://registry.yarnpkg.com/next-server/-/next-server-8.1.0.tgz#50a9f248ede69fb33d83aa5274ec6c66f421556e"
|
||||
@ -4382,6 +4432,18 @@ pkg-dir@^3.0.0:
|
||||
dependencies:
|
||||
find-up "^3.0.0"
|
||||
|
||||
popmotion@9.0.0-beta-8:
|
||||
version "9.0.0-beta-8"
|
||||
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-beta-8.tgz#f5a709f11737734e84f2a6b73f9bcf25ee30c388"
|
||||
integrity sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA==
|
||||
dependencies:
|
||||
"@popmotion/easing" "^1.0.1"
|
||||
"@popmotion/popcorn" "^0.4.2"
|
||||
framesync "^4.0.4"
|
||||
hey-listen "^1.0.8"
|
||||
style-value-types "^3.1.6"
|
||||
tslib "^1.10.0"
|
||||
|
||||
posix-character-classes@^0.1.0:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
|
||||
@ -4598,6 +4660,11 @@ react-error-overlay@5.1.4:
|
||||
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.4.tgz#88dfb88857c18ceb3b9f95076f850d7121776991"
|
||||
integrity sha512-fp+U98OMZcnduQ+NSEiQa4s/XMsbp+5KlydmkbESOw4P69iWZ68ZMFM5a2BuE0FgqPBKApJyRuYHR95jM8lAmg==
|
||||
|
||||
react-ga@^2.5.3:
|
||||
version "2.6.0"
|
||||
resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.6.0.tgz#c3fe830ead2ad25117e1d33280d9698de9b28496"
|
||||
integrity sha512-GWHBWZDFjDGMkIk1LzroIn0mNTygKw3adXuqvGvheFZvlbpqMPbHsQsTdQBIxRRdXGQM/Zq+dQLRPKbwIHMTaw==
|
||||
|
||||
react-is@16.8.6, react-is@^16.8.1:
|
||||
version "16.8.6"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
|
||||
@ -5350,6 +5417,13 @@ style-to-object@^0.2.1:
|
||||
dependencies:
|
||||
css "2.2.4"
|
||||
|
||||
style-value-types@^3.1.6:
|
||||
version "3.1.6"
|
||||
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.6.tgz#6b1da918214d92c74dc7fc2d074013f372b47d76"
|
||||
integrity sha512-AxcfUr/06AHyyyxkNB1O8ypvwa8/qK+sxwelxEN5x+jxW+RXutRE2TuHEQbFq9OBY7ym83CPKvVIsGd6lvKb0Q==
|
||||
dependencies:
|
||||
hey-listen "^1.0.8"
|
||||
|
||||
styled-jsx@3.2.1:
|
||||
version "3.2.1"
|
||||
resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-3.2.1.tgz#452051fe50df5e9c7c7f3dd20fa46c3060ac65b0"
|
||||
@ -5364,6 +5438,16 @@ styled-jsx@3.2.1:
|
||||
stylis "3.5.4"
|
||||
stylis-rule-sheet "0.0.10"
|
||||
|
||||
stylefire@^6.0.10:
|
||||
version "6.0.10"
|
||||
resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-6.0.10.tgz#1100c63cf01b922f0db92e38a46297f3f1c2663d"
|
||||
integrity sha512-SAJnUk4L9EKt/WSliztk1iZCzcNOJDR69xO8gblRjQwjybgMWONsY7KpcMBt65xU1UZaiyPDK5CoLf9wXLJldQ==
|
||||
dependencies:
|
||||
"@popmotion/popcorn" "^0.4.2"
|
||||
framesync "^4.0.0"
|
||||
hey-listen "^1.0.8"
|
||||
style-value-types "^3.1.6"
|
||||
|
||||
stylis-rule-sheet@0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
|
||||
@ -5546,6 +5630,11 @@ trough@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.4.tgz#3b52b1f13924f460c3fbfd0df69b587dbcbc762e"
|
||||
integrity sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==
|
||||
|
||||
tslib@^1.10.0:
|
||||
version "1.10.0"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
|
||||
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
|
||||
|
||||
tslib@^1.9.0:
|
||||
version "1.9.3"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
|
||||
|