make the warning dialog a <dialog>

make-pages/NsfwWarning.hs

@@ -17,27 +17,15 @@ script (Just _) = [b|<script src=/script/nsfw-warning.js type=module></script>|]
 dialog :: Maybe What -> Builder
 dialog Nothing = ""
 dialog (Just what) = [b|@0
-  <div class=dialog id=nsfw-dialog>
-    <div class=dialog-inner>
+  <dialog id=nsfw-dialog>
     <h1>cw: lewd art</h1>
-
-      <img class=dialog-icon src=/style/stop_hand.svg>
-
-      <div class=dialog-message>
-        <p>
-          $what contains pornographic content that is
-          <strong>not suitable for minors</strong>.
-        <p>
-          by continuing, you are confirming that you are at least
-          <strong>eighteen years old</strong>.
-      </div>
-
-      <div class=dialog-buttons>
+    <img src=/style/stop_hand.svg>
+    <div> you must be an adult to view $what. no minors! </div>
+    <form>
       <button id=nsfw-yes class=yes>i am an adult</button>
       <a href=//crouton.net referrerpolicy=no-referrer>
         <button id=nsfw-no class=no>i am not</button>
       </a>
-      </div>
-    </div>
-  </div>
+    </form>
+  </dialog>
   |]

script/nsfw-warning.ts

@@ -1,21 +1,17 @@
 const nsfwOk = 'nsfw-ok';
-
-function dismiss() {
-  const dialog = document.getElementById('nsfw-dialog')!;
-  dialog.parentElement!.removeChild(dialog);
-}
+const dialog = document.getElementById('nsfw-dialog')! as HTMLDialogElement;
 
 function yes() {
   localStorage.setItem(nsfwOk, '1');
-  dismiss();
+  dialog.close();
 }
 
 function setup() {
-  if (localStorage.getItem(nsfwOk)) {
-    dismiss();
-  } else {
-    document.getElementById('nsfw-yes')!.onclick = yes;
+  if (!localStorage.getItem(nsfwOk)) {
+    (dialog.querySelector('#nsfw-yes') as HTMLElement).onclick = yes;
     // nsfw-no is a normal link
+
+    dialog.showModal();
   }
 }
 

style/shiny/nsfw-warning.css

@@ -1,30 +1,22 @@
-.dialog {
-  position: fixed;
-  top: 0; left: 0;
-  width: 100vw; height: 100vh;
-  margin: 0;
-  z-index: 1000;
-
+dialog {
+  &[open] {
+    &::backdrop {
       background: hsl(340deg, 35%, 15%, 90%);
-  color: var(--text-col);
-  display: grid;
-}
+      mix-blend-mode: multiply;
+    }
+    ~ .page { filter: blur(15px); }
 
-.dialog ~ .page {
-  filter: blur(15px);
-}
-
-.dialog-inner {
     place-self: center;
 
     display: grid;
     grid-template:
-    "header  header"
+      "icon header"
       "icon text"
-    "buttons buttons"
+      "icon buttons"
       / 1fr 3fr;
-  grid-gap: 0.5em;
-  align-items: center;
+    gap: 0.5em 1.5em;
+    place-items: center;
+    place-content: center;
 
     min-height: 20vh;
     max-width: 30em;
@@ -33,42 +25,40 @@
     background: var(--background);
     border: var(--border);
     border-radius: var(--border-radius);
-}
+    box-shadow: 0 0 50px #fff6;
+  }
 
-.dialog h1 {
+  color: var(--text-col);
+
+  h1 {
     margin: 0;
     grid-area: header;
-  justify-self: center;
-}
+  }
 
-.dialog-icon {
-  height: 3em;
-  width: 3em;
+  img {
     grid-area: icon;
-  justify-self: center;
-}
+  }
 
-.dialog-message {
+  div {
     grid-area: text;
-  justify-self: start;
+    text-align: center;
     font-size: 125%;
-}
+  }
 
-.dialog-buttons {
+  form {
     grid-area: buttons;
-  justify-self: center;
 
     display: flex;
     justify-content: center;
 
     margin-top: 1em;
-}
 
-.dialog-buttons > * {
+    > * {
       margin: 0 1em;
-}
+    }
+  }
 
-.dialog button {
+  button {
     border: none;
     border-radius: 0.75em;
     padding: 0.5em 1em;
@@ -81,30 +71,31 @@
     position: relative;
 
     cursor: pointer;
-}
 
-.dialog button a {
+    a {
       inset: 0;
       width: max-content;
       text-decoration: none;
-}
+    }
+  }
 
-.dialog .yes {
+  .yes {
     background: hsl(100deg, 70%, 80%);
-}
+  }
 
-.dialog .no {
+  .no {
     background: hsl(5deg, 70%, 80%);
-}
+  }
 
-.dialog p {
+  p {
     text-align: left;
     -ms-hyphens: none;
     hyphens: none;
-}
+  }
 
-.dialog strong {
+  strong {
     font-weight: 800;
+  }
 }
 
 @media (pointer: coarse) {