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

ui: implement clean dark theme without borders

Browse Source
This commit is contained in:
mkelvers
2026-04-09 12:34:43 +02:00
parent bbc90095bd
commit d555a8a84f
3 changed files with 68 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
internal/shared/ui/icons/icons.templ Normal file
View File

@@ -0,0 +1,9 @@
package icons
templ LogoIcon(class string) {
<svg xmlns="http://www.w3.org/2000/svg" class={ class } viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linejoin="miter">
<!-- clean, superminimal, abstract logo without border-radius -->
<rect x="6" y="10" width="12" height="12"></rect>
<rect x="14" y="6" width="12" height="12"></rect>
</svg>
}

11
internal/templates/layout.templ
View File

@@ -1,12 +1,15 @@
package templates
import "mal/internal/shared/ui/icons"
templ Layout(title string) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>{ title }</title>
<title>mal</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg"/>
<link rel="stylesheet" href="/static/css/style.css"/>
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
</head>
@@ -14,7 +17,9 @@ templ Layout(title string) {
<header>
<div class="header-top">
<div class="header-left">
<a href="/" class="logo">/mal</a>
<a href="/" class="logo" aria-label="mal logo">
@icons.LogoIcon("logo-svg")
</a>
<div class="nav">
<a href="/">Catalog</a>
<a href="/discover">Discover</a>
@@ -24,7 +29,7 @@ templ Layout(title string) {
</div>
</div>
<div class="header-search-wrapper">
<form action="/search" method="GET" class="header-search">
<form action="/search" method="GET" class="header-search" id="search-form">
<input type="text" id="search-input" name="q" class="search-input" placeholder="Search anime..." autocomplete="off"/>
<div id="search-dropdown" class="search-dropdown"></div>
</form>