Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 14:50:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

fix(branding): use inline SVG for branded "i" instead of CSS pseudo-element

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-03-12 22:24:35 +00:00
parent 3c05429041
commit 44d256179b
11 changed files with 23 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
static/css/core/layout.css
View File

@@ -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 {