Mobile friendly #19

Merged
hughrun merged 6 commits from mobile-friendly into master 2021-01-24 13:00:18 +11:00
9 changed files with 454 additions and 349 deletions

View file

@ -14,7 +14,7 @@ See [sources](sources.md).
## Want to help? ## Want to help?
See [contributing](contributing.md). See [contributing](contributing.md), especially *[which files to update](https://github.com/hughrun/public_library_map/blob/master/contributing.md#which-files-to-update)*.
## Licenses ## Licenses

View file

@ -19,7 +19,7 @@ To update information about library *locations* (e.g. street address, phone numb
* `website/data/nsla_library_locations.csv` * `website/data/nsla_library_locations.csv`
* `website/data/public_library_locations.csv` * `website/data/public_library_locations.csv`
Do not directly edit JSON files - these are [updated programatically](about.md#important-files-that-are-not-in-this-repository). Do not directly edit JSON files - these are [updated programatically](https://github.com/hughrun/public_library_map/blob/master/about.md#important-files-that-are-not-in-this-repository).
### Citing and crediting data sources ### Citing and crediting data sources

View file

@ -41,7 +41,7 @@ Library locations are generally provided by state government departments.
| Source | Link | License | | Source | Link | License |
|--- |--- | ---| |--- |--- | ---|
| Libraries Tasmania / data.gov.au | [Libraries Tasmania locations](https://data.gov.au/dataset/ds-dga-409f7f64-35ef-4a70-8db1-dd737a6fabec/details?q=libraries) | CC-BY 4.0 | | Libraries Tasmania / data.gov.au | [Libraries Tasmania locations](https://data.gov.au/dataset/ds-dga-409f7f64-35ef-4a70-8db1-dd737a6fabec/details?q=libraries) | CC-BY 4.0 |
| Vicmap Features of Interest | https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest | CC-BY 4.0 | | Vicmap Features of Interest | [data.vic.gov.au FoI](https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest) | CC-BY 4.0 |
| ACT Open Data Portal | [ACT Libraries locations](https://www.data.act.gov.au/dataset/Library-Locations-Map/3nit-7kex) | CC-BY 4.0 | | ACT Open Data Portal | [ACT Libraries locations](https://www.data.act.gov.au/dataset/Library-Locations-Map/3nit-7kex) | CC-BY 4.0 |
| NSW State Library (NSW library locations and contacts) | [Public library services](https://www.sl.nsw.gov.au/public-library-services/about-public-library-services/find-public-library-nsw) | © (fair dealing) | | NSW State Library (NSW library locations and contacts) | [Public library services](https://www.sl.nsw.gov.au/public-library-services/about-public-library-services/find-public-library-nsw) | © (fair dealing) |
| State Library of Queensland | [Queensland public libraries directory](https://www.data.qld.gov.au/dataset/public-libraries) | CC-BY 4.0 | | State Library of Queensland | [Queensland public libraries directory](https://www.data.qld.gov.au/dataset/public-libraries) | CC-BY 4.0 |

View file

@ -15,7 +15,6 @@
<h2>About Library Map</h2> <h2>About Library Map</h2>
<p id="beta">Beta!</p> <p id="beta">Beta!</p>
</section> </section>
</header>
<nav> <nav>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
@ -25,6 +24,8 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li> <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul> </ul>
</nav> </nav>
</header>
<main>
<section class="info-page"> <section class="info-page">
<h2 id="about-library-map">About Library Map</h2> <h2 id="about-library-map">About Library Map</h2>
<p>This project collects and maps data from public libraries across the Australia and the external Australian Territories of Christmas Island and the Cocos (Keeling) Islands. In the long term I hope to include more data that can be combined and cross-referenced, e.g. library funding from local and state governments, HILDA data etc.</p> <p>This project collects and maps data from public libraries across the Australia and the external Australian Territories of Christmas Island and the Cocos (Keeling) Islands. In the long term I hope to include more data that can be combined and cross-referenced, e.g. library funding from local and state governments, HILDA data etc.</p>
@ -61,5 +62,9 @@
<li>National &amp; State Libraries</li> <li>National &amp; State Libraries</li>
</ul> </ul>
</section> </section>
</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>
</footer>
</body> </body>
</html> </html>

View file

@ -15,7 +15,6 @@
<h2>Contributing to Library Map</h2> <h2>Contributing to Library Map</h2>
<p id="beta">Beta!</p> <p id="beta">Beta!</p>
</section> </section>
</header>
<nav> <nav>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
@ -25,26 +24,49 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li> <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul> </ul>
</nav> </nav>
</header>
<main>
<section class="info-page"> <section class="info-page">
<h2 id="contributing">Contributing</h2> <h2 id="contributing">Contributing</h2>
<p>Id love your help to make <em>Library Map</em> as accurate and useful as possible.</p> <p>Id love your help to make <em>Library Map</em> as accurate and useful as possible.</p>
<h3 id="how-to-contribute-your-idea-bug-report-or-improvement">How to contribute your idea, bug report or improvement</h3> <h3 id="how-to-contribute-your-idea-bug-report-or-improvement">How to contribute your idea, bug report or improvement</h3>
<ol type="1"> <ol type="1">
<li>You can <a href="https://github.com/hughrun/public_library_map/issues">create an issue</a> on GitHub.</li> <li>You can <a href="https://github.com/hughrun/public_library_map/issues">create an issue</a> on GitHub.</li>
<li>You can <a href="https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">send a pull request</a> — though it is <em>strongly preferred</em> that you either ask to be assigned to an existing issue, or create a new issue, first.</li> <li>You can <a href="https://docs.github.com/en/github/.collaborating-with-issues-and-pull-requests/about-pull-requests">send a pull request</a> — though it is <em>strongly preferred</em> that you either ask to be assigned to an existing issue, or create a new issue, first.</li>
<li>You can just send an email to <code>librarymap</code>@<code>hugh</code>.<code>run</code></li> <li>You can just send an email to <code>librarymap</code>@<code>hugh</code>.<code>run</code>.</li>
</ol> </ol>
<h3 id="which-files-to-update">Which files to update</h3>
<p>To update information about library <em>services</em> (e.g. fines info, loan period etc) you should edit <code>website/data/library_services_information.csv</code></p>
<p>To update information about library <em>locations</em> (e.g. street address, phone number, coordinates) you shoudl edit the relevant csv location file:</p>
<ul>
<li><code>website/data/indigenous_knowledge_centre_locations.csv</code></li>
<li><code>website/data/mechanics_institute_locations.csv</code></li>
<li><code>website/data/nsla_library_locations.csv</code></li>
<li><code>website/data/public_library_locations.csv</code></li>
</ul>
<p>Do not directly edit JSON files - these are <a href="https://github.com/hughrun/public_library_map/blob/master/about.md#important-files-that-are-not-in-this-repository">updated programatically</a>.</p>
<h3 id="citing-and-crediting-data-sources">Citing and crediting data sources</h3>
<p>If you are adding a lot of data and have a new source for it, make sure it is cited. You should update the list of sources at both <code>sources.md</code> <em>and</em> <code>website/sources/index.html</code>. If your source is “I just know because its my local library” or “I looked it up on their website” you dont need to add that to the list of sources. If your source is “I found a PDF listing every public library on the State Library website”, you do.</p>
<h3 id="missing-or-inaccurate-data">Missing or inaccurate data</h3> <h3 id="missing-or-inaccurate-data">Missing or inaccurate data</h3>
<p>Currently were missing data for some library services in relation to <strong>standard loan periods</strong> and <strong>fines for overdue items</strong>.</p> <p>Currently were missing data for some library services in relation to <strong>standard loan periods</strong> and <strong>fines for overdue items</strong>.</p>
<p>Its likely that some <strong>library location data</strong> is inaccurate — especially for New South Wales. Its also possible that the address data is wrong (even though the location shown may be correct), and in some cases it is missing.</p> <p>Its likely that some <strong>library location data</strong> is inaccurate — especially for New South Wales. Its also possible that the address data is wrong (even though the location shown may be correct), and in some cases it is missing.</p>
<p>Its possible that some of the <strong>fines data for Queensland</strong> is a little off. This came from the State Library of Queensland but I know for a fact that some of the data was wrong (e.g. Gold Coast Libraries does not charge overdue fines, but the SLQ reports says it does).</p> <p>Its possible that some of the <strong>fines data for Queensland</strong> is a little off. This came from the State Library of Queensland but I know for a fact that some of the data was wrong (e.g. Gold Coast Libraries does not charge overdue fines, but the SLQ reports says it does).</p>
<p>I am particularly interested if you know of data sources for entire regions, states, or Australia — especially if theyre reliably kept up to date.</p> <p>I am particularly interested if you know of data sources for entire regions, states, or Australia — especially if theyre reliably kept up to date.</p>
<p>If you can fill in any of these blanks, please update the relevant CSV file and send a pull request. If your data is coming from somewhere in particular, you should also add that to <code>sources.md</code> in the relevant table.</p>
<h3 id="ideas-for-additional-data">Ideas for additional data</h3> <h3 id="ideas-for-additional-data">Ideas for additional data</h3>
<p>You might have an idea for library data that would be useful to map. Im really happy to hear about these ideas! Its possible that the information you want to map is unavailable, or just really hard to get, or maybe I will disagree that its useful. Thats ok - please ask anyway, expecially if you know where to find the data.</p> <p>You might have an idea for library data that would be useful to map. Im really happy to hear about these ideas! Its possible that the information you want to map is unavailable, or just really hard to get, or maybe I will disagree that its useful. Thats ok - please ask anyway, expecially if you know where to find the data.</p>
<h3 id="improvements-to-documentation">Improvements to documentation</h3> <h3 id="improvements-to-documentation">Improvements to documentation</h3>
<p>Im always — <em>always</em> — happy to hear how I can improve documentation. Even better if you make the edit and then send a pull request.</p> <p>Im always — <em>always</em> — happy to hear how I can improve documentation. Even better if you make the edit and then send a pull request.</p>
<h3 id="improvements-to-the-website-design-layout-or-information">Improvements to the website design, layout, or information</h3> <h3 id="improvements-to-the-website-design-layout-or-information">Improvements to the website design, layout, or information</h3>
<p>You might have an idea for an improvement thats not about the data per se, but rather about the website. Maybe theres some accessibilty improvements I can make. Let me know!</p> <p>You might have an idea for an improvement thats not about the data per se, but rather about the website. Maybe theres some accessibilty improvements I can make. Let me know!</p>
<h3 id="licensing-and-copyright">Licensing and copyright</h3>
<p>By contributing to this project you agree to license your work under the following licenses:</p>
<p><strong>/website/data/*</strong>: <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a></p>
<p><strong>everything else</strong>: <a href="https://www.gnu.org/licenses/gpl-3.0.txt">GPL-3.0-or-later</a></p>
</section> </section>
</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>
</footer>
</body> </body>
</html> </html>

View file

@ -19,7 +19,6 @@
<h2>Library Map</h2> <h2>Library Map</h2>
<p id="beta">Beta!</p> <p id="beta">Beta!</p>
</section> </section>
</header>
<nav> <nav>
<ul> <ul>
<li class="active-tab">Home</li> <li class="active-tab">Home</li>
@ -29,7 +28,8 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li> <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul> </ul>
</nav> </nav>
</header>
<main>
<div id="loading">Loading, please be patient...</div> <div id="loading">Loading, please be patient...</div>
<!-- leaflet script --> <!-- leaflet script -->
@ -57,6 +57,10 @@
<script src="./secrets.js" type="text/javascript"></script> <script src="./secrets.js" type="text/javascript"></script>
<!-- this is the guts of it --> <!-- this is the guts of it -->
<script src="./load-map.js" type="text/javascript"></script> <script src="./load-map.js" 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>
</footer>
</body> </body>
</html> </html>

View file

@ -74,7 +74,7 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
layer.on({ layer.on({
mouseover: e => highlightFeature(e), mouseover: e => highlightFeature(e),
mouseout: e => resetHighlight(e, fines), mouseout: e => resetHighlight(e, fines),
click: zoomToFeature click: e => zoomToFeature(e, feature.properties),
}) })
} }
}); });
@ -320,10 +320,11 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
} }
// add control layers // add control layers
var isSmallScreen = window.screen.availWidth < 800;
var mapControl = L.control.layers( var mapControl = L.control.layers(
baseMaps, baseMaps,
overlayMaps, overlayMaps,
{ "collapsed" : false } { "collapsed" : isSmallScreen }
).addTo(map); ).addTo(map);
// scale // scale
@ -344,17 +345,21 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
setGeneral() setGeneral()
mapControl.remove(); mapControl.remove();
infoBoxes.branches.remove() infoBoxes.branches.remove()
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": false}).addTo(map); mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
if (!isSmallScreen) {
infoBoxes.branches.addTo(map) infoBoxes.branches.addTo(map)
}
} else { } else {
sessionStorage.setItem('mapMode', 'fragile'); sessionStorage.setItem('mapMode', 'fragile');
setFragile() setFragile()
mapControl.remove(); mapControl.remove();
infoBoxes.branches.remove() infoBoxes.branches.remove()
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": false}).addTo(map); mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
if (!isSmallScreen) {
infoBoxes.branches.addTo(map) infoBoxes.branches.addTo(map)
} }
} }
}
modeButton.addEventListener('click', switchMode, false); modeButton.addEventListener('click', switchMode, false);
@ -379,15 +384,32 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront(); layer.bringToFront();
} }
if (!isSmallScreen) {
infoBoxes.serviceInfo.addTo(map) infoBoxes.serviceInfo.addTo(map)
infoBoxes.serviceInfo.update(layer.feature.properties); infoBoxes.serviceInfo.update(layer.feature.properties)
}
}
function zoomToFeature(e, props) {
map.fitBounds(e.target.getBounds());
e.target.bindPopup(`
<strong>${props.name}</strong>` +
`<p>Fines: ` +
(
props.fines === "no" ? "No" :
props.fines == "no_unconfirmed" ? "Probably no" :
props.fines === "yes" ? "Yes" :
props.fines == "adults" ? "No for children" :
props.fines == "by_lga" ? "Varies by LGA" : "Unknown"
) +
`<br/>Loans : ` +
(!props.standard_loan_weeks || props.standard_loan_weeks == "?" ? `Unknown` : `${props.standard_loan_weeks} weeks`) +
`</p>`
).openPopup()
} }
// clear on mouseout // clear on mouseout
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function resetHighlight(e, layer) { function resetHighlight(e, layer) {
layer.resetStyle(e.target); layer.resetStyle(e.target);
infoBoxes.serviceInfo.remove() infoBoxes.serviceInfo.remove()
@ -423,7 +445,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
<h4>Library Branches</h4> <h4>Library Branches</h4>
<p>Circles represent an 800 metre radius from the library location. This is the distance generally used by urban planners to represent "conceptually within walking distance" for most people.</p> <p>Circles represent an 800 metre radius from the library location. This is the distance generally used by urban planners to represent "conceptually within walking distance" for most people.</p>
`}; `};
infoBoxes.branches.addTo(map) // add by default if (!isSmallScreen) {
infoBoxes.branches.addTo(map) // add by default it larger screen
}
// STANDARD LOAN PERIOD LEGEND // STANDARD LOAN PERIOD LEGEND
infoBoxes.loanPeriod.onAdd = addLegend; infoBoxes.loanPeriod.onAdd = addLegend;
@ -485,23 +509,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
)} )}
} }
// remove info boxes & markers when relevant layer is removed // loan period layer is always at bottom
map.on('overlayremove', l => {
if (l.name == "Fines") {
infoBoxes.fines.remove()
}
if (l.name == "Loan Period") {
infoBoxes.loanPeriod.remove()
}
})
// add info boxes & markers when relevant layer is added
map.on('overlayadd', l => { map.on('overlayadd', l => {
if (l.name == "Fines") {
infoBoxes.fines.addTo(map)
}
if (l.name == "Loan Period") { if (l.name == "Loan Period") {
infoBoxes.loanPeriod.addTo(map)
loanPeriod.bringToBack() loanPeriod.bringToBack()
} }
}) })
@ -523,6 +533,10 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
mapControl.removeLayer(overlayMaps[i]) mapControl.removeLayer(overlayMaps[i])
overlayMaps[i].remove() overlayMaps[i].remove()
} }
if (!isSmallScreen) { // only add infoboxes to larger screens
infoBoxes.loanPeriod.addTo(map)
infoBoxes.fines.addTo(map)
}
modeButton.setAttribute('class', 'hidden'); // hide the mode button when it's not relevant modeButton.setAttribute('class', 'hidden'); // hide the mode button when it's not relevant
} else { } else {
mapControl.removeLayer(fines) mapControl.removeLayer(fines)
@ -533,7 +547,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
for (let k in overlayMaps ) { for (let k in overlayMaps ) {
mapControl.addOverlay(overlayMaps[k], k) mapControl.addOverlay(overlayMaps[k], k)
} }
infoBoxes.branches.addTo(map); if (!isSmallScreen) {
infoBoxes.branches.addTo(map)
}
modeButton.setAttribute('class', 'visible'); modeButton.setAttribute('class', 'visible');
} }
}) })

View file

@ -15,7 +15,6 @@
<h2>Sources &amp; Attributions</h2> <h2>Sources &amp; Attributions</h2>
<p id="beta">Beta!</p> <p id="beta">Beta!</p>
</section> </section>
</header>
<nav> <nav>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
@ -25,6 +24,8 @@
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li> <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
</ul> </ul>
</nav> </nav>
</header>
<main>
<section class="sources"> <section class="sources">
<h2 id="sources-attributions">Sources &amp; Attributions</h2> <h2 id="sources-attributions">Sources &amp; Attributions</h2>
<p><em>Library Map</em> was written and conceived on unceded Wurundjeri Woi Wurrung land.</p> <p><em>Library Map</em> was written and conceived on unceded Wurundjeri Woi Wurrung land.</p>
@ -145,7 +146,7 @@
</tr> </tr>
<tr class="even"> <tr class="even">
<td>Vicmap Features of Interest</td> <td>Vicmap Features of Interest</td>
<td>https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest</td> <td><a href="https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest">data.vic.gov.au FoI</a></td>
<td>CC-BY 4.0</td> <td>CC-BY 4.0</td>
</tr> </tr>
<tr class="odd"> <tr class="odd">
@ -181,5 +182,9 @@
</tbody> </tbody>
</table> </table>
</section> </section>
</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>
</footer>
</body> </body>
</html> </html>

View file

@ -1,3 +1,13 @@
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
html, html,
body { body {
font-family: "Calibri", Arial, Tahoma, sans-serif; font-family: "Calibri", Arial, Tahoma, sans-serif;
@ -5,6 +15,13 @@ body {
padding: 0; padding: 0;
} }
code,
pre {
font-family: "Jetbrains Mono", "Consolas", "Courier New", monospace;
background-color: #eee;
padding: 0 0.5em;
}
a, a,
a:active { a:active {
color: #FF3961; color: #FF3961;
@ -25,13 +42,27 @@ a:hover {
header { header {
margin: 0; margin: 0;
padding: 0;
display: grid;
grid-template-columns: auto 1fr auto;
font-family: "Calibri", Arial, Tahoma, sans-serif;
background-color: #000;
color: #fff;
}
/* NAVIGATION */
/* ========== */
nav {
margin: 0;
padding: 0;
grid-row: 3;
} }
nav,
nav ul { nav ul {
font-family: "Calibri", Arial, Tahoma, sans-serif; font-family: "Calibri", Arial, Tahoma, sans-serif;
background-color: #000; background-color: #000;
margin: 0; margin: 0;
padding-left: 2em;
} }
nav li { nav li {
@ -56,8 +87,52 @@ nav li a:hover {
.active-tab { .active-tab {
color: #000; color: #000;
background-color: #fff; background-color: #fff;
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;
margin: 0;
padding: 0.5em 1em;
}
#logo {
height: 4em;
margin: 0 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;
}
/* loading */
/* ======= */
#loading { #loading {
font-family: "Calibri", Arial, Tahoma, sans-serif; font-family: "Calibri", Arial, Tahoma, sans-serif;
font-size: 20px; font-size: 20px;
@ -107,36 +182,10 @@ nav li a:hover {
font-family: "Calibri", Arial, Tahoma, sans-serif; font-family: "Calibri", Arial, Tahoma, sans-serif;
} }
header { footer {
margin: auto; border-top: 1px solid #eee;
display: grid; width: 100%;
grid-template-columns: auto 1fr auto; text-align: center;
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 { #mode-switch {
@ -169,10 +218,12 @@ header {
} }
table { table {
margin: auto;
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed;
border: 1px solid #000; border: 1px solid #000;
width: 80%; margin: 0 auto 0 -25%;
width: 150%;
max-width: 54em;
} }
thead { thead {
@ -190,21 +241,23 @@ tbody td {
padding: 0.5em 1em; padding: 0.5em 1em;
} }
.sources table { /* when below max width of para */
margin: 0 auto 0 -25%;
width: 150%;
max-width: 54em;
}
@media only screen and (max-width: 54em) { @media only screen and (max-width: 54em) {
.info-page,
.sources { .sources {
width: 95vw; width: 95vw;
padding: 0 2.5vw;
} }
.sources table { table {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
max-width: 100%; max-width: 100vw;
font-size: smaller;
}
td {
line-break: anywhere;
} }
} }