From 43af72aa4d46bc542e6e2efeef2fa1d6e461eadf Mon Sep 17 00:00:00 2001
From: rhiannon morris <rhi@rhiannon.website>
Date: Mon, 5 Aug 2024 23:36:30 +0200
Subject: [PATCH] make the warning dialog a <dialog>

---
 make-pages/NsfwWarning.hs    |  34 +++----
 script/nsfw-warning.ts       |  16 ++--
 style/shiny/nsfw-warning.css | 169 +++++++++++++++++------------------
 3 files changed, 97 insertions(+), 122 deletions(-)

diff --git a/make-pages/NsfwWarning.hs b/make-pages/NsfwWarning.hs
index 1f4066b..db02958 100644
--- a/make-pages/NsfwWarning.hs
+++ b/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>
-      <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>
-        <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>
+  <dialog id=nsfw-dialog>
+    <h1>cw: lewd art</h1>
+    <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>
+    </form>
+  </dialog>
   |]
diff --git a/script/nsfw-warning.ts b/script/nsfw-warning.ts
index 25a783a..5b80e72 100644
--- a/script/nsfw-warning.ts
+++ b/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();
   }
 }
 
diff --git a/style/shiny/nsfw-warning.css b/style/shiny/nsfw-warning.css
index fc72ba2..139bbe9 100644
--- a/style/shiny/nsfw-warning.css
+++ b/style/shiny/nsfw-warning.css
@@ -1,110 +1,101 @@
-.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%);
+      mix-blend-mode: multiply;
+    }
+    ~ .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 {
-  filter: blur(15px);
-}
+  h1 {
+    margin: 0;
+    grid-area: header;
+  }
 
-.dialog-inner {
-  place-self: center;
+  img {
+    grid-area: icon;
+  }
 
-  display: grid;
-  grid-template:
-    "header  header"
-    "icon    text"
-    "buttons buttons"
-    / 1fr 3fr;
-  grid-gap: 0.5em;
-  align-items: center;
+  div {
+    grid-area: text;
+    text-align: center;
+    font-size: 125%;
+  }
 
-  min-height: 20vh;
-  max-width: 30em;
-  padding: 1.5em 3em 2em;
+  form {
+    grid-area: buttons;
 
-  background: var(--background);
-  border: var(--border);
-  border-radius: var(--border-radius);
-}
+    display: flex;
+    justify-content: center;
 
-.dialog h1 {
-  margin: 0;
-  grid-area: header;
-  justify-self: center;
-}
+    margin-top: 1em;
 
-.dialog-icon {
-  height: 3em;
-  width: 3em;
-  grid-area: icon;
-  justify-self: center;
-}
+    > * {
+      margin: 0 1em;
+    }
+  }
 
-.dialog-message {
-  grid-area: text;
-  justify-self: start;
-  font-size: 125%;
-}
+  button {
+    border: none;
+    border-radius: 0.75em;
+    padding: 0.5em 1em;
 
-.dialog-buttons {
-  grid-area: buttons;
-  justify-self: center;
+    font-family: Muller;
+    font-weight: 600;
+    font-size: inherit;
+    color: black;
 
-  display: flex;
-  justify-content: center;
+    position: relative;
 
-  margin-top: 1em;
-}
+    cursor: pointer;
 
-.dialog-buttons > * {
-  margin: 0 1em;
-}
+    a {
+      inset: 0;
+      width: max-content;
+      text-decoration: none;
+    }
+  }
 
-.dialog button {
-  border: none;
-  border-radius: 0.75em;
-  padding: 0.5em 1em;
+  .yes {
+    background: hsl(100deg, 70%, 80%);
+  }
 
-  font-family: Muller;
-  font-weight: 600;
-  font-size: inherit;
-  color: black;
+  .no {
+    background: hsl(5deg, 70%, 80%);
+  }
 
-  position: relative;
+  p {
+    text-align: left;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
 
-  cursor: pointer;
-}
-
-.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;
+  strong {
+    font-weight: 800;
+  }
 }
 
 @media (pointer: coarse) {