add nsfw warning dialog

style/shiny/base.css

@@ -17,6 +17,13 @@
   --focus-box: 0 0 20px hsl(55deg, 60%, 90%, 80%);
   --focus-text: hsl(334deg, 87%, 90%);
 
+  --shadow-col: hsl(42deg, 82%, 90%, 75%);
+  --border-col: var(--text-col);
+  --border: 3px solid var(--border-col);
+  --border-radius: 1.5em;
+  --shadow: 0 0 3em var(--shadow-col);
+  --background: hsla(0, 0%, 0%, 60%);
+
   font-family: Muller;
   font-size: x-large;
   font-weight: 600;
@@ -35,18 +42,15 @@ h1 { font-size: 300%; }
 h2 { font-size: 125%; }
 h3 { font-size: 110%; }
 
-body {
-  --shadow: hsl(42deg, 82%, 90%, 75%);
-  --border-col: var(--text-col);
-
-  background: hsla(0, 0%, 0%, 60%);
-  border: 3px solid var(--border-col);
-  box-shadow: 0 0 3em var(--shadow);
+.page {
+  background: var(--background);
+  border: var(--border);
+  box-shadow: var(--shadow);
   position: relative;
 
   padding: 2em 4em;
   margin: 3em auto 3.5em;
-  border-radius: 1.5em;
+  border-radius: var(--border-radius);
 
   color: var(--text-col);
   --text-shadow: 2px 2px 3px hsl(0, 0%, 0%, 75%);
@@ -207,7 +211,7 @@ dd + dt {
   }
 
   body {
-    --shadow: hsl(42deg, 82%, 90%, 20%);
+    --shadow-col: hsl(42deg, 82%, 90%, 20%);
     --border-col: black;
   }
 

style/shiny/gallery.css

@@ -1,10 +1,11 @@
 @import url(base.css);
+@import url(nsfw-warning.css);
 
 :root {
   --image-size: 200px;
 }
 
-body {
+.page {
   --gap: 1em;
   max-width: calc(4 * var(--image-size) + 3 * var(--gap));
   padding-left: 4em;

style/shiny/index.css

@@ -7,7 +7,7 @@
   justify-content: center;
 }
 
-body {
+.page {
   width: 37.5em;
 }
 

style/shiny/nsfw-warning.css

@@ -0,0 +1,78 @@
+.dialog {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw; height: 100vh;
+  margin: 0;
+  z-index: 1000;
+
+  background: hsl(340deg, 35%, 15%, 90%);
+  backdrop-filter: blur(15px);
+  color: var(--text-col);
+  display: grid;
+}
+
+.dialog-inner {
+  place-self: center;
+
+  display: grid;
+  grid-template:
+    "header  header"
+    "icon    text"
+    "buttons buttons"
+    / 1fr 3fr;
+  grid-gap: 0.5em;
+  align-items: center;
+
+  min-height: 20vh;
+  max-width: 60vw;
+  padding: 1.5em 3em 2em;
+
+  background: var(--background);
+  border: var(--border);
+  border-radius: var(--border-radius);
+}
+
+.dialog h1 {
+  margin: 0;
+  grid-area: header;
+  justify-self: center;
+}
+
+.dialog-icon {
+  height: 3em;
+  width: 3em;
+  grid-area: icon;
+  justify-self: center;
+}
+
+.dialog-message {
+  grid-area: text;
+  justify-self: start;
+}
+
+.dialog-buttons {
+  grid-area: buttons;
+  justify-self: center;
+}
+
+.dialog button + button {
+  margin-left: 1em;
+}
+
+.dialog button {
+  border: none;
+  border-radius: 0.75em;
+  padding: 0.5em 1em;
+
+  font-family: Muller;
+  font-weight: 600;
+  color: black;
+}
+
+button.yes {
+  background: hsl(100deg, 70%, 80%);
+}
+
+button.no {
+  background: hsl(5deg, 70%, 80%);
+}

style/shiny/single.css

@@ -1,10 +1,11 @@
 @import url(base.css);
+@import url(nsfw-warning.css);
 
 :root {
   --image-width: 1000px;
 }
 
-body {
+.page {
   max-width: var(--image-width);
 }