hugh/public_library_map
hugh/public_library_map
1
Fork 0
Code Issues 9 Pull requests Actions Packages Projects Releases Wiki Activity

fix inline styles #193

Merged
hughrun merged 2 commits from moonee into main 2024-06-29 11:44:56 +10:00
Conversation 0 Commits 2 Files changed 3 +50 -24
3 changed files with 50 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/index.html
View file

@ -56,7 +56,7 @@
<!-- declares mapBoxToken constant -->
<script src="./secrets.js" type="text/javascript"></script>
<!-- this is the guts of it -->
<script src="./load-map.js" integrity="sha384-Dz5rVm6gkjHMT0sWOLGuQUEdqMEma27u5vJsimbd1eQ7hoOAqnyvHZTE1oOz6Ap/" crossorigin="anonymous" type="text/javascript"></script>
<script src="./load-map.js" nonce="NGINX_CSP_NONCE" type="text/javascript"></script>
</main>
<footer>
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>

12
website/load-map.js
View file

@ -413,12 +413,12 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches, caul])
this._div.innerHTML =
`<p>Hover over an area for more information</p>
<section>
<div><div class="circle" style="background-color: #4dac26"></div>Fine free</div>
<div><div class="circle" style="background-color: #b8e186"></div>Fine free (unconfirmed)</div>
<div><div class="circle" style="background-color: #f1b6da"></div>Fine free for children</div>
<div><div class="circle" style="background-color: #abd9e9"></div>Fine policy varies</div>
<div><div class="circle" style="background-color: #d01c8b"></div>Fines for all users</div>
<div><div class="circle" style="background-color: #bbb"></div>Unknown (help me find out!)</div>
<div><div class="circle fine-free"></div>Fine free</div>
<div><div class="circle fine-free-unconfirmed"></div>Fine free (unconfirmed)</div>
<div><div class="circle fine-free-kids"></div>Fine free for children</div>
<div><div class="circle fine-varies"></div>Fine policy varies</div>
<div><div class="circle fine-all"></div>Fines for all users</div>
<div><div class="circle fine-unknown"></div>Unknown (help me find out!)</div>
</section>
`
};

60
website/style.css
View file

@ -91,23 +91,6 @@ nav li a:hover {
border-top-right-radius: 10px;
}
@media only screen and (max-width: 800px) {
nav ul {
margin-left: 0;
padding-left: 0;
}
nav li {
display: block;
margin: 0;
padding: 0.5em 0 0.5em 1em;
border-color: #777;
border-left: none;
border-right: none;
}
}
#title {
display: flex;
align-items: center;
@ -264,6 +247,49 @@ ul#libraries li {
text-align: center;
}
/* rules map key styles */
.fine-free {
background-color: #4dac26
}
.fine-free-unconfirmed {
background-color: #b8e186
}
.fine-free-kids {
background-color: #f1b6da
}
.fine-varies {
background-color: #abd9e9
}
.fine-all {
background-color: #d01c8b
}
.fine-unknown {
background-color: #bbb
}
@media only screen and (max-width: 800px) {
nav ul {
margin-left: 0;
padding-left: 0;
}
nav li {
display: block;
margin: 0;
padding: 0.5em 0 0.5em 1em;
border-color: #777;
border-left: none;
border-right: none;
}
}
/* when below max width of para */
@media only screen and (max-width: 54em) {