tags and a whole lot of data

sorry for this commit being so f****u****c*kxng bad

2 files changed, 96 insertions, 30 deletions

diff --git a/static/client.js b/static/client.js
index 5d706b24..8247a42c 100644
--- a/static/client.js
+++ b/static/client.js
@@ -38,19 +38,19 @@ function getFlash(el) {
 }
 
 function openAlbum(album) {
-    location.href = rebase(`${C.ALBUM_DIRECTORY}/${album.directory}/index.html`);
+    return rebase(`${C.ALBUM_DIRECTORY}/${album.directory}/`);
 }
 
 function openTrack(track) {
-    location.href = rebase(`${C.TRACK_DIRECTORY}/${track.directory}/index.html`);
+    return rebase(`${C.TRACK_DIRECTORY}/${track.directory}/`);
 }
 
 function openArtist(artist) {
-    location.href = rebase(`${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/index.html`);
+    return rebase(`${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/`);
 }
 
 function openFlash(flash) {
-    location.href = rebase(`${C.FLASH_DIRECTORY}/${flash.directory}/index.html`);
+    return rebase(`${C.FLASH_DIRECTORY}/${flash.directory}/`);
 }
 
 /* i implemented these functions but we dont actually use them anywhere lol
@@ -80,20 +80,20 @@ function openNextTrack() {
     const { list, index } = getTrackListAndIndex();
     if (!list) return;
     if (index === list.length) return;
-    openTrack(list[index + 1]);
+    return openTrack(list[index + 1]);
 }
 
 function openPreviousTrack() {
     const { list, index } = getTrackListAndIndex();
     if (!list) return;
     if (index === 0) return;
-    openTrack(list[index - 1]);
+    return openTrack(list[index - 1]);
 }
 
 function openRandomTrack() {
     const { list } = getTrackListAndIndex();
     if (!list) return;
-    openTrack(pick(list));
+    return openTrack(pick(list));
 }
 
 function getFlashListAndIndex() {
@@ -107,31 +107,30 @@ function getFlashListAndIndex() {
 function openNextFlash() {
     const { list, index } = getFlashListAndIndex();
     if (index === list.length) return;
-    openFlash(list[index + 1]);
+    return openFlash(list[index + 1]);
 }
 
 function openPreviousFlash() {
     const { list, index } = getFlashListAndIndex();
     if (index === 0) return;
-    openFlash(list[index - 1]);
+    return openFlash(list[index - 1]);
 }
 
 for (const a of document.body.querySelectorAll('[data-random]')) {
     a.addEventListener('click', evt => {
-        try {
-            switch (a.dataset.random) {
-                case 'album': return openAlbum(pick(albumData));
-                case 'album-in-fandom': return openAlbum(pick(fandomAlbumData));
-                case 'album-in-official': openAlbum(pick(officialAlbumData));
-                case 'track': return openTrack(pick(allTracks));
-                case 'track-in-album': return openTrack(pick(getAlbum(a).tracks));
-                case 'track-in-fandom': return openTrack(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), [])));
-                case 'track-in-official': return openTrack(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), [])));
-                case 'artist': return openArtist(pick(artistNames));
-                case 'artist-more-than-one-contrib': return openArtist(pick(artistNames.filter(name => C.getArtistNumContributions(name, {albumData, allTracks, flashData}) > 1)));
-            }
-        } finally {
-            evt.preventDefault();
+        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)));
         }
     });
 }
@@ -164,3 +163,13 @@ document.addEventListener('keypress', event => {
         }
     }
 });
+
+for (const reveal of document.querySelectorAll('.reveal')) {
+    reveal.addEventListener('click', event => {
+        if (!reveal.classList.contains('revealed')) {
+            reveal.classList.add('revealed');
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    });
+}
diff --git a/static/site.css b/static/site.css
index 2d47385a..9f6d2171 100644
--- a/static/site.css
+++ b/static/site.css
@@ -170,6 +170,7 @@ a:hover {
 #content {
     padding: 20px;
     flex-grow: 1;
+    flex-shrink: 3;
 }
 
 #sidebar > h1,
@@ -267,22 +268,25 @@ a:hover {
     font-weight: normal;
 }
 
-#cover-art {
+#cover-art-container {
     float: right;
     width: 40%;
     max-width: 400px;
     margin: 0 0 10px 10px;
-    background-color: #181818;
+    font-size: 0.8em;
 }
 
 #cover-art img {
     display: block;
     width: 100%;
     height: 100%;
-    object-fit: cover;
 }
 
-img {
+#cover-art-container p {
+    margin-top: 5px;
+}
+
+.image-container {
     border: 2px solid var(--fg-color);
     box-sizing: border-box;
     position: relative;
@@ -291,7 +295,18 @@ img {
     background-color: var(--dim-color);
     color: white;
     display: inline-block;
-    object-fit: contain;
+    width: 100%;
+    height: 100%;
+}
+
+.image-inner-area {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+img {
+    object-fit: cover;
     /* these unfortunately dont take effect while loading, so...
     text-align: center;
     line-height: 2em;
@@ -314,6 +329,8 @@ a.box:focus:not(:focus-visible) {
 
 a.box img {
     display: block;
+    width: 100%;
+    height: auto;
 }
 
 h1 {
@@ -348,6 +365,13 @@ h1 {
 .grid-item img {
     width: 100%;
     height: 100%;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.grid-item span {
+    overflow-wrap: break-word;
+    hyphens: auto;
 }
 
 .grid-item:hover {
@@ -358,12 +382,12 @@ h1 {
     text-decoration: underline;
 }
 
-.grid-item span:first-of-type {
+.grid-item > span:first-of-type {
     margin-top: 0.45em;
     display: block;
 }
 
-.grid-item:hover span:first-of-type {
+.grid-item:hover > span:first-of-type {
     text-decoration: underline;
 }
 
@@ -423,6 +447,38 @@ h1 {
     padding-right: 100%;
 }
 
+.reveal {
+    position: relative;
+}
+
+.reveal img {
+    filter: blur(20px);
+    opacity: 0.4;
+}
+
+.reveal-text {
+    color: white;
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    right: 10px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.reveal-interaction {
+    opacity: 0.8;
+}
+
+.reveal.revealed img {
+    filter: none;
+    opacity: 1;
+}
+
+.reveal.revealed .reveal-text {
+    display: none;
+}
+
 #content.top-index h1,
 #content.flash-index h1 {
     text-align: center;
@@ -480,6 +536,7 @@ p code {
 
 blockquote {
     max-width: 600px;
+    margin-right: 0;
 }
 
 .long-content {