From 8df37ce4f0708b87b41416ff10d26d3e0bbf53ec Mon Sep 17 00:00:00 2001
From: Zsolt Ero <zsolt.ero@gmail.com>
Date: Tue, 11 Jun 2024 23:41:04 +0200
Subject: [PATCH] website changes

---
 website/assets/map_howto.js   |  2 ++
 website/assets/style.css      | 23 +++++++++++++++++++++++
 website/blocks/main.md        |  2 +-
 website/blocks/map_howto.html |  8 +++++++-
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/website/assets/map_howto.js b/website/assets/map_howto.js
index bf3a472..e64b6ef 100644
--- a/website/assets/map_howto.js
+++ b/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],
diff --git a/website/assets/style.css b/website/assets/style.css
index 7feef6a..c7f145c 100644
--- a/website/assets/style.css
+++ b/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 {
diff --git a/website/blocks/main.md b/website/blocks/main.md
index 05282e5..1ed2c22 100644
--- a/website/blocks/main.md
+++ b/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)
 
diff --git a/website/blocks/map_howto.html b/website/blocks/map_howto.html
index a1cb945..bebf794 100644
--- a/website/blocks/map_howto.html
+++ b/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>