Kessinen/Levyraati26_go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply the theme: tokens, Oswald, song cards, toasts

Browse Source 
The theme handoff encoded as CSS custom properties rather than a Tailwind
config, since there is no Tailwind here. Palette, spacing, radii, shadows and
motion follow it as written; docs/theme.md lists what differs and why.

- Oswald vendored as a 21KB variable woff2, latin subset, no CDN. Its phantom
  weight 900 resolved to 700 — loading a weight you don't have is what made
  the brand render differently per platform
- color-scheme: dark makes the native audio element fit the palette, which
  was the handoff's complaint about it
- Songs are text cards rather than artwork tiles, because there is no
  artwork. The unreviewed state keeps its red-brown border and gains a badge,
  so it is never carried by colour alone
- Nav is the three-column grid; the mobile menu is <details>, no JS
- Flash messages became bottom-right toasts

Favicon carried over from the Nuxt project.
This commit is contained in:
Esa Kataja
2026-07-31 22:16:29 +03:00
parent 91e136055c
commit f33f4fa4d6
16 changed files with 724 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/layout.html
+47 -13
View File
@@ -4,29 +4,63 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{.Title}} — Levyraati</title>
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml">
<link rel="preload" href="/static/fonts/oswald.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/static/style.css">
<script src="/static/htmx.min.js" defer></script>
</head>
<body>
<header>
<a class="brand" href="/">Levyraati{{if .Admin}} <span class="tag">ylläpito</span>{{end}}</a>
<nav>
<header class="topbar">
<div class="topbar-inner">
<a class="brand" href="/">Levyraati{{if .Admin}} <span class="badge admin">ylläpito</span>{{end}}</a>
{{if .Admin}}
<a href="/admin">Ylläpito</a>
<nav class="navlinks"><a href="/admin" aria-current="page">Ylläpito</a></nav>
<span></span>
{{else if .Member}}
<a href="/">Jono</a>
<a href="/songs">Kappaleet</a>
<a href="/submit">Lähetä</a>
<span class="avatar" title="{{.Member.Name}}">{{.Member.Initials}}</span>
<form method="post" action="/logout"><button class="link">Kirjaudu ulos</button></form>
<nav class="navlinks">
<a href="/" {{if eq .Path "/"}}aria-current="page"{{end}}>Jono</a>
<a href="/songs" {{if eq .Path "/songs"}}aria-current="page"{{end}}>Kappaleet</a>
<a href="/submit" {{if eq .Path "/submit"}}aria-current="page"{{end}}>Lähetä</a>
</nav>
<div class="userblock">
<span class="lines">
<span class="name">{{.Member.Name}}</span>
<span class="email">{{.Member.Email}}</span>
</span>
<span class="avatar" title="{{.Member.Name}}">{{.Member.Initials}}</span>
<form method="post" action="/logout"><button class="link">Kirjaudu ulos</button></form>
<!-- <details> is the mobile panel: no JS, and Esc/click-away come free. -->
<details class="mobilenav">
<summary aria-label="Valikko">☰</summary>
<div class="panel">
<a href="/">Jono</a>
<a href="/songs">Kappaleet</a>
<a href="/submit">Lähetä</a>
<form method="post" action="/logout"><button type="submit">Kirjaudu ulos</button></form>
</div>
</details>
</div>
{{else}}
<a href="/login">Kirjaudu</a>
<span></span>
<nav class="navlinks"><a href="/login">Kirjaudu</a></nav>
{{end}}
</nav>
</div>
</header>
{{with .Flash}}<p class="flash">{{.}}</p>{{end}}
<main {{if .Narrow}}class="narrow"{{end}}>{{template "content" .}}</main>
<main>{{template "content" .}}</main>
<footer class="sitefooter">Levyraati — kymmenen kaverin levyraati.</footer>
{{with .Flash}}
<div class="toasts">
<div class="toast" role="status">
<p>{{.}}</p>
<button class="dismiss" aria-label="Sulje"
onclick="this.closest('.toast').remove()">&times;</button>
</div>
</div>
{{end}}
</body>
</html>