4 files changed, 62 insertions, 3 deletions
diff --git a/src/content/dependencies/generateAlbumArtInfoBox.js b/src/content/dependencies/generateAlbumArtInfoBox.js
new file mode 100644
index 00000000..f0bfd1b6
--- /dev/null
+++ b/src/content/dependencies/generateAlbumArtInfoBox.js
@@ -0,0 +1,35 @@
+export default {
+  contentDependencies: ['generateReleaseInfoContributionsLine'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, album) => ({
+    wallpaperArtistContributionsLine:
+      relation('generateReleaseInfoContributionsLine',
+        album.wallpaperArtistContribs),
+
+    bannerArtistContributionsLine:
+      relation('generateReleaseInfoContributionsLine',
+        album.bannerArtistContribs),
+  }),
+
+  generate: (relations, {html, language}) =>
+    language.encapsulate('releaseInfo', capsule =>
+      html.tag('div', {class: 'album-art-info'},
+        {[html.onlyIfContent]: true},
+
+        html.tag('p',
+          {[html.onlyIfContent]: true},
+          {[html.joinChildren]: html.tag('br')},
+
+          [
+            relations.wallpaperArtistContributionsLine.slots({
+              stringKey: capsule + '.wallpaperArtBy',
+              chronologyKind: 'wallpaperArt',
+            }),
+
+            relations.bannerArtistContributionsLine.slots({
+              stringKey: capsule + '.bannerArtBy',
+              chronologyKind: 'bannerArt',
+            }),
+          ]))),
+};
diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index 03ac469d..51329450 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -4,6 +4,7 @@ export default {
   contentDependencies: [
     'generateAdditionalNamesBox',
     'generateAlbumAdditionalFilesList',
+    'generateAlbumArtInfoBox',
     'generateAlbumBanner',
     'generateAlbumCoverArtwork',
     'generateAlbumNavAccent',
@@ -49,6 +50,9 @@ export default {
         ? relation('generateAlbumCoverArtwork', album)
         : null),
 
+    albumArtInfoBox:
+      relation('generateAlbumArtInfoBox', album),
+
     banner:
       (album.hasBannerArt
         ? relation('generateAlbumBanner', album)
@@ -120,6 +124,9 @@ export default {
               })
             : null),
 
+          relations.albumArtInfoBox,
+        ],
+
         mainContent: [
           relations.releaseInfo,
 
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 79f88b4d..99c7d90d 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1508,6 +1508,24 @@ p.image-details.origin-details {
   margin-bottom: 2px;
 }
 
+.album-art-info {
+  font-size: 0.8em;
+  border: 2px solid var(--deep-color);
+
+  margin: 10px min(15px, 1vw) 15px;
+
+  background: var(--bg-black-color);
+  padding: 6px;
+  border-radius: 5px;
+
+  -webkit-backdrop-filter: blur(3px);
+          backdrop-filter: blur(3px);
+}
+
+.album-art-info p {
+  margin: 0;
+}
+
 p.content-heading:has(+ .commentary-entry-heading.dated) {
   clear: right;
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index b21c9e0c..2b0c02bf 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -275,9 +275,8 @@ releaseInfo:
 
   from: "From {ALBUM}."
 
-  coverArtBy: "Cover art by {ARTISTS}."
-  wallpaperArtBy: "Wallpaper art by {ARTISTS}."
-  bannerArtBy: "Banner art by {ARTISTS}."
+  wallpaperArtBy: "Wallpaper by {ARTISTS}"
+  bannerArtBy: "Banner by {ARTISTS}"
 
   released: "Released {DATE}."
   albumReleased: "Album released {DATE}."