content, css, test: refactor image layout once again

1 files changed, 26 insertions, 24 deletions

diff --git a/tap-snapshots/test/snapshot/image.js.test.cjs b/tap-snapshots/test/snapshot/image.js.test.cjs
index c68794f..ffc7d43 100644
--- a/tap-snapshots/test/snapshot/image.js.test.cjs
+++ b/tap-snapshots/test/snapshot/image.js.test.cjs
@@ -6,65 +6,67 @@
  */
 'use strict'
 exports[`test/snapshot/image.js > TAP > image (snapshot) > content warnings via tags 1`] = `
-<div class="reveal">
-    <div class="image-container">
-        <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>
+<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>
                 </span>
-            </span>
+            </div>
         </div>
     </div>
 </div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > lazy with square 1`] = `
-<noscript><div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div></noscript>
-<div class="square js-hide"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img class="image lazy" data-original="foobar"></div></div></div></div>
+<noscript><div class="image-container square"><div class="square-content"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div></noscript>
+<div class="image-container square js-hide"><div class="square-content"><div class="image-outer-area"><div class="image-inner-area"><img class="image lazy" data-original="foobar"></div></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > link with file size 1`] = `
-<div class="image-container has-link"><a class="image-link" href="media/album-art/pingas/cover.png"><div class="image-inner-area"><img class="image" src="media/album-art/pingas/cover.png"></div></a></div>
+<div class="image-container has-link"><div class="image-outer-area"><a class="image-link" href="media/album-art/pingas/cover.png"><div class="image-inner-area"><img class="image" src="media/album-art/pingas/cover.png"></div></a></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path 1`] = `
-<div class="image-container"><div class="image-inner-area"><div class="image-text-area">(This image file is missing)</div></div></div>
+<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>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > missing image path w/ missingSourceContent 1`] = `
-<div class="image-container"><div class="image-inner-area"><div class="image-text-area">Cover's missing, whoops</div></div></div>
+<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>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > source missing 1`] = `
-<div class="image-container placeholder-image"><div class="image-inner-area"><div class="image-text-area">Example of missing source message.</div></div></div>
+<div class="image-container placeholder-image"><div class="image-outer-area"><div class="image-inner-area"><div class="image-text-area">Example of missing source message.</div></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > source via path 1`] = `
-<div class="image-container"><div class="image-inner-area"><img class="image" src="media/album-art/beyond-canon/cover.png"></div></div>
+<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="media/album-art/beyond-canon/cover.png"></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > source via src 1`] = `
-<div class="image-container"><div class="image-inner-area"><img class="image" src="https://example.com/bananas.gif"></div></div>
+<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="https://example.com/bananas.gif"></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > square 1`] = `
-<div class="square"><div class="square-content"><div class="image-container"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div>
+<div class="image-container square"><div class="square-content"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="foobar"></div></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > thumb requested but source is gif 1`] = `
-<div class="image-container"><div class="image-inner-area"><img class="image" src="media/flash-art/5426.gif"></div></div>
+<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" src="media/flash-art/5426.gif"></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > thumbnail details 1`] = `
-<div class="image-container"><div class="image-inner-area"><img class="image" data-original-length="1200" data-thumbs="voluminous:1200 middling:900 petite:20" src="thumb/album-art/beyond-canon/cover.voluminous.jpg"></div></div>
+<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" data-original-length="1200" data-thumbs="voluminous:1200 middling:900 petite:20" src="thumb/album-art/beyond-canon/cover.voluminous.jpg"></div></div></div>
 `
 
 exports[`test/snapshot/image.js > TAP > image (snapshot) > width & height 1`] = `
-<div class="image-container"><div class="image-inner-area"><img class="image" width="600" height="400" src="foobar"></div></div>
+<div class="image-container"><div class="image-outer-area"><div class="image-inner-area"><img class="image" width="600" height="400" src="foobar"></div></div></div>
 `