mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-09-30 12:39:42 +02:00
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:
@@ -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 -->
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user