track player styling fixes for mobile, beautified documents

This commit is contained in:
2025-05-15 22:49:14 +02:00
parent e9f0cd8dea
commit afa77dad88
3 changed files with 225 additions and 183 deletions

View File

@@ -12,8 +12,8 @@
<link rel="stylesheet" href="style.css" fetchpriority="high" />
<link rel="preload" as="image" type="image/webp" href="img/bg.webp" fetchpriority="high" />
<link rel="preload" as="image" type="image/webp" href="img/bg_blur.webp" />
<link rel="preload" as="image" type="image/webp" href="img/bg.webp" fetchpriority="high" />
<link rel="preload" as="image" type="image/webp" href="img/bg_blur.webp" />
<script src="js/three.min.js" defer></script>
<script src="functions.js" defer></script>
@@ -50,28 +50,14 @@
<section class="contentitem box maincontent" id="music">
<header class="blurgreen headlineshadow">
<h1><em>music</em> releases
<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
>
<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>
</h1>
</header>
<div class="clearfix"></div>
<article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank">
<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"
/>
<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" />
<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
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"
/>
<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" />
<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
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"
/>
<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" />
<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
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"
/>
<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" />
<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
<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
>
<h1><em>highlight</em> tracks
<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>
</h1>
</header>
@@ -153,14 +111,7 @@
<section class="contentitem box maincontent" id="experiments">
<header class="blurgreen headlineshadow">
<h1>from the <em>lab</em>
<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
>
<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>
</h1>
</header>
<div class="opaque whitebg">
@@ -187,4 +138,5 @@
</div>
</body>
</html>