g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Christmas decorations and theme styles

Browse Source 
Introduced a ChristmasDecorations component with animated snowflakes, twinkling stars, and festive emojis. Updated global CSS and Tailwind config to include Christmas-themed animations, colors, and effects. Integrated the decorations into the main layout for a seasonal appearance.
This commit is contained in:
g
2025-12-08 00:13:40 +00:00
parent 48f1b9766d
commit 224342c410
5 changed files with 224 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
tailwind.config.ts
View File

@@ -29,12 +29,36 @@ const config: Config = {
shimmer: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(100%)' }
},
twinkle: {
'0%, 100%': { opacity: '1', transform: 'scale(1)' },
'50%': { opacity: '0.3', transform: 'scale(0.8)' }
},
snowflake: {
'0%': { transform: 'translateY(-100vh) rotate(0deg)', opacity: '1' },
'100%': { transform: 'translateY(100vh) rotate(360deg)', opacity: '0' }
},
sparkle: {
'0%, 100%': { opacity: '0', transform: 'scale(0) rotate(0deg)' },
'50%': { opacity: '1', transform: 'scale(1) rotate(180deg)' }
},
glow: {
'0%, 100%': {
boxShadow: '0 0 5px hsl(0 84% 50%), 0 0 10px hsl(0 84% 50%), 0 0 15px hsl(0 84% 50%)'
},
'50%': {
boxShadow: '0 0 10px hsl(142 76% 36%), 0 0 20px hsl(142 76% 36%), 0 0 30px hsl(142 76% 36%)'
}
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"shimmer": "shimmer 2s infinite"
"shimmer": "shimmer 2s infinite",
"twinkle": "twinkle 2s ease-in-out infinite",
"snowflake": "snowflake 10s linear infinite",
"sparkle": "sparkle 1.5s ease-in-out infinite",
"glow": "glow 2s ease-in-out infinite"
},
colors: {
background: 'hsl(var(--background))',