calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give every hex avatar a red ring so it stands out over busy media

Browse Source
This commit is contained in:
calcazar
2026-10-21 13:10:50 -06:00
parent bc35d288da
commit 159ef5a750
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/avatar.css
+13 -3
View File
@@ -1,7 +1,17 @@
/* HexAvatar (ADR 0001, section 6). Pointy-top hexagon, width to height 0.866. */
/* The outer hexagon is a red ring (clip-path hides a real border); the face is inset inside it. */
.hex-avatar {
display: block;
flex: none;
box-sizing: border-box;
padding: 2px;
background: var(--accent);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hex-avatar-face {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: var(--tile-3);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
@@ -17,9 +27,9 @@
font-weight: 600;
letter-spacing: .02em;
}
.hex-avatar-lg.hex-avatar-initials { font-size: 16px; }
.hex-avatar-md.hex-avatar-initials { font-size: 14px; }
.hex-avatar-sm.hex-avatar-initials { font-size: 11px; }
.hex-avatar-lg .hex-avatar-initials { font-size: 16px; }
.hex-avatar-md .hex-avatar-initials { font-size: 14px; }
.hex-avatar-sm .hex-avatar-initials { font-size: 11px; }
.hex-avatar-oxblood { background: var(--hex-oxblood); }
.hex-avatar-navy { background: var(--hex-navy); }
.hex-avatar-forest { background: var(--hex-forest); }