Add header logo, bg color, Lato font

_includes/head.html

@@ -8,6 +8,7 @@
 
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   <link rel="shortcut icon" type="image/png" href="{{ '/img/favicon.png' | prepend: site.baseurl }}" >
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">

_includes/header.html

@@ -1,17 +1,19 @@
-<nav class="navbar navbar-expand-sm mb-4 navbar-light bg-light" data-component="navigation">
+<nav class="navbar navbar-expand-sm mb-4 navbar-light" data-component="navigation">
   <div class="container">
-  <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
-<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
-  <span class="sr-only">Toggle navigation</span>
-  <span class="navbar-toggler-icon"></span>
-</button>
+    <a alt="{{ site.title }}" class="navbar-brand" href="{{ site.baseurl }}/">
+      <img src="{{ site.logo }}" srcset="/img/[email protected] 2x" alt="OpenDataPhilly" title="OpenDataPhilly">
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="sr-only">Toggle navigation</span>
+      <span class="navbar-toggler-icon"></span>
+    </button>
     <div class="collapse navbar-collapse" id="navbarNavDropdown">
       <ul class="navbar-nav">
         {% for link in site.navigation %}
           {% if page.url contains link.url %}
-          <li class="nav-item"><a class="nav-link active" href="{{ site.baseurl }}{{ link.url }}" aria-current="page">{{ link.title }}</a></li>
+          <li class="nav-item"><a class="nav-link text-light active" href="{{ site.baseurl }}{{ link.url }}" aria-current="page">{{ link.title }}</a></li>
           {% else %}
-          <li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}{{ link.url }}">{{ link.title }}</a></li>
+          <li class="nav-item"><a class="nav-link text-light" href="{{ site.baseurl }}{{ link.url }}">{{ link.title }}</a></li>
           {% endif %}
         {% endfor %}
       </ul>

css/main.css

@@ -1,3 +1,7 @@
+body {
+  font-family: "Lato", sans-serif;
+}
+
 input[data-hook=search-query] {
   display: none;
 }
@@ -91,4 +95,15 @@ dataset {
   background-color: #e9ecef;
   padding: .75rem 1rem;
   border-radius: .25rem;
-}
+}
+
+nav {
+  background-color: #31383c;
+  color: #fff;
+  padding-top: 2rem !important;
+}
+
+.nav-item .active {
+  background-color: #20c3c4;
+  border-radius: 4px;
+}