MLH Code of Conduct button visible on mobile, content vertical centering on desktop

src/covid-popover.js

@@ -27,7 +27,7 @@ class CovidPopover extends React.Component {
                     placement="top"
                     overlay={
                         <Popover id="popover-basic" >
-                            <PopoverTitle as="h3">{this.props.title}</PopoverTitle>
+                            <PopoverTitle as="h3">COVID-19 Notice</PopoverTitle>
                             <PopoverContent>
                                 {this.props.content}
                             </PopoverContent>

src/index.scss

@@ -22,7 +22,7 @@ $mobile-width: 720px;
   @media(max-width: #{$mobile-width}) { @content; }
 }
 
-//override sass min() & max(), use css
+//override sass min() & max() fn's, use css's
 @function min($numbers...) {
   @return m#{i}n(#{$numbers});
 }
@@ -58,11 +58,6 @@ html, body, #root, #app, .full-height {
   flex-shrink: 0;
 }
 
-.full-height { /* not really a good way to do it, will probably change to flex column layout */
-  height: calc(100% - 445px);
-  display: flex;
-  flex-direction: column;
-}
 .desktop-banner {
   width: 100%;
 
@@ -74,9 +69,10 @@ html, body, #root, #app, .full-height {
 
   background-color: $blue;
   color: white;
-}
-.desktop-banner span {
-  font-weight: 400;
+
+  span {
+    font-weight: 400;
+  }
 }
 
 #mlh-badge {
@@ -99,14 +95,13 @@ html, body, #root, #app, .full-height {
 }
 
 .navigation {
-  display: inline-block;
-
   width: 100%;
 
   font-size: 15px;
   font-weight: 500;
 
   color: $blue;
+  background-color: white;
 
   ul {
     list-style-type: none;
@@ -136,6 +131,8 @@ html, body, #root, #app, .full-height {
   }
 
   @include tablet {
+    display: inline-block;
+
     font-size: 12px;
     font-weight: 400;
 
@@ -168,15 +165,23 @@ html, body, #root, #app, .full-height {
     margin-bottom: max(1px, calc(10vh - 40px), calc(30vh - 190px));
   }
 }
+
 .section {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
   width: 100%;
-  max-width: 1100px;
+
+  max-width: $desktop-width;
   text-align: center;
   margin: auto;
 
-
   @include tablet {
     flex-direction: column;
+    margin: 0px;
   }
 }
 
@@ -198,13 +203,17 @@ html, body, #root, #app, .full-height {
   }
 }
 
+.hero-img.mobile-hide { //temporary, push up the desktop hero image a bit
+  margin-bottom: 75px;
+}
+
 /*
 note: development on a mac may not have all font-weights,
 lines of text may be wider than they appear
 */
 #hackathon-name {
-  height: 65px;
-  font-size: 60px;
+  height: 75px;
+  font-size: 70px;
   font-weight: 700;
   color: $blue;
 
@@ -214,8 +223,8 @@ lines of text may be wider than they appear
   }
 }
 #hackathon-description {
-  height: 37px;
-  font-size: 28.0px;
+  height: 43px;
+  font-size: 34px;
   font-weight: 700;
   color: $blue;
 
@@ -225,8 +234,8 @@ lines of text may be wider than they appear
   }
 }
 #hackathon-info {
-  height: 20px;
-  font-size: 14px;
+  height: 25px;
+  font-size: 17px;
   font-weight: 500;
   color: $blue;
 
@@ -237,14 +246,14 @@ lines of text may be wider than they appear
 }
 
 .mailchimp-container {
-  height: 40px;
-  width: 375px;
+  height: 50px;
+  width: 450px;
   margin: 20px auto;
-
+  
   border-style: solid;
   border-width: 1px;
   border-color: $blue;
-  border-radius: 20px;
+  border-radius: 25px;
 
   @include mobile {
     width: 80vw;
@@ -266,7 +275,7 @@ lines of text may be wider than they appear
 
   outline: none;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 17px;
   font-weight: 500;
 
   &::placeholder { /* this refers to the input placeholder text (enter your email...)*/
@@ -283,28 +292,28 @@ lines of text may be wider than they appear
   }
 }
 .mailchimp-button {
-  height: 30px;
-  width: 30px;
+  height: 40px;
+  width: 40px;
 
   margin-right: 5px;
 
   border-style: solid;
   border-width: 1px;
   border-color: $blue;
-  border-radius: 15px;
+  border-radius: 20px;
 
   background-color: white;
   background-image: url(./input-arrow.svg);
   background-repeat: no-repeat;
-  background-position: 3.75px;
-  background-size: 18px;
+  background-position: 4.5px;
+  background-size: 25px;
 
   outline: none;
   transition: 0.1s;
 
   @include desktop {
     &:hover {
-      background-position: 5.25px;
+      background-position: 6.5px;
     }
   }
 
@@ -337,8 +346,13 @@ lines of text may be wider than they appear
 }
 
 #contact {
-
   p {
     margin: 0;
+    font-weight: 500;
+    font-size: 20px;
+    height: 25px;
+    a{
+      font-size: 16px;
+    }
   }
 }

