Polish typography, button states, and login screen
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.
This commit is contained in:
@@ -155,7 +155,7 @@
|
||||
></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="text-3xl leading-[1.05] font-semibold text-fg sm:text-6xl">
|
||||
<h1 class="font-display text-3xl leading-[1.05] font-semibold tracking-tight text-fg sm:text-6xl">
|
||||
Tu música. Sin límites.
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user