Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Update styling

Browse source
This commit is contained in:
Ben Goldsworthy 2022-10-19 22:35:12 +00:00
parent 5d33b2b4ca
commit fac44484b4
1 changed files with 58 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
public/css/app.css
View file

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