New colors style and info

src/components/CalendarButton.astro

@@ -2,7 +2,11 @@
 import { DARK_THEME, LIGHT_THEME } from "@/consts/themes"
 ---
 
-<button id="add-to-calendar" aria-label="agregar al calendario se abrirá ventana flotante">
+<button
+	class="button-style"
+	id="add-to-calendar"
+	aria-label="agregar al calendario se abrirá ventana flotante"
+>
 	<span> Agregar al calendario</span>
 </button>
 

src/components/HeroLogo.astro

@@ -10,45 +10,16 @@
 >
 	<path
 		class="logo"
-		style={Astro.props.disableAnimation
-			? "fill-opacity: 100%; stroke-dashoffset: 0; animation: none"
-			: ""}
 		fill="currentColor"
 		stroke="currentColor"
 		d="M363.933 2.427h13.752c-.194 22.247-.391 44.491-.585 66.738 3.93-.33 7.865-.584 11.804-.759-.015 3.17-.031 6.337-.044 9.507a260.26 260.26 0 0 0-25.908 2.608zm27.126 75.386c5.26-25.343 10.382-50.319 15.354-75.383h14.68c5.195 25.3 10.53 50.99 15.956 77.529a262.327 262.327 0 0 0-13.035-1.44 19513.85 19513.85 0 0 1-10.089-58.489 7672.546 7672.546 0 0 1-9.582 57.565"
 	>
 	</path>
 	<path
 		class="logo"
