From ad171ed7c47a916cc9f59c39f1528bed6df9e207 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Mon, 4 May 2026 19:54:57 +0200
Subject: [PATCH] style: align anime details with app design system

---
 templates/anime.gohtml | 135 ++++++++++++++++++-----------------------
 1 file changed, 59 insertions(+), 76 deletions(-)

diff --git a/templates/anime.gohtml b/templates/anime.gohtml
index 60ee51a..4181ca2 100644
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -18,120 +18,103 @@
     </div>
 
     <div class="flex grow flex-col">
-      <div class="mb-4 flex flex-wrap items-center gap-2">
-        <h1 class="text-2xl font-bold text-white md:text-4xl">
+      <div class="mb-4">
+        <h1 class="text-2xl font-normal text-white md:text-4xl">
           {{$anime.DisplayTitle}}
         </h1>
+        {{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
+          <h2 class="mt-1 text-sm text-neutral-400">{{$anime.Title}}</h2>
+        {{end}}
+      </div>
+
+      <div class="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-neutral-400">
         {{if $anime.Score}}
-          <div class="flex items-center gap-1.5 rounded-md bg-white/5 px-2.5 py-1 text-sm font-semibold text-yellow-500 ring-1 ring-white/10">
+          <div class="flex items-center gap-1.5 font-medium text-yellow-500/90">
             <svg class="h-4 w-4 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>
             {{$anime.Score}}
           </div>
         {{end}}
-      </div>
-
-      {{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
-        <h2 class="text-foreground-muted mb-4 text-base">{{$anime.Title}}</h2>
-      {{end}}
-
-      <div class="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-neutral-400">
-        {{if $anime.Type}}<span class="font-medium text-neutral-300">{{$anime.Type}}</span>{{end}}
-        {{if $anime.Episodes}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Episodes}} eps</span>{{end}}
+        {{if $anime.Type}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Type}}</span>{{end}}
+        {{if $anime.Episodes}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Episodes}} episodes</span>{{end}}
         {{if $anime.Status}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Status}}</span>{{end}}
         {{if $anime.Season}}<span class="flex items-center gap-1.5"><span>•</span>{{$anime.Premiered}}</span>{{end}}
-        {{if $anime.ShortRating}}<span class="ml-auto rounded border border-neutral-700 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-neutral-500">{{$anime.ShortRating}}</span>{{end}}
+        {{if $anime.ShortRating}}<span class="ml-auto rounded border border-neutral-800 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider text-neutral-500">{{$anime.ShortRating}}</span>{{end}}
       </div>
 
       {{template "watchlist_actions" dict "Anime" $anime "User" .User "Status" .Status}}
 
