From 0679b483c36c72935449eac96913e4a21387d071 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 5 May 2026 18:04:51 +0200
Subject: [PATCH] style: improve typography hierarchy with weight contrast

---
 templates/browse.gohtml                | 10 +++++++---
 templates/components/anime_card.gohtml |  4 ++--
 templates/index.gohtml                 |  4 ++--
 templates/watchlist.gohtml             | 14 +++++++++-----
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/templates/browse.gohtml b/templates/browse.gohtml
index 439b11a..e33da8d 100644
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -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">
diff --git a/templates/components/anime_card.gohtml b/templates/components/anime_card.gohtml
index c1b2deb..1e3252d 100644
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -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}}
diff --git a/templates/index.gohtml b/templates/index.gohtml
index a24a173..57c8fdf 100644
--- a/templates/index.gohtml
+++ b/templates/index.gohtml
@@ -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>
diff --git a/templates/watchlist.gohtml b/templates/watchlist.gohtml
index a98d549..cf46128 100644
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -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>