diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/client.js | 95 | ||||
| -rw-r--r-- | static/site.css | 142 |
2 files changed, 153 insertions, 84 deletions
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; |