Update styling

public/css/app.css

@@ -1,8 +1,26 @@
-#pageHeader {
-    text-align: center;
+/*
+ *  Typography
+ */
+
+body {
+    font-family: Verdana, Arial, sans-serif;
+    font-size: 16px;
 }
 
-.positive, .negative {
+.page-title {
+    font-size: 3em;
+    text-align: center;
+    @media screen and (min-width: 1024px) {
+        text-align: left;
+    }
+}
+
+details h2 {
+    display: inline;
+}
+
+.positive,
+.negative {
     font-weight: bold;
 }
 
@@ -19,23 +37,52 @@
     font-size: 0.8em;
 }
 
+/*
+ *  Layout
+ */
+
+.other-links {
+    display: block;
+    text-align: center;
+    margin: auto;
+}
+
+.trip-meta {
+    display: block;
+    width: 100%;
+}
+
+.main--list {
+    margin: auto;
+    width: 100%;
+    max-width: 980px;
+}
+
 #routeContainer {
     display: grid;
+    grid-gap: 20px;
+    @media screen and (min-width: 1024px) {
+        grid-template-columns: 3fr 1fr;
+    }
 }
 
 #map { 
     height: 400px;
     grid-column-start: 1;
     grid-column-end: 3;
+    @media screen and (min-width: 1024px) {
+        height: auto;
+        min-height: 800px;
+        grid-column-end: 2;
+    }
 }
 
 #checkinList {
     grid-column-start: 1;
     grid-column-end: 3;
-}
-
-details h2 {
-    display: inline;
+    @media screen and (min-width: 1024px) {
+        grid-column-start: 2;
+    }
 }
 
 details {
@@ -55,6 +102,9 @@ details[open] summary {
     max-width: 85vw;
     max-height: 85vh;
     min-width: 60vw;
+    @media screen and (min-width: 1024px) {
+        min-width: 350px;
+    }
 }
 
 .leaflet-popup-content {
@@ -65,29 +115,7 @@ details[open] summary {
     width: auto;
     height: auto;
     max-width: 70vw;
-}
-
-@media screen and (min-width: 1024px) {
-    #routeContainer {
-        grid-template-columns: 3fr 1fr;
-    }
-
-    #map {
-        height: auto;
-        min-height: 800px;
-        grid-column-end: 2;
-    }
-
-    #checkinList {
-        grid-column-start: 2;
-    }
-
-    .leaflet-popup {
-        min-width: 350px;
-    } 
-
-    .popup__image {
+    @media screen and (min-width: 1024px) {
         max-width: 50vw;
     }
 }
-