diff --git a/content/meetups.json b/content/meetups.json
index 23a4f724dcb..b4b61dced30 100644
--- a/content/meetups.json
+++ b/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
}
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
index df57d8596dc..9e3eeb192eb 100644
--- a/src/css/base/variables.css
+++ b/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) {
diff --git a/src/css/sections/meetups.css b/src/css/sections/meetups.css
index fa968aab4f8..5bc564d0f19 100644
--- a/src/css/sections/meetups.css
+++ b/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 {
+ & #map {
+ @media (--up_to_L) {
+ margin-top: var(--space-xl);
& img {
display: none;
}
}
- }
- @media (--L_and_up) {
- & #map {
+
+ @media (--L_and_up) {
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;
}
}
}
diff --git a/src/meetups.pug b/src/meetups.pug
index df1d59f4690..fef2cf81b1a 100644
--- a/src/meetups.pug
+++ b/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")
diff --git a/static/img/dach.svg b/static/img/dach.svg
index 6a4f126ab00..f061aa391a8 100644
--- a/static/img/dach.svg
+++ b/static/img/dach.svg
@@ -1 +1 @@
-
\ No newline at end of file
+