kbenestad/invoice
1
0
Fork 0
mirror of https://github.com/kbenestad/invoice.git synced 2026-06-18 16:14:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Align kb-header with timesheet/reimburse design

Browse source 
- Always use kb-brand structure (remove app-wordmark fallback path)
- Default brand: kbenestad.invoice / Invoice Generator when org-name
  and org-subheading are absent from config
- Remove .app-wordmark CSS class
- kb-footer max-width 980px to match kb-wrap

https://claude.ai/code/session_01MkM7p8Us3L8YAfLKGA13NS
This commit is contained in:
Claude 2026-06-08 16:20:07 +00:00
parent a9115d0355
commit 24909e6f45
No known key found for this signature in database
1 changed files with 8 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/index.html
View file

@ -157,7 +157,6 @@
gap: 24px; padding-bottom: 20px; margin-bottom: 20px; gap: 24px; padding-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid var(--border); 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 { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kb-brand .logo { .kb-brand .logo {
height: 46px; width: 46px; flex: 0 0 46px; border-radius: 10px; 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 .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 { 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; } .kb-brand .org small { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
/* 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-doctitle { text-align: right; } .kb-doctitle { text-align: right; }
.kb-doctitle h1 { .kb-doctitle h1 {
margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em;
@ -346,7 +337,7 @@
/* ── Footer ─────────────────────────────────────────────────────────────── */ /* ── Footer ─────────────────────────────────────────────────────────────── */
.kb-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); font-size: var(--fs-small); color: var(--text-muted);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
@ -623,19 +614,14 @@ const LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" ar
</svg>`; </svg>`;
function buildHeader() { function buildHeader() {
const orgName = cfg["org-name"]; const orgName = cfg["org-name"] || "kbenestad.invoice";
const orgSub = cfg["org-subheading"]; const orgSub = cfg["org-subheading"] || "Invoice Generator";
// Left brand // Left brand — always kb-brand structure
const brandEl = document.getElementById("hdr-brand"); const brandEl = document.getElementById("hdr-brand");
if (orgName) { brandEl.className = "kb-brand";
brandEl.className = "kb-brand"; brandEl.innerHTML = `<span class="logo">${LOGO_SVG}</span>
brandEl.innerHTML = `<span class="logo">${LOGO_SVG}</span> <span class="org">${h(orgName)}<small>${h(orgSub)}</small></span>`;
<span class="org">${h(orgName)}${orgSub ? `<small>${h(orgSub)}</small>` : ""}</span>`;
} else {
brandEl.className = "app-wordmark";
brandEl.innerHTML = LOGO_SVG + " invoice";
}
// Right: app name h1 (icon + lowercase app name) // Right: app name h1 (icon + lowercase app name)
const titleEl = document.getElementById("inv-title"); const titleEl = document.getElementById("inv-title");