hansdezwart/bgclock
1
0
Fork 0
Code Issues Actions Releases Activity

Centre the reset glyph in its viewBox

Browse Source 
The armed ring looked a couple of pixels low. The ring was already exactly
centred on the button — measured 0.00px off — but the glyph wasn't: its arc
is a circle centred at (12,11) in a 24-unit viewBox, so the ring and the
glyph's circle were drawn as two almost-concentric circles about 1.8px
apart, which reads as misalignment much louder than a single shape would.

Shifting the glyph down one unit puts its circle at (12,12), concentric with
the ring to 0.00px. It also fixes the icon sitting high next to its
neighbours — reset was the only one in the bar whose ink was off centre
(dy=-1.32 against 0.00 for the gear and speaker).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
hansdezwart
2026-08-11 11:46:45 +02:00
co-authored by Claude Opus 5
parent 0b96eb824b
commit f68a88f3e8
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public_html/index.html
+1 -1
View File
@@ -305,7 +305,7 @@
<button class="btn" id="reset" aria-label="Reset clock"> <button class="btn" id="reset" aria-label="Reset clock">
<svg class="ring" viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="20" r="18"/></svg> <svg class="ring" viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="20" r="18"/></svg>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 5v6h-6"/><path d="M20 11a8 8 0 1 0-2.3 5.3"/> <path d="M20 6v6h-6"/><path d="M20 12a8 8 0 1 0-2.3 5.3"/>
</svg> </svg>
</button> </button>
<button class="btn" id="playpause" aria-label="Pause clock"> <button class="btn" id="playpause" aria-label="Pause clock">