refactor: tighten the home typography and card craft

The playlist cards were showing "No description was pr…" because the API
stored that English sentence whenever a playlist was created without a
description. Descriptions are optional now and the old rows are cleared.

Section headings drop to 18/20px so they stop competing with the content,
and the space moved from inside the sections to between them.

The three media cards repeated the same anchor, art class and label
block, so they share a MediaCard that also carries the hover lift the
track tiles already had.
This commit is contained in:
2026-07-21 23:14:36 +02:00
parent b4b9e886e8
commit e728b333a9
26 changed files with 1317 additions and 88 deletions
+6 -5
View File
@@ -178,14 +178,14 @@
></div>
<div class="animate-enter relative flex flex-col gap-2 sm:gap-2.5">
<p class="text-sm tracking-[0.14em] text-fg-2 uppercase sm:text-base">{data.greeting}</p>
<h1 class="max-w-160 text-3xl leading-[1.05] font-extrabold text-fg sm:text-5xl">
<h1 class="max-w-160 text-3xl leading-[1.05] font-semibold text-fg sm:text-5xl">
Tu música. Sin límites.
</h1>
</div>
</section>
{#if recentlyPlayed.length > 0}
<section class="page-x pt-5 pb-3 sm:pt-6">
<section class="page-x pt-10 sm:pt-14">
<SectionHeading title="Volver a escuchar" />
<MediaGrid min="280px" minMobile="220px">
{#each recentlyPlayed as track, i (track.id)}
@@ -228,7 +228,7 @@
{/if}
{#if mixes.length > 0 || playlists.length > 0}
<section class="grid gap-x-8 gap-y-5 page-x pt-5 pb-3 sm:pt-6 lg:grid-cols-2">
<section class="grid gap-x-8 gap-y-10 page-x pt-10 sm:pt-14 lg:grid-cols-2">
{#if mixes.length > 0}
<div class="min-w-0">
<SectionHeading title="Hechas para ti" />
@@ -269,7 +269,7 @@
{/if}
{#if albums.length > 0}
<section class="page-x pt-5 pb-3 sm:pt-6">
<section class="page-x pt-10 sm:pt-14">
<SectionHeading title="Álbumes escuchados recientemente">
{#snippet actions()}
<a href="/albums" class="text-sm text-fg-3 transition hover:text-accent-soft">Ver todos</a>
@@ -290,7 +290,7 @@
</section>
{/if}
<section class="page-x pt-5 pb-10 sm:pt-6">
<section class="page-x pt-10 pb-16 sm:pt-14">
<SectionHeading title="Descubrir" />
{#if latest.length > 0}
<MediaGrid as="ul">
@@ -299,6 +299,7 @@
id={targetId(item)}
title={targetTitle(item)}
artist={targetArtist(item)}
coverShape="round"
coverSrc={targetCoverSrc(item)}
hue={hueFor(targetId(item))}
explicit={targetExplicit(item)}