arthur/artsite
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/artsite.git synced 2026-02-10 03:06:11 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Ajout de la propriété 'radius' à l'interface NavColor et mise à jour des couleurs de navigation pour inclure des valeurs de rayon.

Browse Source
This commit is contained in:
Arthur Danjou
2025-07-29 15:09:00 +00:00
parent 1e1498e25e
commit cc543249d2
2 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/AppBackground.vue
View File

@@ -1,28 +1,28 @@
<script lang="ts" setup>
import { navColors } from '~~/types'
import { navColors, NavColor } from '~~/types'
const route = useRoute()
const colorMode = useColorMode()
const colors = computed(() => {
const navColor = navColors.find(nav => route.name === nav.name)
if (navColor?.colors) return navColor.colors
if (navColor?.colors) return navColor.colors as Array<NavColor>
const fallbackColor = colorMode.value === 'dark' ? '#000000' : '#ffffff'
return [{ color: fallbackColor, x: 0, y: 0 }, { color: fallbackColor, x: 0, y: 0 }]
return [{ color: fallbackColor, x: 0, y: 0, radius: 0 }, { color: fallbackColor, x: 0, y: 0, radius: 0 }] as Array<NavColor>
})
const backgroundStyle = computed(() => ({
backgroundImage: colors.value
.map(c => `radial-gradient(circle 500px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
.join(', ')
.map(c => `radial-gradient(circle ${c.radius}px at ${c.x}% ${c.y}%, ${c.color}4D, transparent)`)
.join(', '),
backgroundSize: '100% 100%, 100% 100%'
}))
</script>
<template>
<ClientOnly>
<div class="min-h-screen w-full absolute inset-0">
<div class="absolute inset-0 z-0" :style="backgroundStyle" />
</div>
</ClientOnly>
<div
class="fixed inset-0 z-0"
:style="backgroundStyle"
/>
</template>