Fix typography on wardrobe 2020 page
Add the green body color back in, and add the Delicious font!
This commit is contained in:
parent
9cc45f0988
commit
64e3702d6d
5 changed files with 25 additions and 3 deletions
|
@ -1,4 +1,5 @@
|
|||
@import "partials/icon"
|
||||
@import fonts
|
||||
@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=Calligraffitti)
|
||||
|
|
14
app/assets/stylesheets/fonts.sass
Normal file
14
app/assets/stylesheets/fonts.sass
Normal 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")
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import * as Sentry from "@sentry/react";
|
||||
import { Integrations } from "@sentry/tracing";
|
||||
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 { useAuth0 } from "@auth0/auth0-react";
|
||||
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
|
||||
* 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
|
||||
* intentionally mounted elsewhere in the document?
|
||||
*
|
||||
|
@ -150,9 +152,13 @@ function setupLogging() {
|
|||
* the selector `:where(.chakra-css-reset) h1` is lower specificity.
|
||||
*/
|
||||
function ScopedCSSReset({ children }) {
|
||||
const baseTextColor = useColorModeValue("green.800", "green.50");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box className="chakra-css-reset">{children}</Box>
|
||||
<Box className="chakra-css-reset" color={baseTextColor}>
|
||||
{children}
|
||||
</Box>
|
||||
<Global
|
||||
styles={`
|
||||
:where(.chakra-css-reset) {
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
%meta{charset: 'utf-8'}
|
||||
%title Dress to Impress
|
||||
%link{href: image_path('favicon.png'), rel: 'icon'}
|
||||
= stylesheet_link_tag 'fonts'
|
||||
= javascript_include_tag 'wardrobe-2020-page', defer: true
|
||||
%body
|
||||
#wardrobe-2020-root
|
||||
|
|
|
@ -9,4 +9,4 @@ Rails.application.config.assets.version = "1.0"
|
|||
# Precompile additional assets.
|
||||
# application.js, application.css, and all non-JS/CSS in the app/assets
|
||||
# folder are already added.
|
||||
# Rails.application.config.assets.precompile += %w( admin.js admin.css )
|
||||
Rails.application.config.assets.precompile += %w( fonts.css )
|
||||
|
|
Loading…
Reference in a new issue