From b4c5c0472eeb59fa03eb3aa0c623ffa4501faa8d Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 23 Oct 2025 07:10:20 -0300 Subject: content: image, generateCoverArtwork: responsive resolution --- src/content/dependencies/generateCoverArtwork.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) (limited to 'src/content/dependencies/generateCoverArtwork.js') diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js index 89b66ce0..616b3c95 100644 --- a/src/content/dependencies/generateCoverArtwork.js +++ b/src/content/dependencies/generateCoverArtwork.js @@ -122,6 +122,30 @@ export default { thumb: 'medium', reveal: true, link: true, + + responsiveThumb: true, + responsiveSizes: + // No clamp(), min(), or max() here because Safari. + // The boundaries here are mostly experimental, apart from + // the ones which flat-out switch layouts. + + // Layout - Thin (phones) + // Most of viewport width + '(max-width: 600px) 90vw,\n' + + + // Layout - Medium + // Sidebar is hidden; content area is by definition + // most of the viewport + '(max-width: 640px) 220px,\n' + + '(max-width: 800px) 36vw,\n' + + '(max-width: 850px) 280px,\n' + + + // Layout - Wide + // Sidebar is visible; content area has its own maximum + // Assume the sidebar is at minimum width + '(max-width: 880px) 220px,\n' + + '(max-width: 1050pz) calc(0.40 * (90vw - 150px - 10px)),\n' + + '280px', }), slots.showOriginDetails && -- cgit 1.3.0-6-gf8a5