53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
// LatestLine — the most recent post as ONE typographic line. Bait to move into
|
|
// the site. No panel, no thumbnail. Hairline rule + arrow that drifts on hover.
|
|
function LatestLine({ onDark = false }) {
|
|
const [hover, setHover] = React.useState(false);
|
|
const c = onDark
|
|
? { fg: 'var(--fg-on-dark-1)', meta: 'var(--fg-on-dark-3)', rule: 'var(--hairline-on-dark)' }
|
|
: { fg: 'var(--fg-1)', meta: 'var(--fg-3)', rule: 'var(--hairline)' };
|
|
|
|
const ll = {
|
|
eyebrow: {
|
|
fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '11px',
|
|
letterSpacing: '0.22em', textTransform: 'uppercase',
|
|
color: onDark ? 'var(--fg-on-dark-2)' : 'var(--fg-3)', margin: '0 0 14px',
|
|
},
|
|
line: {
|
|
display: 'flex', alignItems: 'baseline', gap: '16px',
|
|
textDecoration: 'none', color: c.fg,
|
|
},
|
|
title: {
|
|
fontFamily: 'var(--font-display)', fontWeight: 500,
|
|
fontSize: 'clamp(20px, 2.2vw, 27px)', letterSpacing: '-0.01em',
|
|
},
|
|
meta: {
|
|
fontFamily: 'var(--font-body)', fontSize: '12.5px', color: c.meta,
|
|
fontFeatureSettings: '"onum" 1', marginLeft: 'auto', whiteSpace: 'nowrap',
|
|
},
|
|
arrow: {
|
|
color: 'var(--accent-deep)',
|
|
transform: hover ? 'translateX(5px)' : 'translateX(0)',
|
|
transition: 'transform var(--dur-base) var(--ease-out)',
|
|
},
|
|
rule: { height: '1px', background: c.rule, marginTop: '14px' },
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<p style={ll.eyebrow}>Selected writing</p>
|
|
<a
|
|
href="#"
|
|
style={ll.line}
|
|
onMouseEnter={() => setHover(true)}
|
|
onMouseLeave={() => setHover(false)}
|
|
onClick={(e) => e.preventDefault()}
|
|
>
|
|
<span style={ll.title}>Notes on warm light and cold water</span>
|
|
<span style={ll.meta}>Mar 2026</span>
|
|
<span style={ll.arrow}>→</span>
|
|
</a>
|
|
<div style={ll.rule} />
|
|
</div>
|
|
);
|
|
}
|
|
Object.assign(window, { LatestLine });
|