Update styling

public/css/app.css

@@ -5,11 +5,13 @@
 body {
     font-family: Verdana, Arial, sans-serif;
     font-size: 16px;
+    margin: 0;
 }
 
 .page-title {
     font-size: 3em;
     text-align: center;
+    margin-top: 0;
 }
 
 details h2 {
@@ -56,8 +58,30 @@ details h2 {
 }
 
 .other-links li {
+    background-color: #5adefc;
     float: left;
     margin-right: 1.5em;
+    border: 2px solid white;
+    border-radius: 1em;
+}
+
+.other-links li:first-of-type {
+    margin-right: 0;
+}
+
+.other-links li:hover {
+    background-color: #2389a0;
+}
+
+.other-links li p {
+    padding: 0.5em 1em;
+    margin: 0;
+}
+
+.other-links li p a {
+    color: #fff;
+    font-weight: bold;
+    text-decoration: none;
 }
 
 .trip-meta {
@@ -74,7 +98,6 @@ details h2 {
 
 #routeContainer {
     display: grid;
-    grid-gap: 20px;
 }
 
 #mapContainer {
@@ -89,6 +112,7 @@ details h2 {
 #checkinList {
     grid-column-start: 1;
     grid-column-end: 3;
+    border-top: 5px solid black;
 }
 
 .checkin {
@@ -131,22 +155,42 @@ details h2 {
     width: auto;
     height: auto;
     max-width: 70vw;
+    max-height: 45vh;
+    margin-top: 1em;
+    display: block;
 }
 
 /*
  *  Large Display
  */
 @media screen and (min-width: 1024px) {
-    .page-title {
+    .page-header {
-        text-align: left;
+        padding: 1em;
     }
     
+    .page-title {
+        text-align: left;
+        display: inline-block;
+        margin-bottom: 0;
+    }
+
+    .other-links {
+        display: inline-block;
+        vertical-align: bottom;
+    }
+    
+    .trip-meta {
+        text-align: left;
+    }
+
     #routeContainer {
-        grid-template-columns: 3fr 1fr;
+        grid-template-columns: 2fr 1fr;
     }
     
     #mapContainer {
         grid-column-end: 2;
+        height: fit-content;
+        border-bottom: 5px solid black;
     }
     
     #map {
@@ -156,6 +200,13 @@ details h2 {
     
     #checkinList {
         grid-column-start: 2;
+        border-top: 0;
+        border-left: 5px solid black;
+    }
+
+    #checkinList ol {
+        margin-top: 0;
+        margin-right: 1em;
     }
     
     .leaflet-popup {
@@ -163,6 +214,8 @@ details h2 {
     }
     
     .popup__image {
-        max-width: 50vw;
+        max-width: 100%;
+        max-height: none;
+        margin-top: 1em;
     }
 }