mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-10-22 03:07:04 +02:00
154 lines
3.8 KiB
Plaintext
154 lines
3.8 KiB
Plaintext
---
|
|
import { Code, Flex, Heading, Text } from '@radix-ui/themes';
|
|
import { resolveBranchName } from '../core/blitzkit/branches';
|
|
import { getStrings } from '../core/i18n/getStrings';
|
|
import { literals } from '../core/i18n/literals';
|
|
|
|
const { locale } = Astro.params;
|
|
const branchName = resolveBranchName(locale);
|
|
const isBranchNamed = branchName !== undefined;
|
|
const strings = getStrings(locale);
|
|
---
|
|
|
|
<style>
|
|
#home-hero {
|
|
--p-1: 0%;
|
|
--p-2: 0%;
|
|
--p-3: 0%;
|
|
--p-4: 0%;
|
|
--p-5: 0%;
|
|
|
|
--g-1-dark: var(--blue-3);
|
|
--g-1-light: var(--blue-5);
|
|
--g-2-dark: var(--violet-3);
|
|
--g-2-light: var(--violet-5);
|
|
--g-3-dark: var(--purple-3);
|
|
--g-3-light: var(--purple-5);
|
|
--g-4-dark: var(--crimson-3);
|
|
--g-4-light: var(--crimson-5);
|
|
--g-5-dark: var(--tomato-3);
|
|
--g-5-light: var(--tomato-5);
|
|
|
|
--g-1: color-mix(in srgb, var(--g-1-dark), var(--g-1-light) var(--p-1));
|
|
--g-2: color-mix(in srgb, var(--g-2-dark), var(--g-2-light) var(--p-2));
|
|
--g-3: color-mix(in srgb, var(--g-3-dark), var(--g-3-light) var(--p-3));
|
|
--g-4: color-mix(in srgb, var(--g-4-dark), var(--g-4-light) var(--p-4));
|
|
--g-5: color-mix(in srgb, var(--g-5-dark), var(--g-5-light) var(--p-5));
|
|
|
|
background: linear-gradient(
|
|
45deg,
|
|
var(--g-1),
|
|
var(--g-2),
|
|
var(--g-3),
|
|
var(--g-4),
|
|
var(--g-5)
|
|
);
|
|
}
|
|
|
|
#home-hero[data-variant='pride'] {
|
|
--g-1-dark: var(--crimson-3);
|
|
--g-1-light: var(--crimson-5);
|
|
--g-2-dark: var(--orange-3);
|
|
--g-2-light: var(--orange-5);
|
|
--g-3-dark: var(--yellow-3);
|
|
--g-3-light: var(--yellow-5);
|
|
--g-4-dark: var(--blue-3);
|
|
--g-4-light: var(--blue-5);
|
|
--g-5-dark: var(--purple-3);
|
|
--g-5-light: var(--purple-5);
|
|
}
|
|
|
|
#home-hero[data-variant='spooky'] {
|
|
--g-1-dark: var(--orange-3);
|
|
--g-1-light: var(--orange-5);
|
|
--g-2-dark: var(--tomato-3);
|
|
--g-2-light: var(--tomato-5);
|
|
--g-3-dark: var(--orange-3);
|
|
--g-3-light: var(--orange-5);
|
|
--g-4-dark: var(--tomato-3);
|
|
--g-4-light: var(--tomato-5);
|
|
--g-5-dark: var(--orange-3);
|
|
--g-5-light: var(--orange-5);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { clamp, times } from 'lodash-es';
|
|
|
|
const n = 5;
|
|
const homeHero = document.getElementById('home-hero');
|
|
|
|
if (homeHero) {
|
|
switch (new Date().getMonth()) {
|
|
case 5:
|
|
homeHero.dataset.variant = 'pride';
|
|
break;
|
|
|
|
case 9:
|
|
homeHero.dataset.variant = 'spooky';
|
|
break;
|
|
}
|
|
|
|
window.addEventListener('pointermove', (event) => {
|
|
const x = event.clientX / window.innerWidth;
|
|
const c = clamp(
|
|
(1 -
|
|
(event.clientY + homeHero.getBoundingClientRect().top) /
|
|
window.innerHeight) **
|
|
2,
|
|
0,
|
|
1,
|
|
);
|
|
|
|
// https://www.desmos.com/calculator/ndz2poxk32
|
|
times(n, (i) => {
|
|
const p = c * clamp(-n * Math.abs(x - i / (n - 1)) + 1, 0, 3);
|
|
homeHero.style.setProperty(`--p-${i + 1}`, `${p * 100}%`);
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<Flex
|
|
mb="3"
|
|
id="home-hero"
|
|
align="center"
|
|
justify="center"
|
|
position="relative"
|
|
px="4"
|
|
py="9"
|
|
overflow="hidden"
|
|
>
|
|
<Flex
|
|
direction="column"
|
|
gap="6"
|
|
align="center"
|
|
justify="center"
|
|
position="relative"
|
|
width="100%"
|
|
>
|
|
<Flex direction="column" align="center" gap="1">
|
|
<Heading size={{ initial: '8', xs: '9' }} weight="bold" align="center">
|
|
<Flex align="center" gap={{ initial: '2', xs: '4' }}>
|
|
BlitzKit
|
|
{
|
|
isBranchNamed && (
|
|
<Code
|
|
size={{ initial: '7', xs: '8' }}
|
|
color="gray"
|
|
variant="outline"
|
|
>
|
|
{branchName}
|
|
</Code>
|
|
)
|
|
}
|
|
</Flex>
|
|
</Heading>
|
|
|
|
<Text color="gray" align="center" size="4"
|
|
>{literals(strings.website.home.hero.credit, ['TrèsAbhi'])}</Text
|
|
>
|
|
</Flex>
|
|
</Flex>
|
|
</Flex>
|