Where-in-the-World-is-Ben/public/css/app.css

94 lines
1.2 KiB
CSS
Raw Normal View History

2022-08-23 19:11:43 +00:00
#pageHeader {
text-align: center;
}
.positive, .negative {
font-weight: bold;
}
.positive {
color: darkgreen;
}
.negative {
color: red;
}
.small {
font-variant: italic;
font-size: 0.8em;
}
#routeContainer {
display: grid;
}
#map {
2022-08-24 10:40:58 +00:00
height: 400px;
2022-08-23 19:11:43 +00:00
grid-column-start: 1;
grid-column-end: 3;
}
#checkinList {
grid-column-start: 1;
grid-column-end: 3;
}
details h2 {
2022-08-24 10:58:13 +00:00
display: inline;
2022-08-23 19:11:43 +00:00
}
2022-08-29 21:34:11 +00:00
details {
border-top: 1px solid black;
padding: 1em 0;
}
details[open] summary {
margin-bottom: 1em;
}
#checkinList li:first-child details {
border-top: none;
}
.leaflet-popup {
max-width: 85vw;
max-height: 85vh;
min-width: 60vw;
}
.leaflet-popup-content {
width: auto !important;
}
.popup__image {
width: auto;
height: auto;
max-width: 70vw;
}
2022-08-23 19:11:43 +00:00
@media screen and (min-width: 1024px) {
#routeContainer {
grid-template-columns: 3fr 1fr;
}
#map {
2022-08-24 10:40:58 +00:00
height: auto;
min-height: 800px;
2022-08-23 19:11:43 +00:00
grid-column-end: 2;
}
#checkinList {
grid-column-start: 2;
}
2022-08-29 21:34:11 +00:00
.leaflet-popup {
min-width: 350px;
}
2022-08-23 19:11:43 +00:00
2022-08-29 21:34:11 +00:00
.popup__image {
max-width: 50vw;
}
2022-08-23 19:11:43 +00:00
}