// The TyperPunk mark.
//
// The mark is a shell prompt: a chevron and the underscore cursor that sits
// after it, waiting for input. Two shapes, nothing else. It reads at 16
// pixels, which is the only size that really has to work, and it is the
// gesture anyone who has used a terminal recognises without being told.
//
// An earlier version stacked a chevron, a full-width baseline and a large
// filled block, plus an offset ghost copy of the chevron behind it. Five
// shapes in a 32 pixel square is a drawing, not a mark: the parts crowded
// each other and none of them read.
//
// Everything is drawn in currentColor and the theme's own variables, so the
// mark follows the palette rather than carrying its own.
/// The mark on its own, for a favicon, a tab, or anywhere the name is already
/// present. Sized by its container.
export const LOGO_MARK = `
`;
/// Mark and wordmark together. The wordmark is split so the two halves of the
/// name carry different weight: "Typer" is what it does, "Punk" is what it
/// looks like, and the accent colour goes on the second.
export function logoLockup({ tag = 'div', className = 'logo', action = 'menu' } = {}) {
return `<${tag} class="${className}"${action ? ` data-action="${action}"` : ''}>
${LOGO_MARK}
TyperPunk
`;
}
/// The same mark as a standalone SVG document, for the favicon. Colours are
/// literal here because a favicon is rendered outside the page and cannot
/// read its variables.
export function faviconDataUri({ accent = '#00ff9d', background = '#000000' } = {}) {
const svg = ``;
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}