diff options
Diffstat (limited to 'src/static')
| -rw-r--r-- | src/static/css/features.css | 19 | ||||
| -rw-r--r-- | src/static/css/miscellany.css | 21 | ||||
| -rw-r--r-- | src/static/css/page.css | 13 | ||||
| -rw-r--r-- | src/static/js/client/css-compatibility-assistant.js | 28 | ||||
| -rw-r--r-- | src/static/js/client/index.js | 2 |
5 files changed, 12 insertions, 71 deletions
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/css/page.css b/src/static/css/page.css index 353ae873..8929dc72 100644 --- a/src/static/css/page.css +++ b/src/static/css/page.css @@ -810,12 +810,15 @@ #content h1 { font-size: 1.5em; - } - #content h1 .name-detail { - opacity: 0.8; - margin-left: 0.5ch; - font-weight: inherit; + .title-part:has(+ .name-detail) { + margin-right: 0.5ch; + } + + .name-detail { + opacity: 0.8; + font-weight: inherit; + } } #content li { 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, |