Add meetups, improve map

content/meetups.json

@@ -2,98 +2,112 @@
   {
     "name": "Einundzwanzig Meetup Mecklenburg-Vorpommern",
     "region": "Rostock, Stralsund, Greifswald",
-    "telegram": "https://t.me/joinchat/lMbna3mlZXc0NmZi",
+    "url": "https://t.me/joinchat/lMbna3mlZXc0NmZi",
     "top": 11,
     "left": 59
   },
   {
     "name": "Einundzwanzig Meetup Norddeutschland",
     "region": "Hamburg, Bremen, Hannover",
-    "telegram": "https://t.me/joinchat/k4sCySBhUx03NzFi",
+    "url": "https://t.me/joinchat/k4sCySBhUx03NzFi",
     "top": 18,
     "left": 36
   },
+  {
+    "name": "Bitcoin Lab Berlin",
+    "region": "Berlin",
+    "url": "https://www.meetup.com/de-DE/Bitcoin-Lab-Berlin/",
+    "top": 25,
+    "left": 65
+  },
   {
     "name": "Einundzwanzig Meetup Düsseldorf",
     "region": "Düsseldorf",
-    "telegram": "https://t.me/joinchat/pwUMGpOQzDZiZDRi",
+    "url": "https://t.me/joinchat/pwUMGpOQzDZiZDRi",
     "top": 36,
     "left": 18
   },
   {
     "name": "Einundzwanzig Meetup OWL",
     "region": "Ostwestfalen",
-    "telegram": "https://t.me/joinchat/xypeWtlKm1JjN2I0",
+    "url": "https://t.me/joinchat/xypeWtlKm1JjN2I0",
     "top": 31,
     "left": 24
   },
   {
     "name": "Einundzwanzig Meetup Sachsen-Anhalt",
     "region": "Sachsen-Anhalt",
-    "telegram": "https://t.me/Meetup21SA",
+    "url": "https://t.me/Meetup21SA",
     "top": 34,
     "left": 56
   },
   {
     "name": "Einundzwanzig Meetup Köln",
     "region": "Köln",
-    "telegram": "https://t.me/joinchat/0rUVc-k5fBljNWUy",
+    "url": "https://t.me/joinchat/0rUVc-k5fBljNWUy",
     "top": 40,
     "left": 19
   },
   {
     "name": "Einundzwanzig Meetup Frankfurt am Main",
     "region": "Frankfurt am Main",
-    "telegram": "https://t.me/joinchat/Ox2zR68PzuQ2OTYy",
+    "url": "https://t.me/joinchat/Ox2zR68PzuQ2OTYy",
     "top": 51,
     "left": 26
   },
   {
     "name": "Einundzwanzig Meetup Mainz und Umland",
     "region": "Mainz, Wiesbaden",
-    "telegram": "https://t.me/joinchat/kgdKrjL58C1lOTAy",
+    "url": "https://t.me/joinchat/kgdKrjL58C1lOTAy",
     "top": 55,
     "left": 24
   },
   {
     "name": "Einundzwanzig Meetup Mannheim",
     "region": "Rhein-Neckar",
-    "telegram": "https://t.me/joinchat/lYrIAlEAZYwzNThi",
+    "url": "https://t.me/joinchat/lYrIAlEAZYwzNThi",
     "top": 58,
     "left": 25
   },
   {
     "name": "Einundzwanzig Meetup Saarland",
     "region": "Saarland",
-    "telegram": "https://t.me/einundzwanzigsaarland",
+    "url": "https://t.me/einundzwanzigsaarland",
     "top": 58,
     "left": 13
   },
   {
     "name": "Einundzwanzig Meetup Stuttgart",
     "region": "Stuttgart",
-    "telegram": "https://t.me/joinchat/JdWiqM3tYh4wZTMy",
-    "top": 65,
+    "url": "https://t.me/joinchat/JdWiqM3tYh4wZTMy",
+    "top": 66,
     "left": 30
   },
+  {
+    "name": "Bitcoin München",
+    "region": "München",
+    "url": "https: //www.meetup.com/de-DE/Bitcoin-Munich/",
+    "top": 72,
+    "left": 53
+  },
   {
     "name": "Einundzwanzig Meetup Kempten",
     "region": "Allgäu",
-    "telegram": "https://t.me/joinchat/e1KRNLcIeto3MDky",
+    "url": "https://t.me/joinchat/e1KRNLcIeto3MDky",
     "top": 77,
     "left": 41
   },
   {
     "name": "Einundzwanzig Meetup Wien",
     "region": "Wien",
-    "telegram": "https://t.me/joinchat/zrBSbkocvlUyZWE8",
+    "url": "https://t.me/joinchat/zrBSbkocvlUyZWE8",
     "top": 70,
     "left": 93
   },
   {
     "name": "Einundzwanzig Meetup Schweiz",
     "region": "Schweiz",
-    "telegram": "https://t.me/joinchat/8-FBDoq3Y9hkODZk",
+    "url": "https://t.me/joinchat/8-FBDoq3Y9hkODZk",
     "top": 86,
     "left": 22
   }

src/css/base/variables.css

@@ -65,7 +65,7 @@
   --color-body-text: var(--color-neutral-0);
   --color-body-bg: var(--color-neutral-90);
   --color-card-bg: var(--color-neutral-95);
-  --color-overlay-bg: rgba(0, 0, 0, .95);
+  --color-overlay-bg: rgba(20, 20, 20, .95);
 }
 
 @media (prefers-color-scheme: dark) {

src/css/sections/meetups.css

@@ -1,25 +1,66 @@
+@keyframes pulse {
+  0% { transform: scale(.75); }
+  1% { transform: scale(1.5); }
+  3% { transform: scale(.75);  }
+}
+
 #meetups {
-  @media (--up_to_L) {
   & #map {
+    @media (--up_to_L) {
+      margin-top: var(--space-xl);
       & img {
         display: none;
       }
     }
-  }
+
     @media (--L_and_up) {
-    & #map {
       position: relative;
+      margin-top: var(--space-xxl);
+
+      & h2 {
+        display: none;
+      }
 
       & img {
         display: block;
         width: 100%;
       }
 
+      & ul {
+        margin: 0;
+        list-style: none;
+      }
+
       & li {
         position: absolute;
 
-        & .region {
-          display: none;
+        &.official {
+          color: var(--color-accent);
+        }
+
+        &:not(.official) {
+          color: var(--color-secondary);
+        }
+
+        & a {
+          color: inherit;
+        }
+
+        & .dot {
+          content: '';
+          position: absolute;
+          top: .3rem;
+          left: -1.25rem;
+          background: radial-gradient(currentColor 0%, rgba(255, 255, 255, 0) 100%);
+          animation-timing-function: linear;
+          animation-iteration-count: infinite;
+          will-change: transform;
+          transform-origin: 50%;
+          border-radius: 50%;
+          width: 1rem;
+          height: 1rem;
+          transform: scale(.75);
+          animation-name: pulse;
         }
       }
     }

src/meetups.pug

@@ -3,6 +3,8 @@ extends /template.pug
 block vars
   - const title = 'Meetups'
   - const description = 'Eine Liste von Einundzwanzig-Treffen im D/A/CH-Raum.'
+  - const filterOfficial = (list, official) => list.filter(meetup => meetup.name.startsWith('Einundzwanzig Meetup ') === official)
+  - let j = 0
 
 block main
   #meetups.wrap
@@ -15,15 +17,21 @@ block main
 
         Die Vorlage für das Telegram-Gruppenbild findest du im [Media Kit](/media).
 
-      h2 Einundzwanzig Meetups
-
       #map
+        h2 Einundzwanzig Meetups
         ul.meetups
-          each m in meetups
+          each m in filterOfficial(meetups, true)
+            li.official(style=`top:${m.top}%;left:${m.left}%;`)
+              .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
+              a(href=m.url target="_blank" rel="nofollow noopener")= m.name.replace('Einundzwanzig Meetup ', '')
+              - j++
+
+        h2 Weitere Meetups
+        ul.meetups
+          each m in filterOfficial(meetups, false)
             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
+              .dot(style=`animation-delay:${((j*2000) + random(3000))}ms;animation-duration:${meetups.length*2}s;`)
+              a(href=m.url target="_blank" rel="nofollow noopener")= m.name
+              - j++
+
         img(src=assetPath('/img/dach.svg') alt="DE, AT, CH")