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

init elas atelier #1

Merged
nvrl merged 82 commits from ela into main 2026-05-18 13:55:42 +02:00
Conversation 0 Commits 82 Files Changed 78
+99 -29
6 changed files with 99 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 59108835dd - Show all commits
frontend/src/components/react/LogoutButton.tsx
+2 -3
View File
@@ -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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -40,6 +38,7 @@ export default function LogoutButton() {
<polyline points="16 17 21 12 16 7" />
<line x1="21" x2="9" y1="12" y2="12" />
</svg>
<span>{busy ? 'Signing out…' : 'Sign out'}</span>
</button>
);
}
frontend/src/components/react/Search.tsx
+6 -8
View File
@@ -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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@@ -148,7 +145,8 @@ export default function Search() {
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
<kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
<span>Search</span>
<kbd className="hidden md:inline-flex">
<span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
</kbd>
</button>
@@ -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() {
<div className={`font-display italic truncate text-lg leading-tight pr-2 flex items-baseline gap-2 ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`} style={{ paddingInlineEnd: '0.35em' }}>
<span className="truncate">{title}</span>
{p.draft && (
<span className="text-[9px] font-sans not-italic uppercase tracking-[0.2em] text-[var(--peach)] border border-[var(--peach)]/60 px-1.5 py-0.5 shrink-0" style={{ borderRadius: 1 }}>
Draft
<span className="chip chip-draft shrink-0 !text-[0.62rem] !py-0">
Sketch
</span>
)}
</div>
frontend/src/components/react/ThemeSwitcher.tsx
+1 -2
View File
@@ -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 => (
<option key={t.value} value={t.value}>{t.label}</option>
frontend/src/layouts/Layout.astro
+3 -15
View File
@@ -122,27 +122,15 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
<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="font-display italic text-sm text-[var(--subtext1)] hover:text-[var(--mauve)] transition-colors tracking-wide"
>Contact</a>
<a href="/contact" class="topbar-control">Contact</a>
)}
<Search client:idle />
<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
{isAdmin && (
<div class="flex items-center gap-1 ml-auto md:ml-1 md:pl-3 md:border-l md:border-[var(--surface2)]/60">
<a
href="/admin"
class="chip chip-accent uppercase"
title="Signed in as artist"
aria-label="Signed in as artist"
>
<span class="w-1.5 h-1.5 rounded-full bg-[var(--rosewater)] animate-pulse"></span>
<span class="hidden sm:inline">Artist</span>
</a>
<div class="flex items-center md:pl-3 md:border-l md:border-[var(--surface2)]/60">
<LogoutButton client:idle />
</div>
)}
<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
</div>
</div>
</header>
frontend/src/pages/posts/[slug].astro
+1 -1
View File
@@ -134,7 +134,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
{post.draft && (
<div class="mt-6 inline-block">
<span class="chip" style="background: var(--peach); color: var(--crust); border-color: var(--peach);">
<span class="chip chip-draft">
Sketch · unpublished
</span>
</div>
frontend/src/styles/global.css
+86
View File
@@ -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 <select> variant — leave room for the chevron overlay */
select.topbar-control {
appearance: none;
-webkit-appearance: none;
padding-right: 1.9rem;
}
.topbar-control kbd {
display: inline-flex;
align-items: center;
gap: 0.15rem;
font-family: var(--font-mono, monospace);
font-style: normal;
font-size: 0.62rem;
padding: 0.05rem 0.3rem;
border: 1px solid var(--surface2);
border-radius: 1px;
color: var(--subtext0);
}
/* Form input look */
.field-input {
width: 100%;