Fix popup centering, styling, a bunch of other stuff

public/css/app.css

@@ -9,7 +9,7 @@ body {
 }
 
 .page-title {
-    font-size: 3em;
+    font-size: 1.5em;
     text-align: center;
     margin-top: 0;
 }
@@ -40,12 +40,27 @@ details h2 {
  *  Layout
  */
 
+body {
+    border: 5px solid black;
+    box-sizing: border-box;
+    height: 100vh;
+/*    overflow: hidden;*/
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 100%;
+    grid-template-areas:
+        "header"
+        "route";
+}
+
 .page-header {
+    grid-area: header;
     background-color: #a4ecfc;
     border-bottom: 5px solid black;
 }
 
 .other-links {
+    font-size: 1em;
     display: block;
     margin: auto;
     overflow: auto;
@@ -74,7 +89,7 @@ details h2 {
 }
 
 .other-links li p {
-    padding: 0.5em 1em;
+    padding: 0.25em 0.5em;
     margin: 0;
 }
 
@@ -87,6 +102,7 @@ details h2 {
 .trip-meta {
     display: block;
     width: 100%;
+    font-size: 0.8em;
     text-align: center;
 }
 
@@ -98,22 +114,28 @@ details h2 {
 
 #routeContainer {
     display: grid;
+    grid-area: route;
+    grid-template-rows: 55% 45%;
+    grid-template-columns: 100%;
+    overflow: hidden;
+    grid-template-areas:
+        "map"
+        "checkins";
 }
 
 #mapContainer {
-    grid-column-start: 1;
-    grid-column-end: 3;
+    grid-area: map;
 }
 
 #map { 
-    height: 400px;
+    height: 100%;
 }
 
 #checkinList {
-    grid-column-start: 1;
-    grid-column-end: 3;
+    grid-area: checkins;
     border-top: 5px solid black;
     padding: 0 1em;
+    overflow: scroll;
 }
 
 .checkin {
@@ -130,6 +152,10 @@ details h2 {
     border-bottom: 1px solid gray;
 }
 
+.checkin__title {
+    font-size: 1em;
+}
+
 .checkin__meta {
     margin: 0;
 }
@@ -161,50 +187,65 @@ details h2 {
     display: block;
 }
 
+/*
+ *  Medium Display
+ */
+@media screen and (min-width: 728px) {
+    .page__title {
+        font-size: 2em;
+    }
+}
+
 /*
  *  Large Display
  */
 @media screen and (min-width: 1024px) {
+    #routeContainer {
+        grid-template-columns: 60% 40%;
+        grid-template-rows: 100%;
+        grid-template-areas:
+            "map checkins";
+    }
+
     .page-header {
         padding: 1em;
     }
     
     .page-title {
+        font-size: 2.5em;
         text-align: left;
         display: inline-block;
         margin-bottom: 0;
     }
 
     .other-links {
+        font-size: 1.2em;
         display: inline-block;
         vertical-align: bottom;
     }
+
+    .other-links li a {
+        padding: 0.5em 1em;
+    }
     
     .trip-meta {
         text-align: left;
-    }
-
-    #routeContainer {
-        grid-template-columns: 2fr 1fr;
-    }
-    
-    #mapContainer {
-        grid-column-end: 2;
-        height: fit-content;
-        border-bottom: 5px solid black;
+        font-size: 1em;
     }
     
     #map {
-        height: auto;
-        min-height: 800px;
+        height: 100%;
     }
     
     #checkinList {
-        grid-column-start: 2;
         border-top: 0;
         border-left: 5px solid black;
     }
 
+    .section__title {
+        text-align: center;
+    }
+
     #checkinList ol {
         margin-top: 0;
         margin-right: 1em;
@@ -216,7 +257,7 @@ details h2 {
     
     .popup__image {
         max-width: 100%;
-        max-height: none;
+        max-height: 60vh;
         margin-top: 1em;
     }
 }