forked from OpenNeo/impress
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 "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)
|
||||||
|
|
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 * 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) {
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 )
|
||||||
|
|
Loading…
Reference in a new issue