Add meetups, improve map

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 {
+  & #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;
         }
       }
     }