Black Lives Matter

Author: mzabriskie

app/components/Header.js

@@ -209,6 +209,9 @@ export default class Header extends Component {
           Header__Home: isHomeScreen,
           'Header--menuOpen': isMenuOpen,
         })}>
+        <div className="BlackLivesMatter__Banner">
+          <Link to="/blm">Black Lives Matter</Link>
+        </div>
         <Navigation
           onMenuClick={isOpen => {
             if (typeof isOpen === 'undefined') {

app/screens/BLM/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default () => {
+  return (
+    <div className="BlackLivesMatter">
+      <section>
+        <h1>Black Lives Matter ✊🏽✊🏾✊🏿</h1>
+        <p>
+          We are both heartbroken and outraged at the murder of George Floyd. Too many black lives have ended at the hands of those who are meant to serve and protect our communities. There is no place for this kind of hate or bigotry in the world. We stand in solidarity with the black community. We stand with those who are protesting for justice and police reform throughout the country. We stand with those who are oppressed for the color of their skin. We stand for racial equality. We stand with black lives because black lives matter.
+        </p>
+        <p>– Matt & Jamison</p>
+      </section>
+    </div>
+  )
+};

assets/css/styles.scss

@@ -673,6 +673,36 @@ section.Footer__Tickets h2 {
   visibility: visible;
 }
 
+/* -- Black Lives Matter -- */
+.BlackLivesMatter__Banner {
+  background: #222;
+  text-align: center;
+  padding: 10px;
+}
+.BlackLivesMatter__Banner a {
+  color: #ccc;
+}
+
+.BlackLivesMatter {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #222;
+  color: #ccc;
+  overflow: auto;
+}
+.BlackLivesMatter h1 {
+  border: 0 none;
+  color: #ccc;
+  padding: 0;
+}
+.BlackLivesMatter section {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
 /* -- Icon -- */
 .Icon {
   color: $color-grayDark;

index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import {Router, Route, IndexRoute, browserHistory} from 'react-router';
 import App from 'App';
 import About from 'screens/About';
+import BLM from 'screens/BLM';
 import Conduct from 'screens/Conduct';
 import Home from 'screens/Home';
 import Schedule from 'screens/Schedule';
@@ -56,6 +57,7 @@ ReactDOM.render(
     <Route path="/" component={App}>
       <IndexRoute component={Home} />
       <Route path="/about" component={About} />
+      <Route path="/blm" component={BLM} />
       <Route path="/conduct" component={Conduct} />
       <Route path="/schedule" component={Schedule} />
       <Route path="/speakers" component={Speakers} />