Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-08 14:35:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

💄 Style FloatingBackground

Browse Source
This commit is contained in:
ajnart
2023-08-26 16:06:21 +02:00
parent 8adb05100b
commit b00a1bcdc8
2 changed files with 3 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
next-env.d.ts vendored
View File

@@ -1,6 +1,5 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <reference types="next/image-types/global" />
/// <reference types="next/navigation-types/compat/navigation" />
// NOTE: This file should not be edited // NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information. // see https://nextjs.org/docs/basic-features/typescript for more information.

7
src/components/layout/Background/FloatingBackground.tsx
View File

@@ -1,5 +1,5 @@
import { Box, createStyles, useMantineTheme } from '@mantine/core'; import { Box, createStyles, useMantineTheme } from '@mantine/core';
import { useMouse, useViewportSize } from '@mantine/hooks'; import { useMouse } from '@mantine/hooks';
import { PolkaElement } from './PolkaElement'; import { PolkaElement } from './PolkaElement';
@@ -12,6 +12,7 @@ export const FloatingBackground = () => {
<PolkaElement rotation={95} top={0} left={100} /> <PolkaElement rotation={95} top={0} left={100} />
<PolkaElement rotation={10} top={50} right={20} /> <PolkaElement rotation={10} top={50} right={20} />
<PolkaElement rotation={-4} bottom={20} left={20} /> <PolkaElement rotation={-4} bottom={20} left={20} />
<PolkaElement rotation={-10} bottom={0} right={0} />
</Box> </Box>
</Box> </Box>
); );
@@ -19,9 +20,7 @@ export const FloatingBackground = () => {
const MouseBackdrop = () => { const MouseBackdrop = () => {
const { x, y } = useMouse(); const { x, y } = useMouse();
const { width, height } = useViewportSize(); const radius = 40;
const smaller = Math.min(width, height);
const radius = Math.max(smaller - 500, 200);
return ( return (
<Box pos="absolute" top={0} left={0} w="100%" h="100%"> <Box pos="absolute" top={0} left={0} w="100%" h="100%">
<Box <Box