From 4cff710f915f3f1c08443e35d2b041cc70856bc9 Mon Sep 17 00:00:00 2001
From: Sergio401 <sergioleonardo.gonzalez@gmail.com>
Date: Wed, 13 Mar 2024 00:21:57 -0500
Subject: [PATCH 1/4] Change CSS properties to Tailwind classes in
 SelectYourBoxer

---
 src/sections/SelectYourBoxer.astro | 43 +++++++-----------------------
 1 file changed, 10 insertions(+), 33 deletions(-)

diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
index e5e7796c9..0df024c2d 100644
--- a/src/sections/SelectYourBoxer.astro
+++ b/src/sections/SelectYourBoxer.astro
@@ -151,12 +151,11 @@ const msFadeLuchador = 150
 				() => {
 					const boxerSrc = `/img/boxers/${id}-big`
 
-					boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
-					boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
+					boxerPhoto.querySelector("source:first-of-type").srcset = `${boxerSrc}.avif`
+					boxerPhoto.querySelector("img").src = `${boxerSrc}.webp`
 					boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
 					boxerCountry.src = `/img/flags/${country}.webp`
-
-					boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
+					boxerPhoto.querySelector("img").alt = `Fotografía de ${name}`
 					boxerCountry.alt = `Bandera de ${countryName}`
 				},
 				article.getAttribute("data-transition-duration") as unknown as number
@@ -170,57 +169,40 @@ const msFadeLuchador = 150
 
 <style>
 	.boxers-aside {
-		display: flex;
+		@apply relative flex h-32 overflow-x-scroll;
 		max-width: 100vw;
-		height: 8rem;
-		overflow-x: scroll;
-		position: relative;
 		scrollbar-width: none;
 	}
 
 	.boxers-nav {
-		display: flex;
-		gap: 0.5rem;
-		height: 100%;
-
-		padding: 1rem 5rem;
+		@apply flex h-full gap-2 px-20 py-4;
 	}
 
 	.boxer-link {
-		@apply size-40;
-
-		position: relative;
-		display: flex;
-		align-items: center;
-		flex-direction: column;
+		@apply relative flex size-40 flex-col items-center;
 		transition: opacity 0.3s ease;
 	}
 
 	.boxer-link-background {
-		position: absolute;
-		width: 100%;
-		bottom: 0;
-		display: block;
+		@apply absolute bottom-0 block w-full opacity-25;
 		background: linear-gradient(
 			180deg,
 			rgba(255, 255, 255, 1) 0%,
 			rgba(255, 255, 255, 0.5) 30%,
 			rgba(0, 0, 0, 0) 95%
 		);
-		opacity: 0.25;
 		height: 60%;
 		transition: filter 0.3s ease-in-out;
 	}
 
 	.boxer-link:hover {
-		opacity: 0.9;
+		@apply opacity-90;
 	}
 
 	.boxer-image {
-		object-fit: contain;
+		@apply h-full object-contain;
 		z-index: 2;
 		transition: all 0.3s ease-in-out;
-		height: 100%;
 		mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
 	}
 
