Add circular portrait to homepage hero, improve TOC link affordance
- Add Cynthia's portrait photo as a circular image above her name - Restyle TOC entries with hover background, arrow reveal on hover, and subtle transition to make poems feel more clickable Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
11063b73cb
commit
5dedc87532
|
|
@ -112,16 +112,36 @@ nav a:hover {
|
|||
|
||||
/* TOC styles */
|
||||
.toc-entry {
|
||||
display: block;
|
||||
padding: 0.375rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 0 -0.75rem;
|
||||
color: #57534e; /* stone-600 */
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
transition: color 0.15s ease, background-color 0.15s ease;
|
||||
font-family: var(--font-serif);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.toc-entry::after {
|
||||
content: '→';
|
||||
font-family: system-ui, sans-serif;
|
||||
font-size: 0.8em;
|
||||
color: transparent;
|
||||
transition: color 0.15s ease, transform 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.toc-entry:hover {
|
||||
color: #1c1917; /* stone-900 */
|
||||
background-color: #fafaf9; /* stone-50 */
|
||||
}
|
||||
|
||||
.toc-entry:hover::after {
|
||||
color: #a8a29e; /* stone-400 */
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
/* Sequential poem navigation */
|
||||
|
|
|
|||
|
|
@ -8,6 +8,16 @@ export default function HomePage() {
|
|||
{/* Title Page Hero */}
|
||||
<section className="relative py-24 md:py-32 bg-gradient-to-b from-stone-50 to-white">
|
||||
<div className="mx-auto max-w-4xl px-6 text-center">
|
||||
<div className="mx-auto mb-8 w-36 h-36 md:w-44 md:h-44 rounded-full overflow-hidden relative ring-2 ring-stone-200 ring-offset-4 ring-offset-stone-50">
|
||||
<Image
|
||||
src="/images/cynthia/cynthia-portrait.jpeg"
|
||||
alt="Cynthia Trenshaw"
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="176px"
|
||||
priority
|
||||
/>
|
||||
</div>
|
||||
<h1 className="font-serif text-5xl md:text-6xl lg:text-7xl text-stone-800 tracking-tight">
|
||||
Cynthia Trenshaw
|
||||
</h1>
|
||||
|
|
|
|||
Loading…
Reference in New Issue