Kessinen/foodster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 3 Wiki Activity

Give the header a surface

Browse Source 
The brand row and theme toggle sit on their own background with a hairline
under it, so the header reads as an object rather than text floating on the
page. The page title and day switcher stay on the page background: they are
content, not chrome.

The colour is its own --header variable rather than a reuse of --card, so the
header can be recoloured without dragging every card along when the palette
gets overhauled. The theme-color meta tags match it, so on a phone the browser
chrome continues the header instead of butting a different shade against it;
those need literal hex, so each file points at the other.
This commit is contained in:
Esa Kataja
2026-09-05 21:37:03 +03:00
parent b67c4edd5a
commit 3564d74c39
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cmd/foodster/static/app.css
+10 -3
View File
@@ -20,6 +20,11 @@
--kala: light-dark(#25688F, #63AAD8);
--kasvis: light-dark(#457A3C, #82BE7A);
/* Its own name rather than reusing --card, so the header can be recoloured
later without dragging every card with it. Keep the theme-color meta tags
in views.templ in step: those need literal hex. */
--header: light-dark(#FFFFFF, #1C1E22);
--tap: 48px; /* minimum touch target */
}
@@ -43,11 +48,15 @@ button, input, select { font: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
/* The header is the brand and the theme toggle, and nothing else. The page
title below it is content, so it stays on the page background. */
.brandbar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
background: var(--header);
border-bottom: 1px solid var(--line);
}
.brand {
display: flex;
@@ -84,9 +93,7 @@ html[data-theme="dark"] .themetoggle .i-sun { display: none; }
html[data-theme="light"] .themetoggle .i-moon { display: none; }
.appbar {
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: 2px 16px 12px;
padding: 16px 16px 4px;
}
.appbar h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.appbar .meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
cmd/foodster/views.templ
+4 -2
View File
@@ -78,8 +78,10 @@ templ page(title, current string) {
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
<meta name="color-scheme" content="light dark"/>
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ECEDE8"/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#121316"/>
// Matches --header in app.css so the browser chrome continues the
// header rather than butting against it.
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#FFFFFF"/>
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1E22"/>
<title>{ title }</title>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"/>
<link rel="apple-touch-icon" href="/static/apple-touch-icon.png"/>