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

2 files changed, 23 insertions, 26 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;