Add a BLM banner

src/components/Container/Container.js

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

src/components/LayoutFooter/Footer.js

@@ -23,6 +23,7 @@ import ossLogoPng from 'images/oss_logo.png';
 const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
   <footer
     css={{
+      filter: 'grayscale(100%)', // BLM
       backgroundColor: colors.darker,
       color: colors.white,
       paddingTop: 10,

src/components/LayoutHeader/Header.js

@@ -34,6 +34,31 @@ const Header = ({location}: {location: Location}) => (
       },
     }}>
     <Container>
+      <div
+        css={{
+          height: 60,
+          fontSize: 20,
+          padding: 20,
+          textAlign: 'center',
+          [media.between('small', 'large')]: {
+            height: 60,
+          },
+          [media.lessThan('small')]: {
+            height: 80,
+          },
+        }}>
+        Black Lives Matter.{' '}
+        <a
+          style={{color: colors.brand}}
+          target="_blank"
+          rel="noopener"
+          rel="noreferrer"
+          href="https://support.eji.org/give/153413/#!/donation/checkout">
+          Support&nbsp;the&nbsp;Equal&nbsp;Justice&nbsp;Initiative.
+        </a>
+      </div>
+    </Container>
+    <Container grayscale={true}>
       <div
         css={{
           display: 'flex',

src/components/MarkdownHeader/MarkdownHeader.js

@@ -15,15 +15,15 @@ const MarkdownHeader = ({title}: {title: string}) => (
       css={{
         color: colors.dark,
         marginBottom: 0,
-        marginTop: 40,
+        marginTop: 100, // BLM
         ...fonts.header,
 
         [media.size('medium')]: {
-          marginTop: 60,
+          marginTop: 100, // BLM
         },
 
         [media.greaterThan('large')]: {
-          marginTop: 80,
+          marginTop: 100, // BLM
         },
       }}>
       {title}

src/components/MarkdownPage/MarkdownPage.js

@@ -84,7 +84,11 @@ const MarkdownPage = ({
               <MarkdownHeader title={titlePrefix} />
 
               {(date || hasAuthors) && (
-                <div css={{marginTop: 15}}>
+                <div
+                  css={{
+                    marginTop: 15,
+                    filter: 'grayscale(100%)', // BLM
+                  }}>
                   {date}{' '}
                   {hasAuthors && (
                     <span>

src/css/reset.css

@@ -13,7 +13,6 @@ html {
 body {
   overflow-x: hidden;
   position: relative;
-  filter: grayscale(100%);
 }
 
 * {

src/pages/index.js

@@ -53,7 +53,12 @@ class Home extends Component {
           title="React – A JavaScript library for building user interfaces"
           canonicalUrl={createCanonicalUrl('/')}
         />
-        <div css={{width: '100%'}}>
+        <div
+          css={{
+            width: '100%',
+            marginTop: 60, // BLM
+            filter: 'grayscale(100%)', // BLM
+          }}>
           <header
             css={{
               backgroundColor: colors.dark,

src/templates/components/NavigationFooter/NavigationFooter.js

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

src/templates/components/Sidebar/Sidebar.js

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

src/theme.js

@@ -132,6 +132,8 @@ const sharedStyles = {
       },
     },
     content: {
+      filter: 'grayscale(100%)', // BLM
+
       marginTop: 40,
       marginBottom: 120,
 
@@ -186,6 +188,7 @@ const sharedStyles = {
   },
 
   markdown: {
+    filter: 'grayscale(100%)', // BLM
     lineHeight: '25px',
 
     '& .gatsby-highlight': {