From 3b3b16c0a0a2c4a244ed21f12592097324b05bdf Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <qznebula@protonmail.com>
Date: Wed, 10 Jan 2024 11:53:42 -0400
Subject: content, css: image: visual redesign for artwork CWs / 'reveal'

---
 src/content/dependencies/image.js | 14 +++++++++++---
 src/static/site6.css              | 21 ++++++++++++++++++++-
 src/strings-default.yaml          |  3 ++-
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index ab6bccd0..2876bad3 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -184,10 +184,18 @@ export default {
     let reveal = null;
     if (willReveal) {
       reveal = [
-        language.$('misc.contentWarnings', {
-          warnings: language.formatUnitList(data.contentWarnings),
-        }),
+        html.tag('span', {class: 'reveal-heading'},
+          language.$('misc.contentWarnings.heading')),
+
         html.tag('br'),
+
+        html.tag('span', {class: 'reveal-warnings'},
+          language.$('misc.contentWarnings.warnings', {
+            warnings: language.formatUnitList(data.contentWarnings),
+          })),
+
+        html.tag('br'),
+
         html.tag('span', {class: 'reveal-interaction'},
           language.$('misc.contentWarnings.reveal')),
       ];
diff --git a/src/static/site6.css b/src/static/site6.css
index 55370b85..f8fac719 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -1141,13 +1141,32 @@ img.pixelate {
   bottom: 10px;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: center;
+}
+
+.grid-item .reveal-text {
+  font-size: 0.9em;
+}
+
+.reveal:not(.revealed) .image-inner-area {
+  background: var(--deep-color);
 }
 
 .reveal-text {
   color: white;
   text-align: center;
   font-weight: bold;
+  padding-bottom: 0.5em;
+}
+
+.reveal-heading {
+  font-size: 1.2em;
+  opacity: 0.8;
+  font-weight: 800;
+  width: 1em;
+  height: 1em;
+  margin-bottom: 0.4em;
+  display: inline-block;
 }
 
 .reveal-interaction {
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index d194adde..ca9da426 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -645,7 +645,8 @@ misc:
   #   clicking through.
 
   contentWarnings:
-    _: "cw: {WARNINGS}"
+    warnings: "{WARNINGS}"
+    heading: "ⓘ"
     reveal: "click to show"
 
   # albumGrid:
-- 
cgit 1.3.0-6-gf8a5