From 20089fb507d97fae5b3c1162f958a027ca0a30b1 Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 14 May 2026 08:56:40 +0200
Subject: [PATCH] fixed search below content + light editor and search

---
 frontend/src/components/react/Search.tsx      | 51 ++++++------
 .../src/components/react/admin/Editor.tsx     | 80 ++++++++++---------
 frontend/src/layouts/Layout.astro             |  6 +-
 frontend/src/styles/global.css                | 12 +--
 4 files changed, 81 insertions(+), 68 deletions(-)

diff --git a/frontend/src/components/react/Search.tsx b/frontend/src/components/react/Search.tsx
index 8d6dd81..6e04ab9 100644
--- a/frontend/src/components/react/Search.tsx
+++ b/frontend/src/components/react/Search.tsx
@@ -128,9 +128,10 @@ export default function Search() {
       <button
         type="button"
         onClick={() => setOpen(true)}
-        aria-label={`Search posts (${isMac ? '⌘' : 'Ctrl'}+K)`}
+        aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
         title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        className="text-subtext0 hover:text-text transition-colors flex items-center gap-2 px-2 py-1 rounded-md hover:bg-surface0/60"
+        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 }}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -147,7 +148,7 @@ 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-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
+        <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>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
         </kbd>
       </button>
@@ -157,18 +158,22 @@ export default function Search() {
           className="fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
           role="dialog"
           aria-modal="true"
-          aria-label="Search posts"
+          aria-label="Search the catalogue"
           onClick={() => setOpen(false)}
         >
           <div
-            className="absolute inset-0 bg-crust/70 backdrop-blur-md"
+            className="absolute inset-0 bg-[var(--crust)]/55 backdrop-blur-md"
             aria-hidden="true"
           />
           <div
-            className="relative w-full max-w-xl bg-mantle border border-surface1 rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
+            className="relative w-full max-w-xl bg-[var(--rosewater)] 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)',
+            }}
             onClick={e => e.stopPropagation()}
           >
