Map page layout fixes

[gsehrlich]

Checklist

• Add description
• Reference the open issue that the pull request addresses
• Pass code quality checks
  • spin up docker docker-compose up -d --build
  • enter api container docker-compose exec api /bin/bash
  • run api tests make validate
  • exit container ctrl/command+D or exit
  • enter web container docker-compose exec web /bin/sh
  • run front-end tests npm run test or npx jest
  • lint npm run lint-fix
  • exit container as above
• Request code review
  • Please allow 36 hours from opening a pull request before merging a pull request- even if it has already received an approving review.
• Address comments on code and resolve requested changes
• Merge own code

Description

Issue: #494

Brief description of solution

• Use Semantic UI more/better
  • Remove redundant nested Containers
  • Switch out plain HTML components for Semantic UI components
  • Eliminate unnecessary CSS
  • Do more of this
• Square map box
  • Use a CSS trick for constant aspect ratio https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css
  • Replace the Semantic UI Grid.Columns with a regular flexbox and set the column widths appropriately
  • Figure out how to accomplish the same with Semantic UI
• Create footer
  • Use Semantic UI React Menu
  • Change App.js styles so that footer is at the bottom of the page even if the content is shorter
  • Add logos
• Remove grid container's negative margin
• Move nav items up
• Logo fixes
• Font fixes

[ayennac]

Changes looked good! I have a question was the move from to

on line 55 of map/menu.js, but I'll slack it to you!