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

Add subtle invoice logo to header

Browse source 
Replaces the generic file-icon placeholder with the real invoice.svg squircle
(28px, 82% opacity, accent fill with white glyph). Strips the brand text to
12px muted "kBenestad" at 70% opacity. Tightens header vertical padding so
the whole bar recedes after a few uses — noticeable on first visit, invisible
by the third.

https://claude.ai/code/session_01MkM7p8Us3L8YAfLKGA13NS
This commit is contained in:
Claude 2026-06-08 04:04:08 +00:00
parent f717a62e11
commit fcd2f047e7
No known key found for this signature in database
1 changed files with 18 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/index.html
View file

@ -145,19 +145,20 @@
/* ── Document header ────────────────────────────────────────────────────── */ /* ── Document header ────────────────────────────────────────────────────── */
.kb-header { .kb-header {
display: flex; justify-content: space-between; align-items: flex-start; display: flex; justify-content: space-between; align-items: center;
gap: 24px; padding-bottom: 20px; margin-bottom: 22px; gap: 16px; padding-bottom: 14px; margin-bottom: 20px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.kb-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .kb-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kb-brand .logo { .kb-brand .logo {
height: 42px; width: 42px; flex: 0 0 42px; border-radius: 10px; height: 28px; width: 28px; flex: 0 0 28px; border-radius: 7px;
display: grid; place-items: center; display: grid; place-items: center; overflow: hidden; opacity: .82;
background: var(--accent-soft); color: var(--accent); overflow: hidden; }
.kb-brand .logo svg { width: 28px; height: 28px; display: block; }
.kb-brand .org {
font-size: 12px; font-weight: 500; color: var(--text-muted);
letter-spacing: -0.01em; opacity: .7;
} }
.kb-brand .logo svg { width: 20px; height: 20px; }
.kb-brand .org { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.kb-brand .org small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.kb-doctitle { text-align: right; } .kb-doctitle { text-align: right; }
.kb-doctitle h1 { margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .kb-doctitle h1 { margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
@ -335,7 +336,6 @@
/* ── Responsive ─────────────────────────────────────────────────────────── */ /* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 680px) { @media (max-width: 680px) {
.kb-grid.cols-2, .kb-grid.cols-3 { grid-template-columns: 1fr; } .kb-grid.cols-2, .kb-grid.cols-3 { grid-template-columns: 1fr; }
.kb-header { flex-direction: column; gap: 14px; }
.kb-doctitle { text-align: left; } .kb-doctitle { text-align: left; }
.inv-lines-head { display: none; } .inv-lines-head { display: none; }
.inv-line { grid-template-columns: 1fr 1fr; gap: 6px 8px; } .inv-line { grid-template-columns: 1fr 1fr; gap: 6px 8px; }
@ -370,15 +370,16 @@
<header class="kb-header"> <header class="kb-header">
<div class="kb-brand"> <div class="kb-brand">
<span class="logo"> <span class="logo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="28" height="28" role="img" aria-label="Invoice">
stroke-linecap="round" stroke-linejoin="round"> <rect width="48" height="48" rx="12" fill="var(--accent)"/>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> <path d="M14 9 H29 L34 14 V39 H14 Z" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"/>
<polyline points="14 2 14 8 20 8"/> <path d="M29 9 V14 H34" fill="none" stroke="#fff" stroke-width="3" stroke-linejoin="round"/>
<line x1="16" y1="13" x2="8" y2="13"/> <path d="M18.5 20 H27" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>
<line x1="16" y1="17" x2="8" y2="17"/> <path d="M18.5 25 H29.5" stroke="#fff" stroke-width="2.6" stroke-linecap="round" opacity=".55"/>
<path d="M18.5 33 H29.5" stroke="#fff" stroke-width="3.2" stroke-linecap="round"/>
</svg> </svg>
</span> </span>
<span class="org">kBenestad<small>Freelance invoicing</small></span> <span class="org">kBenestad</span>
</div> </div>
<div class="kb-doctitle"> <div class="kb-doctitle">
<h1 id="inv-title">Invoice</h1> <h1 id="inv-title">Invoice</h1>