-		style={Astro.props.disableAnimation
-			? "fill-opacity: 100%; stroke-dashoffset: 0; animation: none"
-			: ""}
 		fill="currentColor"
 		stroke="currentColor"
 		d="M188.451 584.028V415.951c9.227-.036 18.453-.08 27.68-.116 9.563-.035 17.024 1.67 22.347 4.955 5.332 3.286 9.094 8.276 11.303 14.98 2.2 6.714 3.247 15.203 3.14 25.583-.177 17.875-.354 35.741-.541 53.617-.106 10.629-1.33 19.686-3.646 27.34-2.324 7.646-6.104 13.951-11.329 19.012-5.225 5.062-12.34 9.111-21.301 12.237a557 557 0 0 0-27.662 10.46zm20.831-28.362c2.12-.675 4.249-1.332 6.379-1.98 4.826-1.475 8.295-3.632 10.406-6.501 2.111-2.868 3.416-6.526 3.93-10.993.506-4.466.79-9.839.843-16.143l.452-58.554c.045-6.171-.248-11.117-.896-14.856-.647-3.738-2.022-6.438-4.125-8.116-2.111-1.669-5.527-2.424-10.247-2.193-2.067.098-4.143.195-6.21.302-.177 39.675-.346 79.359-.523 119.034zm49.779 4.848c.505-48.271 1.011-96.55 1.525-144.821 16.431-.044 32.861-.089 49.291-.115l-.186 17.262c-9.29.213-18.576.462-27.857.746l-.452 40.199c7.301-.675 14.611-1.288 21.93-1.838l-.186 17.227a950.984 950.984 0 0 0-21.948 2.388c-.178 15.416-.346 30.822-.515 46.238a634.993 634.993 0 0 1 28.256-4.751c-.062 5.639-.115 11.277-.177 16.925a557 557 0 0 0-49.681 10.558zm56.956-11.704c.452-44.416.905-88.824 1.348-133.241 7.151-.009 14.31-.018 21.461-.036-.32 37.997-.63 75.994-.95 113.982 9.59-.944 19.2-1.667 28.824-2.167l-.08 16.117a558 558 0 0 0-50.612 5.345zm102.76-6.02a546.992 546.992 0 0 0-20.538-.311c7.994-42.348 15.836-84.5 23.528-126.972 7.638 0 15.268 0 22.906.017 8.109 42.943 16.342 86.525 24.672 131.262a568.993 568.993 0 0 0-20.156-2.149c-5.287-33.441-10.513-66.474-15.676-99.259a17809.8 17809.8 0 0 1-14.727 97.412zm57.985 4.973c-.426-44.071-.852-88.132-1.269-132.203 4.977 0 9.954.018 14.931.027 9.794 25.582 19.633 52.071 29.454 79.9-.302-26.613-.594-53.225-.896-79.838 5.9.018 11.79.026 17.69.044.516 48.04 1.028 96.08 1.535 144.12a564.02 564.02 0 0 0-14.168-3.419c-9.883-30.209-19.802-58.873-29.694-86.454.293 26.897.577 53.794.87 80.691a561.983 561.983 0 0 0-18.453-2.868m101.9 26.124c-8.127-2.779-14.665-6.837-19.562-12.192-4.906-5.354-8.455-11.846-10.638-19.598-2.183-7.752-3.326-16.481-3.433-26.337l-.559-54.62c-.106-9.848.879-18.212 2.928-25.201 2.049-6.988 5.527-12.343 10.415-16.117 4.888-3.765 11.498-5.727 19.811-5.736 8.507 0 15.206 2.007 20.094 6.234 4.879 4.217 8.419 10.424 10.584 18.585 2.173 8.152 3.247 17.999 3.247 29.339v63.082c0 11.206-1.065 20.619-3.159 28.06-2.093 7.451-5.5 12.459-10.211 15.061-4.72 2.619-11.205 2.291-19.517-.56m-.134-20.983c3.505 1.039 6.078.799 7.719-.79 1.641-1.59 2.741-4.138 3.291-7.655.55-3.516.816-7.459.799-11.81-.107-24.57-.222-49.141-.329-73.702-.017-4.476-.328-8.525-.922-12.121-.595-3.595-1.74-6.448-3.434-8.56-1.694-2.114-4.329-3.233-7.895-3.384-3.38-.15-5.918.738-7.639 2.611-1.721 1.873-2.857 4.484-3.407 7.832-.55 3.348-.807 7.149-.771 11.402.186 23.354.381 46.708.567 70.07.036 4.131.329 8.018.879 11.66.55 3.64 1.694 6.704 3.424 9.19 1.73 2.493 4.303 4.246 7.718 5.257M48.803 425.212C33.163 323.299 17.069 214.752 0 98.009h41.156c10.734 78.16 21.14 152.91 31.37 224.713 11.01-77.797 22.276-152.565 33.668-224.713h42.095c-18.532 97.394-36.977 199.947-54.933 309.24a887.007 887.007 0 0 0-44.553 17.954zm102.583-37.259 4.418-289.944h106.823l-.452 34.08c-20.157.427-40.304.942-60.425 1.564-.417 26.621-.825 53.234-1.242 79.856 15.862-1.563 31.76-2.94 47.685-4.129-.16 11.348-.319 22.687-.47 34.036a1558.978 1558.978 0 0 0-47.756 5.39c-.479 30.618-.949 61.235-1.429 91.844a989.994 989.994 0 0 1 61.676-10.7c-.142 11.135-.293 22.279-.435 33.414a881.001 881.001 0 0 0-108.384 24.589zm116.706-25.894 3.327-264.05h46.496c-.657 75.22-1.322 150.433-1.978 225.654a1014.998 1014.998 0 0 1 39.913-2.566c-.053 10.717-.106 21.427-.151 32.144a880.001 880.001 0 0 0-87.598 8.818zm139.959-9.892a882.002 882.002 0 0 0-44.917.737c17.787-85.69 35.105-170.137 51.917-254.886h49.636c17.566 85.548 35.602 172.41 53.949 262.141a886.994 886.994 0 0 0-44.074-4.866c-11.587-66.688-22.969-132.452-34.112-197.763-10.566 65.072-21.363 129.788-32.399 194.637m118.454 9.093-3.22-263.251h49.849c20.733 0 36.968 3.037 48.688 9.457 11.728 6.393 20.147 16.41 25.266 30.014 5.119 13.595 7.834 30.91 8.145 51.636l1.596 107.01c.32 21.223-1.872 38.326-6.565 51.059-4.693 12.761-12.677 20.859-24.015 24.562-11.338 3.73-27.023 2.975-47.162-1.225a885 885 0 0 0-52.6-9.271zm46.78-26.329c1.34.24 2.679.48 4.028.72 10.797 1.953 18.471 1.482 23.048-1.705 4.569-3.179 7.32-8.64 8.251-16.366.932-7.734 1.304-17.369 1.127-28.886-.559-35.697-1.118-71.385-1.668-107.082-.178-11.286-1.056-20.432-2.626-27.394-1.579-6.97-4.702-12.139-9.36-15.495-4.666-3.357-12.136-5.16-22.409-5.426-1.118-.026-2.236-.062-3.354-.088l2.981 201.731zm122.881 68.499a879 879 0 0 0-43.196-14.19c15.428-92.012 30.803-188.572 46.496-291.24h49.637A10360.005 10360.005 0 0 1 800 448.238a874.997 874.997 0 0 0-40.952-19.571 14400.99 14400.99 0 0 0-33.712-256.6c-9.901 80.131-19.58 157.092-29.179 231.363zm-178.648 2.46c-2.608 0-4.933-.862-6.955-2.593a976.906 976.906 0 0 1-5.802-4.982c-1.837-1.589-3.771-2.388-5.802-2.388-2.032 0-3.265.728-3.984 2.175-.727 1.457-1.091 3.561-1.091 6.332h-10.149c0-4.982.364-9.44 1.091-13.382.728-3.943 2.005-7.06 3.841-9.342 1.836-2.282 4.303-3.428 7.391-3.428 2.413 0 4.586.8 6.52 2.389a669.125 669.125 0 0 1 5.722 4.769c1.881 1.589 3.842 2.388 5.873 2.388 1.642 0 2.831-.692 3.549-2.078.728-1.385 1.091-3.454 1.091-6.224h9.573c0 4.289-.24 8.435-.728 12.449-.488 4.014-1.526 7.335-3.114 9.963-1.595 2.629-3.94 3.943-7.035 3.943zM406.29 587.948l7.193 3.538c2.103 1.03 3.312 3.31 3.032 5.632l-4.599 36.65-11.018-41.99-17.591-2.395 1.538 4.966-26.617 7.953 6.339 3.365c2.551 1.361 4.158 4.025 4.135 6.902l-.11 45.003a23.68 23.68 0 0 1-6.672 16.382l-2.912 3.016 31.365-9.472-2.083.124c-2.109.151-3.894-1.524-3.912-3.638l-.486-55.658a3.19 3.19 0 0 1 1.797-2.917l2.244-1.086 18.129 58.541 21.824-6.505c-1.812-.138-3.067-.925-3.889-1.755-.966-.979-1.382-2.526-1.148-3.889l10.076-57.079a26.1 26.1 0 0 1 3.958-9.916l4.119-6.233-34.703 10.452z"
 	>
 	</path>
 </svg>
