Restyle: clean square cover art with subtle shadow, narrower feed container (max-w-2xl)

src/main/resources/META-INF/resources/css/app.css

@@ -11,37 +11,8 @@ input[type="search"]::-webkit-search-cancel-button {
     appearance: none;
 }
 
-/* Vinyl-style cover art in feed */
+/* Cover art in feed */
-.vinyl-wrap {
+.cover-art {
-    border-radius: 50%;
+    border-radius: 6px;
-    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-    position: relative;
-    box-shadow:
-        0 0 0 3px rgba(0,0,0,0.3),
-        0 0 0 4px rgba(255,255,255,0.05),
-        0 4px 12px rgba(0,0,0,0.4);
-    background: #1a1a1a;
-}
-
-.vinyl-cover {
-    border-radius: 50%;
-    transition: transform 0.4s ease;
-}
-
-.vinyl-wrap:hover .vinyl-cover {
-    transform: rotate(8deg);
-}
-
-/* Center spindle hole */
-.vinyl-hole {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: #0b0f19;
-    border: 2px solid rgba(255,255,255,0.15);
-    pointer-events: none;
 }

src/main/resources/templates/fragments/feed-row.html

@@ -1,22 +1,17 @@
-<div class="flex gap-4 items-stretch bg-base-100 rounded-box border border-base-300 p-3 shadow-sm">
+<div class="flex gap-3 items-center bg-base-100 rounded-box border border-base-300 p-2.5 shadow-sm">
-    <div class="relative shrink-0">
+    <img src="https://coverartarchive.org/release-group/{row.mbid}/front"
-        <div class="vinyl-wrap w-28 h-28">
+         alt="cover"
-            <img src="https://coverartarchive.org/release-group/{row.mbid}/front"
+         loading="lazy"
-                 alt="cover"
+         class="cover-art w-20 h-20 object-cover shrink-0"
-                 loading="lazy"
+         onerror="this.onerror=null;this.src='/img/no-cover.svg'"/>
-                 class="vinyl-cover w-full h-full object-cover"
-                 onerror="this.onerror=null;this.src='/img/no-cover.svg'"/>
-            <div class="vinyl-hole"></div>
-        </div>
-    </div>
 
     <div class="flex-1 min-w-0 flex flex-col justify-center gap-1">
         <div class="font-semibold text-sm text-base-content/70 truncate">{row.artist.name}</div>
         <a href="{row.mbzUrl}" target="_blank" rel="noopener"
-           class="link link-hover text-lg font-bold leading-tight block truncate">
+           class="link link-hover text-base font-bold leading-tight block truncate">
             {row.title}
         </a>
-        <div class="flex flex-wrap items-center gap-2 mt-1">
+        <div class="flex flex-wrap items-center gap-2 mt-0.5">
             {#if row.primaryType??}<span class="badge badge-primary badge-sm">{row.primaryType}</span>{/if}
             {#if row.secondaryTypes??}<span class="badge badge-ghost badge-sm">{row.secondaryTypes}</span>{/if}
             <span class="text-sm text-base-content/60">

src/main/resources/templates/index.html

@@ -65,7 +65,7 @@
     </div>
 </header>
 
-<main class="max-w-5xl mx-auto px-4 py-6">
+<main class="max-w-2xl mx-auto px-4 py-6">
     <section id="feed" class="space-y-3">
         <div id="feed-list">
             {#include fragments/feed-list.html rows=rows nextOffset=nextOffset hasMore=hasMore pageSize=pageSize /}