Fix typography on wardrobe 2020 page

Add the green body color back in, and add the Delicious font!
This commit is contained in:
Emi Matchu 2023-08-10 20:09:30 -07:00
parent 9cc45f0988
commit 64e3702d6d
5 changed files with 25 additions and 3 deletions

View file

@ -1,4 +1,5 @@
@import "partials/icon" @import "partials/icon"
@import fonts
@import url(//fonts.googleapis.com/css?family=Droid+Sans:400,700) @import url(//fonts.googleapis.com/css?family=Droid+Sans:400,700)
@import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic) @import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic)
@import url(//fonts.googleapis.com/css?family=Calligraffitti) @import url(//fonts.googleapis.com/css?family=Calligraffitti)

View file

@ -0,0 +1,14 @@
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl
@font-face
font-family: Delicious
src: local("Delicious"), font-url("Delicious-Roman.otf")
@font-face
font-family: Delicious
font-weight: bold
src: local("Delicious"), font-url("Delicious-Bold.otf")
@font-face
font-family: Delicious
font-style: italic
src: local("Delicious"), font-url("Delicious-Italic.otf")

View file

@ -2,7 +2,7 @@ import React from "react";
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing"; import { Integrations } from "@sentry/tracing";
import { Auth0Provider } from "@auth0/auth0-react"; import { Auth0Provider } from "@auth0/auth0-react";
import { ChakraProvider, Box } from "@chakra-ui/react"; import { ChakraProvider, Box, useColorModeValue } from "@chakra-ui/react";
import { ApolloProvider } from "@apollo/client"; import { ApolloProvider } from "@apollo/client";
import { useAuth0 } from "@auth0/auth0-react"; import { useAuth0 } from "@auth0/auth0-react";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
@ -141,6 +141,8 @@ function setupLogging() {
* ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its * ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its
* children (or, well, any element with the chakra-css-reset class). * children (or, well, any element with the chakra-css-reset class).
* *
* We also apply some base styles, like the default text color.
*
* TODO: What about Chakra's portal elements like toast messages, which are * TODO: What about Chakra's portal elements like toast messages, which are
* intentionally mounted elsewhere in the document? * intentionally mounted elsewhere in the document?
* *
@ -150,9 +152,13 @@ function setupLogging() {
* the selector `:where(.chakra-css-reset) h1` is lower specificity. * the selector `:where(.chakra-css-reset) h1` is lower specificity.
*/ */
function ScopedCSSReset({ children }) { function ScopedCSSReset({ children }) {
const baseTextColor = useColorModeValue("green.800", "green.50");
return ( return (
<> <>
<Box className="chakra-css-reset">{children}</Box> <Box className="chakra-css-reset" color={baseTextColor}>
{children}
</Box>
<Global <Global
styles={` styles={`
:where(.chakra-css-reset) { :where(.chakra-css-reset) {

View file

@ -4,6 +4,7 @@
%meta{charset: 'utf-8'} %meta{charset: 'utf-8'}
%title Dress to Impress %title Dress to Impress
%link{href: image_path('favicon.png'), rel: 'icon'} %link{href: image_path('favicon.png'), rel: 'icon'}
= stylesheet_link_tag 'fonts'
= javascript_include_tag 'wardrobe-2020-page', defer: true = javascript_include_tag 'wardrobe-2020-page', defer: true
%body %body
#wardrobe-2020-root #wardrobe-2020-root

View file

@ -9,4 +9,4 @@ Rails.application.config.assets.version = "1.0"
# Precompile additional assets. # Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in the app/assets # application.js, application.css, and all non-JS/CSS in the app/assets
# folder are already added. # folder are already added.
# Rails.application.config.assets.precompile += %w( admin.js admin.css ) Rails.application.config.assets.precompile += %w( fonts.css )