feat: cooler header

tresabhi · Oct 20, 2024 · 236271d · 236271d
1 parent 61d5393
commit 236271d
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 39 deletions.
diff --git a/packages/website/src/components/HomeHero.astro b/packages/website/src/components/HomeHero.astro
@@ -1,5 +1,4 @@
 ---
-import { imgur } from '@blitzkit/core';
 import { Code, Flex, Heading, Text } from '@radix-ui/themes';
 import { resolveBranchName } from '../core/blitzkit/branches';
 
@@ -8,36 +7,66 @@ const isBranchNamed = branchName !== undefined;
 ---
 
 <style>
- .container {
- background: var(--backgroundImage);
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
+ #home-hero {
+ --p-1: 0%;
+ --p-2: 0%;
+ --p-3: 0%;
+
+ --gradient-color-1: color-mix(
+ in srgb,
+ var(--jade-1),
+ var(--jade-9) var(--p-1)
+ );
+ --gradient-color-2: color-mix(
+ in srgb,
+ var(--blue-1),
+ var(--blue-9) var(--p-2)
+ );
+ --gradient-color-3: color-mix(
+ in srgb,
+ var(--purple-1),
+ var(--purple-9) var(--p-3)
+ );
+
+ background: linear-gradient(
+ 45deg,
+ var(--gradient-color-1),
+ var(--gradient-color-2),
+ var(--gradient-color-3)
+ );
  }
 </style>
 
+<script>
+ import { clamp } from 'lodash-es';
+
+ const homeHero = document.getElementById('home-hero');
+
+ if (homeHero) {
+ window.addEventListener('pointermove', (event) => {
+ const p = event.clientX / window.innerWidth;
+ const c = 1 - event.clientY / window.innerHeight;
+ const p1 = c * clamp(-2 * p + 1, 0, 1);
+ const p2 = c * clamp(-Math.abs(2 * p - 1) + 1, 0, 1);
+ const p3 = c * clamp(2 * p - 1, 0, 1);
+
+ homeHero.style.setProperty('--p-1', `${p1 * 100}%`);
+ homeHero.style.setProperty('--p-2', `${p2 * 100}%`);
+ homeHero.style.setProperty('--p-3', `${p3 * 100}%`);
+ });
+ }
+</script>
+
 <Flex
- className="container"
- style={{ backgroundImage: `url(${imgur('rUPie9G', { format: 'jpeg' })})` }}
+ mb="3"
+ id="home-hero"
  align="center"
  justify="center"
  position="relative"
  px="4"
  py="9"
+ overflow="hidden"
 >
- <div
- style={{
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- background:
- 'linear-gradient(var(--color-panel-translucent), var(--color-background))',
- }}
- >
- </div>
-
  <Flex
  direction="column"
  gap="6"

diff --git a/packages/website/src/components/Plugs.tsx b/packages/website/src/components/Plugs.tsx
@@ -12,6 +12,13 @@ export function Plugs() {
 }
 
 function Content() {
+ const promoteOpentest =
+ assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
+ assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) !== 'opentest';
+ const promotions = [promoteOpentest];
+
+ if (promotions.every((promotion) => !promotion)) return null;
+
  return (
  <Flex
  align="center"
@@ -21,24 +28,23 @@ function Content() {
  py="8"
  gap="6"
  >
- {assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === 'true' &&
- assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH) !== 'opentest' && (
- <Flex direction="column" gap="3" align="center">
- <Text size="5">
- BlitzKit{' '}
- <Code variant="outline" size="4" color="gray" highContrast>
- opentest
- </Code>{' '}
- is available now{' '}
- </Text>
+ {promoteOpentest && (
+ <Flex direction="column" gap="3" align="center">
+ <Text size="5">
+ BlitzKit{' '}
+ <Code variant="outline" size="4" color="gray" highContrast>
+ opentest
+ </Code>{' '}
+ is available now{' '}
+ </Text>
 
-  <Link href="https://opentest.blitzkit.app/" target="_blank">
-  <Button color="green">
-  BlitzKit opentest <ArrowRightIcon />
-  </Button>
-  </Link>
-  </Flex>
-  )}
+ <Link href="https://opentest.blitzkit.app/" target="_blank">
+ <Button color="green">
+ BlitzKit opentest <ArrowRightIcon />
+ </Button>
+ </Link>
+ </Flex>
+ )}
  </Flex>
  );
 }
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
@@ -19,7 +19,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
 
  <Plugs client:idle />
 
- <Flex p="4" justify="center" gap="4">
+ <Flex p="4" justify="center" gap="4" mt="3">
  <Flex maxWidth="64rem" flexGrow="1" gap="4" direction="column">
  <ToolCard tool={tankopediaTool} />