Merge branch 'main' into main

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@fontsource-variable/jost": "5.0.18",
     "@vercel/analytics": "1.2.2",
-    "astro": "4.2.0"
+    "astro": "4.3.7"
   },
   "devDependencies": {
     "@antfu/eslint-config": "0.43.1",

src/components/FooterContent.astro

@@ -0,0 +1,10 @@
+---
+import Typography from "@/components/Typography.astro"
+---
+
+<Typography as="span" variant="body" color="neutral" class:list={"text-center"}>
+	&copy; {new Date().getFullYear()} La Velada del Año <span
+		aria-hidden="true"
+		class="hidden md:inline">|</span
+	><br aria-hidden="true" class="block md:hidden" /> Todos los derechos reservados.
+</Typography>

src/components/HamburgerButton.astro

@@ -0,0 +1,38 @@
+---
+const width = "w-6"
+const genericHamburgerLine = `h-[2px] ${width} bg-gray-300 transition ease transform duration-300`
+---
+
+<button
+	id={Astro.props.id}
+	class:list={[
+		`hamburgerButton group relative flex h-[20px] flex-col items-center justify-between lg:hidden`,
+		width,
+	]}
+	aria-label="hamburguer menu button"
+>
+	<div class:list={[`group-[.open]:translate-y-2 group-[.open]:rotate-45`, genericHamburgerLine]}>
+	</div>
+	<div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div>
+	<div class:list={[`group-[.open]:opacity-0`, genericHamburgerLine]}></div>
+	<div
+		class:list={[
+			`group-[.open]:-translate-y-[0.6rem] group-[.open]:-rotate-45 `,
+			genericHamburgerLine,
+		]}
+	>
+	</div>
+</button>
+
+<script>
+	import { $, $$ } from "@/consts/dom-selector"
+	document.addEventListener("astro:page-load", () => {
+		$$(".hamburgerButton").forEach((button) => {
+			button.addEventListener("click", () => {
+				const hamburgerButton = $(".hamburgerButton")
+				hamburgerButton?.classList.toggle("open")
+				hamburgerButton?.dispatchEvent(new CustomEvent("hamburgerButtonClicked"))
+			})
+		})
+	})
+</script>

src/components/Header.astro

@@ -0,0 +1,151 @@
+---
+import HamburgerButton from "@/components/HamburgerButton.astro"
+import HeroLogo from "@/components/HeroLogo.astro"
+import DrawnXLogo from "@/components/DrawnXLogo.astro"
+import Footer from "@/sections/Footer.astro"
+import FooterContent from "@/components/FooterContent.astro"
+import SocialButtons from "@/components/SocialButtons.astro"
+
+const pages = [
+	{ name: "El Evento", href: "/" },
+	{ name: "Combates", href: "/combates", disabled: true },
+	{ name: "Pronósticos", href: "/pronosticos", disabled: true },
+	{ name: "Entradas", href: "/entradas", disabled: true },
+]
+---
+
+<header class="mb-10 h-16 lg:h-24">
+	<nav class="group flex h-full w-full items-center justify-between px-10 lg:justify-center">
+		{
+			pages.map(({ disabled, name, href }, key) => (
+				<>
+					<a
+						href={disabled ? "" : href}
+						class:list={[
+							"nav-item relative hidden h-full select-none flex-col items-center justify-center gap-1 px-10 text-xl uppercase text-white lg:flex",
+							{ "cursor-not-allowed": disabled },
+						]}
+					>
+						<span class="z-10">{name}</span>
+						{disabled ? (
+							<span class="absolute mt-10 -skew-x-6 text-xs text-accent">Próximamente</span>
+						) : (
+							<div class="background absolute -z-10 h-full w-full" />
+						)}
+					</a>
+					{key == 1 && <div class={`hidden w-64 lg:block`} />}
+				</>
+			))
+		}
+		<a href="/"><DrawnXLogo class:list={`block w-10 lg:hidden`} /></a>
+		<HamburgerButton class:list={`block lg:hidden`} id="menuButton" />
+		<div
+			class="absolute inset-0 z-[888] flex h-screen w-screen flex-col items-center overflow-x-auto bg-[var(--background-color)] px-10 lg:hidden"
+			id="menuMobileContent"
+		>
+			<aside class="flex min-h-16 w-full items-center justify-between">
+				<span class="text-xl font-semibold uppercase text-primary">Menú</span>
+				<HamburgerButton id="innerMenuButton" />
+			</aside>
+			<div class="flex min-h-2 w-full items-center">
+				<hr
+					class="h-[2px] w-full border-t-0"
+					style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
+				/>
+			</div>
+			<nav class="flex w-full flex-col items-center gap-5">
+				<img src="img/lvda.webp" class="accent-drop-shadow my-4 max-w-60 drop-shadow-lg" />
+				<hr
+					class="h-[2px] w-full border-t-0"
+					style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
+				/>
+				{
+					pages.map(({ disabled, name, href }, key) => (
+						<>
+							<a
+								href={href}
+								class:list={[
+									"flex flex-col items-center justify-center gap-2 text-xl capitalize",
+									{ "pointer-events-none": disabled },
+								]}
+							>
+								<span class="z-10 uppercase text-primary">{name}</span>
+								{disabled && <span class="text-accent">Próximamente</span>}
+							</a>
+							<hr
+								class="h-[2px] w-full border-t-0"
+								style="background:linear-gradient(to right, transparent 0%, white 50%, transparent 100%)"
+							/>
+						</>
+					))
+				}
+				<nav class="my-4 flex flex-col gap-10">
+					<FooterContent />
+					<SocialButtons class="flex items-center justify-center" />
+				</nav>
+			</nav>
+		</div>
+	</nav>
+	<div class="relative flex h-2 w-full flex-col items-center">
+		<div class="absolute flex h-full w-full items-center">
+			<hr
+				class="h-[2px] w-full border-t-0"
+				style="background:linear-gradient(to right, transparent 3%, white 35%, white 100%)"
+			/>
+			<HeroLogo class:list={`-mx-2 h-60 w-auto lg:-ml-5 lg:h-80`} noEffect />
+			<hr
+				class="h-[2px] w-full border-t-0"
+				style="background:linear-gradient(to left, transparent 3%, white 35%, white 100%)"
+			/>
+		</div>
+	</div>
+</header>
+
+<style>
+	.nav-item .background {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		background: linear-gradient(to bottom, rgba(221, 221, 221, 20%) 0%, transparent 100%);
+		transition: opacity 0.3s;
+	}
+
+	.nav-item:hover .background {
+		opacity: 1;
+	}
+
+	#menuMobileContent {
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity 0.3s;
+	}
+
+	#menuMobileContent.open {
+		opacity: 1 !important;
+		pointer-events: all;
+	}
+
+	.accent-drop-shadow {
+		filter: drop-shadow(0px 0px 25px rgba(var(--color-accent-rgb), 0.25));
+	}
+</style>
+
+<script>
+	import { $, $$ } from "@/consts/dom-selector"
+	document.addEventListener("astro:page-load", () => {
+		const nav = $("nav")
+		const menuButton = $("#menuButton")
+		const innerMenuButton = $("#innerMenuButton")
+
+		menuButton?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav))
+		innerMenuButton?.addEventListener("hamburgerButtonClicked", () => toggleMenu(nav))
+
+		function toggleMenu(nav: HTMLElement | null) {
+			$("#menuMobileContent")?.classList.toggle("open")
+			nav?.classList.toggle("open")
+			document.body.classList.toggle("overflow-hidden")
+		}
+	})
+</script>

