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