init elas atelier #1
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user