updated statics, no sticky headshots

components/TeamHeadshots.js

@@ -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);

components/Tester.js

@@ -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;

pages/index.mdx

@@ -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>