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:
@@ -77,7 +77,7 @@
|
||||
</Modal>
|
||||
|
||||
<Modal open={confirmingDelete} onClose={() => (confirmingDelete = false)} maxWidth="max-w-sm">
|
||||
<h2 class="text-lg font-bold tracking-tight text-fg">
|
||||
<h2 class="text-lg font-semibold tracking-tight text-fg">
|
||||
¿Eliminar «{album.title}»?
|
||||
</h2>
|
||||
<p class="mt-2 text-base text-fg-3">
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Álbum</p>
|
||||
<h1
|
||||
class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
>
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
{album.isSingle ? 'Single' : album.isEp ? 'EP' : 'Álbum'} · YouTube Music
|
||||
</p>
|
||||
<h1
|
||||
class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
>
|
||||
{album.title}
|
||||
</h1>
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Mezcla</p>
|
||||
<h1
|
||||
class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
>
|
||||
{mix.title}
|
||||
</h1>
|
||||
|
||||
@@ -79,7 +79,7 @@
|
||||
</Modal>
|
||||
|
||||
<Modal open={confirmingDelete} onClose={() => (confirmingDelete = false)} maxWidth="max-w-sm">
|
||||
<h2 class="text-lg font-bold tracking-tight text-fg">
|
||||
<h2 class="text-lg font-semibold tracking-tight text-fg">
|
||||
¿Eliminar «{playlist.name}»?
|
||||
</h2>
|
||||
<p class="mt-2 text-base text-fg-3">
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm tracking-[0.14em] text-fg-3 uppercase">Lista</p>
|
||||
<h1
|
||||
class="mt-1.5 text-3xl font-bold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
class="mt-1.5 text-3xl font-semibold tracking-tight break-words text-fg sm:text-5xl md:text-7xl"
|
||||
>
|
||||
{name}
|
||||
</h1>
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
>
|
||||
<Check class="h-8 w-8" strokeWidth={2.5} />
|
||||
</span>
|
||||
<h2 class="mt-6 text-2xl font-bold tracking-tight text-fg">¡Subida!</h2>
|
||||
<h2 class="mt-6 text-2xl font-semibold tracking-tight text-fg">¡Subida!</h2>
|
||||
<p class="mt-3 text-fg-2">
|
||||
«{publishedTitle}» se está procesando. Aparecerá lista para reproducir en tu biblioteca en
|
||||
unos momentos.
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
|
||||
<div class="grid min-h-screen place-items-center bg-bg px-6 text-fg">
|
||||
<div class="flex w-full max-w-110 flex-col items-center gap-9 text-center">
|
||||
<div class="text-3xl font-extrabold tracking-tight">Musify</div>
|
||||
<div class="text-3xl font-semibold tracking-tight">Musify</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-4xl font-extrabold tracking-tight">Tu música. Sin límites.</h1>
|
||||
<h1 class="text-4xl font-semibold tracking-tight">Tu música. Sin límites.</h1>
|
||||
<p class="mt-3 text-base text-fg-2">Inicia sesión para continuar.</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user