cdnutter/canon
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hide the top bar on the home page

Browse Source 
Visitors see the home page with no top bar at all. Signed in, the bar
sits behind a small tab at the top center that drops it down; Escape or
a click outside closes it. Every other page keeps the regular bar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
cdnutterandClaude Opus 5.5 committed 2026-09-30 15:27:39 -07:00
1 parent f3185ba7bd
commit 0d4bbe8c8a
3 files changed
+61 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/static/css/app.css
+22
View File
@@ -67,6 +67,28 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
.topnav-form { margin: 0; }
@media (max-width: 520px) { .topnav a span { display: none; } }
/* Home page, signed in: the bar drops down from a small tab. */
.topbar-tab {
position: fixed; top: 0; left: 50%; z-index: 30; transform: translateX(-50%);
display: grid; place-items: center; width: 44px; height: 20px;
list-style: none; cursor: pointer; color: var(--faint);
background: color-mix(in srgb, var(--surface) 88%, transparent);
border: 1px solid var(--border); border-top: 0; border-radius: 0 0 10px 10px;
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
opacity: 0.7; transition: opacity 0.15s, color 0.15s, top 0.2s;
}
.topbar-tab::-webkit-details-marker { display: none; }
.topbar-tab .icon { width: 14px; height: 14px; transition: transform 0.2s; }
.topbar-tab:hover, .topbar-tab:focus-visible { opacity: 1; color: var(--text); }
.topbar-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar-drawer .topbar { position: fixed; left: 0; right: 0; animation: topbar-drop 0.2s ease-out; }
.topbar-drawer[open] .topbar-tab { top: 60px; opacity: 1; }
.topbar-drawer[open] .topbar-tab .icon { transform: rotate(180deg); }
@keyframes topbar-drop { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) {
.topbar-drawer .topbar { animation: none; }
}
/* ---------- footer ---------- */
.footer { margin-top: 72px; border-top: 1px solid var(--border); color: var(--faint); font-size: 13px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-top: 22px; padding-bottom: 28px; }