@@ -241,12 +223,7 @@ const msFadeLuchador = 150
 
 	@media (min-width: 1280px) {
 		.boxers-aside {
-			padding: 0.5rem 0;
-			display: block;
-			max-width: none;
-			width: 100%;
-			overflow: hidden;
-			height: auto;
+			@apply block h-auto w-full max-w-none overflow-hidden px-0 py-2;
 		}
 
 		.boxers-nav {

From 6c7d07851927f31e6d79b36012175785ac4b658b Mon Sep 17 00:00:00 2001
From: Sergio401 <sergioleonardo.gonzalez@gmail.com>
Date: Wed, 13 Mar 2024 00:28:31 -0500
Subject: [PATCH 2/4] Remove code entered by mistake

---
 src/sections/SelectYourBoxer.astro | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
index 0df024c2d..4cad78c8a 100644
--- a/src/sections/SelectYourBoxer.astro
+++ b/src/sections/SelectYourBoxer.astro
@@ -151,11 +151,12 @@ const msFadeLuchador = 150
 				() => {
 					const boxerSrc = `/img/boxers/${id}-big`
 
-					boxerPhoto.querySelector("source:first-of-type").srcset = `${boxerSrc}.avif`
-					boxerPhoto.querySelector("img").src = `${boxerSrc}.webp`
+					boxerPhoto.getElementsByTagName("source")[0].srcset = `${boxerSrc}.avif`
+					boxerPhoto.getElementsByTagName("img")[0].src = `${boxerSrc}.webp`
 					boxerTitle.innerText = name?.toLocaleLowerCase() ?? ""
 					boxerCountry.src = `/img/flags/${country}.webp`
-					boxerPhoto.querySelector("img").alt = `Fotografía de ${name}`
+
+					boxerPhoto.getElementsByTagName("img")[0].alt = `Fotografía de ${name}`
 					boxerCountry.alt = `Bandera de ${countryName}`
 				},
 				article.getAttribute("data-transition-duration") as unknown as number

From 9378e21f0b522741e075a36a2fc61613474d82e0 Mon Sep 17 00:00:00 2001
From: Sergio401 <sergioleonardo.gonzalez@gmail.com>
Date: Wed, 13 Mar 2024 09:09:31 -0500
Subject: [PATCH 3/4] Complete tailwind classes in SelectYourBoxer.astro

---
 src/sections/SelectYourBoxer.astro | 17 +++++------------
 1 file changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
index 2fc834fc0..06517dc1f 100644
--- a/src/sections/SelectYourBoxer.astro
+++ b/src/sections/SelectYourBoxer.astro
@@ -170,8 +170,7 @@ const msFadeLuchador = 150
 
 <style>
 	.boxers-aside {
-		@apply relative flex h-32 overflow-x-scroll;
-		max-width: 100vw;
+		@apply relative flex h-32 w-screen overflow-x-scroll;
 		scrollbar-width: none;
 	}
 
@@ -180,20 +179,17 @@ const msFadeLuchador = 150
 	}
 
 	.boxer-link {
-		@apply relative flex size-40 flex-col items-center;
-		transition: opacity 0.3s ease;
+		@apply relative flex size-40 flex-col items-center transition-opacity duration-300 ease-in-out;
 	}
 
 	.boxer-link-background {
-		@apply absolute bottom-0 block w-full opacity-25;
+		@apply absolute bottom-0 block h-3/5 w-full opacity-25 transition-opacity duration-300 ease-in-out;
 		background: linear-gradient(
 			180deg,
 			rgba(255, 255, 255, 1) 0%,
 			rgba(255, 255, 255, 0.5) 30%,
 			rgba(0, 0, 0, 0) 95%
 		);
-		height: 60%;
-		transition: filter 0.3s ease-in-out;
 	}
 
 	.boxer-link:hover {
@@ -201,9 +197,7 @@ const msFadeLuchador = 150
 	}
 
 	.boxer-image {
-		@apply h-full object-contain;
-		z-index: 2;
-		transition: all 0.3s ease-in-out;
+		@apply z-20 h-full object-contain transition-opacity duration-300;
 		mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
 	}
 
@@ -233,8 +227,7 @@ const msFadeLuchador = 150
 		}
 
 		.boxer-link {
-			@apply flex items-center justify-center;
-			width: 100%;
+			@apply flex w-full items-center justify-center;
 		}
 
 		.boxer-image {

From 5b157b727f85722d41071012d822a572dd6d6863 Mon Sep 17 00:00:00 2001
From: Sergio401 <sergioleonardo.gonzalez@gmail.com>
Date: Wed, 13 Mar 2024 09:25:45 -0500
Subject: [PATCH 4/4] Add ease-in-out value in .boxer-image class

---
 src/sections/SelectYourBoxer.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/sections/SelectYourBoxer.astro b/src/sections/SelectYourBoxer.astro
index 06517dc1f..e2c28724b 100644
--- a/src/sections/SelectYourBoxer.astro
+++ b/src/sections/SelectYourBoxer.astro
@@ -197,7 +197,7 @@ const msFadeLuchador = 150
 	}
 
 	.boxer-image {
-		@apply z-20 h-full object-contain transition-opacity duration-300;
+		@apply z-20 h-full object-contain transition-opacity duration-300 ease-in-out;
 		mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
 	}