From ff92c7c3ced21a759dc145b53bc79475f42bca4e Mon Sep 17 00:00:00 2001
From: Zsolt Ero <zsolt.ero@gmail.com>
Date: Fri, 19 Jan 2024 22:55:23 +0100
Subject: [PATCH] website

---
 website/assets/style.css      | 21 ++++++++-------------
 website/blocks/map_howto.html | 18 +++++++-----------
 2 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/website/assets/style.css b/website/assets/style.css
index de2d548..19c7fc5 100644
--- a/website/assets/style.css
+++ b/website/assets/style.css
@@ -139,21 +139,16 @@ p {
 
 pre {
   background: #efefef;
-
-  max-width: 800px;
+  font-size: 14px !important;
+  max-width: 600px;
   margin: 0 auto 0.6em !important;
-  font-size: 14px;
+  overflow: scroll;
+  font-weight: 700;
 }
 
 code {
-  font-family: 'Nimbus Mono PS', 'Courier New', monospace;
-  font-weight: 400;
+  font-family: 'Nimbus Mono PS', 'Courier New', monospace !important;
   background: #efefef;
-  word-break: break-word;
-}
-
-#style-url-code span {
-  white-space: nowrap;
 }
 
 #map-container {
@@ -175,7 +170,7 @@ code {
   cursor: pointer;
 }
 
-button {
+.btn {
   border: 0;
   border-radius: 0.25rem;
   background: #2f5f8b;
@@ -184,7 +179,7 @@ button {
   white-space: nowrap;
   text-decoration: none;
   padding: 0.25rem 0.5rem;
-  margin: 0.25rem;
+  margin-right: 0.5rem;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -197,7 +192,7 @@ button {
   flex-wrap: nowrap;
 }
 
-button:hover {
+.btn:hover {
   background: #4892d9;
 }
 /*button:focus { }*/
diff --git a/website/blocks/map_howto.html b/website/blocks/map_howto.html
index 5fc244b..a259650 100644
--- a/website/blocks/map_howto.html
+++ b/website/blocks/map_howto.html
@@ -4,17 +4,13 @@
 
 <p>Choose a style:</p>
 <div class="button-container">
-  <button onclick="selectStyle('bright')">Bright</button>
-  <button onclick="selectStyle('liberty')">Liberty</button>
-  <button onclick="selectStyle('positron')">Positron</button>
+  <button onclick="selectStyle('bright')" class="btn">Bright</button>
+  <button onclick="selectStyle('liberty')" class="btn">Liberty</button>
+  <button onclick="selectStyle('positron')" class="btn">Positron</button>
 </div>
 
-<p style="margin-bottom: 2em">
-  Use the following style in a MapLibre map:
-  <code id="style-url-code">
-    <span>https://tiles.openfreemap.org</span><span>/styles</span><span>/liberty</span>
-  </code>
-</p>
+<p>Use the following style in a MapLibre map:</p>
+<pre><code class="lang-uri">https://tiles.openfreemap.org/styles/liberty</code></pre>
 
 <input type="checkbox" id="col1" class="col-chk" />
 <label for="col1" class="col-lbl">How to load MapLibre?</label>
@@ -25,14 +21,14 @@
     <code>&lt;head&gt;</code>. If you are using npm, you can install the
     <code>maplibre-gl</code> package. Make sure to import the CSS as well.
   </p>
-  <pre><code class="language-html">&lt;script src=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.js&quot;&gt;&lt;/script&gt;
+  <pre><code class="lang-html">&lt;script src=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.js&quot;&gt;&lt;/script&gt;
 &lt;link
   href=&quot;https://unpkg.com/maplibre-gl/dist/maplibre-gl.css&quot;
   rel=&quot;stylesheet&quot;
 /&gt;
 </code></pre>
   <p>Initialize it to a div like this:</p>
-  <pre><code class="language-html">&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt;
+  <pre><code class="lang-html">&lt;div id=&quot;map&quot; style=&quot;width: 100%; height: 500px&quot;&gt;&lt;/div&gt;
 &lt;script&gt;
   const map = new maplibregl.Map({
     style: 'https://tiles.openfreemap.org/styles/liberty',