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

feat: add light mode support across all templates

Browse Source
This commit is contained in:
mkelvers
2026-05-07 12:21:03 +02:00
parent 0879dde851
commit 7412c9ed68
12 changed files with 200 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
templates/discover.gohtml
View File

@@ -27,21 +27,21 @@
</script>
<div class="flex flex-col gap-12 pb-12">
<section class="relative flex flex-col items-center justify-center overflow-hidden rounded-2xl bg-neutral-900 px-6 py-24 text-center">
<section class="relative flex flex-col items-center justify-center overflow-hidden rounded-2xl bg-background-surface px-6 py-24 text-center ring-1 ring-border">
<div class="from-accent/10 absolute inset-0 bg-linear-to-b to-transparent opacity-50"></div>
<div class="relative z-10 flex max-w-2xl flex-col items-center gap-6">
<h1 class="text-4xl font-bold tracking-tight text-white sm:text-5xl">
<h1 class="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
Don't know what to watch?
</h1>
<p class="text-lg text-neutral-400">
<p class="text-lg text-foreground-muted">
Let us pick something for you from our vast collection of anime.
</p>
<button
id="surprise-btn"
class="group bg-accent relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full px-8 py-4 font-medium text-black transition-transform hover:scale-105 active:scale-95 disabled:opacity-70 disabled:hover:scale-100"
class="group bg-accent relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full px-8 py-4 font-medium text-on-accent transition-transform hover:scale-105 active:scale-95 disabled:opacity-70 disabled:hover:scale-100"
onclick="handleSurpriseMe()"
>
<span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-black border-t-transparent"></span>
<span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-on-accent border-t-transparent"></span>
<svg id="surprise-icon" class="h-5 w-5 transition-transform group-hover:rotate-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
@@ -53,7 +53,7 @@
{{/* Trending Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-white">Trending This Season</h2>
<h2 class="text-xl font-semibold text-foreground">Trending This Season</h2>
<a href="/browse?order_by=popularity&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
@@ -64,7 +64,7 @@
{{/* Upcoming Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-white">Highly Anticipated</h2>
<h2 class="text-xl font-semibold text-foreground">Highly Anticipated</h2>
<a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
@@ -75,7 +75,7 @@
{{/* Top Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-semibold text-white">All-Time Greats</h2>
<h2 class="text-xl font-semibold text-foreground">All-Time Greats</h2>
<a href="/browse?order_by=score&sort=desc" class="text-accent text-sm hover:underline">View all</a>
</div>
<div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">
@@ -91,7 +91,10 @@
gap: 1rem;
}
.skeleton {
background: linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%);
background: light-dark(
linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%),
linear-gradient(90deg, #1f1f1f 25%, #2a2a2a 50%, #1f1f1f 75%)
);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
}