Replace the header brand emoji with a play-badge logo

Swap the 📚 emoji in the header for an inline SVG mark - a rounded square with a play triangle, echoing that this is a video-course library. Uses var(--accent)/var(--bg-secondary) rather than fixed colors so it re-colors automatically with whichever of the app's theme presets is active, same as everything else in the header. Applied consistently across all 5 templates; the small secondary footer brand mark (still plain 📚 text) is untouched - this only replaces the prominent header lockup. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-23 20:55:36 -04:00
parent 21af7ae349
commit daec0742ec
5 changed files with 31 additions and 14 deletions
@@ -70,8 +70,9 @@
            align-items: center;
            gap: 12px;
        }
-        .app-header .brand-icon {
-            font-size: 1.6em;
+        .app-header .brand-mark {
+            flex-shrink: 0;
+            display: block;
        }
        .app-header a.brand-link {
            color: var(--accent);
@@ -321,7 +322,10 @@
 <body>
    <div class="app-header">
        <div class="header-inner">
-            <span class="brand-icon">📚</span>
+            <svg class="brand-mark" viewBox="0 0 64 64" width="28" height="28" aria-hidden="true">
+                <rect x="2" y="2" width="60" height="60" rx="16" fill="var(--accent)"></rect>
+                <path d="M24 20 L24 44 L46 32 Z" fill="var(--bg-secondary)"></path>
+            </svg>
            <a href="/reset_course" class="brand-link">OfflineU</a>
        </div>
    </div>