edufeed/2026_06_19_Workshop_Jugend_hackt
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: use the alpaca logo for the :jh: emoji and fix reacted-chip contrast

Browse source 
Replace the placeholder JH badge with the real Jugend Hackt alpaca logo on a
white backdrop so it reads on any chip. Indicate a reaction you made with an
accent ring instead of a solid accent fill, so custom emoji no longer merge
into the background.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Steffen Rörtgen 2026-06-17 14:46:51 +02:00
commit e5b07006c7
2 changed files with 2 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
public/emoji/jh.svg
View file

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" fill="#7c5cff"/><text x="12" y="16" font-family="system-ui,sans-serif" font-size="9" font-weight="700" text-anchor="middle" fill="#fff">JH</text></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 77 77"><rect width="77" height="77" rx="16" fill="#FFFFFF"/><g fill="#16181f"><rect x="14" y="42" width="7" height="7"/><rect x="56" y="42" width="7" height="7"/><polygon points="42 56 35 56 35 49 28 49 28 63 49 63 49 49 42 49 42 56"/></g><path fill="#7c5cff" d="M70,7V0H56V7H49v7H28V7H21V0H7V7H0V63H7v7h7v7H63V70h7V63h7V7Zm0,49H63v7H56v7H21V63H14V56H7V35h7V28H63v7h7Z"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 260 B

After

Width:  |  Height:  |  Size: 431 B

Before After
Before After

2
src/styles.css
View file

@ -40,7 +40,7 @@ input, textarea { width:100%; font-size:1.1rem; padding:14px; border-radius:12px
.note.reply { margin-left:16px; border-left:2px solid var(--border); border-radius:0 12px 12px 0; }
.note .reactions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.note .reactions button { width:auto; padding:4px 10px; font-size:1rem; line-height:1; background:var(--secondary); color:var(--fg); border-radius:999px; display:inline-flex; align-items:center; gap:5px; }
.note .reactions button.reacted { background:var(--accent); color:#fff; }
.note .reactions button.reacted { box-shadow: inset 0 0 0 2px var(--accent); color:var(--accent); }
.note .reactions .count { font-size:0.8rem; }
.cemoji { width:1.2em; height:1.2em; vertical-align:-0.2em; }
.note .reactions .react-add { background:var(--secondary); color:var(--muted); }