website changes

website/assets/map_howto.js

@@ -1,6 +1,8 @@
 function initMap() {
   if (window.map) return
 
+  document.getElementById('mapbg-image').style.opacity = '0.2'
+
   const map = new maplibregl.Map({
     style: 'https://tiles.openfreemap.org/styles/liberty',
     center: [-0.114, 51.506],

website/assets/style.css

@@ -168,6 +168,29 @@ code {
   background-position: center;
   background-repeat: no-repeat;
   cursor: pointer;
+  transition: opacity 3s;
+}
+
+.mapbg-attrib {
+  font:
+    12px / 20px Helvetica Neue,
+    Arial,
+    Helvetica,
+    sans-serif;
+  background-color: hsla(0, 0%, 100%, 0.5);
+  padding: 0 5px;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+}
+
+.mapbg-attrib a {
+  color: rgba(0, 0, 0, 0.75);
+  text-decoration: none;
+}
+
+.mapbg-attrib a:hover {
+  text-decoration: underline;
 }
 
 .btn {

website/blocks/main.md

@@ -56,7 +56,7 @@ If this project helps you save on your map hosting costs, please consider subscr
 
 ## How can I follow this project?
 
-X: [hyperknot](https://x.com/hyperknot) (more details) and [OpenFreeMapOrg](https://x.com/OpenFreeMapOrg) (announcements)
+X: [hyperknot](https://x.com/hyperknot) and [OpenFreeMapOrg](https://x.com/OpenFreeMapOrg)
 
 GitHub: [openfreemap](https://github.com/hyperknot/openfreemap) and [openfreemap-styles](https://github.com/hyperknot/openfreemap-styles)
 

website/blocks/map_howto.html

@@ -1,5 +1,11 @@
 <div id="map-container">
-  <div id="mapbg-image"></div>
+  <div id="mapbg-image">
+    <div class="mapbg-attrib">
+      <a href="https://openfreemap.org" target="_blank">OpenFreeMap</a>
+      <a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> Data from
+      <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a>
+    </div>
+  </div>
 </div>
 
 <p>Choose a style:</p>