rmsitz/offlineu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace the header brand emoji with a play-badge logo

Browse Source 
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>
This commit is contained in:
rmsitz
2026-08-23 20:55:36 -04:00
co-authored by Claude Sonnet 5
parent 21af7ae349
commit daec0742ec
5 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/course_dashboard.html
+7 -4
View File
@@ -105,9 +105,9 @@
cursor: pointer; cursor: pointer;
} }
.brand-icon { .brand-mark {
font-size: 2.2em; flex-shrink: 0;
line-height: 1; display: block;
} }
.brand h1 { .brand h1 {
@@ -901,7 +901,10 @@
<div class="app-header"> <div class="app-header">
<div class="container"> <div class="container">
<a href="/reset_course" class="brand"> <a href="/reset_course" class="brand">
<span class="brand-icon">📚</span> <svg class="brand-mark" viewBox="0 0 64 64" width="44" height="44" 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>
<div> <div>
<h1>OfflineU</h1> <h1>OfflineU</h1>
<p class="tagline">Your self-hosted course library</p> <p class="tagline">Your self-hosted course library</p>
templates/help.html
+5 -2
View File
@@ -70,7 +70,7 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.app-header .brand-icon { font-size: 1.6em; } .app-header .brand-mark { flex-shrink: 0; display: block; }
.app-header a.brand-link { .app-header a.brand-link {
color: var(--accent); color: var(--accent);
text-decoration: none; text-decoration: none;
@@ -138,7 +138,10 @@
<body> <body>
<div class="app-header"> <div class="app-header">
<div class="header-inner"> <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> <a href="/reset_course" class="brand-link">OfflineU</a>
</div> </div>
</div> </div>
templates/lesson_view.html
+7 -3
View File
@@ -79,8 +79,9 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.app-header .brand-icon { .app-header .brand-mark {
font-size: 1.6em; flex-shrink: 0;
display: block;
} }
.app-header a.brand-link { .app-header a.brand-link {
color: var(--accent); color: var(--accent);
@@ -497,7 +498,10 @@
<body> <body>
<div class="app-header"> <div class="app-header">
<div class="container"> <div class="container">
<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> <a href="/reset_course" class="brand-link">OfflineU</a>
</div> </div>
</div> </div>
templates/notes_hub.html
+5 -2
View File
@@ -72,7 +72,7 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.app-header .brand-icon { font-size: 1.6em; } .app-header .brand-mark { flex-shrink: 0; display: block; }
.app-header a.brand-link { .app-header a.brand-link {
color: var(--accent); color: var(--accent);
text-decoration: none; text-decoration: none;
@@ -217,7 +217,10 @@
<body> <body>
<div class="app-header"> <div class="app-header">
<div class="header-inner"> <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> <a href="/reset_course" class="brand-link">OfflineU</a>
</div> </div>
</div> </div>
templates/settings.html
+7 -3
View File
@@ -70,8 +70,9 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.app-header .brand-icon { .app-header .brand-mark {
font-size: 1.6em; flex-shrink: 0;
display: block;
} }
.app-header a.brand-link { .app-header a.brand-link {
color: var(--accent); color: var(--accent);
@@ -321,7 +322,10 @@
<body> <body>
<div class="app-header"> <div class="app-header">
<div class="header-inner"> <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> <a href="/reset_course" class="brand-link">OfflineU</a>
</div> </div>
</div> </div>