fix: media info page and minor homepage fixes (#33)

* fix: padding of media info companies and carousel buttons

* fix: padding of media info companies

* fix: blurry image in what's trending section

* fix: add CHANGELOG.md to prettier ignore

.prettierignore

@@ -2,3 +2,4 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+CHANGELOG.md

CHANGELOG.md

@@ -2,7 +2,6 @@
 
 ## 0.2.1 (2024-07-23)
 
-
 ### ⚠ BREAKING CHANGES
 
 * switch to new repo
@@ -16,19 +15,15 @@
 * add entrypoint ([#24](https://github.com/rivenmedia/riven-frontend/issues/24)) ([23eb54f](https://github.com/rivenmedia/riven-frontend/commit/23eb54fa95e6dedf60014e6f09458d6ca117ebe7))
 * frontend improvements ([#25](https://github.com/rivenmedia/riven-frontend/issues/25)) ([2a3aff5](https://github.com/rivenmedia/riven-frontend/commit/2a3aff546a1cd63118866b333adabfdd16b41642))
 * frontend improvements ([#27](https://github.com/rivenmedia/riven-frontend/issues/27)) ([1fa18b0](https://github.com/rivenmedia/riven-frontend/commit/1fa18b0c0e8582d1e7017cc4fa34e370319924c9))
-* Only show items of type Movie or Show in the  incomplete items … ([#29](https://github.com/rivenmedia/riven-frontend/issues/29)) ([7a20c28](https://github.com/rivenmedia/riven-frontend/commit/7a20c288822d79e6792c371eab7762dd96597947))
-
+* Only show items of type Movie or Show in the incomplete items … ([#29](https://github.com/rivenmedia/riven-frontend/issues/29)) ([7a20c28](https://github.com/rivenmedia/riven-frontend/commit/7a20c288822d79e6792c371eab7762dd96597947))
 
 ### Bug Fixes
 
 * ci ([02f1d9f](https://github.com/rivenmedia/riven-frontend/commit/02f1d9f593f979ef745891e70b23540deb43ee43))
 * docker entrypoint ([#21](https://github.com/rivenmedia/riven-frontend/issues/21)) ([f1e093f](https://github.com/rivenmedia/riven-frontend/commit/f1e093f409fa48ff36bb4749a1796ee2b93e1f16))
 * Dockerfile and add .dockerignore ([c3a3cee](https://github.com/rivenmedia/riven-frontend/commit/c3a3cee192f9c34dbf932cbd95caa4fcedd5a0ee))
 
-
 ### Miscellaneous Chores
 
 * release 0.2.1 ([795d970](https://github.com/rivenmedia/riven-frontend/commit/795d9701ec9ac48b606a0a52b40d6d9be265f914))
 * switch to new repo ([7f38432](https://github.com/rivenmedia/riven-frontend/commit/7f38432d9e71c598010cea6a25a577fbc97b8595))
-
-

src/lib/components/media-tmdb-carousel.svelte

@@ -16,7 +16,7 @@
 >
 	<div class="mb-2 flex items-center justify-between">
 		<h3 class="text-2xl text-zinc-100">{name}</h3>
-		<div class="flex items-center gap-1">
+		<div class="flex items-center gap-1 text-zinc-900 dark:text-zinc-100">
 			<Carousel.Previous class="static mt-8 h-8 w-8 rounded-md" />
 			<Carousel.Next class="static mt-8 h-8 w-8 rounded-md" />
 		</div>

src/routes/+page.svelte

@@ -112,7 +112,7 @@
 			{#each data.trendingAll.results as trendingAll}
 				{#if trendingAll.media_type !== 'person'}
 					{@const mediaType = trendingAll.media_type}
-					<Carousel.Item class="basis-auto text-slate-50">
+					<Carousel.Item class="basis-full text-slate-50 sm:basis-1/2 lg:basis-1/3 xl:basis-1/4">
 						<div
 							class="aspect-[2/1] h-fit w-full overflow-hidden rounded-2xl border-2 border-transparent hover:border-2 hover:border-primary"
 						>
@@ -121,14 +121,12 @@
 								class="group relative flex h-full w-full flex-shrink-0 flex-col"
 							>
 								<div class="z-0">
-									<span
-										><img
-											src="https://image.tmdb.org/t/p/w342{trendingAll.backdrop_path}"
-											alt={trendingAll.name}
-											loading="lazy"
-											class="size-full object-cover object-center transition-all duration-300 ease-in-out group-hover:scale-105"
-										/></span
-									>
+									<img
+										src="https://image.tmdb.org/t/p/w780{trendingAll.backdrop_path}"
+										alt={trendingAll.name}
+										loading="lazy"
+										class="size-full object-cover object-center transition-all duration-300 ease-in-out group-hover:scale-105"
+									/>
 								</div>
 								<div
 									class="absolute inset-0 z-[1] flex select-none bg-gradient-to-t from-zinc-900"

src/routes/[type]/[id]/+page.svelte

@@ -34,6 +34,7 @@
 				alt={data.details.id}
 				class="h-full w-full object-cover opacity-50 blur"
 				src="https://www.themoviedb.org/t/p/original{data.details.backdrop_path}"
+				loading="lazy"
 			/>
 			<div
 				class="absolute bottom-0 left-0 right-0 h-full w-full bg-gradient-to-b from-transparent to-zinc-900/55"
@@ -256,7 +257,7 @@
 						{/if}
 						{#if data.details.production_companies}
 							<div
-								class={clsx('flex justify-between gap-2 p-3 last-of-type:border-none', {
+								class={clsx('flex justify-between gap-2 p-2 last-of-type:border-none md:p-3', {
 									'items-center': data.details.production_companies.length === 1,
 									'items-start': data.details.production_companies.length > 1
 								})}