xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/App.css
View file

@ -2052,18 +2052,30 @@ a.app-footer__repo:hover {
} }
.technique-title-bar__title { .technique-title-bar__title {
font-size: 1.25rem; font-size: 1.5rem;
font-weight: 700; font-weight: 700;
color: var(--color-text-primary); color: var(--color-text-primary);
margin: 0; margin: 0;
line-height: 1.3; line-height: 1.3;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.625rem;
flex: 1; flex: 1;
min-width: 0; 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 { .technique-title-bar__meta {
display: flex; display: flex;
align-items: center; align-items: center;
@ -2087,7 +2099,7 @@ a.app-footer__repo:hover {
@media (max-width: 600px) { @media (max-width: 600px) {
.technique-title-bar__title { .technique-title-bar__title {
font-size: 1.0625rem; font-size: 1.25rem;
} }
.technique-title-bar__inner { .technique-title-bar__inner {
flex-direction: column; flex-direction: column;

10
frontend/src/pages/TechniquePage.tsx
View file

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