From 19cc7de1ff321ea40f14c03175bdeaad877b686b Mon Sep 17 00:00:00 2001 From: micah rich Date: Wed, 28 Aug 2019 23:46:59 -0400 Subject: [PATCH] new copy, new logo anim --- .eslintignore | 1 + components/AnimatedLexend.js | 50 +++++++ components/Footer.js | 2 +- components/Layout.js | 200 ++++++++++++++++++-------- components/Logo.js | 105 +++++++++----- components/LogoList.js | 31 ++++ components/TeamHeadshots.js | 110 +++++++++++++++ components/index.js | 160 +++++++++++---------- package.json | 1 + pages/index.mdx | 227 ++++++++++++++++++++---------- static/images/fake-bonnie.jpeg | Bin 0 -> 1076669 bytes static/images/logos/adobe.svg | 1 + static/images/logos/apple.svg | 4 + static/images/logos/google.svg | 1 + static/images/logos/hp.svg | 1 + static/images/logos/microsoft.svg | 1 + static/images/logos/stanford.svg | 13 ++ static/images/thomas-jockin.jpg | Bin 0 -> 339609 bytes yarn.lock | 76 ++++++++++ 19 files changed, 746 insertions(+), 238 deletions(-) create mode 100644 .eslintignore create mode 100644 components/AnimatedLexend.js create mode 100644 components/LogoList.js create mode 100644 components/TeamHeadshots.js create mode 100644 static/images/fake-bonnie.jpeg create mode 100755 static/images/logos/adobe.svg create mode 100644 static/images/logos/apple.svg create mode 100755 static/images/logos/google.svg create mode 100755 static/images/logos/hp.svg create mode 100755 static/images/logos/microsoft.svg create mode 100755 static/images/logos/stanford.svg create mode 100644 static/images/thomas-jockin.jpg diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..9f9e038 --- /dev/null +++ b/.eslintignore @@ -0,0 +1 @@ +pages/index.mdx diff --git a/components/AnimatedLexend.js b/components/AnimatedLexend.js new file mode 100644 index 0000000..94808cb --- /dev/null +++ b/components/AnimatedLexend.js @@ -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 ( + `'LXND' ${x.toFixed()}` + ) + }} + > + {children} + + ); +}; diff --git a/components/Footer.js b/components/Footer.js index d85ae15..386fcf4 100644 --- a/components/Footer.js +++ b/components/Footer.js @@ -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; diff --git a/components/Layout.js b/components/Layout.js index eb88bfa..6478ebf 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -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 ( <> - + - - - - - - - - - - + + + + + + + + + + + Lexend — A Variable Font Designed for Reading + + - Lexend — A Variable Font Designed for Reading - - - - - - - - - - - - - - + + + + + + + + + + - { children } -