Simple mobile support

public/player-marker.js

@@ -1,7 +1,9 @@
+let lastWidth = 0
 function movePlayer() {
 	const pc = document.getElementById("player-container")
 	const playerExists = pc.querySelector("iframe")
 	if (!playerExists) return
+	lastWidth = window.innerWidth
 	const pm = document.getElementById("player-marker")
 	pm.style.display = "block"
 	pm.style.height = `${pc.clientHeight}px`
@@ -9,12 +11,20 @@ function movePlayer() {
 }
 movePlayer()
 document.body.addEventListener("htmx:load", movePlayer)
+window.addEventListener("resize", () => {
+	if ((window.innerWidth > 980 && lastWidth < 980) || (window.innerWidth < 980 && lastWidth > 980)) {
+		showPlayer()
+		movePlayer()
+	}
+})
 
 function addPopoverStyle() {
 	document.querySelectorAll("[popovertarget]").forEach(e => {
 		e.addEventListener("click", () => {
 			const rect = e.getBoundingClientRect()
-			const t = `:popover-open { position: fixed; top: ${Math.floor(rect.bottom)}px; left: ${Math.floor(rect.left + rect.width / 2)}px; width: ${Math.floor(rect.width + 85)}px; transform: translateX(-50%); margin: 0 }`
+			const width = Math.floor(rect.width + 85)
+			const left = Math.max(Math.floor(rect.left + rect.width / 2), width / 2)
+			const t = `:popover-open { position: fixed; top: ${Math.floor(rect.bottom)}px; left: ${left}px; width: ${width}px; transform: translateX(-50%); margin: 0 }`
 			document.styleSheets[0].insertRule(t, document.styleSheets[0].cssRules.length)
 		})
 	})
@@ -23,9 +33,32 @@ addPopoverStyle()
 document.body.addEventListener("htmx:load", addPopoverStyle)
 
 document.body.addEventListener("htmx:beforeHistoryUpdate", o => {
-	console.log("beforeHistoryUpdate:", o)
 	const page = document.getElementById("page")
 	if (o?.detail?.requestConfig?.target === page) {
 		while (page.firstChild) page.firstChild.remove()
 	}
 })
+
+function hidePlayer() {
+	document.getElementById("player-container").style.visibility = "hidden"
+	document.getElementById("toggle-player").setAttribute("aria-pressed", "false")
+	document.getElementById("toggle-player").classList.remove("is-selected")
+}
+function showPlayer() {
+	document.getElementById("player-container").style.visibility = "visible"
+	document.getElementById("toggle-player").setAttribute("aria-pressed", "true")
+	document.getElementById("toggle-player").classList.add("is-selected")
+}
+function togglePlayer() {
+	const pc = document.getElementById("player-container")
+	if (pc.style.visibility === "visible") hidePlayer()
+	else showPlayer()
+}
+function setupTogglePlayerButton(event) {
+	if (event?.target?.id === "player") showPlayer()
+	else hidePlayer()
+	document.getElementById("toggle-player").removeEventListener("click", togglePlayer)
+	document.getElementById("toggle-player").addEventListener("click", togglePlayer)
+}
+setupTogglePlayerButton()
+document.body.addEventListener("htmx:load", setupTogglePlayerButton)

public/style.css

@@ -1,5 +1,17 @@
 .ws340 {
 	width: 340px;
+	margin: auto;
+}
+@media screen and (max-width: 980px) {
+	.ws340 {
+		width: calc(100% - 32px);
+		max-width: 700px; /* bandcamp iframe body has this max-width */
+	}
+}
+@media screen and (min-width: 981px) {
+	#player-container {
+		visibility: visible !important;
+	}
 }
 .themed {
 	--theme-base-primary-color-h: 191;
@@ -22,6 +34,12 @@
 .s-navigation__toggle.s-navigation {
 	--_na-item-bg: var(--black-150);
 }
+@media screen and (max-width: 450px) {
+	.s-navigation__toggle.s-navigation .is-selected svg {
+		visibility: hidden;
+		width: 0;
+	}
+}
 .duration-last-col td:last-child {
 	text-align: right;
 	white-space: pre;
@@ -48,6 +66,28 @@ button.s-link.is-loading {
 .s-btn__dropdown:has(+ :popover-open) {
 	background-color: var(--theme-topbar-item-background-hover, var(--black-200)) !important;
 }
+@media screen and (max-width: 700px) {
+	.preview-cover:nth-of-type(n + 5) {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 550px) {
+	.preview-cover:nth-of-type(n + 3) {
+		display: none !important;
+	}
+}
+.album-grid {
+	grid-template-columns: repeat(auto-fit, 210px)
+}
+@media screen and (max-width: 980px) {
+	.album-grid {
+		grid-template-columns: repeat(auto-fit, 150px);
+	}
+	.cover img {
+		width: 150px;
+		height: 150px;
+	}
+}
 
 /* album covers are done with styles instead of attributes to reduce bytes of html needing to be downloaded and parsed */
 .cover {
@@ -71,17 +111,17 @@ button.s-link.is-loading {
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	transition: 1s ease-out;
+	transition: opacity 1s ease-out;
 	color: var(--black);
 }
 .cover:hover svg {
-	transition: 1.5s ease-out 0.7s;
+	transition: opacity 1.5s ease-out 0.7s;
 	opacity: 1;
 }
 .cover img {
-	transition: 1s ease-out;
+	transition: opacity 1s ease-out;
 }
 .cover:hover img {
-	transition: 2s ease-out 0.7s;
+	transition: opacity 2s ease-out 0.7s;
 	opacity: 0.3;
 }