-            <div className="flex items-center gap-3 px-4 py-3 border-b border-surface1">
+            <div className="flex items-center gap-3 px-4 py-3 border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/40">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="18"
@@ -179,7 +184,7 @@ export default function Search() {
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="text-subtext0 shrink-0"
+                className="text-[var(--mauve)] shrink-0"
                 aria-hidden="true"
               >
                 <circle cx="11" cy="11" r="8" />
@@ -191,25 +196,25 @@ export default function Search() {
                 value={query}
                 onChange={e => setQuery(e.target.value)}
                 onKeyDown={onInputKey}
-                placeholder="Search posts…"
+                placeholder="Search the catalogue…"
                 aria-label="Search query"
-                className="flex-1 bg-transparent outline-none text-base text-text placeholder:text-subtext0"
+                className="flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
               />
-              <kbd className="text-[10px] font-mono text-subtext0 px-1.5 py-0.5 rounded border border-surface1 bg-surface0/60">
+              <kbd className="text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
                 Esc
               </kbd>
             </div>
 
             <div className="flex-1 overflow-y-auto">
               {loading && (
-                <div className="px-4 py-8 text-center text-sm text-subtext0">Loading…</div>
+                <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">Fetching the catalogue…</div>
               )}
               {error && (
-                <div className="px-4 py-8 text-center text-sm text-red">{error}</div>
+                <div className="px-4 py-8 text-center text-sm text-[var(--red)] font-display italic">{error}</div>
               )}
               {!loading && !error && posts && results.length === 0 && (
-                <div className="px-4 py-8 text-center text-sm text-subtext0">
-                  {query ? 'No posts match.' : 'No posts.'}
+                <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">
+                  {query ? 'No works match.' : 'The catalogue is empty.'}
                 </div>
               )}
               {!loading && !error && results.length > 0 && (
@@ -224,20 +229,20 @@ export default function Search() {
                         onClick={() => navigate(p.slug)}
                         className={`px-4 py-3 cursor-pointer border-l-2 transition-colors ${
                           active
-                            ? 'bg-surface0 border-mauve'
-                            : 'border-transparent hover:bg-surface0/60'
+                            ? 'bg-[var(--surface0)] border-[var(--mauve)]'
+                            : 'border-transparent hover:bg-[var(--surface0)]/60'
                         }`}
                       >
                         <div className="flex items-baseline justify-between gap-3">
-                          <div className={`font-medium truncate ${active ? 'text-mauve' : 'text-lavender'}`}>
+                          <div className={`font-display italic truncate text-lg ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`}>
                             {title}
                           </div>
-                          <time className="text-[10px] text-subtext0 shrink-0" dateTime={p.date}>
+                          <time className="text-[10px] font-sans uppercase tracking-[0.18em] text-[var(--subtext0)] shrink-0" dateTime={p.date}>
                             {formatDate(p.date)}
                           </time>
                         </div>
                         {p.excerpt && (
-                          <div className="text-xs text-subtext1 line-clamp-1 mt-0.5">{p.excerpt}</div>
+                          <div className="text-xs text-[var(--subtext1)] line-clamp-1 mt-0.5 font-sans italic">{p.excerpt}</div>
                         )}
                       </li>
                     );
@@ -246,14 +251,14 @@ export default function Search() {
               )}
             </div>
 
-            <div className="flex items-center justify-between px-4 py-2 border-t border-surface1 text-[10px] text-subtext0 bg-crust/40">
+            <div className="flex items-center justify-between px-4 py-2 border-t border-[var(--surface2)]/60 text-[10px] text-[var(--subtext0)] bg-[var(--surface0)]/40 font-display italic">
               <div className="flex items-center gap-3">
                 <span className="flex items-center gap-1">
-                  <kbd className="font-mono px-1 rounded border border-surface1 bg-surface0/60">↑↓</kbd>
+                  <kbd className="font-mono px-1 border border-[var(--surface2)] bg-[var(--surface0)]/60 not-italic" style={{ borderRadius: 1 }}>↑↓</kbd>
                   navigate
                 </span>
                 <span className="flex items-center gap-1">
-                  <kbd className="font-mono px-1 rounded border border-surface1 bg-surface0/60">↵</kbd>
+                  <kbd className="font-mono px-1 border border-[var(--surface2)] bg-[var(--surface0)]/60 not-italic" style={{ borderRadius: 1 }}>↵</kbd>
                   open
                 </span>
               </div>
diff --git a/frontend/src/components/react/admin/Editor.tsx b/frontend/src/components/react/admin/Editor.tsx
index 70feae0..b1bc1ae 100644
--- a/frontend/src/components/react/admin/Editor.tsx
+++ b/frontend/src/components/react/admin/Editor.tsx
@@ -18,43 +18,48 @@ interface Props {
 
 const salonTheme = EditorView.theme({
   '&': {
-    backgroundColor: 'var(--crust)',
+    backgroundColor: 'var(--rosewater)',
     color: 'var(--text)',
-    border: '1px solid var(--surface1)',
-    borderRadius: '0.75rem',
+    border: '1px solid var(--surface2)',
+    borderRadius: '2px',
     fontSize: '14px',
+    boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--surface1) 40%, transparent)',
   },
   '.cm-content': {
     fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
     padding: '1rem',
-    caretColor: 'var(--text)',
-  },
-  '.cm-cursor': { borderLeftColor: 'var(--text)' },
-  '.cm-selectionBackground': { backgroundColor: 'var(--surface2) !important' },
-  '&.cm-focused .cm-selectionBackground': { backgroundColor: 'var(--surface2) !important' },
-  '.cm-activeLine': { backgroundColor: 'var(--surface0)' },
-  '.cm-gutters': {
-    backgroundColor: 'var(--mantle)',
-    color: 'var(--overlay0)',
-    border: 'none',
-  },
-  '.cm-activeLineGutter': { backgroundColor: 'var(--surface0)' },
-  '.cm-panels': {
-    backgroundColor: 'var(--mantle)',
+    caretColor: 'var(--mauve)',
     color: 'var(--text)',
-    borderTop: '1px solid var(--surface1)',
   },
-  '.cm-searchMatch': { backgroundColor: 'var(--yellow)', opacity: '0.3' },
-  '.cm-searchMatch-selected': { backgroundColor: 'var(--peach)', opacity: '0.4' },
+  '.cm-cursor': { borderLeftColor: 'var(--mauve)', borderLeftWidth: '2px' },
+  '.cm-selectionBackground': { backgroundColor: 'color-mix(in srgb, var(--mauve) 25%, transparent) !important' },
+  '&.cm-focused .cm-selectionBackground': { backgroundColor: 'color-mix(in srgb, var(--mauve) 30%, transparent) !important' },
+  '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--surface0) 55%, transparent)' },
+  '.cm-gutters': {
+    backgroundColor: 'var(--surface0)',
+    color: 'var(--subtext0)',
+    border: 'none',
+    borderRight: '1px solid var(--surface2)',
+    fontFamily: 'var(--font-display)',
+    fontStyle: 'italic',
+  },
+  '.cm-activeLineGutter': { backgroundColor: 'color-mix(in srgb, var(--mauve) 12%, transparent)', color: 'var(--mauve)' },
+  '.cm-panels': {
+    backgroundColor: 'var(--surface0)',
+    color: 'var(--text)',
+    borderTop: '1px solid var(--surface2)',
+  },
+  '.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, var(--yellow) 45%, transparent)' },
+  '.cm-searchMatch-selected': { backgroundColor: 'color-mix(in srgb, var(--peach) 55%, transparent)' },
   '.cm-fat-cursor': {
     backgroundColor: 'var(--mauve) !important',
-    color: 'var(--crust) !important',
+    color: 'var(--rosewater) !important',
   },
   '&:not(.cm-focused) .cm-fat-cursor': {
     outline: '1px solid var(--mauve)',
     backgroundColor: 'transparent !important',
   },
-}, { dark: true });
+}, { dark: false });
 
 // Compartment for hot-swapping vim mode without recreating the editor
 const vimCompartment = new Compartment();