-      <div class="mt-8 grid grid-cols-1 gap-8 lg:grid-cols-3">
-        <div class="lg:col-span-2">
-          <h2 class="mb-3 text-lg font-semibold text-white">Synopsis</h2>
-          <p id="synopsis-container" class="text-foreground-muted text-base leading-relaxed whitespace-pre-line line-clamp-6 md:line-clamp-none">
-            {{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-medium text-neutral-300 transition-colors hover:text-white md:hidden" onclick="
-              const container = document.getElementById('synopsis-container');
-              const btn = document.getElementById('synopsis-toggle');
-              if (container.classList.contains('line-clamp-6')) {
-                container.classList.remove('line-clamp-6');
-                btn.textContent = 'Show less';
-              } else {
-                container.classList.add('line-clamp-6');
-                btn.textContent = 'Read more';
-              }
-            ">
-              Read more
-            </button>
-          {{end}}
+      <div class="mt-8 flex flex-col gap-10 lg:flex-row">
+        <div class="grow lg:max-w-3xl">
+          <section>
+            <h2 class="mb-3 text-sm font-normal text-neutral-400 uppercase tracking-widest">Synopsis</h2>
+            <p id="synopsis-container" class="text-neutral-300 text-base leading-relaxed whitespace-pre-line line-clamp-6 md:line-clamp-none">
+              {{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-neutral-400 transition-colors hover:text-white md:hidden" onclick="
+                const container = document.getElementById('synopsis-container');
+                const btn = document.getElementById('synopsis-toggle');
+                if (container.classList.contains('line-clamp-6')) {
+                  container.classList.remove('line-clamp-6');
+                  btn.textContent = 'Show less';
+                } else {
+                  container.classList.add('line-clamp-6');
+                  btn.textContent = 'Read more';
+                }
+              ">
+                Read more
+              </button>
+            {{end}}
+          </section>
 
           {{if $anime.Genres}}
-            <div class="mt-6 flex flex-wrap gap-2">
+            <div class="mt-8 flex flex-wrap gap-2">
               {{range $anime.Genres}}
-                <span class="rounded-full bg-white/5 px-3 py-1 text-xs font-medium text-neutral-300 ring-1 ring-white/10">{{.Name}}</span>
+                <span class="rounded-full bg-neutral-900 px-3 py-1 text-xs font-normal text-neutral-400 ring-1 ring-white/5 transition-colors hover:text-neutral-300 hover:ring-white/10">{{.Name}}</span>
               {{end}}
             </div>
           {{end}}
         </div>
 
-        <div class="space-y-6 rounded-xl bg-white/5 p-6 ring-1 ring-white/10">
-          <div>
-            <h3 class="mb-3 text-sm font-bold uppercase tracking-widest text-neutral-500">Information</h3>
-            <dl class="space-y-3 text-sm">
+        <aside class="flex shrink-0 flex-col gap-8 lg:w-72">
+          <section>
+            <h3 class="mb-4 text-xs font-normal uppercase tracking-widest text-neutral-500">Information</h3>
+            <div class="flex flex-col gap-4 text-sm">
               {{if $anime.Studios}}
-                <div class="flex flex-col gap-1">
-                  <dt class="text-neutral-500">Studios</dt>
-                  <dd class="text-neutral-200">{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}{{$s.Name}}{{end}}</dd>
+                <div>
+                  <dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Studios</dt>
+                  <dd class="text-neutral-300">{{range $i, $s := $anime.Studios}}{{if $i}}, {{end}}{{$s.Name}}{{end}}</dd>
                 </div>
               {{end}}
               {{if $anime.Producers}}
-                <div class="flex flex-col gap-1">
-                  <dt class="text-neutral-500">Producers</dt>
-                  <dd class="text-neutral-200 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
-                </div>
-              {{end}}
-              {{if $anime.Licensors}}
-                <div class="flex flex-col gap-1">
-                  <dt class="text-neutral-500">Licensors</dt>
-                  <dd class="text-neutral-200">{{range $i, $l := $anime.Licensors}}{{if $i}}, {{end}}{{$l.Name}}{{end}}</dd>
+                <div>
+                  <dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Producers</dt>
+                  <dd class="text-neutral-400 text-xs leading-relaxed">{{range $i, $p := $anime.Producers}}{{if $i}}, {{end}}{{$p.Name}}{{end}}</dd>
                 </div>
               {{end}}
               <div class="grid grid-cols-2 gap-4">
                 {{if $anime.Duration}}
-                  <div class="flex flex-col gap-1">
-                    <dt class="text-neutral-500">Duration</dt>
-                    <dd class="text-neutral-200">{{$anime.Duration}}</dd>
+                  <div>
+                    <dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Duration</dt>
+                    <dd class="text-neutral-300">{{$anime.Duration}}</dd>
                   </div>
                 {{end}}
                 {{if $anime.Rank}}
-                  <div class="flex flex-col gap-1">
-                    <dt class="text-neutral-500">Rank</dt>
-                    <dd class="text-neutral-200">#{{$anime.Rank}}</dd>
+                  <div>
+                    <dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Rank</dt>
+                    <dd class="text-neutral-300">#{{$anime.Rank}}</dd>
                   </div>
                 {{end}}
               </div>
-              {{if $anime.Popularity}}
-                <div class="flex flex-col gap-1">
-                  <dt class="text-neutral-500">Popularity</dt>
-                  <dd class="text-neutral-200">#{{$anime.Popularity}}</dd>
-                </div>
-              {{end}}
               {{if $anime.ScoredBy}}
-                <div class="flex flex-col gap-1">
-                  <dt class="text-neutral-500">Scored By</dt>
-                  <dd class="text-neutral-200">{{$anime.ScoredBy}} users</dd>
+                <div>
+                  <dt class="mb-1 text-[11px] font-normal uppercase tracking-wider text-neutral-500">Scored By</dt>
+                  <dd class="text-neutral-300">{{$anime.ScoredBy}} users</dd>
                 </div>
               {{end}}
-              {{if $anime.Demographics}}
-                <div class="flex flex-col gap-1">
-                  <dt class="text-neutral-500">Demographics</dt>
-                  <dd class="text-neutral-200">{{range $i, $d := $anime.Demographics}}{{if $i}}, {{end}}{{$d.Name}}{{end}}</dd>
-                </div>
-              {{end}}
-            </dl>
-          </div>
-        </div>
+            </div>
+          </section>
+        </aside>
       </div>
     </div>
   </div>