mirror of
https://github.com/ThomasJockin/readexpro.git
synced 2024-09-11 10:26:46 +03:00
updated statics, no sticky headshots
This commit is contained in:
parent
59a98f5bea
commit
6b40333480
@ -49,7 +49,7 @@ const Headshot = styled(motion.div)`
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
border-radius: 0.618rem;
|
||||
position: sticky;
|
||||
/* 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);
|
||||
|
@ -1,100 +1,99 @@
|
||||
import { useContext } from 'react'
|
||||
import useTypeChoices from '../lib/useTypeChoices'
|
||||
import styled from '@emotion/styled'
|
||||
import { useState, useEffect } from 'react'
|
||||
import useVariableFont from "react-variable-fonts"
|
||||
import Markdown from 'markdown-to-jsx';
|
||||
import texts from '../data/texts'
|
||||
import Page from './Page'
|
||||
import RangeSlider from './RangeSlider'
|
||||
import { useContext } from "react";
|
||||
import useTypeChoices from "../lib/useTypeChoices";
|
||||
import styled from "@emotion/styled";
|
||||
import { useState, useEffect } from "react";
|
||||
import useVariableFont from "react-variable-fonts";
|
||||
import Markdown from "markdown-to-jsx";
|
||||
import texts from "../data/texts";
|
||||
import Page from "./Page";
|
||||
import RangeSlider from "./RangeSlider";
|
||||
|
||||
const initialSettings = {
|
||||
LXND: 0
|
||||
}
|
||||
|
||||
|
||||
LXND: 0
|
||||
};
|
||||
|
||||
const Tester = ({ weight, lxnd }) => {
|
||||
const { axis, setAxis, customStyles } = useContext(useTypeChoices)
|
||||
const { axis, setAxis, customStyles } = useContext(useTypeChoices);
|
||||
|
||||
switch (weight) {
|
||||
case "default":
|
||||
lxnd = 0
|
||||
lxnd = 0;
|
||||
break;
|
||||
case "regular":
|
||||
lxnd = 0
|
||||
case "Regular":
|
||||
lxnd = 0;
|
||||
break;
|
||||
case "deca":
|
||||
lxnd = 40
|
||||
case "Deca":
|
||||
lxnd = 0;
|
||||
break;
|
||||
case "kilo":
|
||||
lxnd = 40
|
||||
case "Exa":
|
||||
lxnd = 40;
|
||||
break;
|
||||
case "mega":
|
||||
lxnd = 56
|
||||
case "Giga":
|
||||
lxnd = 56;
|
||||
break;
|
||||
case "giga":
|
||||
lxnd = 64
|
||||
case "Mega":
|
||||
lxnd = 64;
|
||||
break;
|
||||
case "tera":
|
||||
lxnd = 72
|
||||
case "Peta":
|
||||
lxnd = 72;
|
||||
break;
|
||||
case "peta":
|
||||
lxnd = 80
|
||||
case "Tera":
|
||||
lxnd = 80;
|
||||
break;
|
||||
case "exa":
|
||||
lxnd = 100
|
||||
case "Zetta":
|
||||
lxnd = 100;
|
||||
break;
|
||||
default:
|
||||
lxnd = axis.LXND
|
||||
break
|
||||
lxnd = axis.LXND;
|
||||
break;
|
||||
}
|
||||
|
||||
const style = {
|
||||
fontVariationSettings: `'LXND' ${lxnd}`
|
||||
}
|
||||
};
|
||||
|
||||
const exampleCSS = `h1, p { font-variation-settings: 'LXND' ${axis.LXND}; }`
|
||||
const exampleCSS = `h1, p { font-variation-settings: 'LXND' ${axis.LXND}; }`;
|
||||
return (
|
||||
<Container>
|
||||
{weight && <Weight style={{...style}}>{weight}</Weight>}
|
||||
{weight && (
|
||||
<Weight style={{ ...style }}>
|
||||
{weight} • LXND {lxnd}
|
||||
</Weight>
|
||||
)}
|
||||
<Title style={{ ...style }}>LEXEND</Title>
|
||||
|
||||
{
|
||||
!weight &&
|
||||
{!weight && (
|
||||
<Controls>
|
||||
<p style={{ ...style }}></p>
|
||||
<label htmlFor="lxnd-axis">
|
||||
Variable Width + Bounding Box
|
||||
</label>
|
||||
<p style={{ ...style }} />
|
||||
<label htmlFor="lxnd-axis">Variable Width + Bounding Box</label>
|
||||
<RangeSlider
|
||||
id="lxnd-axis"
|
||||
type="range" min="0" max="100" value={axis.LXND}
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={axis.LXND}
|
||||
onChange={({ target }) => setAxis({ LXND: target.value })}
|
||||
/>
|
||||
<label htmlFor="lxnd-axis">
|
||||
Variable Font Settings for CSS
|
||||
</label>
|
||||
<label htmlFor="lxnd-axis">Variable Font Settings for CSS</label>
|
||||
<pre>
|
||||
<code>{exampleCSS}</code>
|
||||
</pre>
|
||||
</Controls>
|
||||
}
|
||||
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
const Container = styled('section')`
|
||||
const Container = styled("section")`
|
||||
padding: 1.618rem 1.618rem;
|
||||
`
|
||||
const Weight = styled('span')`
|
||||
text-transform: uppercase;
|
||||
font-size: 80%;
|
||||
letter-spacing: 2px;
|
||||
`
|
||||
`;
|
||||
const Weight = styled("span")`
|
||||
text-transform: uppercase;
|
||||
font-size: 80%;
|
||||
letter-spacing: 2px;
|
||||
`;
|
||||
|
||||
const Controls = styled('nav')`
|
||||
const Controls = styled("nav")`
|
||||
max-width: 800px;
|
||||
padding: 1rem 0.618rem;
|
||||
margin: 0;
|
||||
@ -119,34 +118,35 @@ const Controls = styled('nav')`
|
||||
@media (max-width: 960px) {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
const H1 = styled('h1')`
|
||||
font-size: 5.4vw !important;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
border: 1px dashed rgba(0,0,0, 0.12);
|
||||
}
|
||||
& + p {
|
||||
margin-left: 0.392rem;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
font-size: 12vw !important;
|
||||
}
|
||||
`
|
||||
const H1 = styled("h1")`
|
||||
font-size: 5.4vw !important;
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
span {
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
border: 1px dashed rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
& + p {
|
||||
margin-left: 0.392rem;
|
||||
}
|
||||
@media (max-width: 960px) {
|
||||
font-size: 12vw !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const Title = ({ children, ...props }) => (
|
||||
<H1>
|
||||
{
|
||||
children.split("")
|
||||
.map((child, i) => <span key={`${child}-${i}`} {...props}>{child}</span>)
|
||||
}
|
||||
{children.split("").map((child, i) => (
|
||||
<span key={`${child}-${i}`} {...props}>
|
||||
{child}
|
||||
</span>
|
||||
))}
|
||||
</H1>
|
||||
)
|
||||
);
|
||||
|
||||
export default Tester
|
||||
export default Tester;
|
||||
|
@ -185,10 +185,13 @@ Each student read out loud a passage set in a control of Times New Roman, then f
|
||||
|
||||
<Right sticky top="1vw">
|
||||
|
||||
<Tester weight="regular" />
|
||||
<Tester weight="deca"/>
|
||||
<Tester weight="mega"/>
|
||||
<Tester weight="giga"/>
|
||||
<Tester weight="Deca" />
|
||||
<Tester weight="Exa"/>
|
||||
<Tester weight="Giga"/>
|
||||
<Tester weight="Mega"/>
|
||||
<Tester weight="Peta"/>
|
||||
<Tester weight="Tera"/>
|
||||
<Tester weight="Zetta"/>
|
||||
|
||||
</Right>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user