Align styling with bengoldsworthy.net

public/css/app.css

@@ -1,11 +1,19 @@
+:root {
+    --dark: #020202;
+    --light: #fffff0;
+}
+
 /*
  *  Typography
  */
 
 body {
-    font-family: Verdana, Arial, sans-serif;
+    /*font-family: Verdana, Arial, sans-serif;*/
     font-size: 16px;
     margin: 0;
+    color: var(--dark, #020202);
+    background-color: var(--light, #fffff0);
+    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 }
 
 .page-title {
@@ -36,6 +44,15 @@ details h2 {
     font-size: 0.8em;
 }
 
+#allCheckinsLink {
+    opacity: 0.7;
+    color: var(--dark, #020202);
+}
+
+#allCheckinsLink:hover {
+    opacity: 1;
+}
+
 /*
  *  Layout
  */
@@ -44,7 +61,6 @@ body {
     border: 5px solid black;
     box-sizing: border-box;
     height: 100vh;
-/*    overflow: hidden;*/
     display: grid;
     grid-template-rows: auto 1fr;
     grid-template-columns: 100%;
@@ -55,8 +71,8 @@ body {
 
 .page-header {
     grid-area: header;
-    background-color: #a4ecfc;
     border-bottom: 5px solid black;
+    padding-top: 1em;
 }
 
 .other-links {
@@ -73,10 +89,9 @@ body {
 }
 
 .other-links li {
-    background-color: #5adefc;
     float: left;
     margin-left: 1.5em;
-    border: 2px solid white;
+    border: 2px solid var(--dark);
     border-radius: 1em;
 }
 
@@ -85,7 +100,7 @@ body {
 }
 
 .other-links li:hover {
-    background-color: #2389a0;
+    background-color: #ddddd2;
 }
 
 .other-links li p {
@@ -94,7 +109,7 @@ body {
 }
 
 .other-links li p a {
-    color: #fff;
+    color: var(--dark, #020202);
     font-weight: bold;
     text-decoration: none;
 }
@@ -185,6 +200,8 @@ body {
     max-height: 45vh;
     margin-top: 1em;
     display: block;
+    background-color: white;
+    border: 2px solid var(--dark, #020202);
 }
 
 /*

resources/views/tracker.blade.php

@@ -77,13 +77,16 @@
                     @foreach($trip->locations as $location)
                     [{{ $location->latitude }}, {{ $location->longitude }}],
                     @endforeach
-                ]).addTo(map);
+                ], {
+                    color: '#3d3d3d'
+                }).addTo(map);
 
                 /*
                  * Populate all the checkins and popup texts.
                  */
                 var checkinMarkers = [];
                 var marker = null, popupMarkup = null;
+                L.Icon.Default.imagePath = "https://track.bengoldsworthy.net/images/";
                 @foreach($trip->checkins as $checkin)
                 marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
                 
@@ -119,13 +122,15 @@
                  * TODO: Revisit once fixed with other popups.
                  */
                 var currLocationMarker = L.icon({
-                    iconUrl: 'current-location-icon.png',
+                    iconUrl: 'images/current-location-icon.png',
                     iconSize: [30, 45],
                 });
 
                 var currLocation = L.marker(
-                    [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 
-                    {icon: currLocationMarker} 
+                    [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
+                    {
+                        icon: currLocationMarker
+                    }
                 ).addTo(map).setZIndexOffset(1000);
                 currLocation.bindPopup('<p>Current location</p>').openPopup();