style(design): consistency sweep + UX upgrades
- Palette: gray/zinc/slate/neutral → stein, red → fire, amber → erde, sky → himmel, green → wald - Footer: replaced raw rgb with stein tokens - Radius: unified to rounded-xs across cards, buttons, inputs, pagination - Buttons: .btn-primary/.btn-secondary now font-medium; added secondary - Card hover: -translate-y-0.5 + shadow + wald-300 border - Header active link: wald border-bottom + wald-700 text - Mobile nav: bigger touch targets + wald active accent - Pagination: prev/next text labels + wald-500 active state with separated shape/color classes to avoid Tailwind conflicts - Lead paragraph: scoped .markdown > p:first-child for top-level MarkdownBlock only via [data-block-type="markdown"] - Section dividers: subtle wald-200 gradient between content rows - Global focus-visible ring (wald-500) - Inline hex → palette tokens (Badge amber, Tag custom-color contrast) - Font weights snapped to design system (300/400/500/600/700) - transition-all → transition-colors where only color changes - Removed em-dashes from user-visible templates Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
@@ -305,32 +305,32 @@
|
||||
bind:value={editBody}
|
||||
use:autosize
|
||||
onkeydown={submitOnCmdEnter}
|
||||
class="w-full p-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-zinc-400"
|
||||
class="w-full p-2 border border-stein-300 rounded-xs text-sm focus:outline-none focus:ring-2 focus:ring-stein-400"
|
||||
rows="2"
|
||||
maxlength={bodyMax}
|
||||
></textarea>
|
||||
<div class="mt-1 flex items-center gap-3 text-xs">
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded bg-zinc-800 px-3 py-1 font-medium text-white hover:bg-zinc-700"
|
||||
class="rounded-xs bg-stein-800 px-3 py-1 font-medium text-white hover:bg-stein-700"
|
||||
>{t(T.comments_save)}</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={cancelEdit}
|
||||
class="text-zinc-500 hover:text-zinc-900"
|
||||
class="text-stein-500 hover:text-stein-900"
|
||||
>{t(T.comments_cancel)}</button>
|
||||
<span class="ml-auto text-zinc-400 tabular-nums">{editBody.length} / {bodyMax}</span>
|
||||
<span class="ml-auto text-stein-400 tabular-nums">{editBody.length} / {bodyMax}</span>
|
||||
</div>
|
||||
{#if editError}<p class="text-red-700 text-xs mt-1">{editError}</p>{/if}
|
||||
{#if editError}<p class="text-fire-700 text-xs mt-1">{editError}</p>{/if}
|
||||
</form>
|
||||
{:else}
|
||||
<p class="mt-1 whitespace-pre-wrap text-sm leading-relaxed text-zinc-800">{c.body}</p>
|
||||
<p class="mt-1 whitespace-pre-wrap text-sm leading-relaxed text-stein-800">{c.body}</p>
|
||||
{#if c.can_edit}
|
||||
<div class="mt-1 flex gap-3 opacity-60 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => startEdit(c)}
|
||||
class="text-xs text-zinc-600 hover:text-zinc-900 inline-flex items-center gap-1"
|
||||
class="text-xs text-stein-600 hover:text-stein-900 inline-flex items-center gap-1"
|
||||
>
|
||||
<Icon icon="mdi:pencil-outline" class="size-3" />
|
||||
{t(T.comments_edit)}
|
||||
@@ -338,7 +338,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => deleteComment(c.id)}
|
||||
class="text-xs text-zinc-600 hover:text-red-700 inline-flex items-center gap-1"
|
||||
class="text-xs text-stein-600 hover:text-fire-700 inline-flex items-center gap-1"
|
||||
>
|
||||
<Icon icon="mdi:trash-can-outline" class="size-3" />
|
||||
{t(T.comments_delete)}
|
||||
@@ -350,20 +350,20 @@
|
||||
|
||||
{#snippet meta(c: PublicComment)}
|
||||
<div class="flex flex-wrap items-baseline gap-2 text-sm">
|
||||
<strong class="font-medium text-zinc-900">{c.author}</strong>
|
||||
<strong class="font-medium text-stein-900">{c.author}</strong>
|
||||
{#if c.can_edit}
|
||||
<span class="text-[10px] uppercase tracking-wide text-zinc-400">{t(T.comments_self_marker)}</span>
|
||||
<span class="text-[10px] uppercase tracking-wide text-stein-400">{t(T.comments_self_marker)}</span>
|
||||
{/if}
|
||||
<time
|
||||
class="text-zinc-500 text-xs"
|
||||
class="text-stein-500 text-xs"
|
||||
datetime={c.created_at}
|
||||
title={fmtAbs(c.created_at)}
|
||||
>{fmtRel(c.created_at)}</time>
|
||||
{#if c.updated_at}
|
||||
<span class="text-zinc-400 text-xs" title={fmtAbs(c.updated_at)}>{t(T.comments_edited)}</span>
|
||||
<span class="text-stein-400 text-xs" title={fmtAbs(c.updated_at)}>{t(T.comments_edited)}</span>
|
||||
{/if}
|
||||
{#if c.status === "pending"}
|
||||
<span class="ml-auto inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-amber-800">
|
||||
<span class="ml-auto inline-flex items-center gap-1 rounded-full bg-erde-100 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-erde-800">
|
||||
<Icon icon="mdi:clock-outline" class="size-3" />
|
||||
{t(T.comments_pending_short)}
|
||||
</span>
|
||||
@@ -376,33 +376,33 @@
|
||||
<ul class="space-y-4 list-none p-0" aria-busy="true" aria-label={t(T.comments_loading)}>
|
||||
{#each Array(2) as _, i (i)}
|
||||
<li class="flex gap-3 list-none!">
|
||||
<div class="size-9 shrink-0 rounded-full bg-zinc-200 animate-pulse"></div>
|
||||
<div class="size-9 shrink-0 rounded-full bg-stein-200 animate-pulse"></div>
|
||||
<div class="flex-1 space-y-2">
|
||||
<div class="h-3 w-32 bg-zinc-200 rounded animate-pulse"></div>
|
||||
<div class="h-3 w-full bg-zinc-200 rounded animate-pulse"></div>
|
||||
<div class="h-3 w-3/4 bg-zinc-200 rounded animate-pulse"></div>
|
||||
<div class="h-3 w-32 bg-stein-200 rounded-xs animate-pulse"></div>
|
||||
<div class="h-3 w-full bg-stein-200 rounded-xs animate-pulse"></div>
|
||||
<div class="h-3 w-3/4 bg-stein-200 rounded-xs animate-pulse"></div>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else if loadError}
|
||||
<div class="flex items-start gap-2 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-800">
|
||||
<div class="flex items-start gap-2 rounded-xs border border-fire-200 bg-fire-50 p-3 text-sm text-fire-800">
|
||||
<Icon icon="mdi:alert-circle-outline" class="size-5 shrink-0 mt-0.5" />
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">{t(T.comments_load_error_title)}</p>
|
||||
<p class="mt-1 text-xs text-red-700">{loadError}</p>
|
||||
<p class="mt-1 text-xs text-fire-700">{loadError}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={loadComments}
|
||||
class="text-xs text-red-800 underline hover:no-underline"
|
||||
class="text-xs text-fire-800 underline hover:no-underline"
|
||||
>{t(T.comments_retry)}</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#if topLevel.length === 0}
|
||||
<div class="flex flex-col items-center gap-2 py-8 text-center sm:flex-row sm:items-center sm:text-left sm:py-4 sm:gap-3">
|
||||
<Icon icon="mdi:comment-text-outline" class="size-10 text-zinc-300 shrink-0" />
|
||||
<p class="text-sm text-zinc-500">{t(T.comments_empty)}</p>
|
||||
<Icon icon="mdi:comment-text-outline" class="size-10 text-stein-300 shrink-0" />
|
||||
<p class="text-sm text-stein-500">{t(T.comments_empty)}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="space-y-5 mb-8 list-none p-0">
|
||||
@@ -410,7 +410,7 @@
|
||||
{@const replies = repliesOf(c.id)}
|
||||
<li
|
||||
class="group flex gap-3 list-none! {c.status === 'pending'
|
||||
? 'rounded-md border border-amber-200 bg-amber-50/50 p-3'
|
||||
? 'rounded-xs border border-erde-200 bg-erde-50/50 p-3'
|
||||
: ''}"
|
||||
>
|
||||
{@render avatar(c.author)}
|
||||
@@ -422,7 +422,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (replyTo = replyTo === c.id ? null : c.id)}
|
||||
class="text-xs text-zinc-600 hover:text-zinc-900 inline-flex items-center gap-1"
|
||||
class="text-xs text-stein-600 hover:text-stein-900 inline-flex items-center gap-1"
|
||||
>
|
||||
<Icon icon="mdi:reply" class="size-3" />
|
||||
{replyTo === c.id
|
||||
@@ -443,7 +443,7 @@
|
||||
placeholder={t(T.comments_name_placeholder)}
|
||||
required
|
||||
maxlength="80"
|
||||
class="w-full p-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-zinc-400"
|
||||
class="w-full p-2 border border-stein-300 rounded-xs text-sm focus:outline-none focus:ring-2 focus:ring-stein-400"
|
||||
/>
|
||||
<textarea
|
||||
bind:value={replyBody}
|
||||
@@ -453,26 +453,26 @@
|
||||
required
|
||||
rows="2"
|
||||
maxlength={bodyMax}
|
||||
class="w-full p-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-zinc-400"
|
||||
class="w-full p-2 border border-stein-300 rounded-xs text-sm focus:outline-none focus:ring-2 focus:ring-stein-400"
|
||||
></textarea>
|
||||
{#if replyError}<p class="text-red-700 text-xs">{replyError}</p>{/if}
|
||||
{#if replyError}<p class="text-fire-700 text-xs">{replyError}</p>{/if}
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
class="px-3 py-1.5 bg-zinc-800 text-white rounded text-sm font-medium hover:bg-zinc-700 disabled:opacity-50"
|
||||
class="px-3 py-1.5 bg-stein-800 text-white rounded-xs text-sm font-medium hover:bg-stein-700 disabled:opacity-50"
|
||||
>{t(T.comments_reply_send)}</button>
|
||||
<span class="ml-auto text-xs text-zinc-400 tabular-nums">{replyBody.length} / {bodyMax}</span>
|
||||
<span class="ml-auto text-xs text-stein-400 tabular-nums">{replyBody.length} / {bodyMax}</span>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if replies.length > 0}
|
||||
<ul class="mt-4 space-y-4 list-none p-0 border-l border-zinc-200 pl-4">
|
||||
<ul class="mt-4 space-y-4 list-none p-0 border-l border-stein-200 pl-4">
|
||||
{#each replies as r (r.id)}
|
||||
<li
|
||||
class="group flex gap-3 list-none! {r.status === 'pending'
|
||||
? 'rounded-md border border-amber-200 bg-amber-50/50 p-2'
|
||||
? 'rounded-xs border border-erde-200 bg-erde-50/50 p-2'
|
||||
: ''}"
|
||||
>
|
||||
{@render avatar(r.author, "sm")}
|
||||
@@ -490,15 +490,15 @@
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<form onsubmit={onSubmit} class="border-t border-zinc-200 pt-5 space-y-3">
|
||||
<h3 class="font-medium text-sm text-zinc-900">{t(T.comments_form_title)}</h3>
|
||||
<form onsubmit={onSubmit} class="border-t border-stein-200 pt-5 space-y-3">
|
||||
<h3 class="font-medium text-sm text-stein-900">{t(T.comments_form_title)}</h3>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={author}
|
||||
placeholder={t(T.comments_name_placeholder)}
|
||||
required
|
||||
maxlength="80"
|
||||
class="w-full p-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-zinc-400"
|
||||
class="w-full p-2 border border-stein-300 rounded-xs text-sm focus:outline-none focus:ring-2 focus:ring-stein-400"
|
||||
/>
|
||||
<textarea
|
||||
bind:value={body}
|
||||
@@ -508,7 +508,7 @@
|
||||
required
|
||||
rows="3"
|
||||
maxlength={bodyMax}
|
||||
class="w-full p-2 border border-zinc-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-zinc-400"
|
||||
class="w-full p-2 border border-stein-300 rounded-xs text-sm focus:outline-none focus:ring-2 focus:ring-stein-400"
|
||||
></textarea>
|
||||
<input
|
||||
type="text"
|
||||
@@ -519,26 +519,26 @@
|
||||
class="absolute left-[-9999px]"
|
||||
/>
|
||||
{#if submitError}
|
||||
<p class="text-red-700 text-xs">{submitError}</p>
|
||||
<p class="text-fire-700 text-xs">{submitError}</p>
|
||||
{/if}
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !body.trim() || !author.trim()}
|
||||
class="px-4 py-2 bg-zinc-800 text-white rounded text-sm font-medium hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
class="px-4 py-2 bg-stein-800 text-white rounded-xs text-sm font-medium hover:bg-stein-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{submitting ? t(T.comments_sending) : t(T.comments_send)}
|
||||
</button>
|
||||
{#if requireApproval}
|
||||
<span class="text-zinc-500 inline-flex items-center gap-1">
|
||||
<span class="text-stein-500 inline-flex items-center gap-1">
|
||||
<Icon icon="mdi:shield-check-outline" class="size-3.5" />
|
||||
{t(T.comments_approval_hint)}
|
||||
</span>
|
||||
{/if}
|
||||
<span class="ml-auto text-zinc-400 tabular-nums">{body.length} / {bodyMax}</span>
|
||||
<span class="ml-auto text-stein-400 tabular-nums">{body.length} / {bodyMax}</span>
|
||||
</div>
|
||||
{#if totalPending > 0}
|
||||
<p class="text-xs text-zinc-500 italic">
|
||||
<p class="text-xs text-stein-500 italic">
|
||||
{totalPending === 1
|
||||
? t(T.comments_pending_summary_one)
|
||||
: t(T.comments_pending_summary_other, { count: totalPending })}
|
||||
|
||||
Reference in New Issue
Block a user