nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-15 15:57:00 +02:00
parent 7294dd47ef
commit ab6f6088f2
8 changed files with 143 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/layouts/Layout.astro
+57 -47
View File
@@ -14,9 +14,12 @@ interface Props {
description?: string;
image?: string;
type?: 'website' | 'article';
/** Strips the top-bar controls and footer nav — used by the login page
* so the sign-in screen is a focused, chrome-free stage. */
minimal?: boolean;
}
const { title, wide = false, description, image, type = 'website' } = Astro.props;
const { title, wide = false, description, image, type = 'website', minimal = false } = Astro.props;
const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
@@ -92,7 +95,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
<div class="salon-atmosphere" aria-hidden="true"></div>
<header class="border-b border-[var(--surface2)]/60">
<div class="max-w-6xl mx-auto px-6 md:px-10 py-5 md:py-7 flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
<div class={`max-w-6xl mx-auto px-6 md:px-10 py-5 md:py-7 flex flex-col gap-4 md:flex-row md:items-end md:gap-6 ${minimal ? 'justify-center text-center' : 'md:justify-between'}`}>
<a href="/" class="nameplate group" aria-label="Home">
{isAdmin ? (
<EditableText
@@ -120,18 +123,21 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
)}
</a>
<div class="flex flex-wrap items-center gap-2 md:gap-3 justify-start md:justify-end md:ml-auto w-full md:w-auto">
{hasContact && (
<a href="/contact" class="topbar-control">Contact</a>
)}
<Search client:idle />
<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
{isAdmin && (
<div class="flex items-center md:pl-3 md:border-l md:border-[var(--surface2)]/60">
<LogoutButton client:idle />
</div>
)}
</div>
{!minimal && (
<nav class="topbar-cluster w-full md:w-auto" aria-label="Site controls">
{hasContact && (
<a href="/contact" class="topbar-control">Contact</a>
)}
<Search client:idle />
<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
{isAdmin && (
<>
<span class="topbar-divider" aria-hidden="true"></span>
<LogoutButton client:idle />
</>
)}
</nav>
)}
</div>
</header>
@@ -139,39 +145,43 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
<slot />
</main>
<footer class="max-w-6xl mx-auto px-6 md:px-10 py-12 md:py-16 text-center border-t border-[var(--surface2)]/40 mt-12">
<div class="section-rule mb-6">
<span class="ornament">✦</span>
<span class="font-display italic text-[var(--subtext0)] text-sm">end of catalogue</span>
<span class="ornament">✦</span>
</div>
<p class="font-display italic text-base text-[var(--subtext1)] mb-2">
{isAdmin ? (
<EditableText
client:visible
initial={siteConfig.footer}
fieldKey="footer"
isAdmin
ariaLabel="footer text"
className="inline"
/>
) : siteConfig.footer}
</p>
<div class="text-xs text-[var(--subtext0)] tracking-[0.2em] uppercase mb-3 flex items-center justify-center gap-3 flex-wrap">
<a href="/feed.xml" class="hover:text-[var(--mauve)] transition-colors">RSS Feed</a>
{hasContact && (
<>
<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
<a href="/contact" class="hover:text-[var(--mauve)] transition-colors">Contact</a>
</>
)}
{!isAdmin && (
<>
<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
<a href="/admin/login" class="hover:text-[var(--mauve)] transition-colors">Admin login</a>
</>
)}
</div>
<footer class={`max-w-6xl mx-auto px-6 md:px-10 text-center border-t border-[var(--surface2)]/40 ${minimal ? 'py-8 mt-8' : 'py-12 md:py-16 mt-12'}`}>
{!minimal && (
<>
<div class="section-rule mb-6">
<span class="ornament">✦</span>
<span class="font-display italic text-[var(--subtext0)] text-sm">end of catalogue</span>
<span class="ornament">✦</span>
</div>
<p class="font-display italic text-base text-[var(--subtext1)] mb-2">
{isAdmin ? (
<EditableText
client:visible
initial={siteConfig.footer}
fieldKey="footer"
isAdmin
ariaLabel="footer text"
className="inline"
/>
) : siteConfig.footer}
</p>
<div class="text-xs text-[var(--subtext0)] tracking-[0.2em] uppercase mb-3 flex items-center justify-center gap-3 flex-wrap">
<a href="/feed.xml" class="hover:text-[var(--mauve)] transition-colors">RSS Feed</a>
{hasContact && (
<>
<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
<a href="/contact" class="hover:text-[var(--mauve)] transition-colors">Contact</a>
</>
)}
{!isAdmin && (
<>
<span class="text-[var(--overlay0)]" aria-hidden="true">·</span>
<a href="/admin/login" class="hover:text-[var(--mauve)] transition-colors">Admin login</a>
</>
)}
</div>
</>
)}
<div class="text-[var(--overlay0)] text-xs italic">
&copy; {year} · {siteConfig.title}
</div>