Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172(() => { const names = ['clay', 'ochre', 'patina']; const hues = [35, 85, 185]; const chroma = document.querySelector('#chroma'); const lightness = document.querySelector('#lightness'); const mode = document.querySelector('#mode'); const o = document.querySelector('#letter-o'); const status = document.querySelector('#copy-status'); let values = [];
function render() { const c = Number(chroma.value).toFixed(3); const l = Number(lightness.value).toFixed(2); values = hues.map(hue => `oklch(${l} ${c} ${hue})`); names.forEach((name, i) => { document.documentElement.style.setProperty(`--${name}`, values[i]); document.querySelector(`#${name}-value`).value = values[i]; }); document.querySelector('#chroma-value').textContent = c; document.querySelector('#lightness-value').textContent = l; const paint = mode.value === 'black' ? '#000' : mode.value === 'segments' ? 'url(#palette)' : values[names.indexOf(mode.value)]; // Identical fill AND stroke geometry in every mode (including black). o.style.fill = paint; o.style.stroke = paint; status.textContent = ''; }
async function fitWordmark() { await document.fonts.load('700 180px Comfortaa'); const word = document.querySelector('#letters').getBBox(); // SVG text getBBox includes the font's em box, not just visible ink. // Use ink bounds from the pinned, unmodified font at weight 700 (1000 UPM): // word y -4..781; o x 62..613, y -4..551. This centers three equal // angular sectors on the actual o rather than the taller line box. const scale = 180 / 1000; const origin = o.getStartPositionOfChar(0); const pad = 12; document.querySelector('#wordmark').setAttribute('viewBox', `${word.x - pad} ${175 - 781 * scale - pad} ${word.width + pad * 2} ${785 * scale + pad * 2}`); const pattern = document.querySelector('#palette'); for (const [key, value] of Object.entries({ x: origin.x + 62 * scale - 3, y: 175 - 551 * scale - 3, width: 551 * scale + 6, height: 555 * scale + 6 })) { pattern.setAttribute(key, String(value)); } }
[chroma, lightness, mode].forEach(control => control.addEventListener('input', render)); document.querySelector('#reset').addEventListener('click', () => { chroma.value = '0.14'; lightness.value = '0.64'; mode.value = 'black'; render(); }); document.querySelector('#copy').addEventListener('click', async () => { const css = names.map((name, i) => `--${name}: ${values[i]};`).join('\n'); try { await navigator.clipboard.writeText(css); status.textContent = 'Palette CSS copied.'; } catch { status.textContent = 'Copy unavailable. Select and copy the values above.'; document.querySelector('#clay-value').focus(); document.querySelector('#clay-value').select(); } }); document.querySelectorAll('input[readonly]').forEach(input => { input.addEventListener('click', () => input.select()); }); render(); fitWordmark().catch(() => { /* Keep the static wordmark usable if the font cannot load. */ });})();