diff options
Diffstat (limited to 'src')
| -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 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: |