♻️ redo vinyl-page

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>

src/pages/vinyl.astro

@@ -3,12 +3,11 @@ import SectionContainer from '../components/SectionContainer.astro';
 import vinyl from '../data/vinyl.json'
 
 const vinylByAlbumTitle = vinyl.reduce((acc:any, currentVinyl) => {
-    const { album, artist, cover } = currentVinyl;
+    const { album, artist } = currentVinyl;
     if (!acc[album]) {
         acc[album] = {
             vinyls: [],
-            artist: artist,
+            artist: artist
-            cover: cover
         };
     }
     acc[album].vinyls.push(currentVinyl);
@@ -27,25 +26,19 @@ const vinylData = Object.keys(vinylByAlbumTitle).map(albumTitle => {
 ---
 
 <SectionContainer>
-    <div class="flex flex-col gap-4 mt-4">
+    <main class="flex flex-col gap-4 mt-4">
-        <div>
+		<h1 class="text-3xl font-extrabold">📀 Platesamlinga</h1>
-
-            <h1 class="font-bold text-3xl">
-                📀 Platesamlinga
-            </h1>
-            <p class="italic">Here's a collection of all the vinyl's that I got!</p>
-        </div>
-        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
         {vinylData.map((album) => (
             <div class="flex flex-col">
-                    <img
+                <li><strong>{album.title}</strong> by {album.artist}</li>
-                        src={album.cover}
-                        class="w-400"
-                    />
-                    <p class="font-bold">{album.title}</p>
-                    <p>{album.artist}</p>
             </div>
         ))}
-        </div>
+	</main>
-    </div>
 </SectionContainer>
+
+<style>
+    li {
+        list-style: disc inside;
+        padding: 0 0 0 10px;
+    }
+</style>