From 2a337338a9727126d0fb27ad9e31caef0de2736f Mon Sep 17 00:00:00 2001
From: Zsolt Ero <zsolt.ero@gmail.com>
Date: Wed, 17 Jan 2024 02:19:24 +0100
Subject: [PATCH] css

---
 website/assets/map.js        |  3 ++-
 website/assets/style.css     | 30 ++++++++++++++++++++++++++++++
 website/blocks/map_docs.html | 12 ++++++++----
 3 files changed, 40 insertions(+), 5 deletions(-)

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 @@
 
 <p>
   Choose a style:
-  <button onclick="selectStyle('bright')">Bright</button>
-  <button onclick="selectStyle('liberty')">Liberty</button>
-  <button onclick="selectStyle('positron')">Positron</button>
+  <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" />