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

refactor: replace custom css utilities with tailwind arbitrary

Browse Source
This commit is contained in:
mkelvers
2026-05-24 20:06:32 +02:00
parent da9bb56d80
commit cfaf6e6640
12 changed files with 47 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
templates/anime.gohtml
View File

@@ -3,7 +3,7 @@
<h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
{{range (slice .Items 0 (min (len .Items) 10))}}
<div class="flex gap-3 bg-background-surface p-3 ring-1 ring-border">
<div class="flex gap-3 bg-background-surface p-3">
<div class="h-16 w-12 shrink-0 overflow-hidden bg-background-surface">
<img src="{{.Character.Images.Jpg.ImageURL}}" alt="{{.Character.Name}}" class="h-full w-full object-cover" loading="lazy" />
</div>
@@ -98,7 +98,7 @@
<div class="flex w-full flex-col gap-10 lg:pr-80">
<div class="flex flex-col gap-8 md:flex-row lg:gap-12">
<div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
<div class="aspect-2/3 w-full overflow-hidden border-hairline bg-background-surface shadow-soft">
<div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-[var(--shadow-card)]">
{{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
{{if $anime.Images.Webp.LargeImageURL}}
{{$imageUrl = $anime.Images.Webp.LargeImageURL}}
@@ -111,7 +111,7 @@
<div class="flex grow flex-col">
<div class="mb-4">
<h1 class="heading-serif text-2xl font-normal text-foreground md:text-4xl">
<h1 class="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-2xl font-normal text-foreground md:text-4xl">
{{$anime.DisplayTitle}}
</h1>
{{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
@@ -161,7 +161,7 @@
{{end}}
</section>
</div>
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto border-l border-border bg-background-sidebar p-10 lg:flex">
<aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto bg-background-sidebar p-10 lg:flex">
<div class="flex flex-col gap-10">
<section>
<h3 class="mb-8 text-lg font-normal text-foreground">Information</h3>
@@ -189,7 +189,7 @@
<dt class="mb-1 text-xs font-normal text-foreground-muted">Genres</dt>
<dd class="flex flex-wrap gap-2 pt-1">
{{range $anime.Genres}}
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted ring-1 ring-border transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
{{end}}
</dd>
</div>
@@ -199,7 +199,7 @@
<dt class="mb-1 text-xs font-normal text-foreground-muted">Themes</dt>
<dd class="flex flex-wrap gap-2 pt-1">
{{range $anime.Themes}}
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted ring-1 ring-border transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
{{end}}
</dd>
</div>
@@ -209,7 +209,7 @@
<dt class="mb-1 text-xs font-normal text-foreground-muted">Demographics</dt>
<dd class="flex flex-wrap gap-2 pt-1">
{{range $anime.Demographics}}
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted ring-1 ring-border transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
<a href="/browse?genres={{.MalID}}" class="bg-background-surface px-2.5 py-1 text-[11px] font-normal text-foreground-muted transition-colors hover:bg-background-button-hover hover:text-foreground">{{.Name}}</a>
{{end}}
</dd>
</div>
@@ -270,7 +270,7 @@
<div hx-get="/anime/{{$anime.MalID}}?section=statistics" hx-trigger="load" hx-swap="innerHTML">
<div class="flex flex-col gap-3 pt-1 animate-pulse">
{{range (seq 5)}}
<div class="h-4 rounded bg-background-surface ring-1 ring-border"></div>
<div class="h-4 rounded bg-background-surface"></div>
{{end}}
</div>
</div>
@@ -307,7 +307,7 @@
<h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 animate-pulse">
{{range (seq 5)}}
<div class="flex gap-3 bg-background-surface p-3 ring-1 ring-border h-20">
<div class="flex gap-3 bg-background-surface p-3 h-20">
<div class="h-16 w-12 shrink-0 bg-background-button"></div>
<div class="flex flex-col justify-center gap-2 grow">
<div class="h-3 w-2/3 bg-background-button rounded"></div>
@@ -322,7 +322,7 @@
<div class="w-full">
<div hx-get="/api/watch-order?animeId={{$anime.MalID}}" hx-trigger="revealed">
<div class="mt-8 flex items-center gap-3 text-foreground-muted">
<div class="border-t-accent size-5 animate-spin rounded-full border-2 border-border"></div>
<div class="size-5 animate-spin rounded-full border-2 border-t-transparent border-accent"></div>
<span class="text-sm">Loading watch order sequence...</span>
</div>
</div>
@@ -344,10 +344,10 @@
</div>
<div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
<div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-soft ring-1 ring-border">
<div class="flex items-center justify-between border-b border-border px-6 py-4">
<div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-[var(--shadow-card)]">
<div class="flex items-center justify-between px-6 py-4">
<h2 class="text-base font-normal text-foreground">Theme Songs</h2>
<button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted ring-1 ring-border transition-colors hover:text-foreground">Close</button>
<button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted transition-colors hover:text-foreground">Close</button>
</div>
<div data-themes-content class="max-h-[60vh] overflow-y-auto"></div>
</div>