Add subtle app bar with reimburse glyph

Thin 34px strip at the top of the page — the reimburse icon (card/
banknote outline glyph from dev/design_assets/reimburse-glyph.svg)
at 16px, 50% opacity, in var(--text-muted). One hairline border below.
aria-hidden so it is invisible to screen readers.

https://claude.ai/code/session_01JyuActqTJG5tuRQNLmT7fZ
This commit is contained in:
Claude 2026-06-08 04:19:10 +00:00
parent 345e285d30
commit 3f7fcf47ed
No known key found for this signature in database

View file

@ -332,6 +332,13 @@ body{
.kb-footer a:hover{color:var(--accent);text-decoration:underline;}
.kb-footer .sep{opacity:.45;}
/* ── App bar ──────────────────────────────────────────────────────────────── */
.app-bar{
height:34px;display:flex;align-items:center;padding:0 20px;
border-bottom:1px solid var(--border);background:var(--surface);
}
.app-bar svg{width:16px;height:16px;color:var(--text-muted);opacity:.5;}
/* ── Loading ──────────────────────────────────────────────────────────────── */
.kb-loading{text-align:center;padding:80px;color:var(--text-muted);}
@ -345,6 +352,13 @@ body{
</style>
</head>
<body>
<header class="app-bar" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
<rect x="7.5" y="14" width="33" height="20" rx="3.2" stroke-width="2.8"/>
<circle cx="24" cy="24" r="4.6" stroke-width="2.6"/>
<path d="M12.7 21.4V26.6M35.3 21.4V26.6" stroke-width="2.6"/>
</svg>
</header>
<div id="app"><p class="kb-loading">Loading configuration…</p></div>
<footer class="kb-footer">
<span>© 2026 Kristian Benestad</span>