christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: isolate map in iframe to prevent Tailwind CSS tile seam artifacts
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 15s
Details
Deploy Internet for Kids / Deploy (push) Successful in 6s
Details
Deploy Internet for Kids / Health Check (push) Successful in 2s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 2s
Details

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-04 16:44:34 +03:00
parent 4724820873
commit b2306f7f3e
3 changed files with 225 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
layouts/shortcodes/world-map.html
View File

@@ -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 @@
<div class="ifk-map-wrap">
<h3>{{ 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 }}</h3>
<p class="ifk-map-subtitle">{{ 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 }}</p>
<div id="ifk-world-map"></div>
<iframe id="ifk-world-map" src="{{ "map-embed.html" | relURL }}" loading="lazy" allow="fullscreen"></iframe>
<div class="ifk-map-legend">
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#667eea"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#764ba2"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#a5b4fc"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e0e7ff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#9cabf1"></div>{{ if eq $lang "de" }}In Kraft{{ else if eq $lang "fr" }}En vigueur{{ else }}Enforced{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#a68ac3"></div>{{ if eq $lang "de" }}Verabschiedet{{ else if eq $lang "fr" }}Adopté{{ else }}Passed{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#c5cefd"></div>{{ if eq $lang "de" }}In Bearbeitung{{ else if eq $lang "fr" }}En cours{{ else }}In Progress{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#ebefff"></div>{{ if eq $lang "de" }}Richtlinien{{ else if eq $lang "fr" }}Directives{{ else }}Guidelines{{ end }}</div>
<div class="ifk-map-legend-item"><div class="ifk-map-legend-swatch" style="background:#e2e8f0"></div>{{ if eq $lang "de" }}Keine Daten{{ else if eq $lang "fr" }}Pas de données{{ else }}No Data{{ end }}</div>
</div>
</div>
@@ -40,7 +40,8 @@
<script>
(function() {
var LANG = "{{ $lang }}";
var STATUS_COLORS = { enforced: '#667eea', passed: '#764ba2', progress: '#a5b4fc', guidelines: '#e0e7ff' };
// Pre-blended with base map at 0.65 — fully opaque, no transparency needed
var STATUS_COLORS = { enforced: '#9cabf1', passed: '#a68ac3', progress: '#c5cefd', guidelines: '#ebefff' };
var STATUS_LABELS = {
en: { enforced: 'Enforced', passed: 'Passed', progress: 'In Progress', guidelines: 'Guidelines' },
de: { enforced: 'In Kraft', passed: 'Verabschiedet', progress: 'In Bearbeitung', guidelines: 'Richtlinien' },
@@ -78,8 +79,8 @@
geo.features.forEach(function(f) {
var id = String(f.id).padStart(3, '0');
var c = byIsoNum[id];
f.properties.fillColor = c ? STATUS_COLORS[c.status] : '#e2e8f0';
f.properties.fillOpacity = c ? 0.65 : 0.15;
f.properties.fillColor = c ? STATUS_COLORS[c.status] : 'transparent';
f.properties.fillOpacity = c ? 1 : 0;
f.properties.isoNum = id;
});