From 26bb8f71af0a38f0b214e793dcd505c6f2759c43 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 2 Dec 2023 21:39:01 -0800
Subject: feat(wrapped): seperate rows to flexes

---
 src/lib/Tools/Wrapped.svelte | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index d0fbab5b..3bfd0312 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -178,7 +178,7 @@
 	// 	statistic.startYears.find((y: { startYear: number }) => y.startYear === 2023);
 
 	const screenshot = async (dark = false) => {
-		let element = document.querySelector('.categories-grid') as HTMLElement;
+		let element = document.querySelector('#wrapped') as HTMLElement;
 
 		element.classList.add('invert');
 
@@ -265,12 +265,12 @@
 	{#await wrapped(user, currentUserIdentity)}
 		Loading&nbsp;...
 	{:then wrapped}
-		<div id="wrapped" style={`width: ${width}px`}>
-			<div
-				class:light-theme={lightTheme}
-				class="categories-grid"
-				style={`background-color: ${transparency ? '#0b16227f' : '#0b1622'};`}
-			>
+		<div
+			id="wrapped"
+			class:light-theme={lightTheme}
+			style={`background-color: ${transparency ? '#0b16227f' : '#0b1622'}; width: ${width}px;`}
+		>
+			<div class="categories-grid" style="padding-bottom: 0;">
 				<div class="grid-item image-grid avatar-grid category">
 					<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
 						<img src={proxy(wrapped.avatar.large)} alt="User Avatar" />
@@ -328,6 +328,8 @@
 						Chapters: {chapters}
 					</div>
 				</div>
+			</div>
+			<div class="categories-grid">
 				<div class="category-grid pure-category category">
 					<div class="grid-item image-grid">
 						{#if animeList !== undefined}
@@ -382,10 +384,12 @@
 						{/if}
 					</div>
 				</div>
-				{#if watermark}
-					<div class="category-grid pure-category" id="watermark">due.moe/wrapped</div>
-				{/if}
 			</div>
+			{#if watermark}
+				<div class="categories-grid" style="padding-top: 0;">
+					<div class="category-grid pure-category" id="watermark">due.moe/wrapped</div>
+				</div>
+			{/if}
 		</div>
 
 		<p />
-- 
cgit v1.2.3