Hugh Rundle
0bd4b4892f
Big commit here. This moves the "data" directory inside the website, and then uses fetch to bring the csv and geoJSON files into the map instead of copy-pasting into JS files. Much cleaner and reduces steps from updating a CSV to updating the actual website. Now we simply need to git pull on the webserver (unless the updated data is for library services rather than library locations). Also cleans up some styling. Also removes my MapBox secrets from the Git repo whoops. These are now brought in via a secrets.js file that simply declares a constant. This file will not be visible in the repo. Fixes #14
210 lines
3 KiB
CSS
210 lines
3 KiB
CSS
html,
|
|
body {
|
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
a,
|
|
a:active {
|
|
color: #FF3961;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
header {
|
|
margin: 0;
|
|
}
|
|
|
|
nav,
|
|
nav ul {
|
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
|
background-color: #000;
|
|
margin: 0;
|
|
}
|
|
|
|
nav li {
|
|
padding: 0.5em;
|
|
border: 1px solid white;
|
|
border-bottom: none;
|
|
background-color: #000;
|
|
color: #fff;
|
|
display: inline-block;
|
|
}
|
|
|
|
nav li a {
|
|
color: #fff;
|
|
}
|
|
|
|
nav li a:active,
|
|
nav li a:hover {
|
|
color: #FF3961;
|
|
}
|
|
|
|
.active-tab,
|
|
.active-tab {
|
|
color: #000;
|
|
background-color: #fff;
|
|
}
|
|
|
|
#loading {
|
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 1em;
|
|
color: #fff;
|
|
background-color: #FF3961;
|
|
}
|
|
|
|
#mapid {
|
|
height: 75vh;
|
|
width: 90vw;
|
|
margin: 0 auto 5em;
|
|
}
|
|
|
|
.circle {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin: 10px 10px -5px 0;
|
|
}
|
|
|
|
.leaflet-control-layers-expanded {
|
|
width: 16em;
|
|
}
|
|
|
|
.info {
|
|
padding: 6px 8px;
|
|
font: 14px/16px Arial, Helvetica, sans-serif;
|
|
background: white;
|
|
background: rgba(255,255,255,0.8);
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
|
border-radius: 5px;
|
|
width: 16em;
|
|
}
|
|
|
|
.info h4 {
|
|
margin: 0 0 5px;
|
|
color: #777;
|
|
}
|
|
|
|
.intro {
|
|
margin: 0.5em 1em;
|
|
border-radius: 5px;
|
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
|
}
|
|
|
|
header {
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
padding: 0.5em 1em;
|
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
|
background-color: #000;
|
|
color: #fff;
|
|
}
|
|
|
|
#title {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#logo {
|
|
height: 4em;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
#beta {
|
|
font-family: "Comic Sans", Helvetica, Arial, sans-serif;
|
|
font-weight: bold;
|
|
font-size: 1.4em;
|
|
margin-left: 1em;
|
|
transform: rotate(-35deg);
|
|
background-color: #fff;
|
|
color: #FF3961;
|
|
padding: 0.25em 0.5em;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
#mode-switch {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
width: 90vw;
|
|
min-width: 90vw;
|
|
margin: auto;
|
|
background-color: #000;
|
|
}
|
|
|
|
#mode-button {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: #000;
|
|
background-color: #fff;
|
|
font-family: Tahoma, sans-serif;
|
|
width: fit-content;
|
|
margin: 5px 1em;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.info-page,
|
|
.sources {
|
|
max-width: 36em;
|
|
margin: 2em auto;
|
|
}
|
|
|
|
table {
|
|
margin: auto;
|
|
border-collapse: collapse;
|
|
border: 1px solid #000;
|
|
width: 80%;
|
|
}
|
|
|
|
thead {
|
|
color: #000;
|
|
background-color: #bbb;
|
|
height: 2em;
|
|
}
|
|
|
|
tbody tr:nth-child(odd) {
|
|
background-color: #eee;
|
|
}
|
|
|
|
tbody td {
|
|
border: 1px solid #aaa;
|
|
padding: 0.5em 1em;
|
|
}
|
|
|
|
.sources table {
|
|
margin: 0 auto 0 -25%;
|
|
width: 150%;
|
|
max-width: 54em;
|
|
}
|
|
|
|
@media only screen and (max-width: 54em) {
|
|
|
|
.sources {
|
|
width: 95vw;
|
|
}
|
|
|
|
.sources table {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
} |