From c480a9be1f76aefff8086538f7a470306c015083 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 25 May 2026 01:46:53 +0200
Subject: [PATCH] fix: standardize anime detail page and review styles

---
 templates/anime.gohtml         | 24 +++++++++++++-----------
 templates/anime/reviews.gohtml | 10 +++++-----
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index c62ff1f..2c2793c 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -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 bg-background-surface shadow-[var(--shadow-card)]">
+      <div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-[var(--shadow-card)] ring-1 ring-black/10">
         {{$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="font-[family:var(--font-serif)] tracking-[-0.03em] leading-[1.15] text-2xl font-normal text-foreground md:text-4xl">
+        <h1 class="text-2xl font-normal tracking-[-0.02em] leading-[1.15] text-foreground md:text-4xl">
           {{$anime.DisplayTitle}}
         </h1>
         {{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
@@ -122,7 +122,7 @@
       <div class="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-foreground-muted">
         {{if $anime.Score}}
           <div class="flex items-center gap-1.5 font-medium text-foreground">
-            <svg class="h-3.5 w-3.5 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
+            <svg class="h-3.5 w-3.5 fill-current text-accent" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
             {{$anime.Score}}
           </div>
         {{end}}
@@ -137,12 +137,14 @@
         {{if $anime.ShortRating}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.ShortRating}}</span>{{end}}
       </div>
 
-      {{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status "ContinueWatchingEp" .ContinueWatchingEp "ContinueWatchingTime" .ContinueWatchingTime}}
+      <div class="mb-8">
+        {{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status "ContinueWatchingEp" .ContinueWatchingEp "ContinueWatchingTime" .ContinueWatchingTime}}
+      </div>
 
       <div class="flex flex-col gap-12 lg:flex-row">
         <div class="grow lg:max-w-4xl">
           <section>
-            <h2 class="mb-4 mt-2 text-lg font-normal text-foreground">Synopsis</h2>
+            <h2 class="mb-4 mt-2 text-base font-normal text-foreground">Synopsis</h2>
             <p id="synopsis-container" class="text-foreground-muted text-base leading-relaxed line-clamp-6 md:line-clamp-none whitespace-pre-line">{{if $anime.Synopsis}}{{$anime.Synopsis}}{{else}}No synopsis available.{{end}}</p>
             {{if and $anime.Synopsis (gt (len $anime.Synopsis) 400)}}
               <button id="synopsis-toggle" class="mt-2 text-sm font-normal text-foreground-muted transition-colors hover:text-foreground md:hidden" onclick="
@@ -161,11 +163,11 @@
             {{end}}
           </section>
         </div>
-        <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">
+        <aside class="fixed right-0 top-0 hidden h-screen w-80 shrink-0 flex-col overflow-y-auto bg-background-sidebar p-8 lg:flex">
+          <div class="flex flex-col gap-8">
             <section>
-              <h3 class="mb-8 text-lg font-normal text-foreground">Information</h3>
-              <dl class="flex flex-col gap-8 text-sm">
+              <h3 class="mb-6 text-base font-normal text-foreground">Information</h3>
+              <dl class="flex flex-col gap-6 text-sm">
                 {{if $anime.Studios}}
                   <div>
                     <dt class="mb-1 text-xs font-normal text-foreground-muted">Studios</dt>
@@ -266,7 +268,7 @@
             </section>
 
             <section>
-              <h3 class="mb-4 text-lg font-normal text-foreground">Statistics</h3>
+              <h3 class="mb-4 text-base font-normal text-foreground">Statistics</h3>
               <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)}}
@@ -277,7 +279,7 @@
             </section>
 
             <section>
-              <h3 class="mb-4 text-lg font-normal text-foreground">More</h3>
+              <h3 class="mb-4 text-base font-normal text-foreground">More</h3>
               <div class="flex flex-col gap-3">
                 {{if $anime.External}}
                   <div>
diff --git a/templates/anime/reviews.gohtml b/templates/anime/reviews.gohtml
index cecd8be..a6d107a 100644
--- a/templates/anime/reviews.gohtml
+++ b/templates/anime/reviews.gohtml
@@ -5,12 +5,12 @@
 
 {{define "reviews_content"}}
 <div class="flex w-full flex-col gap-6">
-  <a href="/anime/{{.AnimeID}}" class="text-sm text-foreground-muted transition-colors hover:text-foreground">&larr; Back to anime</a>
+  <a href="/anime/{{.AnimeID}}" class="text-sm text-foreground-muted transition-colors hover:text-foreground">Back to anime</a>
   <h1 class="text-xl font-normal text-foreground">Reviews</h1>
 
   {{if eq (len .Reviews) 0}}
-    <div class="flex h-64 flex-col items-center justify-center gap-4 text-foreground-muted">
-      <p class="text-foreground">No reviews yet</p>
+    <div class="flex h-64 flex-col items-center justify-center gap-3 text-foreground-muted">
+      <p class="text-sm text-foreground">No reviews yet</p>
     </div>
   {{else}}
     <div id="reviews-list" class="flex flex-col gap-6">
@@ -22,10 +22,10 @@
 
 {{define "review_cards"}}
 {{range .Reviews}}
-  <div class="flex flex-col gap-4 bg-background-surface p-6">
+  <div class="flex flex-col gap-4 bg-background-surface p-5 ring-1 ring-black/10">
     <div class="flex items-start justify-between">
       <div class="flex items-center gap-3">
-        <div class="h-10 w-10 shrink-0 overflow-hidden rounded-full bg-background-surface">
+        <div class="h-10 w-10 shrink-0 overflow-hidden rounded-full bg-background-surface ring-1 ring-black/10">
           <img src="{{.User.Images.Jpg.ImageURL}}" alt="{{.User.Username}}" class="h-full w-full object-cover" loading="lazy" />
         </div>
         <div class="flex flex-col">