From b2306f7f3e184393e3d2e128af655b5fc4f105dc Mon Sep 17 00:00:00 2001 From: Christian Gick Date: Sat, 4 Apr 2026 16:44:34 +0300 Subject: [PATCH] fix: isolate map in iframe to prevent Tailwind CSS tile seam artifacts Hugo's Tailwind CSS reset (box-sizing: border-box on *) interferes with MapLibre GL's WebGL tile rendering, causing horizontal line artifacts on retina displays. The iframe provides complete CSS isolation. Map features: choropleth fills (fill-antialias: false), click popups with law details, hover highlights, zoom/pan, fullscreen, i18n. Co-Authored-By: Claude Opus 4.6 (1M context) --- layouts/shortcodes/world-map.html | 19 ++--- static/data/countries.json | 86 ++++++++++++++++++++ static/map-embed.html | 129 ++++++++++++++++++++++++++++++ 3 files changed, 225 insertions(+), 9 deletions(-) create mode 100644 static/data/countries.json create mode 100644 static/map-embed.html diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html index 62b228d..c5d10a7 100644 --- a/layouts/shortcodes/world-map.html +++ b/layouts/shortcodes/world-map.html @@ -6,7 +6,7 @@ .ifk-map-wrap { max-width: 100%; margin: 2rem 0; } .ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; } .ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; } -#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; } +#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; border: none; } .ifk-map-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1rem; font-size: 0.8rem; @@ -25,12 +25,12 @@

{{ if eq $lang "de" }}Interaktive Weltkarte: Kinderschutzgesetze{{ else if eq $lang "fr" }}Carte interactive : lois de protection de l'enfance{{ else }}Interactive Map: Child Protection Laws{{ end }}

{{ if eq $lang "de" }}Klicken Sie auf ein Land für Details{{ else if eq $lang "fr" }}Cliquez sur un pays pour plus de détails{{ else }}Click a country for details{{ end }}

-
+
-
{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}
-
{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}
-
{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}
-
{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}
+
{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}
+
{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}
+
{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}
+
{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}
{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}
@@ -40,7 +40,8 @@ + + + +