From 32a6e8b5ddb79f4141c51530732e0923f21ac71a Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 2 Feb 2021 16:55:29 -0400 Subject: major rework of CSS theme variable internals --- package.json | 2 +- static/site.css | 34 ++++----- upd8.js | 212 ++++++++++++++++++++++++++++---------------------------- 3 files changed, 120 insertions(+), 128 deletions(-) mode change 100644 => 100755 upd8.js diff --git a/package.json b/package.json index 4ae318e3..a0495520 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "hsmusic": "./upd8.js" }, "dependencies": { - "fix-whitespace": "^1.0.3", + "fix-whitespace": "^1.0.4", "mkdirp": "^0.5.5" }, "license": "GPL-3.0" diff --git a/static/site.css b/static/site.css index f0e10bb8..585fca05 100644 --- a/static/site.css +++ b/static/site.css @@ -3,21 +3,11 @@ * no need to re-run upd8.js when tweaking values here. Handy! */ -/* Pages can specify their own theme colors (used for links, and may8e other - * things) by changing this CSS varia8le through their 8ody's style attri8ute. - * And yes, CSS varia8les are supported in 8asically every major 8rowser. - * No, I don't care a8out Internet Explorer. - */ :root { - --fg-color: #0088ff; - --bg-color: #222222; - --theme: 0; /* 0: dark (below light), 1: light (below dark) */ - --bg: url("../media/bg.jpg"); + --primary-color: #0088ff; } body { - --bg-shade: calc(255 * var(--theme)); - --fg-shade: calc(255 * (1 - var(--theme))); background: black; margin: 10px; overflow-y: scroll; @@ -32,15 +22,15 @@ body::before { height: 100%; z-index: -1; - background-image: var(--bg); + background-image: url("../media/bg.jpg"); background-position: center; background-size: cover; opacity: 0.5; } #page-container { - background-color: var(--bg-color); - color: rgb(var(--fg-shade), var(--fg-shade), var(--fg-shade)); + background-color: #222222; + color: #ffffff; max-width: 1100px; margin: 10px auto 50px; @@ -50,7 +40,7 @@ body::before { } a { - color: var(--fg-color); + color: var(--primary-color); text-decoration: none; } @@ -170,7 +160,7 @@ footer > :last-child { height: 24px; top: -0.25em; position: absolute; - fill: var(--fg-color); + fill: var(--primary-color); } .rerelease { @@ -192,8 +182,8 @@ footer > :last-child { } .sidebar, #content, #header, #skippers, #footer { - background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6); - border: 1px dotted var(--fg-color); + background-color: rgba(0, 0, 0, 0.6); + border: 1px dotted var(--primary-color); border-radius: 3px; } @@ -351,7 +341,7 @@ footer > :last-child { } .image-container { - border: 2px solid var(--fg-color); + border: 2px solid var(--primary-color); box-sizing: border-box; position: relative; padding: 5px; @@ -386,7 +376,7 @@ img { } a.box:focus { - outline: 3px double var(--fg-color); + outline: 3px double var(--primary-color); } a.box:focus:not(:focus-visible) { @@ -423,7 +413,7 @@ h1 { margin: 15px; text-align: center; background-color: #111111; - border: 1px dotted var(--fg-color); + border: 1px dotted var(--primary-color); border-radius: 2px; padding: 5px; } @@ -593,7 +583,7 @@ ul.quick-info li:not(:last-child)::after { padding: 10px; background-color: #222222; text-align: center; - border: 1px dotted var(--fg-color); + border: 1px dotted var(--primary-color); border-radius: 2px; } diff --git a/upd8.js b/upd8.js old mode 100644 new mode 100755 index 77e2a3d7..01a3cb2b --- a/upd8.js +++ b/upd8.js @@ -293,7 +293,7 @@ function transformInline(text) { const album = getLinkedAlbum(ref); if (album) { return fixWS` - ${album.name} + ${album.name} `; } else { console.warn(`\x1b[33mThe linked album ${match} does not exist!\x1b[0m`); @@ -328,7 +328,7 @@ function transformInline(text) { const track = getLinkedTrack(ref); if (track) { return fixWS` - ${track.name} + ${track.name} `; } else { console.warn(`\x1b[33mThe linked track ${match} does not exist!\x1b[0m`); @@ -338,7 +338,7 @@ function transformInline(text) { const tag = getLinkedTag(ref); if (tag) { return fixWS` - ${tag.name} + ${tag.name} `; } else { console.warn(`\x1b[33mThe linked tag ${match} does not exist!\x1b[0m`); @@ -348,7 +348,7 @@ function transformInline(text) { const group = getLinkedGroup(ref); if (group) { return fixWS` - ${group.name} + ${group.name} `; } else { console.warn(`\x1b[33mThe linked group ${group} does not exist!\x1b[0m`); @@ -364,7 +364,7 @@ function transformInline(text) { name = track.name; } return fixWS` - ${name} + ${name} `; } else { console.warn(`\x1b[33mThe linked track ${match} does not exist!\x1b[0m`); @@ -1634,14 +1634,10 @@ async function writePage(directoryParts, { ${Object.entries(meta).filter(([ key, value ]) => value).map(([ key, value ]) => ``).join('\n')} ${canonical && ``} - - ${stylesheet && fixWS` + ${(theme || stylesheet) && fixWS` `} @@ -1675,7 +1671,7 @@ function getGridHTML({ lazy = true }) { return entries.map(({ large, item }, i) => fixWS` - + ${img({ src: srcFn(item), alt: altFn(item), @@ -1865,12 +1861,12 @@ function writeMiscellaneousPages() {

Jump to:

 ${flashData.filter(flash => flash.act8r8k).map((act, i) => fixWS` -

${act.act}

+

${act.act}

${getFlashGridHTML({ entries: (flashData @@ -1963,7 +1959,7 @@ function generateCoverLink({ })} ${wikiInfo.features.artTagUI && tags.filter(tag => !tag.isCW).length && `

Tags: ${tags.filter(tag => !tag.isCW).map(tag => fixWS` - ${tag.name} + ${tag.name} `).join(',\n')}

`}
@@ -1987,7 +1983,7 @@ function writeAlbumPages() { async function writeAlbumPage(album) { const trackToListItem = track => fixWS` -
  • +
  • (${getDurationString(track.duration)}) ${track.name} ${track.artists !== album.artists && fixWS` @@ -1999,7 +1995,9 @@ async function writeAlbumPage(album) { await writePage([C.ALBUM_DIRECTORY, album.directory], { title: album.name, stylesheet: getAlbumStylesheet(album), - theme: `${getThemeString(album)}; --album-directory: ${album.directory}`, + theme: getThemeString(album, [ + `--album-directory: ${album.directory}` + ]), main: { content: fixWS` ${generateCoverLink({ @@ -2014,7 +2012,7 @@ async function writeAlbumPage(album) { ${album.wallpaperArtists && `Wallpaper art by ${getArtistString(album.wallpaperArtists, true)}.
    `} Released ${getDateString(album)}. ${+album.coverArtDate !== +album.date && `
    Art released ${getDateString({date: album.coverArtDate})}.`} -
    Duration: ~${getDurationString(getTotalDuration(album.tracks))}.

    +
    Duration: ~${getDurationString(getTotalDuration(album.tracks))}.

    ${album.urls.length && `

    Listen on ${joinNoOxford(album.urls.map(url => fancifyURL(url, {album: true})), 'or')}.

    `} ${album.usesGroups ? fixWS` @@ -2060,9 +2058,10 @@ async function writeAlbumPage(album) { } function getAlbumStylesheet(album) { - if (album.wallpaperStyle) { + if (album.wallpaperArtists) { return fixWS` body::before { + background-image: url("${C.MEDIA_DIRECTORY}/${C.MEDIA_ALBUM_ART_DIRECTORY}/${album.directory}/bg.jpg"); ${album.wallpaperStyle} } `; @@ -2094,7 +2093,7 @@ async function writeTrackPage(track) {