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.
25 lines
552 B
Svelte
25 lines
552 B
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
interface Props {
|
|
title: string;
|
|
class?: string;
|
|
actions?: Snippet;
|
|
}
|
|
|
|
let { title, class: klass = '', actions }: Props = $props();
|
|
</script>
|
|
|
|
{#if actions}
|
|
<div class="mb-3 flex items-baseline justify-between gap-4 sm:mb-4 {klass}">
|
|
<h2 class="font-display font-medium tracking-tight text-fg sm:text-xl">
|
|
{title}
|
|
</h2>
|
|
{@render actions()}
|
|
</div>
|
|
{:else}
|
|
<h2 class="mb-3 font-display font-medium tracking-tight text-fg sm:mb-4 sm:text-xl {klass}">
|
|
{title}
|
|
</h2>
|
|
{/if}
|