From 20fd86830b29b8ff357ab738662096abcfcab2de Mon Sep 17 00:00:00 2001
From: Matt Zabriskie <mzabriskie@gmail.com>
Date: Thu, 11 Jun 2020 11:42:32 -0600
Subject: [PATCH] Fixing style issues

---
 app/screens/BLM/index.js       | 10 +++++++++-
 assets/css/responsive-800.scss |  4 ++--
 assets/css/styles.scss         | 11 ++++++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/app/screens/BLM/index.js b/app/screens/BLM/index.js
index 7246645..96ef689 100644
--- a/app/screens/BLM/index.js
+++ b/app/screens/BLM/index.js
@@ -1,6 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 export default () => {
+  useEffect(() => {
+    const container = document.getElementById('container');
+
+    container.classList.add('fullscreen');
+
+    return () => container.classList.remove('fullscreen');
+  }, [])
+
   return (
     <div className="BlackLivesMatter">
       <section>
diff --git a/assets/css/responsive-800.scss b/assets/css/responsive-800.scss
index bb67421..2fd3db8 100644
--- a/assets/css/responsive-800.scss
+++ b/assets/css/responsive-800.scss
@@ -141,7 +141,7 @@ input[type='email'] {
 
       .Header__Nav__Menu {
         position: absolute;
-        top: 91px;
+        top: 91px + $banner-offset;
         left: 0;
         right: 0;
         height: 394px;
@@ -176,7 +176,7 @@ input[type='email'] {
           margin: 0;
           text-align: center;
           position: absolute;
-          top: -369px;
+          top: -369px + $banner-offset;
           left: 25px;
         }
       }
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 89b4348..794a7b0 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -25,6 +25,7 @@ $size-font-default: 20px;
 $size-font-medium: 18px;
 $size-font-small: 14px;
 $size-font-xsmall: 12px;
+$banner-offset: 42px;
 
 /* typography */
 body {
@@ -129,6 +130,12 @@ input[type='email'] {
   box-sizing: border-box;
 }
 
+#container.fullscreen {
+  .Header, .Footer {
+    display: none;
+  }
+}
+
 .col {
   display: inline-block;
   vertical-align: top;
@@ -517,7 +524,7 @@ input[type='email'] {
   color: $color-red;
   position: absolute;
   height: 57px;
-  top: 17px;
+  top: 17px + $banner-offset;
   right: 25px;
 }
 .Header__Nav section:last-of-type {
@@ -697,10 +704,12 @@ section.Footer__Tickets h2 {
   border: 0 none;
   color: #ccc;
   padding: 0;
+  margin: 0;
 }
 .BlackLivesMatter section {
   max-width: 800px;
   margin: 0 auto;
+  padding: 25px !important;
 }
 
 /* -- Icon -- */