src/nav-bar.js

@@ -2,36 +2,35 @@ import React from 'react';
 
 class NavBar extends React.Component {
     componentDidMount(){
-        /*
-        var fixedContainer = document.getElementById("fixed-container");
+        var fixedContainer = document.getElementById("navigation-container");
         var children = Array.from(fixedContainer.children);
 
         children.forEach(child => {
             var clone = child.cloneNode(true);
             clone.removeAttribute("id");
             clone.style.visibility = "hidden";
-
+            clone.classList.add("desktop-hide");
+
             child.style.position = "fixed";
 
             fixedContainer.append(child);
             fixedContainer.append(clone);
         });
-        */
     }
     render(){
         return(
-            <div id="fixed-container">
-                <div className="desktop-banner mobile-hide" id="desktop-banner">
-                    <span>{this.props.title}</span>{this.props.content}
-                </div>
-
+            <div id="navigation-container">
                 <div className="navigation" id="navigation">
+                    <div className="desktop-banner mobile-hide" id="desktop-banner">
+                        <span>COVID-19 Notice: </span>{this.props.content}
+                    </div>
+
                     <a href="https://mlh.io/seasons/na-2021/events?utm_source=na-hackathon&amp;utm_medium=TrustBadge&amp;utm_campaign=2020-season&amp;utm_content=gray">
                         <img id="mlh-badge" alt="Major League Hacking 2021 Hackathon Season" src="https://s3.amazonaws.com/logged-assets/trust-badge/2021/mlh-trust-badge-2021-gray.svg"></img>
                     </a>
 
                     <ul className="flex-container">
-                        <li className="mobile-hide"><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH CODE OF CONDUCT</a></li>
+                        <li><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH CODE OF CONDUCT</a></li>
                         <li><a href="https://brickhack.io/gallery/">GALLERY</a></li>
                     </ul>
                 </div>

src/preregister.js

@@ -3,22 +3,21 @@ import NavBar from "./nav-bar.js";
 import MailchimpInput from "./mailchimp-input.js";
 import CovidPopover from "./covid-popover.js";
 
-var HeroImage = require('./hero.svg');
+var heroImage = require('./hero.svg');
+var heroImageAlt = "A decorative hero graphic."
 
-var desktopNotice = "COVID-19 Notice: "
-var mobileNotice = "COVID-19 Notice"
 var noticeContent = "We're planning BrickHack 7 to be the best and safest event possible. We will publish relevant information upon receiving updates from RIT and NY State."
 
 class PreRegister extends React.Component {
     render() {
         return (
         <div id="app">
-            <div className="full-height">
-                <NavBar
-                    title={desktopNotice}
-                    content={noticeContent}
-                />
-                <div className="section flex-container">
+            <NavBar 
+                content={noticeContent}
+            />
+
+            <div className="section">
+                <div className="content flex-container">
                     <div className="left-half">
                         <div id="hackathon-name">
                             BRICKHACK 7
@@ -29,29 +28,24 @@ class PreRegister extends React.Component {
                         <div id="hackathon-info">
                             Feb 20-21 | ROCHESTER INSTITUTE OF TECHNOLOGY
                         </div>
-
-                        <img className="hero-img desktop-hide" src={HeroImage} alt="A decorative background hero graphic."/>
-
+                        <img className="hero-img desktop-hide" src={heroImage} alt={heroImageAlt}/>
                         <MailchimpInput/>
 
                         <div id="contact" className="mobile-hide">
-                            <p>interested in sponsoring?</p>
-                            <p>email <a href="mailto:sponsorship@coderit.org">sponsorship@coderit.org</a></p>
+                            <p>Interested in Sponsoring?</p>
+                            <p><a href="mailto:sponsorship@coderit.org">sponsorship@coderit.org</a></p>
                         </div>
 
-                        <CovidPopover
-                            title={mobileNotice}
+                        <CovidPopover 
                             content={noticeContent}
                         />
-
                     </div>
 
                     <div className="right-half mobile-hide">
-                        <img className="hero-img" src={HeroImage} alt="A decorative background hero graphic."/>
+                        <img className="hero-img mobile-hide" src={heroImage} alt={heroImageAlt}/>
                     </div>
                 </div>
             </div>
-
         </div>
         );
     }