mirror of
https://github.com/ThomasJockin/readexpro.git
synced 2024-08-16 13:40:32 +03:00
new copy, new logo anim
This commit is contained in:
micah rich
parent
b67f580828
commit
19cc7de1ff
1
.eslintignore
Normal file
1
.eslintignore
Normal file
@ -0,0 +1 @@
|
||||
pages/index.mdx
|
||||
50
components/AnimatedLexend.js
Normal file
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>
|
||||
);
|
||||
};
|
||||
@ -8,7 +8,7 @@ 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;
|
||||
|
||||
@ -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,19 @@ 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;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.7rem;
|
||||
line-height: 1.2;
|
||||
@ -53,13 +62,13 @@ 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 {
|
||||
color: red;
|
||||
font-variation-settings: 'LXND' 80;
|
||||
font-variation-settings: "LXND" 80;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-decoration: none;
|
||||
@ -72,12 +81,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 +100,145 @@ 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 — 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."
|
||||
/>
|
||||
|
||||
<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 — 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"
|
||||
/>
|
||||
</Head>
|
||||
<Nav>
|
||||
<Logo/>
|
||||
<Logo />
|
||||
</Nav>
|
||||
{ children }
|
||||
<Footer/>
|
||||
{children}
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,49 +1,75 @@
|
||||
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: {
|
||||
when: "afterChildren",
|
||||
staggerChildren: 0.1,
|
||||
staggerDirection: -1
|
||||
}
|
||||
},
|
||||
hidden: {
|
||||
transition: {
|
||||
when: "beforeChildren"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const items = {
|
||||
hidden: e => ({
|
||||
width: e ? 0 : "1.392rem",
|
||||
opacity: e ? 0 : 1,
|
||||
fontVariationSettings: "'LXND' 0"
|
||||
}),
|
||||
visible: {
|
||||
width: "2rem",
|
||||
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
|
||||
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 +79,15 @@ const Logo = styled("h1")`
|
||||
margin-left: auto;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
`;
|
||||
|
||||
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
31
components/LogoList.js
Normal file
@ -0,0 +1,31 @@
|
||||
import styled from "@emotion/styled";
|
||||
|
||||
const List = styled("div")`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1rem auto;
|
||||
max-width: 1200px;
|
||||
`;
|
||||
|
||||
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;
|
||||
110
components/TeamHeadshots.js
Normal file
110
components/TeamHeadshots.js
Normal file
@ -0,0 +1,110 @@
|
||||
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: center;
|
||||
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;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
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;
|
||||
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 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 3rem 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;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
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"
|
||||
src="/static/images/fake-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,69 +1,73 @@
|
||||
import styled from '@emotion/styled'
|
||||
import { css } from '@emotion/core'
|
||||
import styled from "@emotion/styled";
|
||||
import { css } from "@emotion/core";
|
||||
|
||||
export const Flex = styled('section')`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 4rem auto;
|
||||
align-items: flex-start;
|
||||
`
|
||||
export const Flex = styled("section")`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 4rem auto;
|
||||
align-items: flex-start;
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
`
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
||||
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 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 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 Intro = styled("section")`
|
||||
padding: 1rem;
|
||||
h1 {
|
||||
font-size: 7.2vw;
|
||||
@ -82,28 +86,41 @@ export const Intro = styled('section')`
|
||||
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;
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
@media (max-width: 960px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: -3.618rem;
|
||||
margin-top: 1rem;
|
||||
strong {
|
||||
color: red;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
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 +133,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,7 +147,8 @@ export const Intro = styled('section')`
|
||||
a {
|
||||
color: red;
|
||||
}
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
max-width: 720px;
|
||||
margin: 1.618rem auto;
|
||||
}
|
||||
@ -155,7 +173,7 @@ export const Intro = styled('section')`
|
||||
}
|
||||
&:before {
|
||||
font-weight: normal;
|
||||
content:"“";
|
||||
content: "“";
|
||||
font-size: 9.6rem;
|
||||
position: absolute;
|
||||
top: -4.618rem;
|
||||
@ -164,7 +182,7 @@ export const Intro = styled('section')`
|
||||
}
|
||||
&:after {
|
||||
font-weight: normal;
|
||||
content:"”";
|
||||
content: "”";
|
||||
font-size: 9.6rem;
|
||||
position: absolute;
|
||||
bottom: -8.618rem;
|
||||
@ -176,7 +194,7 @@ export const Intro = styled('section')`
|
||||
position: absolute;
|
||||
right: -40%;
|
||||
bottom: -4%;
|
||||
filter: drop-shadow(0.618rem 0.618rem 0.392rem rgba(0,0,0,0.12));
|
||||
filter: drop-shadow(0.618rem 0.618rem 0.392rem rgba(0, 0, 0, 0.12));
|
||||
@media (max-width: 960px) {
|
||||
display: none;
|
||||
max-width: 220px;
|
||||
@ -186,4 +204,4 @@ export const Intro = styled('section')`
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
"@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",
|
||||
|
||||
227
pages/index.mdx
227
pages/index.mdx
@ -1,99 +1,159 @@
|
||||
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 { 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 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";
|
||||
|
||||
<Intro>
|
||||
|
||||
# Lexend is a variable font empirically shown to significantly improve reading-proficiency.
|
||||
##### What if we could **change the way the world reads** — starting with a font designed to adjust specifically for your needs?
|
||||
|
||||
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.
|
||||
# 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.**
|
||||
|
||||
>  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.
|
||||
> [Because I never learned to read], I felt really upset… stuck in the box of not having that education I wanted. I felt worthless.
|
||||
|
||||
###### [Source](https://www.nationsreportcard.gov/reading_math_2015/#reading?grade=4) • Retrieved 30 August 2017
|
||||
###### Lise Crawford, 45, high school dropout
|
||||
|
||||
> 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.
|
||||
|
||||
###### 1st Grade Teacher, California
|
||||
|
||||
> I started using Lexend when I was a kid, but recently I raised my Spanish grade from a D to a B in just few weeks by studying my vocabulary list with Lexend.
|
||||
|
||||
###### Jack, Male College Student, age 20
|
||||
|
||||
</Intro>
|
||||
|
||||
|
||||
<Flex>
|
||||
<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 amongst both scientists and teachers 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, May 2005](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>
|
||||
|
||||
|
||||
<Intro>
|
||||
|
||||
## What if we could turn it around… with typography?
|
||||
|
||||
As an educational therapist, working with hundreds of clients, in 1999, Bonnie Shaver-Troup began observing that reading issues masked the individual’s true capability and intelligence.
|
||||
|
||||
|
||||
In 2000, Bonnie Shaver-Troup 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
|
||||
|
||||
Applying an evidence-based, user-engaged design model, she identified a continuum of needs. This led to the development of six formulations that alter a text format, creating an immediate improvement in reading performance.
|
||||
|
||||
This is where **Lexend** was formed.
|
||||
</Intro>
|
||||
|
||||
<Flex>
|
||||
|
||||
<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 closely with Dr. Bonnie Shaver-Troup, utilizing her hypotheses and tests, 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 +174,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 +185,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 +206,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,6 +214,25 @@ Each student read out loud a passage set in a control of Times New Roman, then f
|
||||
|
||||
</ChartStats>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<Intro>
|
||||
|
||||
|
||||
## Trusted by Incredible Organizations
|
||||
|
||||
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.
|
||||
|
||||
<LogoList/>
|
||||
|
||||
</Intro>
|
||||
|
||||
|
||||
|
||||
|
||||
<Flex>
|
||||
<Left>
|
||||
|
||||
@ -177,42 +256,44 @@ Variable font technology allows for continuous selection of the Lexend Series to
|
||||
</Right>
|
||||
</Flex>
|
||||
|
||||
|
||||
<Intro>
|
||||
|
||||
## Team and History
|
||||
|
||||
# Speculative Interlude
|
||||
<TeamHeadshots>
|
||||
|
||||
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.
|
||||
<div>
|
||||
|
||||
Aspects of hyper-extension are already familiar in Arabic. The lengthening of text for justification is named kashida which can aid in legibility:
|
||||
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©.
|
||||
|
||||
>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
|
||||
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.
|
||||
|
||||
###### Mohamed Jamal Eddine Benatia,Mohamed Elyaakoubi and Azzeddine Lazrek [Source](http://www.tug.org/TUGboat/tb27-2/tb87benatia.pdf)
|
||||
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.
|
||||
|
||||
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:
|
||||
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.
|
||||
|
||||
- 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
|
||||
</div>
|
||||
|
||||
<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.
|
||||
</TeamHeadshots>
|
||||
|
||||
|
||||
</Intro>
|
||||
|
||||
<Form/>
|
||||
<Intro id="download">
|
||||
|
||||
## Download Lexend for free — and start **changing the way the world reads** today.
|
||||
|
||||
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.
|
||||
|
||||
</Intro>
|
||||
|
||||
<Form />
|
||||
|
||||
export default ({ children }) => (
|
||||
<Layout>
|
||||
<TypeChoicesProvider>
|
||||
<ReadingSimulatorProvider>
|
||||
{children}
|
||||
</ReadingSimulatorProvider>
|
||||
<ReadingSimulatorProvider>{children}</ReadingSimulatorProvider>
|
||||
</TypeChoicesProvider>
|
||||
</Layout>
|
||||
)
|
||||
);
|
||||
|
||||
BIN
static/images/fake-bonnie.jpeg
Normal file
BIN
static/images/fake-bonnie.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
1
static/images/logos/adobe.svg
Executable file
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
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
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
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
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
13
static/images/logos/stanford.svg
Executable file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
BIN
static/images/thomas-jockin.jpg
Normal file
BIN
static/images/thomas-jockin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
76
yarn.lock
76
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"
|
||||
@ -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"
|
||||
@ -4382,6 +4424,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"
|
||||
@ -5350,6 +5404,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 +5425,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 +5617,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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user