121 lines
1.7 KiB
CSS
121 lines
1.7 KiB
CSS
/*
|
|
* Typography
|
|
*/
|
|
|
|
body {
|
|
font-family: Verdana, Arial, sans-serif;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 3em;
|
|
text-align: center;
|
|
@media screen and (min-width: 1024px) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
details h2 {
|
|
display: inline;
|
|
}
|
|
|
|
.positive,
|
|
.negative {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.positive {
|
|
color: darkgreen;
|
|
}
|
|
|
|
.negative {
|
|
color: red;
|
|
}
|
|
|
|
.small {
|
|
font-variant: italic;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/*
|
|
* Layout
|
|
*/
|
|
|
|
.other-links {
|
|
display: block;
|
|
text-align: center;
|
|
margin: auto;
|
|
}
|
|
|
|
.trip-meta {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.main--list {
|
|
margin: auto;
|
|
width: 100%;
|
|
max-width: 980px;
|
|
}
|
|
|
|
#routeContainer {
|
|
display: grid;
|
|
grid-gap: 20px;
|
|
@media screen and (min-width: 1024px) {
|
|
grid-template-columns: 3fr 1fr;
|
|
}
|
|
}
|
|
|
|
#map {
|
|
height: 400px;
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
@media screen and (min-width: 1024px) {
|
|
height: auto;
|
|
min-height: 800px;
|
|
grid-column-end: 2;
|
|
}
|
|
}
|
|
|
|
#checkinList {
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
@media screen and (min-width: 1024px) {
|
|
grid-column-start: 2;
|
|
}
|
|
}
|
|
|
|
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;
|
|
@media screen and (min-width: 1024px) {
|
|
min-width: 350px;
|
|
}
|
|
}
|
|
|
|
.leaflet-popup-content {
|
|
width: auto !important;
|
|
}
|
|
|
|
.popup__image {
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 70vw;
|
|
@media screen and (min-width: 1024px) {
|
|
max-width: 50vw;
|
|
}
|
|
}
|