@@ -472,11 +477,11 @@ export default function Editor({ editSlug }: Props) {
             {/* Autocomplete dropdown */}
             {showAutocomplete && autocompleteAssets.length > 0 && (
               <div
-                className="absolute z-50 bg-mantle border border-surface1 rounded-lg shadow-2xl max-h-64 overflow-y-auto w-80"
-                style={{ top: autocompletePos.top, left: autocompletePos.left }}
+                className="absolute z-50 bg-[var(--rosewater)] border border-[var(--surface2)] shadow-2xl max-h-64 overflow-y-auto w-80"
+                style={{ top: autocompletePos.top, left: autocompletePos.left, borderRadius: 2 }}
                 onClick={e => e.stopPropagation()}
               >
-                <div className="p-2 text-[10px] text-subtext0 uppercase border-b border-white/5 bg-crust/50">Assets Library</div>
+                <div className="p-2 text-[10px] text-[var(--subtext0)] uppercase tracking-[0.2em] border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/60 font-display italic">Assets</div>
                 <ul className="py-1">
                   {autocompleteAssets.map(asset => {
                     const img = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
@@ -484,16 +489,16 @@ export default function Editor({ editSlug }: Props) {
                       <li
                         key={asset.name}
                         onClick={() => insertAssetMarkdown(asset)}
-                        className="px-4 py-2 hover:bg-mauve/20 cursor-pointer text-sm truncate text-subtext1 hover:text-mauve flex items-center gap-3 transition-colors"
+                        className="px-4 py-2 hover:bg-[var(--mauve)]/15 cursor-pointer text-sm truncate text-[var(--subtext1)] hover:text-[var(--mauve)] flex items-center gap-3 transition-colors"
                       >
-                        <div className="w-6 h-6 flex-shrink-0 bg-surface0 rounded flex items-center justify-center overflow-hidden">
+                        <div className="w-6 h-6 flex-shrink-0 bg-[var(--surface0)] border border-[var(--surface2)] flex items-center justify-center overflow-hidden" style={{ borderRadius: 1 }}>
                           {img ? (
                             <img src={asset.url} className="w-full h-full object-cover" alt="" />
                           ) : (
                             <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg>
                           )}
                         </div>
-                        <span className="truncate">{asset.name}</span>
+                        <span className="truncate font-mono text-xs">{asset.name}</span>
                       </li>
                     );
                   })}
@@ -505,11 +510,12 @@ export default function Editor({ editSlug }: Props) {
           {/* Live Preview — stretches to match editor height on desktop, full-pane via tabs on mobile */}
           {showPreview && (
             <div
-              className={`border border-surface1 rounded-xl bg-crust/50 overflow-y-auto flex-col md:flex md:min-h-0 ${
+              className={`border border-[var(--surface2)] bg-[var(--rosewater)] overflow-y-auto flex-col md:flex md:min-h-0 ${
                 mobileView === 'preview' ? 'flex min-h-[60vh]' : 'hidden'
               }`}
+              style={{ borderRadius: 2 }}
             >
-              <div className="sticky top-0 bg-mantle px-4 py-2 text-xs text-subtext0 uppercase border-b border-surface1 z-10">
+              <div className="sticky top-0 bg-[var(--surface0)] px-4 py-2 text-xs text-[var(--subtext0)] uppercase tracking-[0.2em] border-b border-[var(--surface2)] z-10 font-display italic">
                 Preview
               </div>
               <div ref={previewRef} className="prose max-w-none p-4 md:p-6 flex-1" />
@@ -520,18 +526,18 @@ export default function Editor({ editSlug }: Props) {
 
       {/* Asset Modal */}
       {showModal && (
-        <div className="fixed inset-0 z-[100] bg-crust/80 backdrop-blur-sm flex items-center justify-center p-4 md:p-6">
-          <div className="glass w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
-            <header className="p-4 md:p-6 border-b border-white/5 flex justify-between items-center bg-surface0/20">
+        <div className="fixed inset-0 z-[100] bg-[var(--crust)]/55 backdrop-blur-sm flex items-center justify-center p-4 md:p-6">
+          <div className="glass w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden bg-[var(--base)]">
+            <header className="p-4 md:p-6 border-b border-[var(--surface2)]/60 flex justify-between items-center bg-[var(--surface0)]/50">
               <div>
-                <h2 className="text-xl md:text-2xl font-bold text-mauve">Asset Library</h2>
-                <p className="text-xs text-subtext0">Click 'Insert' to add an asset to your post.</p>
+                <h2 className="font-display italic text-2xl md:text-3xl text-[var(--text)] leading-tight">Asset library</h2>
+                <p className="text-xs text-[var(--subtext0)] font-display italic mt-1">Click an asset to drop it into the work.</p>
               </div>
-              <button onClick={() => setShowModal(false)} className="p-2 text-subtext0 hover:text-red transition-colors">
+              <button onClick={() => setShowModal(false)} className="p-2 text-[var(--subtext0)] hover:text-[var(--red)] transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
               </button>
             </header>
-            <div className="p-4 md:p-6 overflow-y-auto flex-1 bg-bg/50">
+            <div className="p-4 md:p-6 overflow-y-auto flex-1 bg-[var(--base)]/50">
               <AssetManager mode="select" onSelect={handleAssetSelect} />
             </div>
           </div>
diff --git a/frontend/src/layouts/Layout.astro b/frontend/src/layouts/Layout.astro
index dfed768..57c573c 100644
--- a/frontend/src/layouts/Layout.astro
+++ b/frontend/src/layouts/Layout.astro
@@ -76,7 +76,7 @@ const year = new Date().getFullYear();
 	<body class="text-text">
 		<div class="salon-atmosphere" aria-hidden="true"></div>
 
-		<header class="border-b border-[var(--surface2)]/60 relative z-10">
+		<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">
 				<a href="/" class="nameplate group" aria-label="Home">
 					{isAdmin ? (
@@ -129,11 +129,11 @@ const year = new Date().getFullYear();
 			</div>
 		</header>
 
-		<main class={`mx-auto px-6 md:px-10 py-10 md:py-16 relative z-10 ${wide ? 'max-w-[95vw]' : 'max-w-6xl'}`}>
+		<main class={`mx-auto px-6 md:px-10 py-10 md:py-16 ${wide ? 'max-w-[95vw]' : 'max-w-6xl'}`}>
 			<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 relative z-10">
+		<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>
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 075f937..6117cbc 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -142,13 +142,15 @@ body {
   position: relative;
 }
 
-/* Paper grain — applied as a fixed overlay so every page gets the texture. */
+/* Paper grain — applied as a fixed overlay so every page gets the texture.
+ * All three layers sit behind content (negative z-index) so fixed-positioned
+ * modals (e.g. the search palette) can escape ancestor stacking traps. */
 body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: -2;
+  z-index: -3;
   background-color: var(--base);
 }
 body::after {
@@ -156,8 +158,8 @@ body::after {
   position: fixed;
   inset: 0;
   pointer-events: none;
-  z-index: 0;
-  opacity: 0.35;
+  z-index: -1;
+  opacity: 0.32;
   mix-blend-mode: multiply;
   background-image:
     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.07 0 0 0 0 0.04 0 0 0 0.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
@@ -171,7 +173,7 @@ html.salon-noir body::after {
 .salon-atmosphere {
   position: fixed;
   inset: 0;
-  z-index: -1;
+  z-index: -2;
   pointer-events: none;
   overflow: hidden;
 }