quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: finalize UI branding section — sidebar, logo, mobile dark theme

Browse Source
This commit is contained in:
Mathieu Moran
2026-08-12 05:39:30 -04:00
parent db971ab0e3
commit f4b93006e3
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PLAN.md
+20 -4
View File
@@ -2212,18 +2212,34 @@ The app reuses the existing Pi REST API surface with no changes:
companion, not a standalone tool. Cached trip data from the last sync is a nice-to-have companion, not a standalone tool. Cached trip data from the last sync is a nice-to-have
but not required for v1. but not required for v1.
### UI Branding (2026-08-12) ### UI Branding (2026-08-12) — ✅ DONE
**Sidebar & logo redesign:**
- **Sidebar background**: changed from dark navy (`#1a1a2e`) to dark gray (`#1c1c1e`). - **Sidebar background**: changed from dark navy (`#1a1a2e`) to dark gray (`#1c1c1e`).
- **Logo**: replaced `fa-car` icon + text with a styled **YARIS-OBD** wordmark using - **Logo**: replaced `fa-car` icon + text with a styled **YARIS-OBD** wordmark using
**Racing Sans One** (free Google Font, SIL OFL license, DMCA-safe). White italic text **Racing Sans One** (free Google Font, SIL OFL license, DMCA-safe). White italic text
with a red (`#e63946`) underline accent on the dark sidebar. with a red (`#e63946`) underline accent on the dark sidebar. Iterated through
"YARIS" → "yaris-obd" (lowercase) → "YARIS-OBD" (final all-caps with dash).
- **Applied to both**: Pi (`templates/base.html`) and remote server - **Applied to both**: Pi (`templates/base.html`) and remote server
(`server/templates/base.html`) + mobile topbar on both. (`server/templates/base.html`) — sidebar brand + mobile topbar logo.
- **CSS**: new `.sidebar-brand-logo` class in `static/yaris.css` with `::after` - **CSS**: new `.sidebar-brand-logo` class in `static/yaris.css` with `::after`
pseudo-element for the accent underline. Collapsed sidebar shrinks the logo and pseudo-element for the red accent underline. Collapsed sidebar shrinks the logo and
hides the underline. hides the underline.
**Mobile dark theme:**
- **Bottom nav**: white background → dark (`#1c1c1e`), white icons/text, subtle white
top border, deeper shadow. Active item is pure white; inactive items are 55% opacity
white (was gray `#6c757d` with blue active).
- **Mobile topbar**: white → dark on screens < 768px (no sidebar on mobile, so the
topbar becomes the header). White text, white-outline buttons, semi-transparent
form controls, white bell icon.
- **Mobile logo**: uses same `sidebar-brand-logo` class → Racing Sans One font + red
underline accent, sized down to 1.2rem for the narrower mobile topbar.
- **Desktop topbar**: unchanged — remains white, contrasts with the dark sidebar.
**Deployed to production:** both Pi (`yaris-obd.service` restart) and Unraid server
(`docker compose up -d --build`) on 2026-08-12. Verified CSS served correctly on both.
## Working Notes / Environment Gotchas ## Working Notes / Environment Gotchas
- **Pi credentials/SSH**: `ssh yaris@<pi-ip>`. Confirm current IP before connecting (varies by - **Pi credentials/SSH**: `ssh yaris@<pi-ip>`. Confirm current IP before connecting (varies by