Add meetup modal

src/css/base/elements.css

@@ -201,7 +201,7 @@ img:-moz-loading {
   background-color: var(--color-accent);
   text-decoration: none;
   text-transform: uppercase;
-  border-radius: var(--space-m);
+  border-radius: var(--border-radius);
   transition-property: color, background;
   transition-duration: var(--transition-duration-fast);
 
@@ -216,7 +216,7 @@ img:-moz-loading {
 
 .podlove-subscribe-button-iframe {
   margin-top: var(--space-m);
-  border-radius: var(--space-m);
+  border-radius: var(--border-radius);
 }
 
 #podlove-subscribe-popup {

src/css/base/header.css

@@ -127,7 +127,7 @@
           background: var(--color-flyout-bg);
           transition-property: background, position, opacity;
           transition-duration: var(--transition-duration-fast);
-          border-radius: var(--space-m);
+          border-radius: var(--border-radius);
 
           @media (--up_to_M) {
             padding-top: 1.4em;

src/css/base/modal.css

@@ -0,0 +1,82 @@
+.modal {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  opacity: 0;
+  z-index: 100;
+  padding-left: var(--wrap-padding-horizontal);
+  padding-right: var(--wrap-padding-horizontal);
+
+  @media (--up_to_M) {
+    --modal-space: var(--space-l);
+  }
+  @media (--M_and_up) {
+    --modal-space: var(--space-xl);
+  }
+
+  &.modal--visible {
+    display: flex;
+    transition-property: opacity;
+    transition-duration: var(--transition-duration-fast);
+  }
+
+  &.modal--appear {
+    opacity: 1;
+  }
+
+  &:before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--color-overlay-bg);
+  }
+
+  & .modal-close {
+    position: absolute;
+    top: var(--modal-space);
+    right: var(--modal-space);
+    background: none;
+    width: 32px;
+    height: 32px;
+    padding: 6px;
+    color: var(--color-neutral-80);
+    cursor: pointer;
+
+    & svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      transition-property: background, color;
+      transition-duration: var(--transition-duration-fast);
+    }
+
+    &:hover {
+      @media not all and (hover: none) {
+        color: var(--color-accent);
+      }
+    }
+  }
+
+  & .inner {
+    position: relative;
+    z-index: 100;
+    color: var(--color-body-text);
+    background: var(--color-flyout-bg);
+    border: 1px solid var(--color-border-light);
+    border-radius: var(--border-radius);
+    padding: var(--modal-space);
+    max-width: 620px;
+  }
+
+  & h2 {
+    margin: var(--space-xs) var(--space-xxl) var(--space-m) 0;
+  }
+}

src/css/base/variables.css

@@ -74,6 +74,7 @@
   }
 
   --logo-height: calc((100vw - var(--wrap-padding-horizontal) * 2) / 134 * 12);
+  --border-radius: var(--space-m);
 }
 
 @define-mixin dark-theme {

src/css/main.css

@@ -3,6 +3,7 @@
 @import 'base/fonts.css';
 @import 'base/elements.css';
 @import 'base/layout.css';
+@import 'base/modal.css';
 @import 'base/header.css';
 @import 'base/footer.css';
 

src/css/sections/home.css

@@ -54,7 +54,7 @@
   & img {
     display: block;
     width: 100%;
-    border-radius: var(--space-m);
+    border-radius: var(--border-radius);
   }
 }
 
@@ -80,7 +80,7 @@
     display: block;
     width: 240px;
     height: 240px;
-    border-radius: var(--space-m);
+    border-radius: var(--border-radius);
     margin: var(--space-l) 0;
   }
 

src/css/sections/meetups.css

@@ -88,11 +88,23 @@
       font-size: .65rem;
       padding: var(--space-xs) var(--space-m);
       background: var(--color-overlay-bg);
-      border-radius: var(--space-m);
+      border-radius: var(--border-radius);
     }
   }
 }
 
+#modal-meetupMap {
+  & #meeptupDetails :last-child {
+    margin-bottom: 0;
+  }
+
+  & .links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xl);
+  }
+}
+
 #unmapped {
   @media (--up_to_L) {
     display: none;

src/css/sections/podcast.css

@@ -165,7 +165,7 @@
   --player-button-margin: var(--space-l);
 
   display: flex;
-  border-radius: var(--space-m);
+  border-radius: var(--border-radius);
   overflow: hidden;
 
   @media (--up_to_M) {