feat: ✨ add popup modal component

src/components/head/page-head-base.webc

@@ -14,6 +14,8 @@
     --border-thin: 0.0625em;
     --border-radius: 0.75em;
 
+    --timing-func: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
     @media (min-height: 64em) {
       --page-spacing: 3em;
     }

src/components/head/page-head-style.webc

@@ -16,6 +16,10 @@
     min-height: 100dvh;
   }
 
+  body.scroll-lock {
+    overflow: hidden;
+  }
+
   h1,
   h2,
   h3,

src/components/popup-modal.webc

@@ -0,0 +1,187 @@
+<script>
+  const dialog = document.querySelector('dialog');
+  const yesButton = document.querySelector('button.positive');
+  const noButton = document.querySelector('button.negative');
+
+  const open = () => {
+    dialog.showModal();
+    document.body.classList.toggle('scroll-lock');
+    document.body.inert = true;
+  };
+
+  const close = (result) => {
+    document.body.classList.toggle('scroll-lock');
+    document.body.inert = false;
+    storeProxy.setItem('isHorny', result);
+    dialog.close();
+  };
+
+  dialog.addEventListener('cancel', (e) => {
+    e.preventDefault();
+    close(storeProxy.getItem('isHorny'));
+  });
+
+  yesButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    close(true);
+  });
+
+  noButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    close(false);
+  });
+</script>
+
+<dialog :id="id" webc:root="override">
+  <form method="dialog" class="content">
+    <h2 class="heading">
+      <slot name="heading"></slot>
+    </h2>
+
+    <div class="message">
+      <slot name="message"></slot>
+    </div>
+
+    <div class="actions">
+      <ref-button class="positive">Yes, show me the goods 👀</ref-button>
+      <ref-button class="negative">NO, STAHP 😱</ref-button>
+    </div>
+  </form>
+</dialog>
+
+<style webc:scoped="modal">
+  :host {
+    --clr-yes: oklch(65% 0.2 140deg);
+    --clr-no: oklch(40% 0.2 40deg);
+  }
+
+  :host {
+    display: none;
+
+    background: linear-gradient(
+      to bottom right,
+      var(--clr-box-gradient-start) 0%,
+      var(--clr-box-gradient-end) 50%
+    );
+    color: var(--clr-text);
+
+    width: 30em;
+
+    margin: auto;
+    border: none;
+    border-radius: 1.5em;
+    padding: 1rem;
+
+    overflow: hidden;
+    z-index: 1;
+
+    opacity: 0;
+
+    transition: all 0.75s ease-in-out allow-discrete;
+    animation: fade-in 0.5s;
+    animation-timing-function: var(--timing-func);
+    transition: all 0.5s;
+    transition-timing-function: var(--timing-func);
+  }
+
+  :host::before {
+    content: '';
+    position: absolute;
+    inset: var(--border-thin);
+    background-color: var(--clr-box-background);
+    border-radius: inherit;
+    z-index: -1;
+  }
+
+  :host[open] {
+    opacity: 1;
+    display: block;
+  }
+
+  :host::backdrop {
+    backdrop-filter: blur(0rem);
+    background-color: oklch(from black l c h / 0.5);
+
+    opacity: 0;
+
+    transition: all 0.75s ease-in-out allow-discrete;
+    animation: backdrop-fade-in 0.5s;
+  }
+
+  :host[open]::backdrop {
+    backdrop-filter: blur(1rem);
+    opacity: 1;
+  }
+
+  :host .content {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    text-align: center;
+    gap: 1.5rem;
+  }
+
+  :host .content > * {
+    flex: 1 1 auto;
+  }
+
+  :host .heading {
+    margin: 1.875rem 0 0 0;
+  }
+
+  :host .message {
+    flex: 1 1 100%;
+  }
+
+  :host .actions {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 1em;
+  }
+
+  :host .positive {
+    --clr-box-background: var(--clr-yes);
+    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
+    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
+  }
+
+  :host .negative {
+    --clr-box-background: var(--clr-no);
+    --clr-box-gradient-start: oklch(from var(--clr-box-background) calc(l + 0.2) c h);
+    --clr-box-gradient-end: oklch(from var(--clr-box-background) l c h);
+  }
+
+  @starting-style {
+    :host {
+      display: none;
+      opacity: 0;
+    }
+
+    :host::backdrop {
+      backdrop-filter: blur(0rem);
+      opacity: 0;
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      scale: 0;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  @keyframes backdrop-fade-in {
+    from {
+      backdrop-filter: blur(0rem);
+      opacity: 0;
+    }
+    to {
+      backdrop-filter: blur(1rem);
+      opacity: 1;
+    }
+  }
+</style>

src/layouts/character.webc

@@ -2,6 +2,11 @@
 layout: base.webc
 ---
 
+<popup-modal id="nsfw-warning" :open="isOpen">
+  <template webc:nokeep slot="heading">Whoa, Nelly!</template>
+  <template webc:nokeep slot="message">Here be kinky dragons!</template>
+</popup-modal>
+
 <main :class="firstName.toLowerCase()">
   <profile>
     <eleventy-image