improved home page styles

src/lib/components/anilistItems.svelte

@@ -6,7 +6,7 @@
     import Item from "./item.svelte";
     import { showType } from "./showTypeChooser.svelte";
 
-    export var entries;
+    export var lists;
 
     var isLoading = false;
     async function find(entry) {
@@ -63,20 +63,23 @@
 {/if}
 
 <div class="items" class:list={$showType == "list"}>
-    {#each entries.sort((a, b) => a.priority - b.priority) as entry (entry.media.id)}
+    {#each lists as list}
-        <div animate:flip transition:blur>
+        <h2>{list.name}</h2>
-            <Item
+        {#each list.entries.sort((a, b) => a.priority - b.priority) as entry (entry.media.id)}
-                r18={entry.media.isAdult}
+            <div animate:flip transition:blur>
-                cover={entry.media.coverImage.large}
+                <Item
-                title={entry.media.title.userPreferred}
+                    r18={entry.media.isAdult}
-                lastChapter={entry.media.chapters}
+                    cover={entry.media.coverImage.large}
-                chapterProgress={entry.progress}
+                    title={entry.media.title.userPreferred}
-                score={entry.score || "?"}
+                    lastChapter={entry.media.chapters}
-                description={entry.notes}
+                    chapterProgress={entry.progress}
-                coverColor={entry.media.coverImage.color == "null" ? null : entry.media.coverImage.color}
+                    score={entry.score || "?"}
-                on:click={() => find(entry)}
+                    description={entry.notes}
-                />
+                    coverColor={entry.media.coverImage.color == "null" ? null : entry.media.coverImage.color}
-        </div>
+                    on:click={() => find(entry)}
+                    />
+            </div>
+        {/each}
     {/each}
 </div>
 
@@ -90,12 +93,16 @@
         z-index: 100;
         background: black;
         color: white;
+    }
+    h2 {
+        grid-column: 1 / -1;
+        margin: 0;
     }
 	.items {
 		display: grid;
   		align-items: flex-start;
 		gap: 1rem;
-		grid-template-columns: repeat(auto-fit, 11rem);
+		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
 	}
 	.items.list {
 		grid-template-columns: 1fr;

src/lib/components/item.svelte

@@ -74,10 +74,7 @@
         text-overflow: ellipsis;
     }
     .item.grid {
-        width: 11rem;
+        width: 100%;
-    }
-    .list .item img {
-        height: 10rem;
     }
     h3 {
         margin: 0;
@@ -149,8 +146,6 @@
 	.item img {
         --box-shadow-color: white;
 		border-radius: 5px;
-		max-height: 15rem;
-		width: auto;
         max-width: 100%;
 		box-shadow: 0 0 0 var(--box-shadow-color);
 		transition: .4s box-shadow, .3s max-height, .4s filter;

src/routes/+page.svelte

@@ -149,10 +149,7 @@
 		{:else}
 			<div>
 				{#await userManga then userManga}
-					{#each userManga.data.MediaListCollection.lists as list}
+                    <AnilistItems lists={userManga.data.MediaListCollection.lists} />
-						<h2>{list.name}</h2>
-						<AnilistItems entries={list.entries} />
-					{/each}
 				{/await}
 			</div>
 		{/if}