diff --git a/app/index.html b/app/index.html index c145d09..1aa5f05 100644 --- a/app/index.html +++ b/app/index.html @@ -157,7 +157,6 @@ gap: 24px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); } - /* Full brand (org name visible) */ .kb-brand { display: flex; align-items: center; gap: 14px; min-width: 0; } .kb-brand .logo { height: 46px; width: 46px; flex: 0 0 46px; border-radius: 10px; @@ -165,15 +164,7 @@ } .kb-brand .logo svg { width: 100%; height: 100%; display: block; } .kb-brand .org { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } - .kb-brand .org small { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-top: 1px; } - /* Minimal wordmark (no org) */ - .app-wordmark { - display: inline-flex; align-items: center; gap: 8px; - font: 700 var(--fs-h1)/1 var(--font-sans); - color: var(--text); letter-spacing: -0.01em; user-select: none; - } - .app-wordmark svg { flex-shrink: 0; } - /* Right: app name + meta */ + .kb-brand .org small { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); letter-spacing: 0; } .kb-doctitle { text-align: right; } .kb-doctitle h1 { margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; @@ -346,7 +337,7 @@ /* ── Footer ─────────────────────────────────────────────────────────────── */ .kb-footer { - max-width: 960px; margin: 0 auto; padding: 16px 20px 12px; + max-width: 980px; margin: 0 auto; padding: 16px 20px 12px; font-size: var(--fs-small); color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--border); @@ -623,19 +614,14 @@ const LOGO_SVG = ``; function buildHeader() { - const orgName = cfg["org-name"]; - const orgSub = cfg["org-subheading"]; + const orgName = cfg["org-name"] || "kbenestad.invoice"; + const orgSub = cfg["org-subheading"] || "Invoice Generator"; - // Left brand + // Left brand — always kb-brand structure const brandEl = document.getElementById("hdr-brand"); - if (orgName) { - brandEl.className = "kb-brand"; - brandEl.innerHTML = ` - ${h(orgName)}${orgSub ? `${h(orgSub)}` : ""}`; - } else { - brandEl.className = "app-wordmark"; - brandEl.innerHTML = LOGO_SVG + " invoice"; - } + brandEl.className = "kb-brand"; + brandEl.innerHTML = ` + ${h(orgName)}${h(orgSub)}`; // Right: app name h1 (icon + lowercase app name) const titleEl = document.getElementById("inv-title");