Nikola Derežić
985fb4bc41
Implements a slide-down fade-in animation when the InfoBox expands, improving the user experience with smooth visual transitions. Changes: - Add animateDown keyframe animation to Tailwind config - Apply animation to InfoBox content div when opened - Animation includes opacity fade, vertical slide, and max-height transition - Update InfoBox width to use responsive sizing (17rem on mobile, 28rem on larger screens) - Change icon color to green for better visual consistency 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
const config: Config = {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
gridTemplateColumns: {
|
|
'13': 'repeat(13, minmax(0, 1fr))',
|
|
},
|
|
colors: {
|
|
blue: {
|
|
400: '#2589FE',
|
|
500: '#0070F3',
|
|
600: '#2F6FEB',
|
|
},
|
|
},
|
|
},
|
|
keyframes: {
|
|
shimmer: {
|
|
'100%': {
|
|
transform: 'translateX(100%)',
|
|
},
|
|
},
|
|
animateDown: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateY(-15px)',
|
|
maxHeight: '0px',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateY(0)',
|
|
maxHeight: '200px',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require("@tailwindcss/typography"),
|
|
require("daisyui")
|
|
],
|
|
daisyui: {
|
|
themes: ["dark", "night", "business", "dracula"], // only including dark themes
|
|
darkTheme: "dark", // default dark theme
|
|
}
|
|
};
|
|
export default config;
|