responsive title

Author: cherylqian

src/Header.js

@@ -5,7 +5,8 @@ import { Navbar, Nav } from "react-bootstrap";
 const Header = () => (
   <Navbar expand="md" variant="light" bg="light" sticky="top">
     <Navbar.Brand as={NavLink} exact to="/">
-      ACM Siggraph University of Illinois
+      <span className="full-brand">ACM SIGGRAPH University of Illinois</span>
+      <span className="abbrev-brand">SIGGRAPH UIUC</span>
     </Navbar.Brand>
     <Navbar.Toggle aria-controls="navbar-nav" />
     <Navbar.Collapse id="navbar-nav">

src/styles/index.scss

@@ -35,12 +35,15 @@ h1.center {
   left: 0;
 }
 
+// reference https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551
+$footer-height: 3.5em;
+
 .main-container {
   min-height: 100vh; /* will cover the 100% of viewport */
   overflow: hidden;
   display: block;
   position: relative;
-  padding-bottom: 2.5em; /* height of your footer */
+  padding-bottom: $footer-height; /* height of your footer */
 }
 
 .container {
@@ -51,7 +54,7 @@ h1.center {
   position: absolute;
   bottom: 0;
   width: 100%;
-  height: 2.5em;
+  height: $footer-height;
 
   display: flex;
   justify-content: center;
@@ -87,3 +90,17 @@ h1.center {
   transform: translateY(-50%);
   width: calc(100% - 20px);
 }
+
+.full-brand {
+  display: block;
+  @media (max-width: 768px) {
+    display: none;
+  }
+}
+
+.abbrev-brand {
+  display: none;
+  @media (max-width: 768px) {
+    display: block;
+  }
+}