alina
/
alinamarquardt.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

track player styling fixes for mobile, beautified documents

main
Alina Marquardt 2025-05-15 22:49:14 +02:00
parent e9f0cd8dea
commit afa77dad88
3 changed files with 225 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

294
public_html/functions.js
View File

@ -1,115 +1,135 @@
// gif player // gif player
document.querySelectorAll('.paused-animation').forEach(el => { document.querySelectorAll('.paused-animation').forEach(el => {
el.addEventListener('click', () => { el.addEventListener('click', () => {
el.classList.toggle('active'); el.classList.toggle('active');
}); });
}); });
// track players // track players
const players = document.querySelectorAll('.track-player'); 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 => { players.forEach(player => {
const trackName = player.getAttribute('data-track'); const trackName = player.getAttribute('data-track');
const button = document.createElement('div'); const button = document.createElement('div');
button.className = 'play-button play'; // start as play button.className = 'play-button play'; // start as play
player.appendChild(button); player.appendChild(button);
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.className = 'track'; wrapper.className = 'track';
wrapper.innerHTML = ` wrapper.innerHTML = `
<div class="blurgreen track-container"> <div class="blurgreen track-container">
<div class="track-played"></div> <div class="track-played"></div>
<div class="track-unplayed"></div> <div class="track-unplayed"></div>
</div> </div>
`; `;
player.appendChild(wrapper); player.appendChild(wrapper);
const playercontainer = player.querySelector('.track-container'); const playercontainer = player.querySelector('.track-container');
const played = player.querySelector('.track-played'); const played = player.querySelector('.track-played');
const unplayed = player.querySelector('.track-unplayed'); const unplayed = player.querySelector('.track-unplayed');
played.style.backgroundImage = `url('tracks/${trackName}-played.png')`; played.style.backgroundImage = `url('tracks/${trackName}-played.png')`;
unplayed.style.backgroundImage = `url('tracks/${trackName}.png')`; unplayed.style.backgroundImage = `url('tracks/${trackName}.png')`;
const audio = document.createElement('audio'); const audio = document.createElement('audio');
audio.style.display = 'none'; audio.style.display = 'none';
player.appendChild(audio); player.appendChild(audio);
button.addEventListener('click', () => { button.addEventListener('click', () => {
// Pause other players immediately // Pause other players immediately
players.forEach(p => { players.forEach(p => {
const otherAudio = p.querySelector('audio'); const otherAudio = p.querySelector('audio');
const otherBtn = p.querySelector('.play-button'); const otherBtn = p.querySelector('.play-button');
if (otherAudio !== audio) { if (otherAudio !== audio) {
if (!otherAudio.paused) otherAudio.pause(); if (!otherAudio.paused) otherAudio.pause();
if (otherBtn) { if (otherBtn) {
otherBtn.classList.add('play'); otherBtn.classList.add('play');
otherBtn.classList.remove('pause'); otherBtn.classList.remove('pause');
} }
} }
}); });
// Then lazy-load and play/pause current audio as before... // Then lazy-load and play/pause current audio as before...
if (!audio.src) { if (!audio.src) {
audio.src = 'tracks/' + trackName + '.mp3'; audio.src = 'tracks/' + trackName + '.mp3';
audio.currentTime = 0; audio.currentTime = 0;
audio.load(); audio.load();
audio.addEventListener('canplay', () => { audio.addEventListener('canplay', () => {
audio.play().then(() => { audio.play().then(() => {
button.classList.remove('play'); button.classList.remove('play');
button.classList.add('pause'); button.classList.add('pause');
}).catch(() => { }).catch(() => {
button.classList.add('play'); button.classList.add('play');
button.classList.remove('pause'); button.classList.remove('pause');
}); });
}, { once: true }); }, { once: true });
return; return;
} }
if (audio.paused) { if (audio.paused) {
audio.play().then(() => { audio.play().then(() => {
button.classList.remove('play'); button.classList.remove('play');
button.classList.add('pause'); button.classList.add('pause');
}).catch(() => { }).catch(() => {
button.classList.add('play'); button.classList.add('play');
button.classList.remove('pause'); button.classList.remove('pause');
}); });
} else { } else {
audio.pause(); audio.pause();
button.classList.add('play'); button.classList.add('play');
button.classList.remove('pause'); button.classList.remove('pause');
} }
}); });
audio.addEventListener('ended', () => { audio.addEventListener('ended', () => {
button.classList.add('play'); button.classList.add('play');
button.classList.remove('pause'); button.classList.remove('pause');
}); });
playercontainer.addEventListener('click', e => { playercontainer.addEventListener('click', e => {
const rect = playercontainer.getBoundingClientRect(); // Use container rect! const rect = playercontainer.getBoundingClientRect(); // Use container rect!
const clickX = e.clientX - rect.left; const clickX = e.clientX - rect.left;
const width = rect.width; const width = rect.width;
const portion = Math.min(Math.max(clickX / width, 0), 1); const portion = Math.min(Math.max(clickX / width, 0), 1);
audio.currentTime = portion * audio.duration; audio.currentTime = portion * audio.duration;
}); });
audio.addEventListener('timeupdate', () => { audio.addEventListener('timeupdate', () => {
const portion = audio.duration ? audio.currentTime / audio.duration : 0; const portion = audio.duration ? audio.currentTime / audio.duration : 0;
update_play_position(played, unplayed, portion); update_play_position(played, unplayed, portion);
}); });
update_play_position(played, unplayed, 0.03);
}); });
function update_play_position(played_element, unplayed_element, portion) { function update_play_position(played_element, unplayed_element, portion) {
const playedPercent = portion * 100; const playedPercent = portion * 100;
const unplayedPercent = 100 - playedPercent; const unplayedPercent = 100 - playedPercent;
played_element.style.width = playedPercent + "%"; played_element.style.width = playedPercent + "%";
unplayed_element.style.width = unplayedPercent + "%"; 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";
} }
@ -158,23 +178,53 @@ window.onload = function() {
// Create vertices // Create vertices
const 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)); ].map(v => new THREE.Vector3(v[0] * normRadius, v[1] * normRadius, v[2] * normRadius));
// Define edges (pairs of vertex indices) // Define edges (pairs of vertex indices)
const edges = [ 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],*/ [8, 9], /*[8, 10],*/
/*[9, 11],*/ [10, 11] /*[9, 11],*/
[10, 11]
]; ];
return { return {
@ -224,7 +274,7 @@ window.onload = function() {
// 1. A thin cylindrical tube with back material that ignores depth // 1. A thin cylindrical tube with back material that ignores depth
// 2. A cylindrical tube with front material that uses depth testing // 2. A cylindrical tube with front material that uses depth testing
const backRadius = 0.025; // thin for back lines const backRadius = 0.025; // thin for back lines
const frontRadius = 0.035; // thick for front lines const frontRadius = 0.035; // thick for front lines
icosa.edges.forEach((edge, index) => { icosa.edges.forEach((edge, index) => {
const start = icosa.vertices[edge[0]]; const start = icosa.vertices[edge[0]];
@ -261,10 +311,26 @@ window.onload = function() {
// Define faces of icosahedron (each is a triangle of vertex indices) // Define faces of icosahedron (each is a triangle of vertex indices)
const faces = [ 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 // Create invisible faces for depth testing
@ -279,7 +345,7 @@ window.onload = function() {
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const faceMesh = new THREE.Mesh(geometry, faceMaterial); const faceMesh = new THREE.Mesh(geometry, faceMaterial);
faceMesh.scale.set(0.975,0.975,0.975); faceMesh.scale.set(0.975, 0.975, 0.975);
faceMesh.renderOrder = 0; // Render first for depth buffer faceMesh.renderOrder = 0; // Render first for depth buffer
group.add(faceMesh); group.add(faceMesh);
@ -288,19 +354,19 @@ window.onload = function() {
const internalMesh3 = new THREE.Mesh(geometry, internalMaterial); const internalMesh3 = new THREE.Mesh(geometry, internalMaterial);
const internalMesh4 = new THREE.Mesh(geometry, internalMaterial); const internalMesh4 = new THREE.Mesh(geometry, internalMaterial);
const internalMesh5 = new THREE.Mesh(geometry, internalMaterial); const internalMesh5 = new THREE.Mesh(geometry, internalMaterial);
internalMesh1.scale.set(0.85,0.85,0.85); internalMesh1.scale.set(0.85, 0.85, 0.85);
internalMesh1.renderOrder = 1; // Render between front and back internalMesh1.renderOrder = 1; // Render between front and back
group.add(internalMesh1); group.add(internalMesh1);
internalMesh2.scale.set(0.65,0.65,0.65); internalMesh2.scale.set(0.65, 0.65, 0.65);
internalMesh2.renderOrder = 1; // Render between front and back internalMesh2.renderOrder = 1; // Render between front and back
group.add(internalMesh2); group.add(internalMesh2);
internalMesh3.scale.set(0.5,0.5,0.5); internalMesh3.scale.set(0.5, 0.5, 0.5);
internalMesh3.renderOrder = 1; // Render between front and back internalMesh3.renderOrder = 1; // Render between front and back
group.add(internalMesh3); group.add(internalMesh3);
internalMesh4.scale.set(0.4,0.4,0.4); internalMesh4.scale.set(0.4, 0.4, 0.4);
internalMesh4.renderOrder = 1; // Render between front and back internalMesh4.renderOrder = 1; // Render between front and back
group.add(internalMesh4); group.add(internalMesh4);
internalMesh5.scale.set(0.3,0.3,0.3); internalMesh5.scale.set(0.3, 0.3, 0.3);
internalMesh5.renderOrder = 1; // Render between front and back internalMesh5.renderOrder = 1; // Render between front and back
group.add(internalMesh5); group.add(internalMesh5);
}); });
@ -315,7 +381,7 @@ window.onload = function() {
const length = direction.length(); const length = direction.length();
// Create cylinder // Create cylinder
const geometry = new THREE.CylinderGeometry(radius, radius, length*lengthmultiplier, 4, 1); const geometry = new THREE.CylinderGeometry(radius, radius, length * lengthmultiplier, 4, 1);
// By default, cylinder is along Y-axis, so rotate it // By default, cylinder is along Y-axis, so rotate it
geometry.rotateX(Math.PI / 2); geometry.rotateX(Math.PI / 2);
@ -340,26 +406,26 @@ window.onload = function() {
let lastFrameTime = 0; let lastFrameTime = 0;
const targetFPS = 20; const targetFPS = 20;
const animMultiplier = 30/targetFPS; const animMultiplier = 30 / targetFPS;
const frameDuration = 1000 / targetFPS; const frameDuration = 1000 / targetFPS;
// Animation function // Animation function
function animate(now) { function animate(now) {
requestAnimationFrame(animate); requestAnimationFrame(animate);
const delta = now - lastFrameTime; const delta = now - lastFrameTime;
if (delta < frameDuration) return; if (delta < frameDuration) return;
lastFrameTime = now; lastFrameTime = now;
// Rotate if animation is enabled // Rotate if animation is enabled
if (animating) { if (animating) {
icosahedronGroup.rotation.x -= 0.002 * animMultiplier; icosahedronGroup.rotation.x -= 0.002 * animMultiplier;
icosahedronGroup.rotation.y += 0.004 * animMultiplier; icosahedronGroup.rotation.y += 0.004 * animMultiplier;
icosahedronGroup.rotation.z -= 0.001 * animMultiplier; icosahedronGroup.rotation.z -= 0.001 * animMultiplier;
} }
renderer.render(scene, camera); renderer.render(scene, camera);
} }
// Start animation // Start animation

70
public_html/index.html
View File

@ -12,8 +12,8 @@
<link rel="stylesheet" href="style.css" fetchpriority="high" /> <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.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_blur.webp" />
<script src="js/three.min.js" defer></script> <script src="js/three.min.js" defer></script>
<script src="functions.js" defer></script> <script src="functions.js" defer></script>
@ -50,28 +50,14 @@
<section class="contentitem box maincontent" id="music"> <section class="contentitem box maincontent" id="music">
<header class="blurgreen headlineshadow"> <header class="blurgreen headlineshadow">
<h1><em>music</em> releases <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> </h1>
</header> </header>
<div class="clearfix"></div> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/signal-to-noise" target="_blank"> <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> <h2>lastfuture <em>signal to noise</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
@ -80,14 +66,7 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/dreamshifter" target="_blank"> <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> <h2>lastfuture <em>dreamshifter</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
@ -95,14 +74,7 @@
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/track/misinterpreter-2" target="_blank"> <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> <h2>lastfuture <em>misinterpreter</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
@ -111,29 +83,15 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<article class="opaque whitebg album"> <article class="opaque whitebg album">
<a href="https://lastfuture.bandcamp.com/album/reverse-kill" target="_blank"> <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> <h2>lastfuture <em>reverse kill</em></h2>
<div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div> <div class="listenbuy"><em>listen</em> or <em>buy</em> on bandcamp</div>
</a> </a>
</article> </article>
<header class="blurgreen headlineshadow spaceup"> <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> </h1>
</header> </header>
@ -153,14 +111,7 @@
<section class="contentitem box maincontent" id="experiments"> <section class="contentitem box maincontent" id="experiments">
<header class="blurgreen headlineshadow"> <header class="blurgreen headlineshadow">
<h1>from the <em>lab</em> <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> </h1>
</header> </header>
<div class="opaque whitebg"> <div class="opaque whitebg">
@ -187,4 +138,5 @@
</div> </div>
</body> </body>
</html> </html>

44
public_html/style.css
View File

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