From f4b93006e390ef8b872a9abe8577cad7df4235a4 Mon Sep 17 00:00:00 2001 From: Mathieu Moran Date: Wed, 12 Aug 2026 05:39:30 -0400 Subject: [PATCH] =?UTF-8?q?docs:=20finalize=20UI=20branding=20section=20?= =?UTF-8?q?=E2=80=94=20sidebar,=20logo,=20mobile=20dark=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- PLAN.md | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/PLAN.md b/PLAN.md index f2c0e02..df4c9db 100644 --- a/PLAN.md +++ b/PLAN.md @@ -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 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`). - **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 - 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 - (`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` - 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. +**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 - **Pi credentials/SSH**: `ssh yaris@`. Confirm current IP before connecting (varies by