« get me outta code hell

content, css: image: visual redesign for artwork CWs / 'reveal' - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src
diff options
context:
space:
mode:
author(quasar) nebula <qznebula@protonmail.com>2024-01-10 11:53:42 -0400
committer(quasar) nebula <qznebula@protonmail.com>2024-01-11 18:07:59 -0400
commit3b3b16c0a0a2c4a244ed21f12592097324b05bdf (patch)
tree734f417bf7d610de2c6507db119fed375fa24984 /src
parentd36e344860273bfb2775526aac833f4f1d47b14f (diff)
content, css: image: visual redesign for artwork CWs / 'reveal'
Diffstat (limited to 'src')
-rw-r--r--src/content/dependencies/image.js14
-rw-r--r--src/static/site6.css21
-rw-r--r--src/strings-default.yaml3
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: