Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Id boxer description #484

Merged
merged 2 commits into from
Mar 13, 2024
Merged

Id boxer description #484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
132592f
Merge remote-tracking branch 'origin/main' into select-your-boxer-img…
AlejandraTech Mar 13, 2024
c28a884
ID description
AlejandraTech Mar 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 27 additions & 17 deletions src/pages/boxers/[id].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
import { BOXERS } from "@/consts/boxers.ts"
import { BOXERS } from "@/consts/boxers"
import Layout from "@/layouts/Layout.astro"

export function getStaticPaths() {
Expand All @@ -17,21 +17,31 @@ const [boxer] = BOXERS.filter((boxer) => boxer.id === id)
description={`Información del luchador ${boxer.name}`}
title={`${boxer.name} - Información del boxeador de La Velada IV`}
>
<main>
<picture
transition:name="boxer-big-image"
class:list={"boxer-photo h-auto object-contain px-10 sm:w-[30vw] sm:px-0 xl:w-[19vw] 3xl:h-[600px] 3xl:w-[480px]"}
>
<source srcset={`/img/boxers/${id}-big.avif`} type="image/avif" />
<img
class:list={"boxer-photo h-auto object-contain px-10 sm:w-[30vw] sm:px-0 xl:w-[19vw] 3xl:h-[600px] 3xl:w-[480px]"}
alt={`Fotografía de ${boxer.name}`}
src={`/img/boxers/${id}-big.avif`}
style="
filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5));
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
"
/>
</picture>
<main class="flex flex-col items-center">
<div class="w-full lg:flex lg:items-center">
<picture class="mb-8 w-full px-10 sm:px-0 md:mb-0 lg:w-1/2">
<source srcset={`/img/boxers/${id}-big.avif`} type="image/avif" />
<img
class="mx-auto h-auto w-full max-w-xs object-contain md:max-w-sm"
alt={`Fotografía de ${boxer.name}`}
src={`/img/boxers/${id}-big.avif`}
style="filter: drop-shadow(0 0 20px rgba(0, 0, 0, .5)); mask-image: linear-gradient(to bottom, black 80%, transparent 100%);"
/>
</picture>
<div class="w-full px-10 text-center lg:mx-auto lg:w-1/2 lg:text-left">
<img
class="mx-auto ml-2 max-w-xs object-contain sm:max-w-full md:max-w-sm"
src={`/img/boxers/${boxer.id}-title.webp`}
alt={boxer.name}
/>
<p class="text-xl text-white">{boxer.realName}</p>
<p class="text-xl text-white">Edad: {boxer.age}</p>
<p class="text-xl text-white">Peso: {boxer.weight} kg</p>
<p class="text-xl text-white">Altura: {boxer.height} cm</p>
<p class="flex items-center justify-center text-xl lg:justify-start">
<img class="ml-2" src={`/img/flags/${boxer.country}.webp`} alt={boxer.country} />
</p>
</div>
</div>
</main>
</Layout>
2 changes: 1 addition & 1 deletion src/sections/SelectYourBoxer.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const msFadeLuchador = 150
>
</div>
<picture
transition:name="boxer-big-image"
x.transition:name="boxer-big-image"
class:list={"boxer-photo h-auto object-contain px-10 sm:w-[30vw] sm:px-0 xl:w-[19vw] 3xl:h-[600px] 3xl:w-[480px]"}
>
<source srcset="/img/boxers/el-mariana-big.avif" type="image/avif" />
Expand Down
Loading