cf148f5fa3
🎯 Optimized Button Layout: - Moved checkbox to top-left corner - Moved favorite to top-right corner - Created expanding add button in bottom-left 🚀 Performance Enhancements: - Reduced all animations from 200ms → 150ms - Reduced card scaling from 105% → 102% (subtle but smooth) - Simplified button padding and shadows - Reduced focus ring intensity ✨ Expanding Add Button Features: - Click to expand: Shows Collection, Deck, Own options - Fire-themed colors: Flame orange, Gold, Wood brown - Smooth rotation animation (45° when expanded) - Click outside to close functionality - Default action: Add to Collection when expanded 🎨 Fire-Themed Action Colors: - Collection: Flame orange (var(--accent-flame)) - Deck: Golden yellow (var(--accent-gold)) - Own: Wood brown (var(--accent-wood)) - Main button: Wood → Ember when expanded ⚡ Micro-Performance Optimizations: - Reduced button padding: p-1.5 → p-1 - Smaller shadows and hover effects - Faster transitions across all elements - Custom scale-102 for subtle card lift - Optimized z-index layering 🔧 Technical Improvements: - Self-contained ExpandingAddButton component - Proper event propagation handling - State management for expand/collapse - Click-outside-to-close behavior - Added scale-102 to Tailwind config The cards page should now feel incredibly responsive! ⚡🔥
32 lines
No EOL
664 B
JavaScript
32 lines
No EOL
664 B
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
'xs': '475px',
|
|
},
|
|
colors: {
|
|
hearth: {
|
|
flame: '#ff6f00',
|
|
ember: '#d84315',
|
|
gold: '#ffab40',
|
|
wood: '#8d6e63',
|
|
cream: '#fefcf8',
|
|
parchment: '#f7f3ed',
|
|
charcoal: '#1a0f0a',
|
|
oak: '#2d1b12',
|
|
mahogany: '#3d2317',
|
|
}
|
|
},
|
|
scale: {
|
|
'102': '1.02',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|