Add meetup map

src/css/main.css

@@ -10,6 +10,7 @@
 @import 'sections/home.css';
 @import 'sections/podcast.css';
 @import 'sections/team.css';
+@import 'sections/meetups.css';
 @import 'sections/media.css';
 @import 'sections/spenden.css';
 @import 'sections/soundboard.css';

src/css/sections/meetups.css

@@ -0,0 +1,27 @@
+#meetups {
+  @media (--up_to_L) {
+    & #map {
+      & img {
+        display: none;
+      }
+    }
+  }
+  @media (--L_and_up) {
+    & #map {
+      position: relative;
+
+      & img {
+        display: block;
+        width: 100%;
+      }
+
+      & li {
+        position: absolute;
+
+        & .region {
+          display: none;
+        }
+      }
+    }
+  }
+}

src/meetups.pug

@@ -16,10 +16,14 @@ block main
         Die Vorlage für das Telegram-Gruppenbild findest du im [Media Kit](/media).
 
       h2 Einundzwanzig Meetups
-      ul.meetups
-        each m in meetups
-          li
-            a(href=m.telegram target="_blank" rel="nofollow noopener")= m.name.replace('Einundzwanzig Meetup ', '')
-            if !m.name.endsWith(m.region)
-              = " - "
-              span.region= m.region
+
+      #map
+        ul.meetups
+          each m in meetups
+            li(style=`top:${m.top}%;left:${m.left}%;`)
+              a(href=m.telegram target="_blank" rel="nofollow noopener")= m.name.replace('Einundzwanzig Meetup ', '')
+              if !m.name.endsWith(m.region)
+                span.region
+                  = " - "
+                  = m.region
+        img(src=assetPath('/img/dach.svg') alt="DE, AT, CH")