From 29b686dc00d2a4b92e3bd91b92b83505592a5a16 Mon Sep 17 00:00:00 2001
From: "(quasar) nebula" <towerofnix@gmail.com>
Date: Thu, 25 Mar 2021 11:59:44 -0300
Subject: banner style/layout updates

---
 static/site.css | 11 ++++++++---
 upd8.js         | 29 +++++++++++++++++------------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/static/site.css b/static/site.css
index 59c9f624..b4ba79db 100644
--- a/static/site.css
+++ b/static/site.css
@@ -47,11 +47,16 @@ body::before {
 #banner {
     margin: 10px 0;
     width: 100%;
-    display: block;
+    background: black;
 }
 
-#banner.dim {
-    filter: brightness(0.8);
+#banner.dim img {
+    opacity: 0.8;
+}
+
+#banner img {
+    display: block;
+    width: 100%;
 }
 
 a {
diff --git a/upd8.js b/upd8.js
index 85dfa236..f2be4252 100755
--- a/upd8.js
+++ b/upd8.js
@@ -1169,8 +1169,9 @@ async function processAlbumDataFile(file) {
     album.name = getBasicField(albumSection, 'Album');
     album.artists = getContributionField(albumSection, 'Artists') || getContributionField(albumSection, 'Artist');
     album.wallpaperArtists = getContributionField(albumSection, 'Wallpaper Art');
-    album.bannerArtists = getContributionField(albumSection, 'Banner Art');
     album.wallpaperStyle = getMultilineField(albumSection, 'Wallpaper Style');
+    album.bannerArtists = getContributionField(albumSection, 'Banner Art');
+    album.bannerStyle = getMultilineField(albumSection, 'Banner Style');
     album.date = getBasicField(albumSection, 'Date');
     album.trackArtDate = getBasicField(albumSection, 'Track Art Date') || album.date;
     album.coverArtDate = getBasicField(albumSection, 'Cover Art Date') || album.date;
@@ -2154,11 +2155,12 @@ writePage.html = (pageFn, {paths, strings, to}) => {
     `;
 
     const bannerHTML = banner.position && banner.src && fixWS`
-        <img ${attributes({
-            id: 'banner',
-            src: banner.src,
-            alt: banner.alt
-        })} ${classes(...banner.classes || [])}>
+        <div id="banner" ${classes(...banner.classes || [])}>
+            <img ${attributes({
+                src: banner.src,
+                alt: banner.alt
+            })}>
+        </div>
     `;
 
     const layoutHTML = [
@@ -2780,16 +2782,19 @@ function writeAlbumPage(album) {
 }
 
 function getAlbumStylesheet(album, {to}) {
-    if (album.wallpaperArtists) {
-        return fixWS`
+    return [
+        album.wallpaperArtists && fixWS`
             body::before {
                 background-image: url("${to.albumWallpaper(album.directory)}");
                 ${album.wallpaperStyle}
             }
-        `;
-    } else {
-        return '';
-    }
+        `,
+        album.bannerStyle && fixWS`
+            #banner img {
+                ${album.bannerStyle}
+            }
+        `
+    ].filter(Boolean).join('\n');
 }
 
 function writeTrackPages() {
-- 
cgit 1.3.0-6-gf8a5