src/components/HeroLogo.astro

@@ -21,6 +21,6 @@
 		>
 		</path>
 	</symbol>
-	<use href="#hero-logo" class="text-[#f1ffaa]/70 blur-xl md:blur-md"></use>
-	<use href="#hero-logo" class="text-primary"></use>
+	{Astro.props.noEffect && <use href="#hero-logo" class="text-[#f1ffaa]/70 blur-xl md:blur-md" />}
+	<use href="#hero-logo" class:list={Astro.props.noEffect ? "text-white" : "text-primary"}></use>
 </svg>

src/components/KonamiCode.astro

@@ -1,11 +1,48 @@
+<style is:global>
+	.bubbles {
+		border-radius: 50%;
+		object-fit: cover;
+		object-position: center;
+		position: absolute;
+		width: 60px;
+		height: 60px;
+		opacity: 1;
+		bottom: -50px;
+		display: block;
+		animation: bubble linear forwards 3s;
+	}
+
+	#midu {
+		width: 150px;
+		height: 150px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	@keyframes bubble {
+		from {
+			opacity: 1;
+			bottom: -50px;
+		}
+
+		to {
+			opacity: 0;
+			bottom: 80vh;
+			transform: rotate(0deg);
+		}
+	}
+</style>
+
 <script>
 	import { konamiCodes } from "@/consts/konami-codes"
 	import { Konami } from "@/function/konami"
+	import { checkAndRemoveContainer, showContributors } from "@/function/miduCode"
 	import { $ } from "@/consts/dom-selector"
 
-	const { rotateY, gloveCursor, amongUsCursor, lolCursor } = konamiCodes
+	const { rotateY, gloveCursor, amongUsCursor, lolCursor, midu } = konamiCodes
 
 	const $container = $("#main-content")
+	const $miduContainer = document.createElement("div")
 
 	document.addEventListener("keydown", ({ key }) => {
 		Konami({
@@ -45,5 +82,20 @@
 				$("body").style.cursor = "url('/img/cursor/among-us.cur'), auto"
 			},
 		})
+
+		Konami({
+			code: midu,
+			keyPressed: key,
+			onFinishTime: 1500,
+			onSuccess: () => {
+				$miduContainer.style.cssText =
+					"position: fixed; width: 100dvw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 10; inset: 0"
+				document.body.appendChild($miduContainer)
+				showContributors($miduContainer)
+			},
+			onFinish: () => {
+				checkAndRemoveContainer($miduContainer)
+			},
+		})
 	})
 </script>