From c3dba0f6849407da2963e3e128bb3fef0fa9f822 Mon Sep 17 00:00:00 2001 From: Nils Pukropp Date: Fri, 15 May 2026 19:34:07 +0200 Subject: [PATCH] stylized back buttons --- frontend/src/components/react/admin/Login.tsx | 7 +- frontend/src/layouts/AdminLayout.astro | 4 +- frontend/src/pages/posts/[slug].astro | 4 +- frontend/src/styles/global.css | 77 +++++++++++++++++++ 4 files changed, 83 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/react/admin/Login.tsx b/frontend/src/components/react/admin/Login.tsx index d5cbc96..ecd336f 100644 --- a/frontend/src/components/react/admin/Login.tsx +++ b/frontend/src/components/react/admin/Login.tsx @@ -78,11 +78,8 @@ export default function Login() {
- - ← + + Back to the catalogue
diff --git a/frontend/src/layouts/AdminLayout.astro b/frontend/src/layouts/AdminLayout.astro index 541dc7f..b41e9a2 100644 --- a/frontend/src/layouts/AdminLayout.astro +++ b/frontend/src/layouts/AdminLayout.astro @@ -17,8 +17,8 @@ if (Astro.cookies.get('admin_session')?.value !== '1') {
- - ← + + Back to the catalogue
Artist's desk
diff --git a/frontend/src/pages/posts/[slug].astro b/frontend/src/pages/posts/[slug].astro index 1c3f477..0a45a3d 100644 --- a/frontend/src/pages/posts/[slug].astro +++ b/frontend/src/pages/posts/[slug].astro @@ -92,8 +92,8 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
{/* Toolbar — exhibit nav */}
- - ← + + Back to catalogue diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index b936ecf..10ce138 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -1052,6 +1052,36 @@ code, pre, kbd, samp { .btn--icon.btn--sm { width: 2rem; } .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 ───── * `.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). @@ -1557,6 +1587,53 @@ input[type="date"] { color-scheme: light; } 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. */ .breakcore .prose a { text-decoration-color: color-mix(in srgb, var(--mauve) 55%, transparent);