25 lines
824 B
JavaScript
25 lines
824 B
JavaScript
// Wordmark — the name lockup. Bodoni display, a single ochre period as the
|
|
// only color event. Sits at the top-left of the composition.
|
|
function Wordmark({ size = 'header', onDark = false }) {
|
|
const isHeader = size === 'header';
|
|
const wmStyles = {
|
|
name: {
|
|
fontFamily: 'var(--font-display)',
|
|
fontWeight: 500,
|
|
fontSize: isHeader ? '21px' : 'clamp(56px, 9vw, 132px)',
|
|
lineHeight: isHeader ? 1 : 0.92,
|
|
letterSpacing: isHeader ? '0' : '-0.02em',
|
|
color: onDark ? 'var(--fg-on-dark-1)' : 'var(--fg-1)',
|
|
margin: 0,
|
|
display: 'flex',
|
|
alignItems: 'baseline',
|
|
},
|
|
dot: { color: 'var(--accent-deep)' },
|
|
};
|
|
return (
|
|
<h1 style={wmStyles.name}>
|
|
Josh Bairstow<span style={wmStyles.dot}>.</span>
|
|
</h1>
|
|
);
|
|
}
|
|
Object.assign(window, { Wordmark });
|