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

feat: add footer with github link, theme toggle, and copyright

Browse Source
This commit is contained in:
mkelvers
2026-04-25 21:40:14 +02:00
parent 9446e332f9
commit b500e01498
1 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@ package layout
import (
"mal/web/components/icons"
"time"
)
templ Layout(title string, showHeader bool) {
@@ -25,7 +26,7 @@ templ Layout(title string, showHeader bool) {
<script src="/dist/static/player.js" defer></script>
</head>
<body
class="min-h-screen bg-(--bg) text-(--text) font-(--font) text-sm leading-normal"
class="min-h-screen bg-(--bg) text-(--text) font-(--font) text-sm leading-normal flex flex-col"
>
if showHeader {
<header class="sticky top-0 z-100 bg-(--header)">
@@ -99,11 +100,36 @@ templ Layout(title string, showHeader bool) {
</header>
}
<main class={
"mx-auto w-full max-w-(--breakpoint-2xl) px-4 pt-5 pb-8 max-lg:px-3 max-lg:pb-6",
"mx-auto w-full max-w-(--breakpoint-2xl) px-4 pt-5 pb-8 max-lg:px-3 max-lg:pb-6 flex-1",
templ.KV("flex min-h-screen items-center justify-center px-4 py-0", !showHeader),
}>
{ 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">
<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"/>
</svg>
</a>
<button
id="footer-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>
<p class="text-sm">
&copy; {time.Now().Year()} mal. Open source anime tracking.
</p>
</div>
</footer>
<script src="/dist/static/search.js" defer></script>
</body>
</html>