content, css: reveal-heading -> reveal-symbol, use warning icon

4 files changed, 104 insertions, 9 deletions

diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 6d58bd23..7ef50e5b 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -3,6 +3,7 @@ import {empty} from '#sugar';
 
 export default {
   extraDependencies: [
+    'cachebust',
     'checkIfImagePathHasCachedThumbnails',
     'getDimensionsOfImagePath',
     'getSizeOfImagePath',
@@ -71,6 +72,7 @@ export default {
   },
 
   generate(data, relations, slots, {
+    cachebust,
     checkIfImagePathHasCachedThumbnails,
     getDimensionsOfImagePath,
     getSizeOfImagePath,
@@ -186,8 +188,8 @@ export default {
     let reveal = null;
     if (willReveal) {
       reveal = [
-        html.tag('span', {class: 'reveal-heading'},
-          language.$('misc.contentWarnings.heading')),
+        html.tag('img', {class: 'reveal-symbol'},
+          {src: to('shared.staticFile', 'warning.svg', cachebust)}),
 
         html.tag('br'),
 
diff --git a/src/static/site6.css b/src/static/site6.css
index 772ebc47..a932dfe3 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -1159,14 +1159,15 @@ img.pixelate {
   padding-bottom: 0.5em;
 }
 
-.reveal-heading {
-  font-size: 1.2em;
-  opacity: 0.8;
-  font-weight: 800;
+.reveal-symbol {
+  display: inline-block;
   width: 1em;
   height: 1em;
-  margin-bottom: 0.4em;
-  display: inline-block;
+  margin-bottom: 0.1em;
+
+  font-size: 1.6em;
+  opacity: 0.8;
+  background-image: url("warning.svg");
 }
 
 .reveal-interaction {
diff --git a/src/static/warning.svg b/src/static/warning.svg
new file mode 100644
index 00000000..92e55778
--- /dev/null
+++ b/src/static/warning.svg
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="64mm"
+   height="64mm"
+   viewBox="0 0 64 64"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
+   sodipodi:docname="warning.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="2.2162213"
+     inkscape:cx="164.24353"
+     inkscape:cy="147.77405"
+     inkscape:window-width="1309"
+     inkscape:window-height="865"
+     inkscape:window-x="172"
+     inkscape:window-y="117"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <inkscape:path-effect
+       effect="bool_op"
+       operand-path="#path1050"
+       id="path-effect1430"
+       is_visible="true"
+       lpeversion="1"
+       operation="diff"
+       swap-operands="false"
+       filltype-this="positive"
+       filter=""
+       filltype-operand="nonzero" />
+    <filter
+       id="selectable_hidder_filter"
+       width="1"
+       height="1"
+       x="0"
+       y="0"
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="LPE boolean visibility">
+      <feComposite
+         id="boolops_hidder_primitive"
+         result="composite1"
+         operator="arithmetic"
+         in2="SourceGraphic"
+         in="BackgroundImage" />
+    </filter>
+    <inkscape:path-effect
+       effect="bool_op"
+       operand-path=""
+       id="path-effect1410"
+       is_visible="true"
+       lpeversion="1"
+       operation="diff"
+       swap-operands="false"
+       filltype-this="from-curve"
+       filter=""
+       filltype-operand="from-curve" />
+    <linearGradient
+       id="linearGradient1106"
+       inkscape:swatch="solid">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop1104" />
+    </linearGradient>
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path1458"
+       style="color:#000000;fill:#ffffff;stroke-width:11;stroke-linejoin:round;-inkscape-stroke:none;paint-order:fill markers stroke"
+       d="M 32.000114 8.4041382 A 5.50055 5.50055 0 0 0 27.320296 11.013798 L 4.9805745 47.209005 A 5.50055 5.50055 0 0 0 9.6619425 55.59764 L 54.337769 55.59764 A 5.50055 5.50055 0 0 0 59.019653 47.209005 L 36.679932 11.013798 A 5.50055 5.50055 0 0 0 32.000114 8.4041382 z M 29.123287 18.81849 L 34.876941 18.81849 A 1.069827 1.069827 0 0 1 35.945093 19.935734 L 35.052641 39.585697 A 1.069827 1.069827 0 0 1 33.808789 40.593905 C 33.210998 40.494454 32.606121 40.443789 32.000114 40.443526 C 31.395269 40.445711 30.791425 40.496549 30.195056 40.597522 A 1.069827 1.069827 0 0 1 28.94707 39.591899 L 28.054618 19.935734 A 1.069827 1.069827 0 0 1 29.123287 18.81849 z M 32.000114 42.910042 A 3.5582614 3.5582614 0 0 1 35.558036 46.468481 A 3.5582614 3.5582614 0 0 1 32.000114 50.026404 A 3.5582614 3.5582614 0 0 1 28.441675 46.468481 A 3.5582614 3.5582614 0 0 1 32.000114 42.910042 z " />
+  </g>
+</svg>
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index ca9da426..92f034f8 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -646,7 +646,6 @@ misc:
 
   contentWarnings:
     warnings: "{WARNINGS}"
-    heading: "ⓘ"
     reveal: "click to show"
 
   # albumGrid: