diff options
| author | (quasar) nebula <towerofnix@gmail.com> | 2021-01-27 21:24:09 -0400 |
|---|---|---|
| committer | (quasar) nebula <towerofnix@gmail.com> | 2021-02-01 12:25:20 -0400 |
| commit | aee544c919fa3d88f22ffdf44668b6938b1e2b26 (patch) | |
| tree | 4d6d4b85837abc4092424c1b7d943603be2732bc | |
| parent | d7d618d9b9cbe616282d84e60de90010d18ab9c5 (diff) | |
more customizable wallpaper styles
| -rw-r--r-- | static/site.css | 3 | ||||
| -rw-r--r-- | upd8.js | 27 |
2 files changed, 18 insertions, 12 deletions
diff --git a/static/site.css b/static/site.css index 1e8c0786..f0e10bb8 100644 --- a/static/site.css +++ b/static/site.css @@ -13,7 +13,6 @@ --bg-color: #222222; --theme: 0; /* 0: dark (below light), 1: light (below dark) */ --bg: url("../media/bg.jpg"); - --bg-opacity: 0.5; } body { @@ -36,7 +35,7 @@ body::before { background-image: var(--bg); background-position: center; background-size: cover; - opacity: var(--bg-opacity); + opacity: 0.5; } #page-container { diff --git a/upd8.js b/upd8.js index 1624f34b..3eeefbb9 100644 --- a/upd8.js +++ b/upd8.js @@ -619,7 +619,7 @@ async function processAlbumDataFile(file) { album.name = getBasicField(albumSection, 'Album'); album.artists = getContributionField(albumSection, 'Artists') || getContributionField(albumSection, 'Artist'); album.wallpaperArtists = getContributionField(albumSection, 'Wallpaper Art'); - album.wallpaperOpacity = getBasicField(albumSection, 'Wallpaper Opacity') || 0.5; + album.wallpaperStyle = getMultilineField(albumSection, 'Wallpaper Style'); album.date = getBasicField(albumSection, 'Date'); album.trackArtDate = getBasicField(albumSection, 'Track Art Date') || album.date; album.coverArtDate = getBasicField(albumSection, 'Cover Art Date') || album.date; @@ -667,14 +667,9 @@ async function processAlbumDataFile(file) { return {error: `Invalid Date field: "${album.date}"`}; } - if (album.wallpaperOpacity && isNaN(parseFloat(album.wallpaperOpacity))) { - return {error: `Invalid Wallpaper Opacity field: "${album.wallpaperOpacity}"}`}; - } - album.date = new Date(album.date); album.trackArtDate = new Date(album.trackArtDate); album.coverArtDate = new Date(album.coverArtDate); - album.wallpaperOpacity = parseFloat(album.wallpaperOpacity); if (isNaN(Date.parse(album.trackArtDate))) { return {error: `Invalid Track Art Date field: "${album.trackArtDate}"`}; @@ -1616,12 +1611,12 @@ async function writePage(directoryParts, { <meta name="viewport" content="width=device-width, initial-scale=1"> ${Object.entries(meta).filter(([ key, value ]) => value).map(([ key, value ]) => `<meta ${key}="${escapeAttributeValue(value)}">`).join('\n')} ${canonical && `<link rel="canonical" href="${canonical}">`} + <link rel="stylesheet" href="${C.STATIC_DIRECTORY}/site.css?${CACHEBUST}"> ${stylesheet && fixWS` <style> ${stylesheet} </style> `} - <link rel="stylesheet" href="${C.STATIC_DIRECTORY}/site.css?${CACHEBUST}"> <script src="${C.STATIC_DIRECTORY}/lazy-loading.js?${CACHEBUST}"></script> </head> <body ${attributes({style: body.style || ''})}> @@ -1975,6 +1970,7 @@ async function writeAlbumPage(album) { const listTag = getAlbumListTag(album); await writePage([C.ALBUM_DIRECTORY, album.directory], { title: album.name, + stylesheet: getAlbumStylesheet(album), body: { style: `${getThemeString(album)}; --album-directory: ${album.directory}` }, @@ -2037,6 +2033,18 @@ async function writeAlbumPage(album) { }); } +function getAlbumStylesheet(album) { + if (album.wallpaperStyle) { + return fixWS` + body::before { + ${album.wallpaperStyle} + } + `; + } else { + return ''; + } +} + function writeTrackPages() { return progressPromiseAll(`Writing track pages.`, queue(trackData.map(curry(writeTrackPage)), queueSize)); } @@ -2079,6 +2087,7 @@ async function writeTrackPage(track) { await writePage([C.TRACK_DIRECTORY, track.directory], { title: track.name, + stylesheet: getAlbumStylesheet(track.album), body: { style: `${getThemeString(track)}; --album-directory: ${album.directory}; --track-directory: ${track.directory}` @@ -3356,7 +3365,6 @@ function getThemeString(thing) { ); let bgUrl = ''; - let bgOpacity = 0; if (album?.wallpaperArtists) { // The 8ack-directory (..) here is necessary 8ecause CSS doesn't want // to consider the fact that this is, like, not talking a8out a URL @@ -3365,12 +3373,11 @@ function getThemeString(thing) { // file! 8ut I guess that's not what CSS spec says, or whatever. // Pretty cringe t8h. bgUrl = `../${C.MEDIA_DIRECTORY}/${C.MEDIA_ALBUM_ART_DIRECTORY}/${album.directory}/bg.jpg`; - bgOpacity = album.wallpaperOpacity; } return [ color && `--fg-color: ${color}; --dim-color: ${dim}`, - bgUrl && `--bg: url("${bgUrl}"); --bg-opacity: ${bgOpacity}` + bgUrl && `--bg: url("${bgUrl}")` ].filter(Boolean).join('; '); } |