css

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
 }

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%;
+  }
+}

website/blocks/map_docs.html

@@ -2,13 +2,17 @@
 
 <p>
   Choose a style:
+  <div class="button-container">
     <button onclick="selectStyle('bright')">Bright</button>
     <button onclick="selectStyle('liberty')">Liberty</button>
     <button onclick="selectStyle('positron')">Positron</button>
+  </div>
 </p>
 <p style="margin-bottom: 2em">
   Use the following style in a MapLibre map:
-  <code id="style-url-code">https://tiles.openfreemap.org/styles/liberty</code>
+  <code id="style-url-code">
+    <span>https://tiles.openfreemap.org</span><span>/styles</span><span>/liberty</span>
+  </code>
 </p>
 
 <input type="checkbox" id="col1" class="col-chk" />