From 59108835dd36d4118d8cb9c21015fbdc616a6197 Mon Sep 17 00:00:00 2001 From: Nils Pukropp Date: Fri, 15 May 2026 14:32:22 +0200 Subject: [PATCH] fixed top bar height issues and other styling --- .../src/components/react/LogoutButton.tsx | 5 +- frontend/src/components/react/Search.tsx | 14 ++- .../src/components/react/ThemeSwitcher.tsx | 3 +- frontend/src/layouts/Layout.astro | 18 +--- frontend/src/pages/posts/[slug].astro | 2 +- frontend/src/styles/global.css | 86 +++++++++++++++++++ 6 files changed, 99 insertions(+), 29 deletions(-) diff --git a/frontend/src/components/react/LogoutButton.tsx b/frontend/src/components/react/LogoutButton.tsx index 489b711..07e246f 100644 --- a/frontend/src/components/react/LogoutButton.tsx +++ b/frontend/src/components/react/LogoutButton.tsx @@ -22,12 +22,10 @@ export default function LogoutButton() { disabled={busy} title="Sign out" aria-label="Sign out" - className="text-subtext0 hover:text-red transition-colors p-1.5 rounded-md hover:bg-surface0/60 disabled:opacity-50" + className="topbar-control topbar-control--danger" > + {busy ? 'Signing out…' : 'Sign out'} ); } diff --git a/frontend/src/components/react/Search.tsx b/frontend/src/components/react/Search.tsx index 1a96b91..31fa9d8 100644 --- a/frontend/src/components/react/Search.tsx +++ b/frontend/src/components/react/Search.tsx @@ -130,13 +130,10 @@ export default function Search() { onClick={() => setOpen(true)} aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`} title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`} - className="text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors flex items-center gap-2 px-2 py-1 hover:bg-[var(--surface0)]/60 font-display italic" - style={{ borderRadius: 1 }} + className="topbar-control" > - + Search + {isMac ? '⌘' : 'Ctrl'}+K @@ -169,7 +167,7 @@ export default function Search() { className="relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200" style={{ borderRadius: 2, - boxShadow: '0 30px 60px -20px rgba(20,16,12,0.55), 0 8px 20px -8px rgba(20,16,12,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)', + boxShadow: '0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)', }} onClick={e => e.stopPropagation()} > @@ -237,8 +235,8 @@ export default function Search() {
{title} {p.draft && ( - - Draft + + Sketch )}
diff --git a/frontend/src/components/react/ThemeSwitcher.tsx b/frontend/src/components/react/ThemeSwitcher.tsx index c9c9e7a..53d440b 100644 --- a/frontend/src/components/react/ThemeSwitcher.tsx +++ b/frontend/src/components/react/ThemeSwitcher.tsx @@ -43,8 +43,7 @@ export default function ThemeSwitcher({ defaultTheme = 'salon' }: Props) { value={theme} onChange={(e) => setTheme(e.target.value)} aria-label="Theme" - className="appearance-none bg-[var(--surface0)]/60 text-[var(--text)] border border-[var(--surface2)] px-3 py-1.5 text-xs uppercase tracking-[0.18em] focus:outline-none focus:border-[var(--mauve)] transition-colors cursor-pointer hover:bg-[var(--surface0)] pr-8 font-display italic" - style={{ borderRadius: 1 }} + className="topbar-control" > {THEMES.map(t => ( diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro index 2c4fa19..435f4a7 100644 --- a/frontend/src/layouts/Layout.astro +++ b/frontend/src/layouts/Layout.astro @@ -122,27 +122,15 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
{hasContact && ( - Contact + Contact )} + {isAdmin && ( -
- - - - +
)} -
diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro index 4114cee..bd4c80e 100644 --- a/frontend/src/pages/posts/[slug].astro +++ b/frontend/src/pages/posts/[slug].astro @@ -134,7 +134,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work'; {post.draft && (
- + Sketch · unpublished
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index ff51183..71d1860 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -652,6 +652,13 @@ code, pre, kbd, samp { .breakcore .plate { background: var(--surface0); } +.salon-noir .plate, +.gothic .plate { + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent), + 0 22px 42px -28px rgba(0, 0, 0, 0.7), + 0 4px 12px -6px rgba(0, 0, 0, 0.45); +} .breakcore .plate { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mauve) 35%, transparent), @@ -667,6 +674,20 @@ code, pre, kbd, samp { 0 32px 60px -28px rgba(20, 16, 12, 0.55), 0 8px 20px -8px rgba(20, 16, 12, 0.3); } +.salon-noir .plate:hover, +.gothic .plate:hover { + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--surface1) 60%, transparent), + 0 32px 60px -28px rgba(0, 0, 0, 0.8), + 0 8px 20px -8px rgba(0, 0, 0, 0.55); +} +.breakcore .plate:hover { + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent), + 0 0 0 1px color-mix(in srgb, var(--mauve) 30%, transparent), + 0 32px 60px -28px rgba(255, 46, 166, 0.45), + 0 0 32px -8px color-mix(in srgb, var(--mauve) 50%, transparent); +} .plate .plate-image { position: relative; overflow: hidden; @@ -854,6 +875,11 @@ code, pre, kbd, samp { color: var(--rosewater); border-color: var(--mauve); } +.chip-draft { + background: color-mix(in srgb, var(--peach) 18%, transparent); + color: var(--peach); + border-color: color-mix(in srgb, var(--peach) 50%, transparent); +} /* Card / glass — keep the name but reinterpret as a paper card */ .glass { @@ -869,6 +895,11 @@ code, pre, kbd, samp { .breakcore .glass { background-color: color-mix(in srgb, var(--surface0) 70%, transparent); } +.salon-noir .glass { + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent), + 0 14px 40px -24px rgba(0, 0, 0, 0.8); +} .gothic .glass { border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2)); box-shadow: @@ -936,6 +967,61 @@ code, pre, kbd, samp { background: color-mix(in srgb, var(--mauve) 8%, transparent); } +/* ───── Top-bar controls — one height, one language ───── */ +.topbar-control { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.4rem; + height: 2rem; + padding: 0 0.7rem; + font-family: var(--font-display); + font-style: italic; + font-size: 0.85rem; + line-height: 1; + color: var(--subtext1); + background: color-mix(in srgb, var(--surface0) 55%, transparent); + border: 1px solid var(--surface2); + border-radius: 1px; + text-decoration: none; + cursor: pointer; + white-space: nowrap; + transition: color 0.15s, background 0.15s, border-color 0.15s; +} +.topbar-control:hover { + color: var(--mauve); + background: color-mix(in srgb, var(--surface0) 85%, transparent); + border-color: color-mix(in srgb, var(--mauve) 45%, var(--surface2)); +} +.topbar-control:focus-visible { + outline: none; + border-color: var(--mauve); +} +.topbar-control:disabled { opacity: 0.5; cursor: default; } +.topbar-control svg { width: 14px; height: 14px; flex-shrink: 0; } +.topbar-control--danger:hover { + color: var(--red); + border-color: color-mix(in srgb, var(--red) 55%, var(--surface2)); +} +/* Native