diff --git a/src/ui/assets.ts b/src/ui/assets.ts index 3351eb4..70d160e 100644 --- a/src/ui/assets.ts +++ b/src/ui/assets.ts @@ -11,6 +11,11 @@ const ALLOWLIST: Record = { 'index.html': 'text/html; charset=utf-8', 'app.css': 'text/css; charset=utf-8', 'app.js': 'text/javascript; charset=utf-8', + // The brand artwork, served as files rather than inlined as data URIs so the + // browser caches them and the CSS stays readable. Same-origin, so the + // no-external-requests rule holds. + 'mark.png': 'image/png', + 'lockup.png': 'image/png', }; export interface Asset { diff --git a/src/ui/public/app.css b/src/ui/public/app.css index 355ff7a..6ddebe3 100644 --- a/src/ui/public/app.css +++ b/src/ui/public/app.css @@ -88,14 +88,25 @@ button, input, select, textarea { font: inherit; color: inherit; } /* ── Mark ─────────────────────────────────────────────────────────────────── */ -.mark { display: block; width: 100%; height: 100%; } -.mark-shield, .mark-split, .mark-dial { stroke: var(--dim); fill: none; } -.mark-split { opacity: 0.55; } -.mark-hinge { fill: var(--dim); } -.mark-key { fill: var(--brand); } +/* + * Brand artwork, served from /assets. Raster rather than SVG because the source + * is a rendered image with gradients and a glow that a monoline redraw loses. + * Both files are same-origin, so the no-external-requests rule still holds. + */ +.login-lockup { + display: block; + width: 280px; + max-width: 100%; + height: auto; + margin: 0 auto 1.5rem; +} -.login-mark { width: 52px; height: 52px; } -.brand-mark { display: block; width: 28px; height: 28px; } +.brand-mark { + display: block; + width: 30px; + height: auto; + flex: none; +} /* * Wordmark. The reference artwork uses a wide geometric face; a webfont is out @@ -144,6 +155,7 @@ button, input, select, textarea { font: inherit; color: inherit; } .login-sub { margin: 0 0 2rem; + text-align: center; color: var(--faint); font-size: 0.9375rem; } diff --git a/src/ui/public/app.js b/src/ui/public/app.js index 2547b4d..dd7dcf4 100644 --- a/src/ui/public/app.js +++ b/src/ui/public/app.js @@ -42,15 +42,6 @@ function clear(node) { while (node.firstChild) node.removeChild(node.firstChild); } -/** Stamp the inline SVG mark into every [data-mark] slot. */ -function renderMarks() { - const template = $('mark-template'); - for (const slot of document.querySelectorAll('[data-mark]')) { - if (slot.firstChild) continue; - slot.appendChild(template.content.cloneNode(true)); - } -} - let toastTimer; function toast(message, isError = false) { const node = $('toast'); @@ -899,7 +890,6 @@ async function refresh() { async function start(user) { showApp(user); - renderMarks(); renderLegend(); const consumerData = await api('/api/consumers'); state.consumers = consumerData.consumers || []; @@ -982,7 +972,6 @@ $('tag-filter').addEventListener('change', async (event) => { // ── Boot ──────────────────────────────────────────────────────────────────── (async function boot() { - renderMarks(); try { await start((await api('/api/session')).user); } catch { diff --git a/src/ui/public/index.html b/src/ui/public/index.html index 70c999e..1f3c9c6 100644 --- a/src/ui/public/index.html +++ b/src/ui/public/index.html @@ -9,34 +9,11 @@ - - -