🎉 Refactor backend: Remove unnecessary files & update documentation 📚, 🔧 Clean up node_modules & static assets 🗑️, 📝 Update README.md & related docs 📚, 🚀 Deploy new frontend images 📦.
This commit is contained in:
@ -8,10 +8,78 @@ module.exports = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
// Erweiterte Container-Einstellungen für bessere Responsivität
|
||||
container: {
|
||||
center: true,
|
||||
padding: {
|
||||
DEFAULT: '1rem',
|
||||
sm: '1.5rem',
|
||||
lg: '2rem',
|
||||
xl: '3rem',
|
||||
'2xl': '4rem',
|
||||
},
|
||||
screens: {
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1400px',
|
||||
},
|
||||
},
|
||||
// Erweiterte Breakpoints für bessere Kontrolle
|
||||
screens: {
|
||||
'xs': '480px', // Extra small devices
|
||||
'sm': '640px', // Small devices
|
||||
'md': '768px', // Medium devices
|
||||
'lg': '1024px', // Large devices
|
||||
'xl': '1280px', // Extra large devices
|
||||
'2xl': '1536px', // 2X large devices
|
||||
'3xl': '1920px', // Ultra wide screens
|
||||
// Custom breakpoints für spezielle Anwendungsfälle
|
||||
'tablet': '768px',
|
||||
'laptop': '1024px',
|
||||
'desktop': '1280px',
|
||||
'wide': '1536px',
|
||||
// Orientierungs-spezifische Breakpoints
|
||||
'landscape': {'raw': '(orientation: landscape)'},
|
||||
'portrait': {'raw': '(orientation: portrait)'},
|
||||
// Touch device detection
|
||||
'touch': {'raw': '(hover: none) and (pointer: coarse)'},
|
||||
'no-touch': {'raw': '(hover: hover) and (pointer: fine)'},
|
||||
},
|
||||
spacing: {
|
||||
'72': '18rem',
|
||||
'84': '21rem',
|
||||
'96': '24rem'
|
||||
'96': '24rem',
|
||||
'128': '32rem',
|
||||
'144': '36rem',
|
||||
'160': '40rem',
|
||||
// Responsive spacing utilities
|
||||
'safe-top': 'env(safe-area-inset-top)',
|
||||
'safe-bottom': 'env(safe-area-inset-bottom)',
|
||||
'safe-left': 'env(safe-area-inset-left)',
|
||||
'safe-right': 'env(safe-area-inset-right)',
|
||||
},
|
||||
fontSize: {
|
||||
// Responsive font sizes
|
||||
'xs': ['0.75rem', { lineHeight: '1rem' }],
|
||||
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
||||
'base': ['1rem', { lineHeight: '1.5rem' }],
|
||||
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
|
||||
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
|
||||
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
||||
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
||||
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
||||
'5xl': ['3rem', { lineHeight: '1' }],
|
||||
'6xl': ['3.75rem', { lineHeight: '1' }],
|
||||
'7xl': ['4.5rem', { lineHeight: '1' }],
|
||||
'8xl': ['6rem', { lineHeight: '1' }],
|
||||
'9xl': ['8rem', { lineHeight: '1' }],
|
||||
// Mobile-optimized sizes
|
||||
'mobile-xs': ['0.675rem', { lineHeight: '0.875rem' }],
|
||||
'mobile-sm': ['0.8rem', { lineHeight: '1.1rem' }],
|
||||
'mobile-base': ['0.925rem', { lineHeight: '1.4rem' }],
|
||||
'mobile-lg': ['1.05rem', { lineHeight: '1.6rem' }],
|
||||
},
|
||||
colors: {
|
||||
// Mercedes-Benz Corporate Colors
|
||||
@ -126,8 +194,132 @@ module.exports = {
|
||||
boxShadow: {
|
||||
'mercedes': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
'card-dark': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
|
||||
}
|
||||
// Responsive shadows
|
||||
'mobile': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
||||
'tablet': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
'desktop': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
},
|
||||
// Responsive border radius
|
||||
borderRadius: {
|
||||
'none': '0',
|
||||
'sm': '0.125rem',
|
||||
DEFAULT: '0.25rem',
|
||||
'md': '0.375rem',
|
||||
'lg': '0.5rem',
|
||||
'xl': '0.75rem',
|
||||
'2xl': '1rem',
|
||||
'3xl': '1.5rem',
|
||||
'full': '9999px',
|
||||
// Mobile-optimized radius
|
||||
'mobile': '0.375rem',
|
||||
'tablet': '0.5rem',
|
||||
'desktop': '0.75rem',
|
||||
},
|
||||
// Animation improvements
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 0.5s ease-in-out',
|
||||
'slide-up': 'slideUp 0.5s ease-out',
|
||||
'slide-down': 'slideDown 0.5s ease-out',
|
||||
'slide-left': 'slideLeft 0.5s ease-out',
|
||||
'slide-right': 'slideRight 0.5s ease-out',
|
||||
'scale-in': 'scaleIn 0.3s ease-out',
|
||||
'bounce-soft': 'bounceSoft 0.6s ease-out',
|
||||
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
},
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { transform: 'translateY(100%)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
slideDown: {
|
||||
'0%': { transform: 'translateY(-100%)', opacity: '0' },
|
||||
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||
},
|
||||
slideLeft: {
|
||||
'0%': { transform: 'translateX(100%)', opacity: '0' },
|
||||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||
},
|
||||
slideRight: {
|
||||
'0%': { transform: 'translateX(-100%)', opacity: '0' },
|
||||
'100%': { transform: 'translateX(0)', opacity: '1' },
|
||||
},
|
||||
scaleIn: {
|
||||
'0%': { transform: 'scale(0.9)', opacity: '0' },
|
||||
'100%': { transform: 'scale(1)', opacity: '1' },
|
||||
},
|
||||
bounceSoft: {
|
||||
'0%, 20%, 53%, 80%, 100%': { transform: 'translate3d(0,0,0)' },
|
||||
'40%, 43%': { transform: 'translate3d(0,-15px,0)' },
|
||||
'70%': { transform: 'translate3d(0,-7px,0)' },
|
||||
'90%': { transform: 'translate3d(0,-2px,0)' },
|
||||
},
|
||||
},
|
||||
// Responsive grid templates
|
||||
gridTemplateColumns: {
|
||||
'auto-fit-240': 'repeat(auto-fit, minmax(240px, 1fr))',
|
||||
'auto-fit-280': 'repeat(auto-fit, minmax(280px, 1fr))',
|
||||
'auto-fit-320': 'repeat(auto-fit, minmax(320px, 1fr))',
|
||||
'auto-fill-240': 'repeat(auto-fill, minmax(240px, 1fr))',
|
||||
'auto-fill-280': 'repeat(auto-fill, minmax(280px, 1fr))',
|
||||
'auto-fill-320': 'repeat(auto-fill, minmax(320px, 1fr))',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
// Plugin für erweiterte responsive Utilities
|
||||
function({ addUtilities, theme }) {
|
||||
const newUtilities = {
|
||||
// Safe area utilities für mobile Geräte
|
||||
'.pt-safe': {
|
||||
'padding-top': 'env(safe-area-inset-top)',
|
||||
},
|
||||
'.pb-safe': {
|
||||
'padding-bottom': 'env(safe-area-inset-bottom)',
|
||||
},
|
||||
'.pl-safe': {
|
||||
'padding-left': 'env(safe-area-inset-left)',
|
||||
},
|
||||
'.pr-safe': {
|
||||
'padding-right': 'env(safe-area-inset-right)',
|
||||
},
|
||||
'.p-safe': {
|
||||
'padding-top': 'env(safe-area-inset-top)',
|
||||
'padding-bottom': 'env(safe-area-inset-bottom)',
|
||||
'padding-left': 'env(safe-area-inset-left)',
|
||||
'padding-right': 'env(safe-area-inset-right)',
|
||||
},
|
||||
// Responsive text utilities
|
||||
'.text-responsive': {
|
||||
'font-size': 'clamp(0.875rem, 2.5vw, 1.125rem)',
|
||||
'line-height': '1.5',
|
||||
},
|
||||
'.text-responsive-lg': {
|
||||
'font-size': 'clamp(1.125rem, 3vw, 1.5rem)',
|
||||
'line-height': '1.4',
|
||||
},
|
||||
'.text-responsive-xl': {
|
||||
'font-size': 'clamp(1.5rem, 4vw, 2.25rem)',
|
||||
'line-height': '1.3',
|
||||
},
|
||||
// Container query utilities
|
||||
'.container-responsive': {
|
||||
'container-type': 'inline-size',
|
||||
},
|
||||
// Touch-friendly targets
|
||||
'.touch-target': {
|
||||
'min-height': '44px',
|
||||
'min-width': '44px',
|
||||
},
|
||||
'.touch-target-lg': {
|
||||
'min-height': '48px',
|
||||
'min-width': '48px',
|
||||
},
|
||||
}
|
||||
addUtilities(newUtilities, ['responsive'])
|
||||
}
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user