diff --git a/public/css/app.css b/public/css/app.css index 8e690b2..8b997c3 100644 --- a/public/css/app.css +++ b/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 { @@ -38,6 +40,11 @@ details h2 { * Layout */ +.page-header { + background-color: #a4ecfc; + border-bottom: 5px solid black; +} + .other-links { display: block; margin: auto; @@ -51,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 { @@ -69,7 +98,6 @@ details h2 { #routeContainer { display: grid; - grid-gap: 20px; } #mapContainer { @@ -84,18 +112,32 @@ details h2 { #checkinList { grid-column-start: 1; grid-column-end: 3; + border-top: 5px solid black; } -details { +.checkin { border-top: 1px solid black; padding: 1em 0; } -details[open] summary { +.checkin__summary { + cursor: pointer; +} + +.checkin[open] .checkin__summary { + margin-bottom: 1em; + border-bottom: 1px solid gray; +} + +.checkin__meta { + margin: 0; +} + +.checkin[open] .checkin__meta { margin-bottom: 1em; } -#checkinList li:first-child details { +#checkinList li:first-child .checkin { border-top: none; } @@ -113,22 +155,42 @@ details[open] summary { 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 { - text-align: left; + .page-header { + 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 { @@ -138,6 +200,13 @@ details[open] summary { #checkinList { grid-column-start: 2; + border-top: 0; + border-left: 5px solid black; + } + + #checkinList ol { + margin-top: 0; + margin-right: 1em; } .leaflet-popup { @@ -145,6 +214,8 @@ details[open] summary { } .popup__image { - max-width: 50vw; + max-width: 100%; + max-height: none; + margin-top: 1em; } } diff --git a/resources/views/tracker.blade.php b/resources/views/tracker.blade.php index ccb7e2f..0539d2e 100644 --- a/resources/views/tracker.blade.php +++ b/resources/views/tracker.blade.php @@ -17,7 +17,7 @@ -
+

Where in the World is Ben?