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

style: improve typography hierarchy with weight contrast

Browse Source
This commit is contained in:
mkelvers
2026-05-05 18:04:51 +02:00
parent 5930091af5
commit 0679b483c3
4 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
templates/browse.gohtml
View File

@@ -3,16 +3,20 @@
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div class="flex flex-col gap-6">
<div class="flex items-end justify-between">
<h1 class="text-lg font-normal text-neutral-300">Browse</h1>
<h1 class="text-xl font-semibold text-white">Browse</h1>
</div>
{{template "filter_bar" .}}
<main class="w-full">
{{if eq (len .Animes) 0}}
<div class="flex h-64 flex-col items-center justify-center gap-2 text-neutral-400">
<div class="flex h-64 flex-col items-center justify-center gap-4 text-neutral-400">
<svg class="h-12 w-12 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8" /><line x1="21" y1="21" x2="16.65" y2="16.65" /></svg>
<p>No anime found matching your filters.</p>
<p class="text-neutral-300">No anime found</p>
<div class="flex gap-2">
<a href="/browse" class="px-4 py-2 text-sm bg-white/10 hover:bg-white/20 text-neutral-200 transition-colors">Clear filters</a>
<a href="/browse?order_by=popularity&sort=desc" class="px-4 py-2 text-sm bg-accent/20 hover:bg-accent/30 text-accent transition-colors">Browse popular</a>
</div>
</div>
{{else}}
<div id="anime-grid" class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6">

4
templates/components/anime_card.gohtml
View File

@@ -23,7 +23,7 @@
{{if $withActions}}
<div class="absolute inset-0 z-10 flex flex-col p-3 {{if $hasTopBadge}}pt-10{{end}} opacity-0 transition-opacity duration-300 group-hover:opacity-100">
{{if not $isWatchlist}}
<h3 class="mb-1.5 line-clamp-2 text-sm font-medium text-white shadow-black drop-shadow-md">
<h3 class="mb-1.5 line-clamp-2 text-base font-semibold text-white shadow-black drop-shadow-md">
{{$displayTitle}}
</h3>
{{end}}
@@ -67,7 +67,7 @@
{{end}}
</a>
{{if and $withActions (not $hideTitle)}}
<h3 class="line-clamp-2 text-sm font-medium text-white">
<h3 class="line-clamp-2 text-sm font-medium text-neutral-200">
{{$displayTitle}}
</h3>
{{end}}

4
templates/index.gohtml
View File

@@ -7,7 +7,7 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-normal text-neutral-300">Currently Airing</h2>
<h2 class="text-lg font-semibold text-neutral-200">Currently Airing</h2>
<a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-neutral-400 transition-colors hover:text-white">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>
@@ -20,7 +20,7 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-normal text-neutral-300">Most Popular</h2>
<h2 class="text-lg font-semibold text-neutral-200">Most Popular</h2>
<a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-neutral-400 transition-colors hover:text-white">
See more
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-0.5"><path d="m9 18 6-6-6-6"/></svg>

14
templates/watchlist.gohtml
View File

@@ -2,7 +2,7 @@
{{define "content"}}
{{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
<div id="watchlist-content" class="flex w-full flex-col gap-6">
<h1 class="text-lg font-normal text-neutral-300">Watchlist</h1>
<h1 class="text-xl font-semibold text-white">Watchlist</h1>
<div class="flex flex-wrap items-center justify-between gap-4">
<div class="flex flex-wrap items-center gap-6">
@@ -59,10 +59,14 @@
{{end}}
{{if eq (len $.AllEntries) 0}}
<div class="col-span-full flex flex-col items-center justify-center gap-2 py-24 text-neutral-400">
<svg class="h-12 w-12 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
<p class="text-lg">Your watchlist is empty.</p>
<a href="/" class="text-accent hover:text-accent/80 transition-colors">Browse anime</a>
<div class="col-span-full flex flex-col items-center justify-center gap-4 py-24 text-neutral-400">
<svg class="h-16 w-16 opacity-30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
<p class="text-lg text-neutral-300 font-medium">Your watchlist is empty</p>
<p class="text-sm text-neutral-500">Start adding anime to keep track of what you want to watch</p>
<div class="flex gap-3 mt-2">
<a href="/" class="px-5 py-2.5 text-sm font-medium bg-accent-warm/20 hover:bg-accent-warm/30 text-accent-warm transition-colors">Browse anime</a>
<a href="/discover" class="px-5 py-2.5 text-sm font-medium bg-white/10 hover:bg-white/20 text-neutral-200 transition-colors">Discover new</a>
</div>
</div>
{{end}}
</div>