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

82
static/css/style.css
View File

@@ -1,13 +1,13 @@
:root { :root {
--bg: #1a1a1a; --bg: #0d0d0f;
--surface: #262626; --surface: #101011;
--surface-hover: #303030; --surface-hover: #161618;
--border: #404040; --border: #222224;
--text: #e8e8e8; --text: #ffffff;
--text-muted: #999999; --text-muted: #88888a;
--link: #4a9eff; --link: #ffffff;
--link-hover: #6bb3ff; --link-hover: #dddddd;
--link-active: #9966ff; --link-active: #aaaaaa;
/* fluid typography scale */ /* fluid typography scale */
--text-xs: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem); --text-xs: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
@@ -66,7 +66,7 @@ body {
header { header {
padding: var(--space-md) var(--space-lg); padding: var(--space-md) var(--space-lg);
background: var(--surface); background: var(--surface);
border-bottom: 1px solid var(--border); border-bottom: none;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@@ -87,30 +87,37 @@ header {
} }
.logo { .logo {
font-size: var(--text-lg); display: flex;
font-weight: 700; align-items: center;
justify-content: center;
color: var(--text); color: var(--text);
transition: color 0.2s ease;
} }
.logo:hover { .logo:hover {
color: var(--text); color: var(--link-hover);
}
.logo-svg {
width: 48px;
height: 48px;
} }
.nav { .nav {
display: flex; display: flex;
gap: var(--space-lg); gap: var(--space-lg);
border-left: 1px solid var(--border);
padding-left: var(--space-lg);
} }
.nav a { .nav a {
font-size: var(--text-md); font-size: var(--text-md);
color: var(--link); color: var(--text-muted);
text-decoration: none; text-decoration: none;
transition: color 0.2s ease;
} }
.nav a:hover { .nav a:hover {
text-decoration: underline; color: #ffffff;
text-decoration: none;
} }
.header-search-wrapper { .header-search-wrapper {
@@ -134,12 +141,11 @@ header {
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-color: var(--link); border-color: var(--text-muted);
} }
.search-input:focus+.search-dropdown { .search-input:focus+.search-dropdown {
border-color: var(--link); /* No borders on active states either */
border-top-color: var(--link);
} }
.search-input::placeholder { .search-input::placeholder {
@@ -153,9 +159,8 @@ header {
left: 0; left: 0;
right: 0; right: 0;
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: none;
border-top: 1px solid var(--border); margin-top: 0;
margin-top: -1px;
max-height: clamp(300px, 50vh, 600px); max-height: clamp(300px, 50vh, 600px);
overflow-y: auto; overflow-y: auto;
z-index: 1000; z-index: 1000;
@@ -278,13 +283,31 @@ a:visited {
.catalog-grid { .catalog-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--thumb-width), 1fr)); grid-template-columns: repeat(auto-fill, minmax(var(--thumb-width), 1fr));
gap: var(--space-lg); gap: var(--space-2xl) var(--space-lg);
} }
.catalog-item { .catalog-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--space-xs); gap: var(--space-xs);
text-decoration: none;
}
.catalog-item a {
display: flex;
flex-direction: column;
gap: var(--space-xs);
text-decoration: none;
color: inherit;
}
.catalog-item a:hover {
text-decoration: none;
}
.catalog-item:hover .catalog-title,
.catalog-item a:hover .catalog-title {
color: var(--link-hover);
} }
.catalog-thumb { .catalog-thumb {
@@ -319,6 +342,8 @@ a:visited {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-decoration: none;
transition: color 0.2s;
} }
/* Loading */ /* Loading */
@@ -1041,7 +1066,7 @@ a.htmx-request {
} }
.catalog-grid { .catalog-grid {
gap: var(--space-md); gap: var(--space-xl) var(--space-md);
} }
.anime-hero { .anime-hero {
@@ -1122,7 +1147,6 @@ a.htmx-request {
cursor: pointer; cursor: pointer;
font-size: var(--text-base); font-size: var(--text-base);
padding: var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-md);
border-radius: 4px 4px 0 0;
transition: all 0.15s; transition: all 0.15s;
} }
@@ -1146,13 +1170,12 @@ a.htmx-request {
.schedule-grid { .schedule-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw + 80px, 200px), 1fr)); grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 12vw + 80px, 200px), 1fr));
gap: var(--space-lg); gap: var(--space-2xl) var(--space-lg);
} }
.schedule-card { .schedule-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden; overflow: hidden;
transition: border-color 0.15s, transform 0.15s; transition: border-color 0.15s, transform 0.15s;
text-decoration: none; text-decoration: none;
@@ -1211,7 +1234,6 @@ a.htmx-request {
.schedule-card-meta span { .schedule-card-meta span {
background: var(--surface-hover); background: var(--surface-hover);
padding: 2px 6px; padding: 2px 6px;
border-radius: 3px;
} }
.schedule-time { .schedule-time {
@@ -1273,7 +1295,6 @@ a.htmx-request {
.notification-card { .notification-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden; overflow: hidden;
transition: border-color 0.15s, transform 0.15s; transition: border-color 0.15s, transform 0.15s;
display: flex; display: flex;
@@ -1339,7 +1360,6 @@ a.htmx-request {
.notification-meta span { .notification-meta span {
background: var(--surface-hover); background: var(--surface-hover);
padding: 2px 6px; padding: 2px 6px;
border-radius: 3px;
} }
.notification-broadcast { .notification-broadcast {