no message

packages/website/src/components/EasterEggs.astro

@@ -0,0 +1,27 @@
+<script>
+  import { isHalloween } from "../core/blitzkit/isHalloween";
+
+  const HALLOWEEN_SATURATION_DELTA = 0.35;
+  const HALLOWEEN_SATURATION_TAU = 0.5;
+  const HALLOWEEN_BRIGHTNESS_DELTA = 0.1;
+  const HALLOWEEN_BRIGHTNESS_TAU = 7;
+
+  function halloweenFrame() {
+    const t = Date.now() / 1000;
+
+    document.body.style.filter = `saturate(${
+      1 -
+      HALLOWEEN_SATURATION_DELTA *
+        (1 + (0.5 + 0.5 * Math.sin(HALLOWEEN_SATURATION_TAU * t)))
+    }) brightness(${
+      1 -
+      HALLOWEEN_BRIGHTNESS_DELTA *
+        (1 + (0.5 + 0.5 * Math.sin(HALLOWEEN_BRIGHTNESS_TAU * t)))
+    })`;
+  }
+
+  if (isHalloween()) {
+    document.body.classList.add("halloween");
+    setInterval(halloweenFrame, 1000 / 30);
+  }
+</script>

packages/website/src/components/Navbar.astro

@@ -28,8 +28,7 @@ const strings = getStrings(locale);
 ---
 
 <style>
-  .navbar,
-  .navbar-padder {
+  .navbar {
     transition-duration: 1s;
   }
 
@@ -37,7 +36,7 @@ const strings = getStrings(locale);
     transform: translateY(-100%);
   }
 
-  body.no-navbar .navbar-padder {
+  body.no-navbar {
     height: 0;
   }
 
@@ -55,6 +54,18 @@ const strings = getStrings(locale);
     box-shadow: var(--shadow-3);
   }
 
+  body.halloween .navbar[data-expanded="false"] .content {
+    background-color: var(--red-a8);
+  }
+
+  .halloween-blood {
+    display: none;
+  }
+
+  body.halloween .halloween-blood {
+    display: block;
+  }
+
   .navbar[data-expanded="true"] .content {
     background-color: var(--gray-1);
   }
@@ -79,8 +90,6 @@ const strings = getStrings(locale);
   });
 </script>
 
-<Box className="navbar-padder" height={{ initial: "3.5rem", sm: "3rem" }} />
-
 <Flex
   direction="column"
   align="center"
@@ -89,11 +98,8 @@ const strings = getStrings(locale);
   className="navbar"
   width="100%"
   top="0"
-  position="fixed"
-  style={{
-    zIndex: 1,
-    backdropFilter: "blur(4rem)",
-  }}
+  position="sticky"
+  style={{ zIndex: 1, backdropFilter: "blur(4rem)" }}
 >
   <Flex
     className="content"
@@ -101,7 +107,6 @@ const strings = getStrings(locale);
     p={{ initial: "4", sm: "3" }}
     direction="column"
     align="center"
-    style={{ backgroundColor: integrated ? undefined : Var("gray-1") }}
   >
     <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
       <Flex align="center">
@@ -242,14 +247,17 @@ const strings = getStrings(locale);
   </Flex>
 
   <Box
-    data-expanded
-    flexGrow="1"
+    className="halloween-blood"
+    position="absolute"
+    left="0"
+    top="100%"
     width="100%"
-    display={{ initial: "block", sm: "none" }}
+    height="4rem"
     style={{
-      backgroundColor: Var("black-a7"),
-      backdropFilter: "blur(0.5rem)",
-      WebkitBackdropFilter: "blur(0.5rem)",
+      backgroundImage: "url(/assets/images/halloween-blood.svg)",
+      backgroundRepeat: "repeat-x",
+      backgroundSize: "8rem",
+      pointerEvents: "none",
     }}
   />
 </Flex>

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx

@@ -65,7 +65,7 @@ export function Lighting() {
         ] as const;
         const color = new Color();
 
-        if (isHalloween()) color.set(1, 0.25, 0.25);
+        if (isHalloween()) color.set(1, 0, 0);
 
         return (
           <HelpingSpotLight

packages/website/src/layouts/BaseLayout.astro

@@ -5,6 +5,7 @@ import { Flex } from "@radix-ui/themes";
 import Analytics from "../components/Analytics.astro";
 import { BlitzKitTheme } from "../components/BlitzKitTheme";
 import { Checks } from "../components/Checks";
+import EasterEggs from "../components/EasterEggs.astro";
 import Footer from "../components/Footer.astro";
 import LocaleRedirector from "../components/LocaleRedirector.astro";
 import Meta from "../components/Meta.astro";
@@ -30,6 +31,7 @@ const { noFooter, noNavbar, integrated, locale } = Astro.props;
     <Meta />
     <Analytics />
     <LocaleRedirector />
+    <EasterEggs />
 
     <slot name="head" />
   </head>

packages/website/src/layouts/base.css

@@ -1,7 +1,7 @@
-@import '@radix-ui/themes/styles.css';
+@import "@radix-ui/themes/styles.css";
 
 .radix-themes {
-  --default-font-family: 'Inter';
+  --default-font-family: "Inter";
 }
 
 body {

packages/website/src/pages/[...locale]/index.astro

@@ -61,7 +61,7 @@ export const getStaticPaths = (() => {
   twitter={{ cardType: "summary_large_image" }}
 />
 
-<BaseLayout integrated>
+<BaseLayout>
   <HomeHero />
 
   <!-- <Flex justify="center" py="6" px="4" justify="center">