35 lines
2.3 KiB
JavaScript
35 lines
2.3 KiB
JavaScript
// ------------------------------------------------------------------------
|
|
// components/Wordmark.js - The SunScope sun-icon wordmark (Sun + icon +
|
|
// Scope), sized for use inside modals.
|
|
//
|
|
// Mirrors the nav/header markup but self-contained: each instance gets a
|
|
// unique clipPath id so multiple wordmarks can render on the page without
|
|
// the SVG clip colliding. Size via the `fontSize` prop.
|
|
// ------------------------------------------------------------------------
|
|
|
|
import { h } from '../../vendor/preact.js';
|
|
import { useState } from '../../vendor/preact-hooks.js';
|
|
import htm from '../../vendor/htm.js';
|
|
|
|
const html = htm.bind(h);
|
|
|
|
let _wmCounter = 0; // bump per instance for a stable unique id
|
|
|
|
export function Wordmark({ fontSize = '34px' }) {
|
|
const [clipId] = useState(() => 'ss-clip-wm-' + (++_wmCounter));
|
|
return html`
|
|
<div style=${{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontFamily: 'Manrope, sans-serif',
|
|
fontWeight: 250,
|
|
fontSize,
|
|
lineHeight: 1,
|
|
letterSpacing: '-0.01em',
|
|
color: '#1e1208',
|
|
}}>
|
|
<span>Sun</span><svg viewBox="0 0 174 173" aria-hidden="true" style=${{ width: '0.82em', height: '0.82em', flexShrink: 0 }}><g transform="matrix(0.986226,0,0,0.986226,-585.724252,-110.041209)"><clipPath id=${clipId}><circle cx="681.9838" cy="199.4502" r="83.2987"/></clipPath><g clip-path=${`url(#${clipId})`}><g transform="matrix(0.948836,0,0,0.948836,19.748711,-12.198562)"><path d="M666.992,233.0768C666.3949,230.6581 666.1785,228.6317 666.1785,226.0296C666.1785,208.6786 680.2653,194.5919 697.6163,194.5919C714.9672,194.5919 729.054,208.6786 729.054,226.0296C729.054,228.4125 728.9892,230.9346 728.4859,233.1663" fill="#f4b047" stroke="#f4b047" stroke-width="7.48" stroke-linecap="round"/></g><g transform="matrix(0.520349,0,0,0.520349,304.727514,54.521964)"><path d="M724.9315,291.8131C777.359,291.8131 826.5862,305.6245 869.1698,329.8044" fill="none" stroke="currentColor" stroke-width="13.64"/></g><g transform="matrix(0.520349,0,0,0.520349,304.727514,54.521964)"><path d="M580.8436,329.719C623.3927,305.592 672.5657,291.8131 724.9315,291.8131" fill="none" stroke="currentColor" stroke-width="13.64"/></g></g><circle cx="681.9838" cy="199.4502" r="83.2987" fill="none" stroke="currentColor" stroke-width="9.13"/></g></svg><span>Scope</span>
|
|
</div>`;
|
|
}
|