fix(mobile): collapse header brand to a C home button on phones

On <430px screens the full Codeman wordmark wasted header space; the brand
now renders a single C (same tap target, still app.goHome()). Desktop and
tablet keep the full wordmark. The compact letter lives in a separate
aria-hidden span so i18n custom branding keeps rewriting only the wordmark.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-07-23 22:47:09 +02:00
parent b710013add
commit 1be98ff8a3
3 changed files with 19 additions and 3 deletions
+3 -1
View File
@@ -80,7 +80,9 @@
<!-- Compact Header with Session Tabs -->
<header class="header">
<div class="header-brand">
<span class="logo" onclick="app.goHome()" title="Go to main page">Codeman</span>
<span class="logo" onclick="app.goHome()" title="Go to main page"
><span class="logo-text">Codeman</span><span class="logo-compact" aria-hidden="true">C</span></span
>
</div>
<!-- Session Tabs -->
+11 -2
View File
@@ -350,7 +350,8 @@ html.mobile-init .file-browser-panel {
Phone Breakpoint (<430px)
============================================================================ */
@media (max-width: 430px) {
/* Compact header brand on phones — acts as home button */
/* Phone brand collapses to a single "C" home button: hide the wordmark,
keep the tap target */
.header-brand {
padding-right: 0.25rem;
margin-right: 0.2rem;
@@ -358,7 +359,15 @@ html.mobile-init .file-browser-panel {
}
.header-brand .logo {
font-size: 0.7rem;
font-size: 0.85rem;
}
.header-brand .logo .logo-text {
display: none;
}
.header-brand .logo .logo-compact {
display: inline;
}
/* Font controls - compact on phones, visibility controlled by JS */
+5
View File
@@ -289,6 +289,11 @@ body {
transition: color var(--transition-smooth), text-shadow var(--transition-smooth), filter var(--transition-smooth);
}
/* Single-letter brand shown only on phones (see mobile.css phone breakpoint) */
.logo .logo-compact {
display: none;
}
.logo:hover {
color: #93c5fd;
text-shadow: 0 0 12px rgba(96, 165, 250, 0.5), 0 0 24px rgba(96, 165, 250, 0.2);