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

fix: standardize headings and button styles

Browse Source
This commit is contained in:
mkelvers
2026-05-25 01:37:30 +02:00
parent 019a519b81
commit 900e56d7ca
2 changed files with 15 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
templates/discover.gohtml
View File

@@ -39,22 +39,21 @@
</script>
<div class="flex flex-col gap-12 pb-12">
<section class="relative flex flex-col items-center justify-center overflow-hidden bg-background-surface px-6 py-24 text-center">
<div class="absolute inset-0 opacity-40" style="background: radial-gradient(60% 60% at 50% 0%, rgba(0,0,0,0.06), transparent 70%);"></div>
<div class="relative z-10 flex max-w-2xl flex-col items-center gap-6">
<h1 class="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
<section class="flex flex-col items-center justify-center bg-background-surface px-6 py-16 text-center">
<div class="flex max-w-2xl flex-col items-center gap-5">
<h1 class="leading-[1.15] text-3xl font-normal tracking-[-0.02em] text-foreground sm:text-4xl">
Don't know what to watch?
</h1>
<p class="text-lg text-foreground-muted">
<p class="text-base text-foreground-muted">
Let us pick something for you from our vast collection of anime.
</p>
<button
id="surprise-btn"
class="group relative inline-flex items-center justify-center gap-2 overflow-hidden bg-foreground px-7 py-3.5 font-medium text-background transition-colors hover:bg-foreground/90 active:scale-[0.98] disabled:opacity-70"
class="group relative inline-flex h-11 items-center justify-center gap-2 bg-background-button px-5 text-base font-normal text-foreground transition-colors hover:bg-background-button-hover active:bg-background-button-hover disabled:opacity-70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent sm:h-12"
onclick="handleSurpriseMe()"
>
<span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-background 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">
<svg id="surprise-icon" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
<span id="surprise-text">Surprise Me</span>
@@ -65,8 +64,8 @@
{{/* Trending Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-normal text-foreground">Trending This Season</h2>
<a href="/browse?order_by=popularity&sort=desc" class="text-accent text-sm hover:underline">View all</a>
<h2 class="text-base font-normal text-foreground">Trending This Season</h2>
<a href="/browse?order_by=popularity&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
</div>
<div hx-get="/api/discover/trending" hx-trigger="load" hx-swap="outerHTML">
{{template "discover_skeleton"}}
@@ -76,8 +75,8 @@
{{/* Upcoming Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-normal 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>
<h2 class="text-base font-normal text-foreground">Highly Anticipated</h2>
<a href="/browse?status=upcoming&order_by=members&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
</div>
<div hx-get="/api/discover/upcoming" hx-trigger="load" hx-swap="outerHTML">
{{template "discover_skeleton"}}
@@ -87,8 +86,8 @@
{{/* Top Section */}}
<section class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h2 class="text-xl font-normal text-foreground">All-Time Greats</h2>
<a href="/browse?order_by=score&sort=desc" class="text-accent text-sm hover:underline">View all</a>
<h2 class="text-base font-normal text-foreground">All-Time Greats</h2>
<a href="/browse?order_by=score&sort=desc" class="text-sm text-foreground-muted transition-colors hover:text-foreground">View all</a>
</div>
<div hx-get="/api/discover/top" hx-trigger="load" hx-swap="outerHTML">
{{template "discover_skeleton"}}

6
templates/index.gohtml
View File

@@ -9,7 +9,7 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-normal text-foreground">Currently Airing</h2>
<h2 class="text-base font-normal text-foreground">Currently Airing</h2>
<a href="/browse?status=airing&order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
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>
@@ -22,7 +22,7 @@
<section class="w-full">
<div class="mb-4 flex items-end justify-between">
<h2 class="text-lg font-normal text-foreground">Most Popular</h2>
<h2 class="text-base font-normal text-foreground">Most Popular</h2>
<a href="/browse?order_by=popularity&sort=desc" class="group flex items-center gap-1 text-sm text-foreground-muted transition-colors hover:text-foreground">
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>
@@ -77,7 +77,7 @@
{{define "continue_watching_skeleton"}}
<section id="continue-watching-section" class="w-full">
<h2 class="mb-3 text-lg font-normal text-foreground">Continue Watching</h2>
<h2 class="mb-3 text-base font-normal text-foreground">Continue Watching</h2>
<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto pb-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden lg:[-ms-overflow-style:auto] lg:[scrollbar-width:thin] lg:[scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] lg:[&::-webkit-scrollbar]:block lg:[&::-webkit-scrollbar]:h-2 lg:[&::-webkit-scrollbar-track]:bg-[var(--scrollbar-track)] lg:[&::-webkit-scrollbar-track]:rounded-none lg:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb)] lg:[&::-webkit-scrollbar-thumb]:rounded-none lg:[&::-webkit-scrollbar-thumb:hover]:bg-[var(--scrollbar-thumb-hover)]">
{{range (seq 3)}}
<div class="flex w-70 shrink-0 snap-start flex-col gap-2 2xl:w-lg">