OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

inline index.css, omit unused fonts, preload hints

Browse source
This commit is contained in:
Matt Dunn-Rankin 2020-05-18 00:56:46 -07:00
parent 41e8e5f849
commit cfabefa442
10 changed files with 44 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
src/fonts/Delicious-Bold.otf → public/fonts/Delicious-Bold.otf
View file

0
src/fonts/Delicious-BoldItalic.otf → public/fonts/Delicious-BoldItalic.otf
View file

0
src/fonts/Delicious-Heavy.otf → public/fonts/Delicious-Heavy.otf
View file

0
src/fonts/Delicious-Italic.otf → public/fonts/Delicious-Italic.otf
View file

0
src/fonts/Delicious-Roman.otf → public/fonts/Delicious-Roman.otf
View file

30
public/index.html
View file

@ -21,6 +21,36 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Dress to Impress</title> <title>Dress to Impress</title>
<style type="text/css">
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
font-family: "Delicious";
font-display: swap;
font-weight: 700;
src: url(/fonts/Delicious-Bold.otf);
}
@font-face {
font-family: "Delicious";
font-display: swap;
font-weight: 800 1000;
src: url(/fonts/Delicious-Heavy.otf);
}
</style>
<link
rel="preload"
href="/fonts/Delicious-Heavy.otf"
type="font/otf"
as="font"
crossorigin
/>
<link
rel="preload"
href="/fonts/Delicious-Bold.otf"
type="font/otf"
as="font"
crossorigin
/>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

2
src/app/PosePicker.js
View file

@ -314,7 +314,7 @@ function PoseButton({ pose, onChange, inputRef }) {
) : ( ) : (
<Flex align="center" justify="center"> <Flex align="center" justify="center">
<Box <Box
fontFamily="Delicious" fontFamily="Delicious, sans-serif"
fontSize="3xl" fontSize="3xl"
fontWeight="900" fontWeight="900"
color="gray.600" color="gray.600"

15
src/app/util.js
View file

@ -33,7 +33,12 @@ export function Delay({ children, ms = 300 }) {
*/ */
export function Heading1({ children, ...props }) { export function Heading1({ children, ...props }) {
return ( return (
<Heading fontFamily="Delicious" fontWeight="800" size="2xl" {...props}> <Heading
fontFamily="Delicious, sans-serif"
fontWeight="800"
size="2xl"
{...props}
>
{children} {children}
</Heading> </Heading>
); );
@ -45,7 +50,13 @@ export function Heading1({ children, ...props }) {
*/ */
export function Heading2({ children, ...props }) { export function Heading2({ children, ...props }) {
return ( return (
<Heading size="xl" color="green.800" fontFamily="Delicious" {...props}> <Heading
size="xl"
color="green.800"
fontFamily="Delicious, sans-serif"
fontWeight="700"
{...props}
>
{children} {children}
</Heading> </Heading>
); );

44
src/index.css
View file

@ -1,44 +0,0 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
/* A font by Jos Buivenga (exljbris) -> www.exljbris.com */
@font-face {
font-family: "Delicious";
src: url(./fonts/Delicious-Roman.otf);
}
@font-face {
font-family: "Delicious";
font-weight: 700;
src: url(./fonts/Delicious-Bold.otf);
}
@font-face {
font-family: "Delicious";
font-weight: 800 1000;
src: url(./fonts/Delicious-Heavy.otf);
}
@font-face {
font-family: "Delicious";
font-style: italic;
src: url(./fonts/Delicious-Italic.otf);
}
@font-face {
font-family: "Delicious";
font-style: italic;
font-weight: 700 1000;
src: url(./fonts/Delicious-BoldItalic.otf);
}

1
src/index.js
View file

@ -1,6 +1,5 @@
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import "./index.css";
import App from "./app/App"; import App from "./app/App";
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>