style: back arrow inline with article title, title bumped to 1.5rem
This commit is contained in:
parent
1d210faf68
commit
97abc7c80c
2 changed files with 19 additions and 9 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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, "-") ?? "")}>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue