fix: adjust github and theme toggle icon sizes

static/theme.ts

@@ -9,11 +9,11 @@ const getSavedTheme = (): Theme => {
 }
 
 const applyTheme = (theme: Theme): void => {
-  const html = document.documentElement
+   const html = document.documentElement
-  html.setAttribute('data-theme', theme)
+   html.setAttribute('data-theme', theme)
-  localStorage.setItem(STORAGE_KEY, theme)
+   localStorage.setItem(STORAGE_KEY, theme)
-  updateToggleButton(theme)
+   updateToggleButtons(theme)
-}
+ }
 
 const cycleTheme = (): void => {
   const current = getSavedTheme()
@@ -21,38 +21,51 @@ const cycleTheme = (): void => {
   applyTheme(next)
 }
 
-const updateToggleButton = (theme: Theme): void => {
+const updateToggleButtons = (theme: Theme): void => {
-  const btn = document.getElementById('theme-toggle')
+   const headerBtn = document.getElementById('theme-toggle')
-  if (!btn) return
+   const footerBtn = document.getElementById('footer-theme-toggle')
    
-  const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
+   const updateButton = (btn: HTMLButtonElement | null): void => {
-  if (label) {
+     if (!btn) return
-    label.textContent = theme
-  }
 
-  const svg = btn.querySelector('svg')
+     const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
-  if (!svg) return
+     if (label) {
+       label.textContent = theme
+     }
 
-  if (theme === 'light') {
+     const svg = btn.querySelector('svg')
-    svg.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'
+     if (!svg) return
-    svg.setAttribute('stroke', 'currentColor')
-    svg.setAttribute('fill', 'none')
-  } else {
-    svg.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'
-    svg.setAttribute('stroke', 'currentColor')
-    svg.setAttribute('fill', 'none')
-  }
-}
 
-const initTheme = (): void => {
+     if (theme === 'light') {
-  const saved = getSavedTheme()
+       svg.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'
-  applyTheme(saved)
+       svg.setAttribute('stroke', 'currentColor')
+       svg.setAttribute('fill', 'none')
+     } else {
+       svg.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'
+       svg.setAttribute('stroke', 'currentColor')
+       svg.setAttribute('fill', 'none')
+     }
+   }
 
-  const btn = document.getElementById('theme-toggle')
+   updateButton(headerBtn)
-  if (btn) {
+   updateButton(footerBtn)
-    btn.addEventListener('click', cycleTheme)
+ }
-  }
+
-}
+ const initTheme = (): void => {
+   const saved = getSavedTheme()
+   applyTheme(saved)
+
+   const headerBtn = document.getElementById('theme-toggle')
+   const footerBtn = document.getElementById('footer-theme-toggle')
+   
+   if (headerBtn) {
+     headerBtn.addEventListener('click', cycleTheme)
+   }
+   
+   if (footerBtn) {
+     footerBtn.addEventListener('click', cycleTheme)
+   }
+ }
 
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initTheme)

web/shared/layout/layout.templ

@@ -85,17 +85,7 @@ templ Layout(title string, showHeader bool) {
 									></div>
 							</form>
 						</div>
-						<button
+
-							id="theme-toggle"
-							type="button"
-							class="inline-flex h-9 w-9 shrink-0 cursor-pointer items-center justify-center border-0 bg-transparent text-(--text-muted) hover:text-(--text)"
-							aria-label="Toggle theme"
-							title="Toggle theme"
-						>
-							<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-								<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-							</svg>
-						</button>
 					</div>
 				</header>
 			}
@@ -105,9 +95,12 @@ templ Layout(title string, showHeader bool) {
 			}>
 				{ children... }
 			</main>
-			<footer class="border-t border-(--panel-soft) bg-(--panel) text-(--text-muted) text-center py-6 mt-auto">
+			<footer class="border-t border-(--panel-soft) bg-(--panel) text-(--text-muted) py-6 mt-auto">
-				<div class="mx-auto max-w-(--breakpoint-2xl) px-4 flex flex-col items-center gap-4">
+				<div class="mx-auto max-w-(--breakpoint-2xl) px-4 flex justify-between items-center">
-					<div class="flex gap-4">
+					<p class="text-sm">
+						&copy; {time.Now().Year()} mal. Open source anime tracking.
+					</p>
+					<div class="flex items-center gap-4">
 						<a href="https://github.com/mkelvers/mal" target="_blank" rel="noopener noreferrer" class="text-(--text-muted) hover:text-(--text) hover:no-underline">
 							<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 								<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
@@ -120,14 +113,11 @@ templ Layout(title string, showHeader bool) {
 							aria-label="Toggle theme"
 							title="Toggle theme"
 						>
-							<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+							<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 								<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
 							</svg>
 						</button>
 					</div>
-					<p class="text-sm">
-						&copy; {time.Now().Year()} mal. Open source anime tracking.
-					</p>
 				</div>
 			</footer>
 			<script src="/dist/static/search.js" defer></script>