track player styling fixes for mobile, beautified documents

public_html/functions.js

@@ -7,6 +7,17 @@ document.querySelectorAll('.paused-animation').forEach(el => {
 
 // track players
 const players = document.querySelectorAll('.track-player');
+
+function updateAllWaveformWidths() {
+	players.forEach(player => {
+		const container = player.querySelector('.track-container');
+		if (container) update_player_waveform_widths(container);
+	});
+}
+
+document.addEventListener('DOMContentLoaded', updateAllWaveformWidths);
+window.addEventListener('resize', updateAllWaveformWidths);
+
 players.forEach(player => {
 	const trackName = player.getAttribute('data-track');
 
@@ -103,6 +114,7 @@ players.forEach(player => {
 		const portion = audio.duration ? audio.currentTime / audio.duration : 0;
 		update_play_position(played, unplayed, portion);
 	});
+	update_play_position(played, unplayed, 0.03);
 });
 
 function update_play_position(played_element, unplayed_element, portion) {
@@ -112,6 +124,14 @@ function update_play_position(played_element, unplayed_element, portion) {
 	unplayed_element.style.width = unplayedPercent + "%";
 }
 
+function update_player_waveform_widths(player_container_element) {
+	const trackWidth = player_container_element.offsetWidth;
+	const played_element = player_container_element.querySelector('.track-played');
+	const unplayed_element = player_container_element.querySelector('.track-unplayed');
+	played_element.style.backgroundSize = trackWidth + "px 80px";
+	unplayed_element.style.backgroundSize = trackWidth + "px 80px";
+}
+
 
 // icosahedron
 // Wait for everything to load
@@ -158,23 +178,53 @@ window.onload = function() {
 
 		// Create vertices
 		const vertices = [
-			[-1, t, 0], [1, t, 0], [-1, -t, 0], [1, -t, 0],
+			[-1, t, 0],
-			[0, -1, t], [0, 1, t], [0, -1, -t], [0, 1, -t],
+			[1, t, 0],
-			[t, 0, -1], [t, 0, 1], [-t, 0, -1], [-t, 0, 1]
+			[-1, -t, 0],
+			[1, -t, 0],
+			[0, -1, t],
+			[0, 1, t],
+			[0, -1, -t],
+			[0, 1, -t],
+			[t, 0, -1],
+			[t, 0, 1],
+			[-t, 0, -1],
+			[-t, 0, 1]
 		].map(v => new THREE.Vector3(v[0] * normRadius, v[1] * normRadius, v[2] * normRadius));
 
 		// Define edges (pairs of vertex indices)
 		const edges = [
-			[0, 11], [0, 5], [0, 1], [0, 7], [0, 10],
+			[0, 11],
-			[1, 5], [1, 7], [1, 8], [1, 9],
+			[0, 5],
-			[2, 3], [2, 4], [2, 6], [2, 10], [2, 11],
+			[0, 1],
-			[3, 4], [3, 6], [3, 8], [3, 9],
+			[0, 7],
-			[4, 5], [4, 9], [4, 11],
+			[0, 10],
-			[5, 9], [5, 11],
+			[1, 5],
-			[6, 7], [6, 8], [6, 10],
+			[1, 7],
-			[7, 8], [7, 10],
+			[1, 8],
+			[1, 9],
+			[2, 3],
+			[2, 4],
+			[2, 6],
+			[2, 10],
+			[2, 11],
+			[3, 4],
+			[3, 6],
+			[3, 8],
+			[3, 9],
+			[4, 5],
+			[4, 9],
+			[4, 11],
+			[5, 9],
+			[5, 11],
+			[6, 7],
+			[6, 8],
+			[6, 10],
+			[7, 8],
+			[7, 10],
 			[8, 9], /*[8, 10],*/
-			/*[9, 11],*/ [10, 11]
+			/*[9, 11],*/
+			[10, 11]
 		];
 
 		return {
@@ -261,10 +311,26 @@ window.onload = function() {
 
 		// Define faces of icosahedron (each is a triangle of vertex indices)
 		const faces = [
-			[0, 11, 5], [0, 5, 1], [0, 1, 7], [0, 7, 10], [0, 10, 11],
+			[0, 11, 5],
-			[1, 5, 9], [5, 11, 4], [11, 10, 2], [10, 7, 6], [7, 1, 8],
+			[0, 5, 1],
-			[3, 9, 4], [3, 4, 2], [3, 2, 6], [3, 6, 8], [3, 8, 9],
+			[0, 1, 7],
-			[4, 9, 5], [2, 4, 11], [6, 2, 10], [8, 6, 7], [9, 8, 1]
+			[0, 7, 10],
+			[0, 10, 11],
+			[1, 5, 9],
+			[5, 11, 4],
+			[11, 10, 2],
+			[10, 7, 6],
+			[7, 1, 8],
+			[3, 9, 4],
+			[3, 4, 2],
+			[3, 2, 6],
+			[3, 6, 8],
+			[3, 8, 9],
+			[4, 9, 5],
+			[2, 4, 11],
+			[6, 2, 10],
+			[8, 6, 7],
+			[9, 8, 1]
 		];
 
 		// Create invisible faces for depth testing

public_html/index.html

@@ -50,28 +50,14 @@
 		<section class="contentitem box maincontent" id="music">
 			<header class="blurgreen headlineshadow">
 				<h1><em>music</em> releases
-					<img
+					<img class="icon" src="img/head-music.webp" srcset="img/head-music.webp 2x, img/head-music_1x.webp 1x" width="69" height="77" alt>
-						class="icon"
-						src="img/head-music.webp"
-						srcset="img/head-music.webp 2x, img/head-music_1x.webp 1x"
-						width="69"
-						height="77"
-						alt
-					>
 				</h1>
 			</header>
 
 			<div class="clearfix"></div>
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
-					<img
+					<img class="albumcover" src="img/album/lastfuture_-_signal_to_noise.webp" srcset="img/album/lastfuture_-_signal_to_noise.webp 2x, img/album/lastfuture_-_signal_to_noise_1x.webp 1x" alt="album cover for the lastfuture album signal to noise" width="120" height="120" fetchpriority="high" />
-						class="albumcover"
-						src="img/album/lastfuture_-_signal_to_noise.webp"
-						srcset="img/album/lastfuture_-_signal_to_noise.webp 2x, img/album/lastfuture_-_signal_to_noise_1x.webp 1x"
-						alt="album cover for the lastfuture album signal to noise"
-						width="120" height="120"
-						fetchpriority="high"
-					/>
 					<h2>lastfuture <em>signal to noise</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
@@ -80,14 +66,7 @@
 			<div class="clearfix"></div>
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank">
-					<img
+					<img class="albumcover" src="img/album/lastfuture_-_dreamshifter.webp" srcset="img/album/lastfuture_-_dreamshifter.webp 2x, img/album/lastfuture_-_dreamshifter_1x.webp 1x" alt="album cover for the lastfuture album dreamshifter" width="120" height="120" loading="lazy" />
-						class="albumcover"
-						src="img/album/lastfuture_-_dreamshifter.webp"
-						srcset="img/album/lastfuture_-_dreamshifter.webp 2x, img/album/lastfuture_-_dreamshifter_1x.webp 1x"
-						alt="album cover for the lastfuture album dreamshifter"
-						width="120" height="120"
-						loading="lazy"
-					/>
 					<h2>lastfuture <em>dreamshifter</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
@@ -95,14 +74,7 @@
 
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank">
-					<img
+					<img class="albumcover" src="img/album/lastfuture_-_misinterpreter.webp" srcset="img/album/lastfuture_-_misinterpreter.webp 2x, img/album/lastfuture_-_misinterpreter_1x.webp 1x" alt="album cover for the lastfuture track misinterpreter" width="120" height="120" loading="lazy" />
-						class="albumcover"
-						src="img/album/lastfuture_-_misinterpreter.webp"
-						srcset="img/album/lastfuture_-_misinterpreter.webp 2x, img/album/lastfuture_-_misinterpreter_1x.webp 1x"
-						alt="album cover for the lastfuture track misinterpreter"
-						width="120" height="120"
-						loading="lazy"
-					/>
 					<h2>lastfuture <em>misinterpreter</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
@@ -111,29 +83,15 @@
 			<div class="clearfix"></div>
 			<article class="opaque whitebg album">
 				<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank">
-					<img
+					<img class="albumcover" src="img/album/lastfuture_-_reverse_kill.webp" srcset="img/album/lastfuture_-_reverse_kill.webp 2x, img/album/lastfuture_-_reverse_kill_1x.webp 1x" alt="album cover for the lastfuture album reverse kill" width="120" height="120" loading="lazy" />
-						class="albumcover"
-						src="img/album/lastfuture_-_reverse_kill.webp"
-						srcset="img/album/lastfuture_-_reverse_kill.webp 2x, img/album/lastfuture_-_reverse_kill_1x.webp 1x"
-						alt="album cover for the lastfuture album reverse kill"
-						width="120" height="120"
-						loading="lazy"
-					/>
 					<h2>lastfuture <em>reverse kill</em></h2>
 					<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
 				</a>
 			</article>
 
 			<header class="blurgreen headlineshadow spaceup">
-				<h1><em>highlighted</em> tracks
+				<h1><em>highlight</em> tracks
-					<img
+					<img class="icon" src="img/head-music.webp" srcset="img/head-music.webp 2x, img/head-music_1x.webp 1x" width="69" height="77" alt>
-						class="icon"
-						src="img/head-music.webp"
-						srcset="img/head-music.webp 2x, img/head-music_1x.webp 1x"
-						width="69"
-						height="77"
-						alt
-					>
 				</h1>
 			</header>
 
@@ -153,14 +111,7 @@
 		<section class="contentitem box maincontent" id="experiments">
 			<header class="blurgreen headlineshadow">
 				<h1>from the <em>lab</em>
-					<img
+					<img class="icon" src="img/head-experiment.webp" srcset="img/head-experiment.webp 2x, img/head-experiment_1x.webp 1x" width="63" height="103" alt>
-						class="icon"
-						src="img/head-experiment.webp"
-						srcset="img/head-experiment.webp 2x, img/head-experiment_1x.webp 1x"
-						width="63"
-						height="103"
-						alt
-					>
 				</h1>
 			</header>
 			<div class="opaque whitebg">
@@ -187,4 +138,5 @@
 	</div>
 
 </body>
+
 </html>

public_html/style.css

@@ -461,6 +461,7 @@ body {
 .elementshadow {
 	box-shadow: 0 2px 1px rgba(0, 0, 0, 1);
 }
+
 .headlineshadow {
 	text-shadow: 0 2px 1px rgba(0, 0, 0, 1);
 }
@@ -534,7 +535,7 @@ a {
 	font-size: 1.125rem;
 	font-style: italic;
 	font-weight: 300;
-	transition: margin 0.25s, padding 0,25s;
+	transition: margin 0.25s, padding 0.25s;
 }
 
 .sidebaritem a {
@@ -698,6 +699,7 @@ a {
 	width: 100%;
 	position: relative;
 }
+
 .contentitem div.opaque h2 em {
 	font-weight: 500;
 }
@@ -731,6 +733,7 @@ div.opaque h2 span.halfbubble {
 	/* height: 7rem; */
 	cursor: pointer;
 }
+
 .paused-animation .play-btn {
 	position: absolute;
 	width: 100%;
@@ -742,24 +745,31 @@ div.opaque h2 span.halfbubble {
 	background-size: 80px 80px;
 	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
 }
+
 .paused-animation img {
 	display: block;
 	width: auto;
 	height: 100%;
 	margin: 0;
 }
+
 .paused-animation .anim {
 	display: none;
 }
+
 .paused-animation.active {
 	height: auto;
 }
-.paused-animation.active .poster-frame, .paused-animation.active .play-btn  {
+
+.paused-animation.active .poster-frame,
+.paused-animation.active .play-btn {
 	display: none;
 }
+
 .paused-animation.active .anim {
 	display: block;
 }
+
 .watchface {
 	width: calc((100% / 2) - 0.6rem);
 	margin: 0.325rem 0.3rem;
@@ -848,24 +858,32 @@ article.album a:hover {
 .track h2 {
 	font-size: 1.2em;
 }
+
 .track .halfbubble {
 	margin-bottom: -0.125em;
 }
+
 .track-player {
+	position: relative;
 	margin: 0.5rem 0 1.5rem;
 }
+
 .track-player .track-container {
 	width: 400px;
+	max-width: calc(100% - 95px);
 	height: 80px;
 	border-radius: 0.3rem;
 }
-.track-player .track-played, .track-player .track-unplayed {
+
+.track-player .track-played,
+.track-player .track-unplayed {
 	height: 100%;
+	width: 100%;
 	float: left;
 	background-repeat: no-repeat;
 	background-size: 400px 80px;
-
 }
+
 .track-player .play-button {
 	display: block;
 	height: 80px;
@@ -876,17 +894,21 @@ article.album a:hover {
 	background-size: contain;
 	cursor: pointer;
 }
+
 .track-player .play-button.play {
 	background-image: url('img/track-play.svg');
 }
+
 .track-player .play-button.pause {
 	background-image: url('img/track-pause.svg');
 }
+
 .track-player .track-played {
 	width: 0%;
 	background-position: top left;
 	background-image: none;
 }
+
 .track-player .track-unplayed {
 	background-position: top right;
 	width: 100%;
@@ -958,6 +980,7 @@ article.album a:hover {
 	.contentitem {
 		max-width: 495px;
 	}
+
 	#music {
 		flex: 1;
 		order: 2;
@@ -1025,7 +1048,8 @@ article.album a:hover {
 		padding-left: 1rem;
 	}
 
-	.sidebaritem#findme .line2, .sidebaritem#findme .line3 {
+	.sidebaritem#findme .line2,
+	.sidebaritem#findme .line3 {
 		margin-top: 0.2em;
 	}
 }