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

122 lines
1.7 KiB
CSS
Raw Normal View History

2022-09-24 19:36:06 +00:00
/*
* Typography
*/
body {
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
.page-title {
font-size: 3em;
2022-08-23 19:11:43 +00:00
text-align: center;
2022-09-24 19:36:06 +00:00
@media screen and (min-width: 1024px) {
text-align: left;
}
}
details h2 {
display: inline;
2022-08-23 19:11:43 +00:00
}
2022-09-24 19:36:06 +00:00
.positive,
.negative {
2022-08-23 19:11:43 +00:00
font-weight: bold;
}
.positive {
color: darkgreen;
}
.negative {
color: red;
}
.small {
font-variant: italic;
font-size: 0.8em;
}
2022-09-24 19:36:06 +00:00
/*
* 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;
}
2022-08-23 19:11:43 +00:00
#routeContainer {
display: grid;
2022-09-24 19:36:06 +00:00
grid-gap: 20px;
@media screen and (min-width: 1024px) {
grid-template-columns: 3fr 1fr;
}
2022-08-23 19:11:43 +00:00
}
#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;
2022-09-24 19:36:06 +00:00
@media screen and (min-width: 1024px) {
height: auto;
min-height: 800px;
grid-column-end: 2;
}
2022-08-23 19:11:43 +00:00
}
#checkinList {
grid-column-start: 1;
grid-column-end: 3;
2022-09-24 19:36:06 +00:00
@media screen and (min-width: 1024px) {
grid-column-start: 2;
}
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;
2022-09-24 19:36:06 +00:00
@media screen and (min-width: 1024px) {
min-width: 350px;
}
2022-08-29 21:34:11 +00:00
}
.leaflet-popup-content {
width: auto !important;
}
.popup__image {
width: auto;
height: auto;
max-width: 70vw;
2022-09-24 19:36:06 +00:00
@media screen and (min-width: 1024px) {
2022-08-29 21:34:11 +00:00
max-width: 50vw;
}
2022-08-23 19:11:43 +00:00
}