commit 1857a25cd8c345818b4c97deda2a0f500e3f2e70 parent c070e8dcd84851d54d6692a330ac88c973046cea Author: brookjeynes <me@brookjeynes.dev> Date: Sat, 13 Jun 2026 11:53:41 +1000 feat: add header and footer Signed-off-by: brookjeynes <me@brookjeynes.dev> Diffstat:
| M | internal/server/ui/layouts/base/base.templ | | | 19 | +++++++++++++++++++ |
| M | static/minimal.css | | | 22 | ++++++++++++++++++++++ |
2 files changed, 41 insertions(+), 0 deletions(-)
diff --git a/internal/server/ui/layouts/base/base.templ b/internal/server/ui/layouts/base/base.templ @@ -1,5 +1,22 @@ package base +templ Header() { + <header> + <a href="/">lyrics</a> + <nav aria-label="Primary navigation"> + <li><a href="/song/new">new song</a></li> + <li><a href="/album/new">new album</a></li> + <li><a href="/artist/new">new artist</a></li> + </nav> + </header> +} + +templ Footer() { + <footer> + <a href="/">lyrics</a> + </footer> +} + templ Base(params BaseParams) { <!DOCTYPE html> <html lang="en"> @@ -19,8 +36,10 @@ templ Base(params BaseParams) { </head> <body> <main> + @Header() <section class="toast-container"></section> { children... } + @Footer() </main> </body> <script> diff --git a/static/minimal.css b/static/minimal.css @@ -206,6 +206,28 @@ label { } } +header { + display: flex; + justify-content: space-between; + gap: 15px; +} + +nav { + display: flex; + gap: 15px; + list-style: none; + + a { + text-decoration: none; + } + + a[aria-selected="true"] { + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 3px; + } +} + [role="tablist"] { display: flex; gap: 15px;