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>
+  <dialog id=nsfw-dialog>
-    <div class=dialog-inner>
+    <h1>cw: lewd art</h1>
-      <h1>cw: lewd art</h1>
+    <img src=/style/stop_hand.svg>
-
+    <div> you must be an adult to view $what. no minors! </div>
-      <img class=dialog-icon src=/style/stop_hand.svg>
+    <form>
-
+      <button id=nsfw-yes class=yes>i am an adult</button>
-      <div class=dialog-message>
+      <a href=//crouton.net referrerpolicy=no-referrer>
-        <p>
+        <button id=nsfw-no class=no>i am not</button>
-          $what contains pornographic content that is
+      </a>
-          <strong>not suitable for minors</strong>.
+    </form>
-        <p>
+  </dialog>
-          by continuing, you are confirming that you are at least
-          <strong>eighteen years old</strong>.
-      </div>
-
-      <div class=dialog-buttons>
-        <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>
   |]

script/nsfw-warning.ts

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

style/shiny/nsfw-warning.css

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