Browse Source

remove grayscale treatment (#3024)

As per https://twitter.com/sliminality/status/1269033413488459776, there's feedback that the contrast isn't great for reading. I myself have trouble with low contrast text, (and long sightedness), and I thought it was fine. I was clearly mistaken. Removing this for now to get back to a non harmful position, and we can decide later what to do instead.
main
Sunil Pai 5 years ago
committed by GitHub
parent
commit
c9b990070f
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 9
      src/components/Container/Container.js
  2. 1
      src/components/LayoutFooter/FooterNav.js
  3. 2
      src/components/LayoutHeader/Header.js
  4. 1
      src/components/MarkdownPage/MarkdownPage.js
  5. 1
      src/pages/index.js
  6. 2
      src/templates/components/NavigationFooter/NavigationFooter.js
  7. 2
      src/templates/components/Sidebar/Sidebar.js
  8. 2
      src/theme.js

9
src/components/Container/Container.js

@ -15,20 +15,13 @@ import type {Node} from 'react';
* This component wraps page content sections (eg header, footer, main). * This component wraps page content sections (eg header, footer, main).
* It provides consistent margin and max width behavior. * It provides consistent margin and max width behavior.
*/ */
const Container = ({ const Container = ({children}: {children: Node}) => (
children,
grayscale,
}: {
children: Node,
grayscale: boolean,
}) => (
<div <div
css={{ css={{
paddingLeft: 20, paddingLeft: 20,
paddingRight: 20, paddingRight: 20,
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
filter: grayscale ? 'grayscale(100%)' : '',
[media.greaterThan('medium')]: { [media.greaterThan('medium')]: {
width: '90%', width: '90%',
}, },

1
src/components/LayoutFooter/FooterNav.js

@ -34,7 +34,6 @@ const FooterNav = ({children, title, layoutHasSidebar = false}: Props) => (
css={{ css={{
display: 'inline-flex', display: 'inline-flex',
flexDirection: 'column', flexDirection: 'column',
filter: 'grayscale(100%)',
}}> }}>
{children} {children}
</div> </div>

2
src/components/LayoutHeader/Header.js

@ -61,7 +61,7 @@ const Header = ({location}: {location: Location}) => (
</a> </a>
</div> </div>
</Container> </Container>
<Container grayscale={true}> <Container>
<div <div
css={{ css={{
display: 'flex', display: 'flex',

1
src/components/MarkdownPage/MarkdownPage.js

@ -87,7 +87,6 @@ const MarkdownPage = ({
<div <div
css={{ css={{
marginTop: 15, marginTop: 15,
filter: 'grayscale(100%)', // BLM
}}> }}>
{date}{' '} {date}{' '}
{hasAuthors && ( {hasAuthors && (

1
src/pages/index.js

@ -57,7 +57,6 @@ class Home extends Component {
css={{ css={{
width: '100%', width: '100%',
marginTop: 60, // BLM marginTop: 60, // BLM
filter: 'grayscale(100%)', // BLM
}}> }}>
<header <header
css={{ css={{

2
src/templates/components/NavigationFooter/NavigationFooter.js

@ -15,8 +15,6 @@ const NavigationFooter = ({next, prev, location}) => {
return ( return (
<div <div
css={{ css={{
filter: 'grayscale(100%)', // BLM
background: colors.dark, background: colors.dark,
color: colors.white, color: colors.white,
paddingTop: 50, paddingTop: 50,

2
src/templates/components/Sidebar/Sidebar.js

@ -37,8 +37,6 @@ class Sidebar extends Component {
direction="column" direction="column"
halign="stretch" halign="stretch"
css={{ css={{
filter: 'grayscale(100%)', // BLM
width: '100%', width: '100%',
paddingLeft: 20, paddingLeft: 20,
position: 'relative', position: 'relative',

2
src/theme.js

@ -132,8 +132,6 @@ const sharedStyles = {
}, },
}, },
content: { content: {
filter: 'grayscale(100%)', // BLM
marginTop: 40, marginTop: 40,
marginBottom: 120, marginBottom: 120,

Loading…
Cancel
Save