Nav-bar fixed, sections take up screen height & are vertically centered

Author: ww3637

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;
   }
 }
 
@@ -203,8 +208,8 @@ 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 +219,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 +230,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,16 +242,16 @@ lines of text may be wider than they appear
 }
 
 .mailchimp-container {
-  height: 40px;
-  width: 375px;
+  height: 50px;
+  width: 450px;
   margin: auto;
 
   margin-top: 10px;
 
   border-style: solid;
   border-width: 1px;
   border-color: $blue;
-  border-radius: 20px;
+  border-radius: 25px;
 
   @include mobile {
     width: 80vw;
@@ -267,7 +272,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...)*/
@@ -284,28 +289,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;
     }
   }
 

src/nav-bar.js

@@ -2,30 +2,29 @@ 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>{this.props.title}</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>

src/preregister.js

@@ -14,12 +14,13 @@ 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 
+                title={desktopNotice}
+                content={noticeContent}
+            />
+
+            <div className="section">
+                <div className="content flex-container">
                     <div className="left-half">
                         <div id="hackathon-name">
                             BRICKHACK 7
@@ -43,7 +44,6 @@ class PreRegister extends React.Component {
                     </div>
                 </div>
             </div>
-
         </div>
         );
     }