From 8a7cb1edff25ba3e612d7c24b07cc776ff8738d6 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Fri, 8 Jan 2021 00:15:37 -0400 Subject: okay so like, hear me out here this commit isnt QUITE done but its in a working state, and i just had the scariest vision of accidentally discarding all my work via git mishap, yknow? even though im not doing anything funky with git! so yall get this commit early and its goin on line but im not pushing it to the site til its done. no spoilering yourself (even though ive already posted most of the cool things in the discord) <3 --- static/client.js | 95 +++++++++++++++++++------------------ static/site.css | 142 ++++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 153 insertions(+), 84 deletions(-) (limited to 'static') diff --git a/static/client.js b/static/client.js index 8247a42c..549fde29 100644 --- a/static/client.js +++ b/static/client.js @@ -5,10 +5,10 @@ 'use strict'; -const officialAlbumData = albumData.filter(album => !album.isFanon); -const fandomAlbumData = albumData.filter(album => album.isFanon); -const artistNames = artistData.filter(artist => !artist.alias).map(artist => artist.name); -const allTracks = C.getAllTracks(albumData); +let albumData, artistData, flashData; +let officialAlbumData, fandomAlbumData, artistNames; + +let ready = false; function rebase(href) { const relative = document.documentElement.dataset.rebase; @@ -27,6 +27,10 @@ function cssProp(el, key) { return getComputedStyle(el).getPropertyValue(key).trim(); } +function getRefDirectory(ref) { + return ref.split(':')[1]; +} + function getAlbum(el) { const directory = cssProp(el, '--album-directory'); return albumData.find(album => album.directory === directory); @@ -37,16 +41,16 @@ function getFlash(el) { return flashData.find(flash => flash.directory === directory); } -function openAlbum(album) { - return rebase(`${C.ALBUM_DIRECTORY}/${album.directory}/`); +function openAlbum(directory) { + return rebase(`${C.ALBUM_DIRECTORY}/${directory}/`); } -function openTrack(track) { - return rebase(`${C.TRACK_DIRECTORY}/${track.directory}/`); +function openTrack(directory) { + return rebase(`${C.TRACK_DIRECTORY}/${directory}/`); } -function openArtist(artist) { - return rebase(`${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/`); +function openArtist(directory) { + return rebase(`${C.ARTIST_DIRECTORY}/${directory}/`); } function openFlash(flash) { @@ -76,20 +80,6 @@ function getTrackListAndIndex() { return {list: album.tracks, index: trackIndex}; } -function openNextTrack() { - const { list, index } = getTrackListAndIndex(); - if (!list) return; - if (index === list.length) return; - return openTrack(list[index + 1]); -} - -function openPreviousTrack() { - const { list, index } = getTrackListAndIndex(); - if (!list) return; - if (index === 0) return; - return openTrack(list[index - 1]); -} - function openRandomTrack() { const { list } = getTrackListAndIndex(); if (!list) return; @@ -104,33 +94,26 @@ function getFlashListAndIndex() { return {list, index: flashIndex}; } -function openNextFlash() { - const { list, index } = getFlashListAndIndex(); - if (index === list.length) return; - return openFlash(list[index + 1]); -} - -function openPreviousFlash() { - const { list, index } = getFlashListAndIndex(); - if (index === 0) return; - return openFlash(list[index - 1]); -} - for (const a of document.body.querySelectorAll('[data-random]')) { a.addEventListener('click', evt => { + if (!ready) { + evt.preventDefault(); + return; + } + setTimeout(() => { a.href = rebase(C.JS_DISABLED_DIRECTORY); }); switch (a.dataset.random) { - case 'album': return a.href = openAlbum(pick(albumData)); - case 'album-in-fandom': return a.href = openAlbum(pick(fandomAlbumData)); - case 'album-in-official': return a.href = openAlbum(pick(officialAlbumData)); - case 'track': return a.href = openTrack(pick(allTracks)); - case 'track-in-album': return a.href = openTrack(pick(getAlbum(a).tracks)); - case 'track-in-fandom': return a.href = openTrack(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); - case 'track-in-official': return a.href = openTrack(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))); - case 'artist': return a.href = openArtist(pick(artistNames)); - case 'artist-more-than-one-contrib': return a.href = openArtist(pick(artistNames.filter(name => C.getArtistNumContributions(name, {albumData, allTracks, flashData}) > 1))); + case 'album': return a.href = openAlbum(pick(albumData).directory); + case 'album-in-fandom': return a.href = openAlbum(pick(fandomAlbumData).directory); + case 'album-in-official': return a.href = openAlbum(pick(officialAlbumData).directory); + case 'track': return a.href = openTrack(getRefDirectory(pick(albumData.map(a => a.tracks).reduce((a, b) => a.concat(b), [])))); + case 'track-in-album': return a.href = openTrack(getRefDirectory(pick(getAlbum(a).tracks))); + case 'track-in-fandom': return a.href = openTrack(getRefDirectory(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), [])))); + case 'track-in-official': return a.href = openTrack(getRefDirectory(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), [])))); + case 'artist': return a.href = openArtist(pick(artistData).directory); + case 'artist-more-than-one-contrib': return a.href = openArtist(pick(artistData.filter(artist => C.getArtistNumContributions(artist) > 1)).directory); } }); } @@ -159,7 +142,7 @@ document.addEventListener('keypress', event => { } else if (event.charCode === 'P'.charCodeAt(0)) { if (previous) previous.click(); } else if (event.charCode === 'R'.charCodeAt(0)) { - if (random) random.click(); + if (random && ready) random.click(); } } }); @@ -173,3 +156,23 @@ for (const reveal of document.querySelectorAll('.reveal')) { } }); } + +const elements1 = document.getElementsByClassName('js-hide-once-data'); +const elements2 = document.getElementsByClassName('js-show-once-data'); + +for (const element of elements1) element.style.display = 'block'; + +fetch(rebase('data.json')).then(data => data.json()).then(data => { + albumData = data.albumData; + artistData = data.artistData; + flashData = data.flashData; + + officialAlbumData = albumData.filter(album => !album.isFanon); + fandomAlbumData = albumData.filter(album => album.isFanon); + artistNames = artistData.filter(artist => !artist.alias).map(artist => artist.name); + + for (const element of elements1) element.style.display = 'none'; + for (const element of elements2) element.style.display = 'block'; + + ready = true; +}); diff --git a/static/site.css b/static/site.css index 016f74c4..90f8ed3e 100644 --- a/static/site.css +++ b/static/site.css @@ -15,14 +15,37 @@ } body { - background-color: var(--bg-color); - --bg-shade: calc(255 * var(--theme)); --fg-shade: calc(255 * (1 - var(--theme))); + background: black; + margin: 10px; + overflow-y: scroll; +} + +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + + background-image: url("https://www.homestuck.com/images/desktops/johnhouse_1920x1080.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)); + max-width: 1200px; + margin: 10px auto 50px; padding: 15px; + + box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } a { @@ -34,14 +57,36 @@ a:hover { text-decoration: underline; } +#skippers { + position: absolute; + left: -100px; + top: auto; + width: 1px; + height: 1px; +} + +#skippers:focus-within { + position: static; + width: unset; + height: unset; +} + +#skippers > .skipper:not(:last-child)::after { + content: " \00b7 "; + font-weight: 800; +} + .layout-columns { display: flex; } -#header { +#header, #skippers { margin-bottom: 10px; padding: 5px; font-size: 0.85em; +} + +#header { display: flex; } @@ -122,7 +167,7 @@ a:hover { } @media (max-width: 780px) { - #sidebar:not(.no-hide) { + .sidebar:not(.no-hide) { display: none; } @@ -134,7 +179,7 @@ a:hover { margin-bottom: 10px; } - #sidebar.no-hide { + .sidebar.no-hide { max-width: unset !important; flex-basis: unset !important; margin-right: 0; @@ -147,25 +192,43 @@ a:hover { } } -#sidebar, #content, #header { +.sidebar, #content, #header, #skippers { background-color: rgba(var(--bg-shade), var(--bg-shade), var(--bg-shade), 0.6); border: 1px dotted var(--fg-color); border-radius: 3px; } -#sidebar { +.sidebar-column { flex: 1 1 20%; min-width: 150px; max-width: 250px; flex-basis: 250px; - float: left; + height: 100%; +} + +.sidebar-multiple { + display: flex; + flex-direction: column; +} + +.sidebar-multiple .sidebar:not(:first-child) { + margin-top: 10px; +} + +.sidebar { padding: 5px; - margin-right: 10px; font-size: 0.85em; - height: 100%; } -#sidebar.wide { +#sidebar-left { + margin-right: 10px; +} + +#sidebar-right { + margin-left: 10px; +} + +.sidebar.wide { max-width: 350px; flex-basis: 300px; flex-shrink: 0; @@ -178,23 +241,23 @@ a:hover { flex-shrink: 3; } -#sidebar > h1, -#sidebar > h2, -#sidebar > h3, -#sidebar > p { +.sidebar > h1, +.sidebar > h2, +.sidebar > h3, +.sidebar > p { text-align: center; } -#sidebar h1 { +.sidebar h1 { font-size: 1.25em; } -#sidebar h2 { +.sidebar h2 { font-size: 1.1em; margin: 0; } -#sidebar h3 { +.sidebar h3 { font-size: 1.1em; font-style: oblique; font-variant: small-caps; @@ -202,73 +265,70 @@ a:hover { margin-bottom: 0em; } -#sidebar > p { +.sidebar > p { margin: 0.5em 0; + padding: 0 5px; } -#sidebar p:last-child { - margin-bottom: 0; -} - -#sidebar hr { +.sidebar hr { color: #555; margin: 10px 5px; } -#sidebar > ol, #sidebar > ul { +.sidebar > ol, .sidebar > ul { padding-left: 30px; padding-right: 15px; } -#sidebar > dl { +.sidebar > dl { padding-right: 15px; padding-left: 0; } -#sidebar > dl dt { +.sidebar > dl dt { padding-left: 10px; margin-top: 0.5em; } -#sidebar > dl dt.current { +.sidebar > dl dt.current { font-weight: 800; } -#sidebar > dl dd { +.sidebar > dl dd { margin-left: 0; } -#sidebar > dl dd ul { +.sidebar > dl dd ul { padding-left: 30px; margin-left: 0; } -#sidebar > dl .side { +.sidebar > dl .side { padding-left: 10px; } -#sidebar li.current { +.sidebar li.current { font-weight: 800; } -#sidebar li { +.sidebar li { overflow-wrap: break-word; } -#sidebar article { +.sidebar article { text-align: left; margin: 5px 5px 15px 5px; } -#sidebar article:last-child { +.sidebar article:last-child { margin-bottom: 5px; } -#sidebar article h2 { +.sidebar article h2 { border-bottom: 1px dotted white; } -#sidebar article h2 time { +.sidebar article h2 time { float: right; font-weight: normal; } @@ -320,7 +380,9 @@ img { */ } -.js-hide { +.js-hide, +.js-show-once-data, +.js-hide-once-data { display: none; } @@ -596,6 +658,10 @@ dl ul, dl ol { margin-left: 0; } +.group-chronology-link { + font-style: oblique; +} + hr.split::before { content: "(split)"; color: #808080; -- cgit 1.3.0-6-gf8a5