marcel/familienarchiv
1
0
Fork 0
Code Issues 114 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

feat(frontend): add --header-height, bump initials to text-[10px], update nav to /documents

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-19 23:24:46 +02:00
parent 05d434fed3
commit eeca30e7a6
3 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/ContributorStack.svelte
View File

@@ -24,7 +24,7 @@ const safeContributors = $derived(contributors ?? []);
<span <span
role="img" role="img"
aria-label={actor.name ?? actor.initials} aria-label={actor.name ?? actor.initials}
class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[9px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}" class="inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full font-sans text-[10px] font-bold text-white ring-2 ring-white {i > 0 ? '-ml-1.5' : ''}"
style="background-color: {actor.color || '#8c9aa3'};" style="background-color: {actor.color || '#8c9aa3'};"
title={actor.name ?? actor.initials} title={actor.name ?? actor.initials}
> >
@@ -33,7 +33,7 @@ const safeContributors = $derived(contributors ?? []);
{/each} {/each}
{#if hasMore} {#if hasMore}
<span <span
class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[9px] font-bold text-ink-3 ring-2 ring-white" class="-ml-1.5 inline-flex h-[22px] w-[22px] flex-shrink-0 items-center justify-center rounded-full bg-[#e4e2d7] font-sans text-[10px] font-bold text-ink-3 ring-2 ring-white"
> >
… …
</span> </span>

8
frontend/src/routes/AppNav.svelte
View File

@@ -40,9 +40,9 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<!-- Desktop nav --> <!-- Desktop nav -->
<nav class="hidden items-stretch lg:flex lg:space-x-1"> <nav class="hidden items-stretch lg:flex lg:space-x-1">
<a <a
href="/" href="/documents"
class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring class="my-2 inline-flex items-center px-3 font-sans text-xs font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:rounded focus-visible:ring-2 focus-visible:ring-focus-ring
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents') {page.url.pathname.startsWith('/documents')
? 'border-b-2 border-accent text-white' ? 'border-b-2 border-accent text-white'
: 'text-white/70 hover:text-white'}" : 'text-white/70 hover:text-white'}"
> >
@@ -141,9 +141,9 @@ function handleOverlayKeydown(event: KeyboardEvent) {
<div class="relative border-b border-line bg-surface shadow-md"> <div class="relative border-b border-line bg-surface shadow-md">
<nav id="mobile-nav"> <nav id="mobile-nav">
<a <a
href="/" href="/documents"
class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset class="block flex min-h-[44px] w-full items-center px-4 py-3 font-sans text-sm font-bold tracking-widest uppercase transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset
{page.url.pathname === '/' || page.url.pathname.startsWith('/documents') {page.url.pathname.startsWith('/documents')
? 'bg-accent-bg text-ink' ? 'bg-accent-bg text-ink'
: 'text-ink-2 hover:bg-muted hover:text-ink'}" : 'text-ink-2 hover:bg-muted hover:text-ink'}"
> >

3
frontend/src/routes/layout.css
View File

@@ -81,6 +81,9 @@
/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */ /* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
:root { :root {
/* 1px accent bar + 64px nav = 65px total sticky header height */
--header-height: 65px;
--c-canvas: #f0efe9; --c-canvas: #f0efe9;
--c-surface: #ffffff; --c-surface: #ffffff;
--c-overlay: #ffffff; --c-overlay: #ffffff;