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

stylized back buttons

Browse Source
This commit is contained in:
Nils Pukropp
2026-05-15 19:34:07 +02:00
parent e8c6ce5a8a
commit c3dba0f684
4 changed files with 83 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/global.css
+77
View File
@@ -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);