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