mkelvers/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust github and theme toggle icon sizes

Browse Source
This commit is contained in:
mkelvers
2026-04-25 21:56:58 +02:00
parent b500e01498
commit 431acf6055
2 changed files with 53 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
static/theme.ts
View File

@@ -9,11 +9,11 @@ const getSavedTheme = (): Theme => {
}
const applyTheme = (theme: Theme): void => {
const html = document.documentElement
html.setAttribute('data-theme', theme)
localStorage.setItem(STORAGE_KEY, theme)
updateToggleButton(theme)
}
const html = document.documentElement
html.setAttribute('data-theme', theme)
localStorage.setItem(STORAGE_KEY, theme)
updateToggleButtons(theme)
}
const cycleTheme = (): void => {
const current = getSavedTheme()
@@ -21,38 +21,51 @@ const cycleTheme = (): void => {
applyTheme(next)
}
const updateToggleButton = (theme: Theme): void => {
const btn = document.getElementById('theme-toggle')
if (!btn) return
const updateToggleButtons = (theme: Theme): void => {
const headerBtn = document.getElementById('theme-toggle')
const footerBtn = document.getElementById('footer-theme-toggle')
const updateButton = (btn: HTMLButtonElement | null): void => {
if (!btn) return
const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
if (label) {
label.textContent = theme
}
const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
if (label) {
label.textContent = theme
}
const svg = btn.querySelector('svg')
if (!svg) return
const svg = btn.querySelector('svg')
if (!svg) return
if (theme === 'light') {
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"/>'
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')
}
}
if (theme === 'light') {
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"/>'
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 => {
const saved = getSavedTheme()
applyTheme(saved)
updateButton(headerBtn)
updateButton(footerBtn)
}
const btn = document.getElementById('theme-toggle')
if (btn) {
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)

26
web/shared/layout/layout.templ
View File

@@ -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">
<div class="mx-auto max-w-(--breakpoint-2xl) px-4 flex flex-col items-center gap-4">
<div class="flex gap-4">
<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 justify-between items-center">
<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>