Fixing style issues

react-rally · Jun 11, 2020 · 20fd868 · 20fd868
1 parent cb3826b
commit 20fd868
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 -- */