From 43af72aa4d46bc542e6e2efeef2fa1d6e461eadf Mon Sep 17 00:00:00 2001 From: rhiannon morris Date: Mon, 5 Aug 2024 23:36:30 +0200 Subject: [PATCH] make the warning dialog a --- 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||] dialog :: Maybe What -> Builder dialog Nothing = "" dialog (Just what) = [b|@0 -
-
-

cw: lewd art

- - - -
-

- $what contains pornographic content that is - not suitable for minors. -

- by continuing, you are confirming that you are at least - eighteen years old. -

- -
- - - - -
-
-
+ +

cw: lewd art

+ +
you must be an adult to view $what. no minors!
+
+ + + + +
+
|] 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) {