content, css: image: I SURE HOPE THIS WORKS preview

8 files changed, 9 insertions, 99 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 616b3c95..008af70d 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -31,9 +31,6 @@ export default {
     color:
       artwork.thing.color ?? null,
 
-    dimensions:
-      artwork.dimensions,
-
     style:
       artwork.style,
   }),
@@ -75,17 +72,6 @@ export default {
 
     image.setSlot('alt', slots.alt);
 
-    const square =
-      (data.dimensions
-        ? data.dimensions[0] === data.dimensions[1]
-        : true);
-
-    if (square) {
-      image.setSlot('square', true);
-    } else {
-      image.setSlot('dimensions', data.dimensions);
-    }
-
     const attributes = html.attributes();
 
     let color = null;
diff --git a/src/content/dependencies/generateCoverCarousel.js b/src/content/dependencies/generateCoverCarousel.js
index 1ffeff8e..8232a842 100644
--- a/src/content/dependencies/generateCoverCarousel.js
+++ b/src/content/dependencies/generateCoverCarousel.js
@@ -38,7 +38,6 @@ export default {
                   content:
                     image.slots({
                       thumb: 'small',
-                      square: true,
                       lazy:
                         (typeof slots.lazy === 'number'
                           ? index >= slots.lazy
diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js
index 6f87b54c..b3cdac96 100644
--- a/src/content/dependencies/generateCoverGrid.js
+++ b/src/content/dependencies/generateCoverGrid.js
@@ -143,7 +143,6 @@ export default {
 
                 image.slots({
                   thumb: 'medium',
-                  square: true,
                   lazy:
                     (typeof slots.lazy === 'number'
                       ? index >= slots.lazy
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index af4b7fdd..4c945a20 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -19,11 +19,6 @@ export default {
             .filter(artTag => artTag.isContentWarning)
             .map(artTag => artTag.name)
         : null),
-
-    dimensions:
-      (artwork
-        ? artwork.dimensions
-        : null),
   }),
 
   slots: {
@@ -33,7 +28,6 @@ export default {
 
     reveal: {type: 'boolean', default: true},
     lazy: {type: 'boolean', default: false},
-    square: {type: 'boolean', default: false},
 
     link: {
       validate: v => v.anyOf(v.isBoolean, v.isString),
@@ -72,15 +66,15 @@ export default {
       mutable: false,
     },
 
+    dimensions: {
+      validate: v => v.isDimensions,
+    },
+
     // These will also be used from the artwork if not specified as slots.
 
     warnings: {
       validate: v => v.looseArrayOf(v.isString),
     },
-
-    dimensions: {
-      validate: v => v.isDimensions,
-    },
   },
 
   generate(data, relations, slots, {
@@ -123,7 +117,7 @@ export default {
       (typeof slots.link === 'string' || slots.link);
 
     const warnings = slots.warnings ?? data.warnings;
-    const dimensions = slots.dimensions ?? data.dimensions;
+    const dimensions = slots.dimensions;
 
     const willReveal =
       slots.reveal &&
@@ -352,16 +346,10 @@ export default {
 
       wrapped =
         html.tag('div', {class: 'image-outer-area'},
-          slots.square &&
-            {class: 'square-content'},
-
           wrapped);
 
       wrapped =
         html.tag('div', {class: 'image-container'},
-          slots.square &&
-            {class: 'square'},
-
           typeof slots.link === 'string' &&
             {class: 'no-image-preview'},
 
diff --git a/src/static/css/features.css b/src/static/css/features.css
index f5842704..c25f669c 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -629,8 +629,7 @@
     border-radius: 0 0 4px 4px;
   }
 
-  .cover-artwork:has(.image-details),
-  .cover-artwork.has-image-details {
+  .cover-artwork:has(.image-details) {
     border-radius: 0 0 6px 6px;
   }
 
@@ -664,8 +663,7 @@
     border-color: var(--dim-color);
   }
 
-  .cover-artwork:not(:has(.image-details)),
-  .cover-artwork:not(.has-image-details) {
+  .cover-artwork:not(:has(.image-details)) {
     /* Hacky: `overflow: hidden` hides tag tooltips, so it can't be applied
      * if we've got tags/details visible. But it's okay, because we only
      * need to apply it if it *doesn't* - that's when the rounded border
@@ -1035,6 +1033,7 @@
 
   .grid-item .image-container {
     width: 100%;
+    aspect-ratio: 1 / 1;
   }
 
   .grid-item .image {
@@ -1316,11 +1315,6 @@
     overflow: hidden;
   }
 
-  .square .image-link {
-    width: 100%;
-    height: 100%;
-  }
-
   .image-inner-area {
     position: relative;
     width: 100%;
@@ -1340,11 +1334,6 @@
     object-fit: cover;
   }
 
-  .square .image {
-    width: 100%;
-    height: 100%;
-  }
-
   .image-link .image {
     display: block;
     max-width: 100%;
@@ -1633,7 +1622,7 @@
   }
 
   #image-overlay-image-layout {
-    display: block;
+    display: flex;
     position: relative;
     max-height: 100%;
     margin: 4px 3px;
diff --git a/src/static/css/miscellany.css b/src/static/css/miscellany.css
index 6f60767d..9eb44004 100644
--- a/src/static/css/miscellany.css
+++ b/src/static/css/miscellany.css
@@ -1,24 +1,3 @@
-/* Squares */
-
-@layer layout {
-  .square {
-    position: relative;
-    width: 100%;
-  }
-
-  .square::after {
-    content: "";
-    display: block;
-    padding-bottom: 100%;
-  }
-
-  .square-content {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-}
-
 /* Utility spans */
 
 @layer print {
diff --git a/src/static/js/client/css-compatibility-assistant.js b/src/static/js/client/css-compatibility-assistant.js
deleted file mode 100644
index 37b0645a..00000000
--- a/src/static/js/client/css-compatibility-assistant.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import {stitchArrays} from '../../shared-util/sugar.js';
-
-export const info = {
-  id: 'cssCompatibilityAssistantInfo',
-
-  coverArtworks: null,
-  coverArtworkImageDetails: null,
-};
-
-export function getPageReferences() {
-  info.coverArtworks =
-    Array.from(document.querySelectorAll('.cover-artwork'));
-
-  info.coverArtworkImageDetails =
-    info.coverArtworks
-      .map(artwork => artwork.querySelector('.image-details'));
-}
-
-export function mutatePageContent() {
-  stitchArrays({
-    coverArtwork: info.coverArtworks,
-    imageDetails: info.coverArtworkImageDetails,
-  }).forEach(({coverArtwork, imageDetails}) => {
-      if (imageDetails) {
-        coverArtwork.classList.add('has-image-details');
-      }
-    });
-}
diff --git a/src/static/js/client/index.js b/src/static/js/client/index.js
index 6862b4ad..65254b10 100644
--- a/src/static/js/client/index.js
+++ b/src/static/js/client/index.js
@@ -6,7 +6,6 @@ import * as artTagGalleryFilterModule from './art-tag-gallery-filter.js';
 import * as artTagNetworkModule from './art-tag-network.js';
 import * as artistExternalLinkTooltipModule from './artist-external-link-tooltip.js';
 import * as artistRollingWindowModule from './artist-rolling-window.js';
-import * as cssCompatibilityAssistantModule from './css-compatibility-assistant.js';
 import * as datetimestampTooltipModule from './datetimestamp-tooltip.js';
 import * as draggedLinkModule from './dragged-link.js';
 import * as expandableGridSectionModule from './expandable-grid-section.js';
@@ -32,7 +31,6 @@ export const modules = [
   artTagNetworkModule,
   artistExternalLinkTooltipModule,
   artistRollingWindowModule,
-  cssCompatibilityAssistantModule,
   datetimestampTooltipModule,
   draggedLinkModule,
   expandableGridSectionModule,