Finished layout for mobile

public/css/style.css

@@ -70,9 +70,22 @@ nav {
   align-items: center;
   justify-content: space-between;
 }
+nav > div:first-child {
+  margin-left: 1.25rem;
+}
+nav > div:last-child {
+  margin-right: 1rem;
+}
 nav > * {
   width: 33.33%;
 }
+nav .hamburger {
+  border: none;
+  background-color: transparent;
+}
+nav .hamburger ion-icon {
+  margin-top: 0.15rem;
+}
 .nav-logo > img {
   width: 64px;
   height: 64px;
@@ -112,6 +125,12 @@ nav > * {
 .nav-hyperlinks ion-icon {
   font-size: 28px;
 }
+.nav-hyperlinks li:not([data-mobile]) {
+  display: none;
+}
+.nav-hyperlinks li[data-mobile] {
+  display: list-item;
+}
 
 .nav-hyperlinks a span {
   display: inline-block;
@@ -210,7 +229,7 @@ footer ul li:last-child {
   flex-grow: 1;
 }
 .footer-links > :last-child {
-  margin-left: rem;
+  margin-left: 2rem;
 }
 
 /* -xs */
@@ -230,6 +249,16 @@ footer ul li:last-child {
   .container {
     max-width: 960px;
   }
+  nav > div:first-child,
+  nav > div:last-child {
+    margin: 0;
+  }
+  .nav-hyperlinks li[data-mobile] {
+    display: none;
+  }
+  .nav-hyperlinks li:not([data-mobile]) {
+    display: list-item;
+  }
   .flex-adaptive {
     flex-direction: row;
   }