Resolve #14 add map title and header/logos

-Add semitransparent header
-Add media queries for resizing
-Replace SVG reference with actual SVG encoding

app/javascript/pages/App.jsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Map from './components/map.jsx';
+import Header from './components/header';
 
 const App = () => (
-  <Switch>
-    <Route exact path="/" component={Map} />
+  <div>
+    <Header />
+    <Switch>
+      <Route exact path="/" component={Map} />
   </Switch>
+  </div>
 );
 
 export default App;

app/javascript/pages/components/header.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import Logo from '../../../assets/images/logo.svg';
+
+
+export default class Header extends Component {
+  constructor(props) {
+    super(props);
+    this.el = document.createElement('div');
+  }
+
+  render() {
+    return (
+      <header className="header">
+        <img src="https://www.mapc.org/wp-content/themes/mapc/assets/images/mapc-logo.svg" className="header__image" alt="Metropolitan Area Planning Council"/>
+        <h1 className="header__title">Trailmap: Metro Boston's Regional Walking and Cycling Map</h1>
+      </header>
+    );
+  }
+}

app/javascript/styles/map.scss

@@ -1,11 +1,49 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap');
 $toggle-switch-height: 20px;
+$control-margin-top: 8vh;
 
 body {
   font-family: 'Source Sans Pro', sans-serif;
   margin: 0;
 }
 
+.header {
+  align-items: center;
+  background-color: rgba(0, 112, 205, .7);
+  display: flex;
+  flex-direction: row;
+  height: 6vh;
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+
+  &__image {
+    margin: 0 20px;
+    height: 4vh;
+  }
+
+  &__title {
+    @media only screen and (min-width: 791px) and (max-width: 990px) {
+      font-size: 20px;
+    }
+
+    @media only screen and (max-width: 790px) {
+      font-size: 16px;
+    }
+
+    @media only screen and (max-width: 400px) {
+      font-size: 12px;
+      padding: 0 20px 0 0;
+    }
+
+    color: #ffffff;
+    font-family: "Rockwell";
+    font-size: 26px;
+    margin: unset;
+    padding: 10px 20px 0 0;
+  }
+}
+
 .control-panel {
   @media only screen and (min-width: 375px) and (max-width: 812px) {
     font-size: 12px;
@@ -28,7 +66,7 @@ body {
     border: .5px solid #0070CD;
     border-radius: 10px;
     display: inline-block;
-    margin: 1rem;
+    margin: $control-margin-top 1rem 10px 1rem;
   }
 
   &__title {
@@ -271,7 +309,7 @@ body {
 
 .mapboxgl-ctrl-top-left {
   display: flex;
-  margin: 1rem 0 0 3rem;
+  margin: $control-margin-top 0 0 3rem;
 }
 
 .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
@@ -293,6 +331,7 @@ body {
 .mapboxgl-ctrl-top-right {
   display: flex;
   flex-wrap: wrap;
+  margin-top: $control-margin-top;
 }
 
 .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-scale {