From 44d256179bbdf01b3e9cf497b341b0a4b2e46c67 Mon Sep 17 00:00:00 2001 From: Smittix Date: Thu, 12 Mar 2026 22:24:35 +0000 Subject: [PATCH] fix(branding): use inline SVG for branded "i" instead of CSS pseudo-element MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The CSS ::after dot positioning was unreliable across fonts and sizes. Switch to an inline SVG of the "i" glyph (green dot + cyan stem/bars) extracted from the logo — renders pixel-perfect at any size. Co-Authored-By: Claude Opus 4.6 --- static/css/core/layout.css | 27 +++++++++++--------------- templates/adsb_dashboard.html | 2 +- templates/adsb_history.html | 2 +- templates/agents.html | 2 +- templates/ais_dashboard.html | 2 +- templates/index.html | 4 ++-- templates/layout/base.html | 2 +- templates/layout/base_dashboard.html | 2 +- templates/partials/help-modal.html | 2 +- templates/partials/settings-modal.html | 4 ++-- templates/satellite_dashboard.html | 2 +- 11 files changed, 23 insertions(+), 28 deletions(-) diff --git a/static/css/core/layout.css b/static/css/core/layout.css index fd0958a..9c419b8 100644 --- a/static/css/core/layout.css +++ b/static/css/core/layout.css @@ -87,25 +87,20 @@ color: var(--text-primary); } -/* Branded "i" — cyan letter with green dot, matching the logo icon. - Uses a normal "i" glyph. The ::after pseudo-element overlays a green - circle on top of the font's native dot to recolor it. */ +/* Branded "i" — inline SVG that matches the logo icon. + Sized to 0.9em so it sits naturally alongside text at any font-size. */ .brand-i { - color: var(--accent-cyan); - position: relative; display: inline-block; + width: 0.55em; + height: 0.9em; + vertical-align: baseline; + position: relative; + top: 0.05em; } -.brand-i::after { - content: ''; - position: absolute; - top: 0.12em; - left: 50%; - transform: translateX(-50%); - width: 0.25em; - height: 0.25em; - background: var(--accent-green); - border-radius: 50%; - box-shadow: 0 0 0.4em var(--accent-green); +.brand-i svg { + display: block; + width: 100%; + height: 100%; } .app-logo-tagline { diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html index 670bed3..0c98734 100644 --- a/templates/adsb_dashboard.html +++ b/templates/adsb_dashboard.html @@ -51,7 +51,7 @@
diff --git a/templates/adsb_history.html b/templates/adsb_history.html index 68f7871..45e3a10 100644 --- a/templates/adsb_history.html +++ b/templates/adsb_history.html @@ -22,7 +22,7 @@
Live Radar diff --git a/templates/agents.html b/templates/agents.html index d414ece..5f5f5b6 100644 --- a/templates/agents.html +++ b/templates/agents.html @@ -281,7 +281,7 @@

- iNTERCEPT // Remote Agents + NTERCEPT // Remote Agents

diff --git a/templates/ais_dashboard.html b/templates/ais_dashboard.html index 07ea3a2..7f3d36a 100644 --- a/templates/ais_dashboard.html +++ b/templates/ais_dashboard.html @@ -51,7 +51,7 @@
diff --git a/templates/index.html b/templates/index.html index bab72de..dca2387 100644 --- a/templates/index.html +++ b/templates/index.html @@ -293,7 +293,7 @@
-

iNTERCEPT

+

NTERCEPT

// See the Invisible

v{{ version }}
PAGER diff --git a/templates/layout/base.html b/templates/layout/base.html index 3f15938..066cf6a 100644 --- a/templates/layout/base.html +++ b/templates/layout/base.html @@ -53,7 +53,7 @@ - iNTERCEPT + NTERCEPT // See the Invisible diff --git a/templates/layout/base_dashboard.html b/templates/layout/base_dashboard.html index c153fc8..cedf87b 100644 --- a/templates/layout/base_dashboard.html +++ b/templates/layout/base_dashboard.html @@ -151,7 +151,7 @@ {% block dashboard_title %}DASHBOARD{% endblock %} - // iNTERCEPT + // NTERCEPT
diff --git a/templates/partials/help-modal.html b/templates/partials/help-modal.html index fb2ad9a..69ae7e4 100644 --- a/templates/partials/help-modal.html +++ b/templates/partials/help-modal.html @@ -7,7 +7,7 @@