content, css: flatten .reveal into .image-container

3 files changed, 37 insertions, 42 deletions

diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index bc52321a..a39acca3 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -136,12 +136,17 @@ export default {
       slots.height && {height: slots.height},
     ]);
 
-    if (!originalSrc || isMissingImageFile) {
-      return prepare(
-        html.tag('div', {class: 'image-text-area'},
-          (html.isBlank(slots.missingSourceContent)
-            ? language.$('misc.missingImage')
-            : slots.missingSourceContent)));
+    const isPlaceholder =
+      !originalSrc || isMissingImageFile;
+
+    if (isPlaceholder) {
+      return (
+        prepare(
+          html.tag('div', {class: 'image-text-area'},
+            (html.isBlank(slots.missingSourceContent)
+              ? language.$('misc.missingImage')
+              : slots.missingSourceContent)),
+          'visible'));
     }
 
     let reveal = null;
@@ -314,15 +319,6 @@ export default {
         html.tag('div', {class: 'image-outer-area'},
           wrapped);
 
-      if (willReveal) {
-        wrapped =
-          html.tag('div', {class: 'reveal'},
-            images.revealStatic &&
-              {class: 'has-reveal-thumbnail'},
-
-            wrapped);
-      }
-
       if (willSquare) {
         wrapped =
           html.tag('div', {class: 'square-content'},
@@ -331,17 +327,24 @@ export default {
 
       wrapped =
         html.tag('div', {class: 'image-container'},
-          willLink &&
-            {class: 'has-link'},
-
           willSquare &&
             {class: 'square'},
 
           typeof slots.link === 'string' &&
             {class: 'no-image-preview'},
 
-          !originalSrc &&
-            {class: 'placeholder-image'},
+          (isPlaceholder
+            ? {class: 'placeholder-image'}
+            : [
+                willLink &&
+                  {class: 'has-link'},
+
+                willReveal &&
+                  {class: 'reveal'},
+
+                revealSrc &&
+                  {class: 'has-reveal-thumbnail'},
+              ]),
 
           visibility === 'hidden' &&
             {class: 'js-hide'},
diff --git a/src/static/site6.css b/src/static/site6.css
index b00dd595..3ad438c6 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -1171,12 +1171,6 @@ img.pixelate, .pixelate img {
   image-rendering: crisp-edges;
 }
 
-.reveal {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
 .reveal-text-container {
   position: absolute;
   top: 15px;
diff --git a/tap-snapshots/test/snapshot/image.js.test.cjs b/tap-snapshots/test/snapshot/image.js.test.cjs
index ffc7d43a..5661c9c7 100644
--- a/tap-snapshots/test/snapshot/image.js.test.cjs
+++ b/tap-snapshots/test/snapshot/image.js.test.cjs
@@ -6,21 +6,19 @@
  */
 'use strict'
 exports[`test/snapshot/image.js > TAP > image (snapshot) > content warnings via tags 1`] = `
-<div class="image-container">
-    <div class="reveal">
-        <div class="image-outer-area">
-            <div class="image-inner-area">
-                <img class="image" src="media/album-art/beyond-canon/cover.png">
-                <span class="reveal-text-container">
-                    <span class="reveal-text">
-                        <img class="reveal-symbol" src="static/warning.svg?413">
-                        <br>
-                        <span class="reveal-warnings">too cool for school</span>
-                        <br>
-                        <span class="reveal-interaction">click to show</span>
-                    </span>
+<div class="image-container reveal">
+    <div class="image-outer-area">
+        <div class="image-inner-area">
+            <img class="image" src="media/album-art/beyond-canon/cover.png">
+            <span class="reveal-text-container">
+                <span class="reveal-text">
+                    <img class="reveal-symbol" src="static/warning.svg?413">
+                    <br>
+                    <span class="reveal-warnings">too cool for school</span>
+                    <br>
+                    <span class="reveal-interaction">click to show</span>
                 </span>
-            </div>
+            </span>
         </div>
     </div>
 </div>
@@ -36,11 +34,11 @@ exports[`test/snapshot/image.js > TAP > image (snapshot) > link with file size 1
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path 1`] = `
-<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div></div>
+<div class="image-container placeholder-image"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path w/ missingSourceContent 1`] = `
-<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div></div>
+<div class="image-container placeholder-image"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > source missing 1`] = `