Admin
ca04a81e81
Applies the display typeface (already used for small section labels) consistently to every major heading — page titles, hero titles on album/playlist/mix pages, the home hero, the sidebar/mobile wordmark, and empty-state titles — instead of only the smaller ones, fixing an inconsistent visual hierarchy. Also fixes a couple of real bugs found along the way: Input had a focus border color with no border width to show it, Button/IconButton had no focus-visible ring at all, and SectionHeading's letter-spacing only applied when it had an actions slot. Button's secondary/subtle variants drop their harsh border and flat grey hover for a softer accent-tinted wash. The accent (and the per-track extracted accent) is desaturated for a calmer, more pastel feel without touching lightness, so on-accent text contrast is unaffected. The login screen gets the same treatment plus a subtle ambient glow (reusing the home page's existing accent-gradient technique) and a fluid, viewport-scaled headline instead of a few fixed breakpoints, so it fills the available space on wide screens instead of staying pinned to one size.
51 lines
1.5 KiB
Svelte
51 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
|
|
let { data } = $props();
|
|
|
|
const returnParam = $derived(`returnTo=${encodeURIComponent(data.returnTo)}`);
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Iniciar sesión</title>
|
|
<meta name="description" content="Inicia sesión o crea una cuenta en Musify." />
|
|
</svelte:head>
|
|
|
|
<div class="relative grid min-h-screen place-items-center overflow-hidden bg-bg px-6 text-fg">
|
|
<div
|
|
class="pointer-events-none absolute inset-0"
|
|
style="background:radial-gradient(ellipse 46rem 28rem at 50% 36%, color-mix(in oklch, var(--color-accent), transparent 82%), transparent 70%)"
|
|
></div>
|
|
|
|
<div class="relative flex w-full max-w-4xl flex-col items-center gap-12 text-center">
|
|
<div class="font-display text-[clamp(1.5rem,3vw,2.5rem)] font-semibold tracking-tight">
|
|
Musify
|
|
</div>
|
|
|
|
<div class="animate-enter flex flex-col items-center gap-5">
|
|
<h1
|
|
class="font-display text-[clamp(2.75rem,9vw,8rem)] leading-[1.05] font-semibold tracking-tight"
|
|
>
|
|
<span class="block">Tu música.</span>
|
|
<span class="block">Sin límites.</span>
|
|
</h1>
|
|
<p class="text-lg text-fg-2">Inicia sesión para continuar.</p>
|
|
</div>
|
|
|
|
<div class="flex w-full max-w-80 flex-col gap-3">
|
|
<Button href={`/auth/login?${returnParam}`} reload size="lg" class="w-full">
|
|
Iniciar sesión
|
|
</Button>
|
|
<Button
|
|
href={`/auth/login?mode=register&${returnParam}`}
|
|
reload
|
|
variant="subtle"
|
|
size="lg"
|
|
class="w-full"
|
|
>
|
|
Crear cuenta
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|