diff --git a/website/assets/map.js b/website/assets/map.js index c43d8e9..2bbe269 100644 --- a/website/assets/map.js +++ b/website/assets/map.js @@ -24,5 +24,6 @@ function selectStyle(style) { map.setPitch(0) map.setBearing(0) - document.getElementById('style-url-code').innerText = styleUrl + const spans = document.querySelectorAll('#style-url-code span') + spans[2].innerText = '/' + style } diff --git a/website/assets/style.css b/website/assets/style.css index 3061786..85a8639 100644 --- a/website/assets/style.css +++ b/website/assets/style.css @@ -138,6 +138,11 @@ code { font-family: 'Nimbus Mono PS', 'Courier New', monospace; font-weight: 400; background: #efefef; + word-break: break-word; +} + +#style-url-code span { + white-space: nowrap; } #map { @@ -161,6 +166,13 @@ button { cursor: pointer; } +.button-container { + margin: 0 auto; + max-width: 600px; + display: flex; + flex-wrap: nowrap; +} + /*button:hover { }*/ /*button:focus { }*/ /*button:active { }*/ @@ -198,3 +210,21 @@ hr { background-color: #555; margin: 2em 0; } + +@media (max-width: 550px) { + body { + padding: 0 20px 40px; + } + + .static, + h1, + h2, + h3, + h4, + h5, + h6, + .col-lbl, + p { + max-width: 100%; + } +} diff --git a/website/blocks/map_docs.html b/website/blocks/map_docs.html index 0ce3aba..89250e8 100644 --- a/website/blocks/map_docs.html +++ b/website/blocks/map_docs.html @@ -2,13 +2,17 @@

Choose a style: - - - +

+ + + +

Use the following style in a MapLibre map: - https://tiles.openfreemap.org/styles/liberty + + https://tiles.openfreemap.org/styles/liberty +