diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2023-11-29 18:22:05 -0400 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2023-11-29 18:22:05 -0400 |
commit | ad823614a22807321d28ad25fa5440d439d84975 (patch) | |
tree | 25154715f4271d787eeb985e95065f1d083bb447 | |
parent | 253ee49496ff785eb0d9ca909ce13d7b2fd2a2e6 (diff) |
content: generateGroupInfoPage: colorize tooltips
-rw-r--r-- | src/content/dependencies/generateGroupInfoPage.js | 31 | ||||
-rw-r--r-- | src/static/site6.css | 4 |
2 files changed, 30 insertions, 5 deletions
diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 5bf2b1bf..0e5d645b 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -3,6 +3,7 @@ import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ 'generateAbsoluteDatetimestamp', + 'generateColorStyleVariables', 'generateContentHeading', 'generateGroupNavLinks', 'generateGroupSecondaryNav', @@ -63,6 +64,10 @@ export default { sec.albums.galleryLink = relation('linkGroupGallery', group); + sec.albums.colorVariables = + group.albums + .map(() => relation('generateColorStyleVariables')); + sec.albums.albumLinks = group.albums .map(album => relation('linkAlbum', album)); @@ -91,6 +96,9 @@ export default { data.name = group.name; data.color = group.color; + data.albumColors = + group.albums.map(album => album.color); + return data; }, @@ -137,10 +145,21 @@ export default { albumLink: sec.albums.albumLinks, groupLink: sec.albums.groupLinks, datetimestamp: sec.albums.datetimestamps, - }).map(({albumLink, groupLink, datetimestamp}) => { + colorVariables: sec.albums.colorVariables, + albumColor: data.albumColors, + }).map(({ + albumLink, + groupLink, + datetimestamp, + colorVariables, + albumColor, + }) => { const prefix = 'groupInfoPage.albumList.item'; const parts = [prefix]; - const options = {album: albumLink}; + const options = {}; + + options.album = + albumLink.slot('color', false); if (datetimestamp) { parts.push('withYear'); @@ -161,9 +180,11 @@ export default { })); } - return language.$(...parts, options); - }) - .map(content => html.tag('li', content))), + return ( + html.tag('li', + {style: colorVariables.slot('color', albumColor).content}, + language.$(...parts, options))); + })), ], ], diff --git a/src/static/site6.css b/src/static/site6.css index b7d5ce04..113633ed 100644 --- a/src/static/site6.css +++ b/src/static/site6.css @@ -603,6 +603,10 @@ a:not([href]):hover { white-space: nowrap; } +.other-group-accent a { + color: var(--page-primary-color); +} + .content-columns { columns: 2; } |