From f19abf06d19f959b30ba2cff7e535570486433ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cihat=20G=C3=BCnd=C3=BCz?= Date: Fri, 19 Jun 2026 18:03:40 +0200 Subject: [PATCH 1/2] Match the theme-toggle icon size to the search icon in the header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The header search button and theme toggle have pixel-identical button boxes, but the theme-toggle's filled contrast disc (radius 10, ∅20 in a 24 viewBox) rendered about 25% wider and far heavier than the search magnifier's stroked lens (radius 8, ∅16). Even though the boxes lined up, the two icons looked mismatched in size on every generated site. Pad the moon icon's viewBox to "-3 -3 30 30". That scales the drawn glyph to 0.8 (24/30) and keeps it centered, so its disc diameter equals the magnifier lens. The 16x16 element box is untouched, so the button height and vertical baseline stay exactly the same; only the icon's drawn size changes. The icon is emitted by core PageShell into every page's header, so the fix is universal: existing sites pick it up on their next rebuild and newly scaffolded sites are born correct. No CSS, no layout, and no other markup changes; a full-site rebuild diff touches only this viewBox. --- .../Plugins/OutputFileRenderer+PageShell.swift | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift b/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift index 326576c..59e8d36 100644 --- a/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift +++ b/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift @@ -589,9 +589,16 @@ extension OutputFileRenderer { navParts.append("
") } - // Theme toggle – inline SVG icon (no Font Awesome dependency) + // Theme toggle – inline SVG icon (no Font Awesome dependency). + // The contrast glyph is a filled disc of radius 10 (∅20 in a 24 viewBox), whereas the + // search magnifier is a stroked lens of radius 8 (∅16). At equal 16×16 boxes the filled + // disc therefore renders ~25% wider and far heavier than the magnifier, so the two header + // action icons look mismatched in size even though their button boxes are pixel-identical. + // Padding the viewBox to -3 -3 30 30 scales the drawn glyph to 0.8 (24/30) and keeps it + // centered, making the disc diameter equal the magnifier lens while the 16×16 element box – + // and thus the button height and baseline – stays exactly the same. if nav.showThemeToggle ?? true { - let themeIcon = "" + let themeIcon = "" navParts.append("") } From 2752df2a721c33decdb6b38c10172025fc346210 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cihat=20G=C3=BCnd=C3=BCz?= Date: Fri, 19 Jun 2026 21:30:04 +0200 Subject: [PATCH 2/2] Match the language-picker globe size to the search icon in the header MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The globe is a stroked circle of radius 10 (∅20 in a 24 viewBox), so on multilingual sites it rendered wider than the search magnifier's lens (∅16) and, after the theme toggle was normalised, became the largest circle in the action cluster. Apply the same optical-only fix as the theme toggle: pad the globe icon's viewBox to "-3 -3 30 30", scaling the drawn circle to 0.8 so its diameter matches the magnifier lens. The 16x16 element box is untouched, so the button height and baseline stay exactly the same; only the icon's drawn size changes. Search lens, globe, and moon now read as one circle size. Emitted by core PageShell, so the fix is universal and a full-site rebuild diff touches only this viewBox. --- Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift b/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift index 59e8d36..0885290 100644 --- a/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift +++ b/Sources/SiteKit/Plugins/OutputFileRenderer+PageShell.swift @@ -585,7 +585,11 @@ extension OutputFileRenderer { // Language picker shell (menu populated by theme JS for custom styling) if self.config.isMultilingual { let langUpper = self.uiStrings.locale.uppercased() - let globeIcon = "" + // Globe is a stroked circle of radius 10 (∅20), so like the theme toggle below it would + // otherwise render wider than the search lens (∅16). Same fix: pad the viewBox to + // -3 -3 30 30 so the drawn circle matches the magnifier lens while the 16×16 element box + // (and the button height/baseline) stays exactly the same. See the theme toggle for detail. + let globeIcon = "" navParts.append("
") }