style: back arrow inline with article title, title bumped to 1.5rem

This commit is contained in:
jlightner 2026-04-03 07:44:32 +00:00
parent 1d210faf68
commit 97abc7c80c
2 changed files with 19 additions and 9 deletions

View file

@ -2052,18 +2052,30 @@ a.app-footer__repo:hover {
}
.technique-title-bar__title {
font-size: 1.25rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
line-height: 1.3;
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.625rem;
flex: 1;
min-width: 0;
}
.technique-title-bar__back {
color: var(--color-text-secondary);
text-decoration: none;
font-size: 1.125rem;
flex-shrink: 0;
transition: color 150ms ease;
}
.technique-title-bar__back:hover {
color: var(--color-accent);
}
.technique-title-bar__meta {
display: flex;
align-items: center;
@ -2087,7 +2099,7 @@ a.app-footer__repo:hover {
@media (max-width: 600px) {
.technique-title-bar__title {
font-size: 1.0625rem;
font-size: 1.25rem;
}
.technique-title-bar__inner {
flex-direction: column;

View file

@ -266,11 +266,6 @@ export default function TechniquePage() {
return (
<article className="technique-page">
{/* Back link */}
<Link to="/" className="back-link">
Back
</Link>
{/* Historical version banner */}
{isHistorical && (
<div className="technique-banner technique-banner--version">
@ -297,7 +292,10 @@ export default function TechniquePage() {
{/* Sticky title bar — sits at top of article, becomes sticky on scroll */}
<div className="technique-title-bar" ref={titleBarRef}>
<div className="technique-title-bar__inner">
<h1 className="technique-title-bar__title">{displayTitle} <CopyLinkButton /></h1>
<h1 className="technique-title-bar__title">
<Link to="/" className="technique-title-bar__back" aria-label="Back to home"></Link>
{displayTitle} <CopyLinkButton />
</h1>
<div className="technique-title-bar__meta">
{displayCategory && (
<span className={"badge badge--category badge--cat-" + (displayCategory?.toLowerCase().replace(/\s+/g, "-") ?? "")}>