-
-<style>
-	@media (prefers-reduced-motion: no-preference) {
-		.logo {
-			fill-opacity: 0;
-			stroke-dasharray: 1300;
-			stroke-dashoffset: 1300;
-			animation: dash 2s ease-in forwards;
-		}
-
-		@keyframes dash {
-			70% {
-				fill-opacity: 0;
-			}
-
-			100% {
-				fill-opacity: 100%;
-				stroke-dashoffset: 0;
-				stroke-width: 1;
-			}
-		}
-	}
-</style>

src/components/NoiseBackground.astro

@@ -0,0 +1,59 @@
+<div></div>
+
+<style>
+	div {
+		position: fixed;
+		background-color: rgba(0, 86, 0, 0.091);
+		background-image: url(/img/noise.png);
+		background-repeat: repeat;
+		inset: -50%;
+		height: 200vh;
+		width: 200%;
+		pointer-events: none;
+		z-index: 999999;
+
+		animation: noise 0.2s infinite;
+	}
+
+	@keyframes noise {
+		0% {
+			transform: translate3d(0, 0, 0);
+		}
+		10% {
+			transform: translate3d(-5%, -5%, 0);
+		}
+		20% {
+			transform: translate3d(-10%, 5%, 0);
+		}
+		30% {
+			transform: translate3d(5%, -10%, 0);
+		}
+		40% {
+			transform: translate3d(-5%, 15%, 0);
+		}
+		50% {
+			transform: translate3d(-10%, 5%, 0);
+		}
+		60% {
+			transform: translate3d(15%, 0, 0);
+		}
+		70% {
+			transform: translate3d(15%, 15%, 0);
+		}
+		80% {
+			transform: translate3d(10%, 5%, 0);
+		}
+		90% {
+			transform: translate3d(5%, 10%, 0);
+		}
+		100% {
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		div {
+			animation: none;
+		}
+	}
+</style>

src/consts/event-date.ts

@@ -1,4 +1,4 @@
-export const EVENT_TIMESTAMP = 1709575200000 as const
+export const EVENT_TIMESTAMP = 1720886400000 as const
 
 /*
  Mapeo de Abreviaturas de Zonas Horarias

src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
 import ButtonUp from "@/components/ButtonUp.astro"
-import SmokeBackground from "@/components/SmokeBackground.astro"
+import NoiseBackground from "@/components/NoiseBackground.astro"
 import "@fontsource-variable/jost"
 
 interface Props {
@@ -42,23 +42,13 @@ const { title, description } = Astro.props
 
 		<meta name="robots" content="index, follow" />
 		<meta name="googlebot" content="index, follow" />
-
-		<script is:inline>
-			window.getThemePreference = () => {
-				const localItem = typeof localStorage !== "undefined" && localStorage.getItem("theme")
-				if (localItem) return localItem
-				return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
-			}
-
-			const isDark = window.getThemePreference() === "dark"
-			document.documentElement.classList.toggle("dark", isDark)
-		</script>
 	</head>
 
 	<body
 		class="[&_:focus-visible]:outline-none [&_:focus-visible]:ring-2 [&_:focus-visible]:ring-primary"
 	>
-		<SmokeBackground />
+		<!-- <SmokeBackground /> -->
+		<NoiseBackground />
 		<div
 			class="mx-auto max-w-6xl px-2 pt-16 selection:bg-primary selection:text-secondary md:pt-20 lg:px-10"
 			id="main-content"
@@ -71,21 +61,20 @@ const { title, description } = Astro.props
 
 <style is:global>
 	:root {
-		--color-primary: #333;
-		--color-secondary: #ddd;
-		--color-twitch: #9146ff;
-		--color-twitch-ice: #f0f0ff;
-
-		--background-color: #ddd;
-		--background-twitch: #000;
-	}
-
-	.dark {
 		--color-primary: #ddd;
 		--color-secondary: #333;
+		--color-accent: #d5ff00;
 
-		--background-color: #222;
+		--background-color: #101010;
 		--background-twitch: var(--color-twitch-ice);
+
+		--color-twitch: #9146ff;
+		--color-twitch-ice: #f0f0ff;
+	}
+
+	@font-face {
+		font-family: Atomic;
+		src: url("/fonts/atomic.woff2") format("woff2");
 	}
 
 	html {

src/pages/index.astro

@@ -3,10 +3,8 @@ import Layout from "@/layouts/Layout.astro"
 
 import KonamiCode from "@/components/KonamiCode.astro"
 
-import Countdown from "@/sections/Countdown.astro"
 import Footer from "@/sections/Footer.astro"
 import Hero from "@/sections/Hero.astro"
-import Info from "@/sections/Info.astro"
 import PrincipalDate from "@/sections/PrincipalDate.astro"
 ---
 
@@ -15,10 +13,11 @@ import PrincipalDate from "@/sections/PrincipalDate.astro"
 	title="La Velada del Año 4 - Evento de Boxeo de Ibai Llanos"
 >
 	<Hero />
+
 	<main>
 		<PrincipalDate />
-		<Info />
-		<Countdown />
+		<!-- <Info /> -->
+		<!-- <Countdown /> -->
 	</main>
 	<Footer />
 	<KonamiCode />

src/sections/Footer.astro

@@ -1,5 +1,4 @@
 ---
-import ThemeToggle from "@/components/ThemeToggle.astro"
 import InstagramIcon from "@/icons/instagram.astro"
 import XIcon from "@/icons/x.astro"
 ---
@@ -8,10 +7,10 @@ import XIcon from "@/icons/x.astro"
 	class="mt-20 flex w-full flex-col place-items-center border-t-2 border-primary pb-20 pt-6 md:flex-row md:justify-between"
 >
 	<span class="text-center text-primary">
-		&copy; {new Date().getFullYear()} La Velada del Año <span aria-hidden="true" class="hidden md:inline">|</span><br
+		&copy; {new Date().getFullYear()} La Velada del Año <span
 			aria-hidden="true"
-			class="block md:hidden"
-		/> Todos los derechos reservados.
+			class="hidden md:inline">|</span
+		><br aria-hidden="true" class="block md:hidden" /> Todos los derechos reservados.
 	</span>
 	<span aria-hidden="true" class="mt-6 w-full border-t-2 border-primary pt-6 md:hidden"></span>
 
@@ -42,9 +41,6 @@ import XIcon from "@/icons/x.astro"
 					<XIcon class="text-primary" />
 				</a>
 			</li>
-			<li>
-				<ThemeToggle />
-			</li>
 		</ul>
 	</nav>
 </footer>

src/sections/Hero.astro

@@ -4,11 +4,18 @@ import HeroLogo from "@/components/HeroLogo.astro"
 
 <section class="flex flex-col place-items-center gap-4 lg:gap-9">
 	<h1 class="sr-only">Presentación de la Velada del Año IV</h1>
-	<span
-		class="animate-fade-in-up select-none bg-primary px-3 py-0.5 text-base font-medium uppercase text-secondary animate-duration-1000 motion-reduce:animate-duration-[0s] md:px-6 md:py-1 lg:text-xl"
-		aria-hidden="true"
-	>
-		Presentación de
-	</span>
-	<HeroLogo class="h-auto w-[300px] text-primary md:w-[500px]" />
+	<h2 class="font-atomic -rotate-6 text-4xl text-white">twitch.tv/ibai</h2>
+	<div class="relative">
+		<img
+			class="absolute inset-0 -z-10 m-auto block h-auto w-[400px] scale-[175%]"
+			src="/img/drawn-x-logo.png"
+			alt="Logo dibujado a mano de La Velada del Año IV"
+		/>
+		<div
+			class="absolute inset-0 -z-10 m-auto size-[400px] rounded-full bg-black opacity-70 blur-2xl"
+		>
+		</div>
+		<HeroLogo class="h-auto w-[300px] text-primary md:w-[500px]" />
+		<HeroLogo class="absolute inset-0 -z-10 h-auto w-[300px] text-[#f1ffaa]/70 blur md:w-[500px]" />
+	</div>
 </section>