init elas atelier #1

Merged
nvrl merged 82 commits from ela into main 2026-05-18 13:55:42 +02:00
4 changed files with 83 additions and 9 deletions
Showing only changes of commit c3dba0f684 - Show all commits
@@ -78,11 +78,8 @@ export default function Login() {
</form> </form>
</div> </div>
<div className="text-center mt-6"> <div className="text-center mt-6">
<a <a href="/" className="back-link">
href="/" <span className="bl-arrow" aria-hidden="true"></span>
className="inline-flex items-center gap-1.5 text-xs font-display italic text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors group"
>
<span className="transition-transform group-hover:-translate-x-0.5"></span>
Back to the catalogue Back to the catalogue
</a> </a>
</div> </div>
+2 -2
View File
@@ -17,8 +17,8 @@ if (Astro.cookies.get('admin_session')?.value !== '1') {
<div class="space-y-10 md:space-y-14"> <div class="space-y-10 md:space-y-14">
<header class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-[var(--surface2)]/60"> <header class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-[var(--surface2)]/60">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<a href="/" class="inline-flex items-center gap-1.5 text-xs font-display italic text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors mb-3 group"> <a href="/" class="back-link mb-3">
<span class="transition-transform group-hover:-translate-x-0.5">←</span> <span class="bl-arrow" aria-hidden="true">←</span>
Back to the catalogue Back to the catalogue
</a> </a>
<div class="font-display italic text-[var(--mauve)] text-xs tracking-[0.3em] uppercase mb-2">Artist's desk</div> <div class="font-display italic text-[var(--mauve)] text-xs tracking-[0.3em] uppercase mb-2">Artist's desk</div>
+2 -2
View File
@@ -92,8 +92,8 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
<article class="plate-enter"> <article class="plate-enter">
{/* Toolbar — exhibit nav */} {/* Toolbar — exhibit nav */}
<div class="flex flex-wrap items-center justify-between gap-3 mb-10 md:mb-14 font-display italic text-sm text-[var(--subtext0)]"> <div class="flex flex-wrap items-center justify-between gap-3 mb-10 md:mb-14 font-display italic text-sm text-[var(--subtext0)]">
<a href="/" class="inline-flex items-center gap-2 hover:text-[var(--mauve)] transition-colors group"> <a href="/" class="back-link">
<span class="transition-transform group-hover:-translate-x-1">←</span> <span class="bl-arrow" aria-hidden="true">←</span>
Back to catalogue Back to catalogue
</a> </a>
+77
View File
@@ -1052,6 +1052,36 @@ code, pre, kbd, samp {
.btn--icon.btn--sm { width: 2rem; } .btn--icon.btn--sm { width: 2rem; }
.btn--block { width: 100%; } .btn--block { width: 100%; }
/* Back-link — a real affordance, not bare body text. One markup for
* every "← back" return link (post, admin, login). */
.back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-display);
font-style: italic;
font-size: 0.9rem;
line-height: 1;
color: var(--subtext1);
text-decoration: none;
padding: 0.35rem 0.1rem;
border-bottom: 1px solid color-mix(in srgb, var(--subtext1) 35%, transparent);
transition: color 0.15s ease, border-color 0.15s ease, gap 0.15s ease;
}
.back-link:hover,
.back-link:focus-visible {
color: var(--mauve);
border-color: var(--mauve);
gap: 0.7rem;
outline: none;
}
.back-link .bl-arrow {
display: inline-block;
transition: transform 0.15s ease;
}
.back-link:hover .bl-arrow,
.back-link:focus-visible .bl-arrow { transform: translateX(-3px); }
/* ───── Top-bar controls — one height, one language ───── /* ───── Top-bar controls — one height, one language ─────
* `.topbar-cluster` lays the chrome controls out as one tidy, right-aligned * `.topbar-cluster` lays the chrome controls out as one tidy, right-aligned
* group that wraps as a unit (never a ragged full-width column on mobile). * group that wraps as a unit (never a ragged full-width column on mobile).
@@ -1557,6 +1587,53 @@ input[type="date"] { color-scheme: light; }
box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent);
} }
/* Ghost had no breakcore identity — drab subtext on faint surface,
* near-invisible on the violet ground. Give it the neon outline. */
.breakcore .btn--ghost {
color: var(--teal);
border-color: color-mix(in srgb, var(--teal) 55%, transparent);
background: color-mix(in srgb, var(--surface0) 60%, transparent);
box-shadow: 3px 3px 0 0 color-mix(in srgb, var(--teal) 35%, var(--crust));
}
.breakcore .btn--ghost:hover {
color: var(--crust);
background: var(--teal);
border-color: var(--teal);
box-shadow: 3px 3px 0 0 var(--mauve);
}
.breakcore .btn--ghost:active {
transform: translate(2px, 2px);
box-shadow: 1px 1px 0 0 var(--mauve);
}
/* Back-link → hard neon return tab. Impossible to miss against the
* CRT-violet ground; same offset-block language as .btn--primary. */
.breakcore .back-link {
font-family: var(--font-mono);
font-style: normal;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--green);
padding: 7px 13px;
background: color-mix(in srgb, var(--crust) 65%, transparent);
border: 1px solid var(--mauve);
box-shadow: 3px 3px 0 0 var(--mauve);
text-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent);
}
.breakcore .back-link:hover,
.breakcore .back-link:focus-visible {
color: var(--crust);
background: var(--green);
border-color: var(--green);
box-shadow: 3px 3px 0 0 var(--mauve);
text-shadow: none;
}
.breakcore .back-link:active {
transform: translate(3px, 3px);
box-shadow: 0 0 0 0 var(--mauve);
}
/* Prose links — magenta resting, acid-green on hover. */ /* Prose links — magenta resting, acid-green on hover. */
.breakcore .prose a { .breakcore .prose a {
text-decoration-color: color-mix(in srgb, var(--mauve) 55%, transparent); text-decoration-color: color-mix(in srgb, var(--mauve) 55%, transparent);