Centre the reset glyph in its viewBox
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:
@@ -305,7 +305,7 @@
|
||||
<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 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>
|
||||
</button>
|
||||
<button class="btn" id="playpause" aria-label="Pause clock">
|
||||
|
||||
Reference in New Issue
Block a user