diff options
| 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 |
| commit | 3b3b16c0a0a2c4a244ed21f12592097324b05bdf (patch) | |
| tree | 734f417bf7d610de2c6507db119fed375fa24984 | |
| parent | d36e344860273bfb2775526aac833f4f1d47b14f (diff) | |
content, css: image: visual redesign for artwork CWs / 'reveal'
| -rw-r--r-- | src/content/dependencies/image.js | 14 | ||||
| -rw-r--r-- | src/static/site6.css | 21 | ||||
| -rw-r--r-- | 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 ab6bccd..2876bad 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 55370b8..f8fac71 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 d194add..ca9da42 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: |