daily-briefing/web/tailwind.config.js
Sam 2f56be835e Add: München als 3. Wetter-Location + Wetter-Detail-Modal
- München als tertiärer Standort (iris-Akzent) hinzugefügt
- Klick auf WeatherCard öffnet Detail-Modal mit:
  - 24h stündliche Prognose (horizontal scrollbar)
  - 7-Tage-Vorhersage mit Temperaturbalken
  - Wind, Feuchte, Sonnenauf/-untergang
- Backend: 7-Tage statt 3-Tage Forecast, 24 Hourly-Slots pro Standort
- Backend: forecast_3day → forecast Feldname-Konsistenz
- Dashboard: 3-Spalten Wetter-Grid statt 4 (HourlyForecast → Modal)
- Admin: Tertiärer Standort konfigurierbar
- THERMAL Design: iris glow, modal animation, Portal-basiertes Modal

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-03 01:13:49 +01:00

84 lines
2.3 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
base: {
DEFAULT: "#0d0d0f",
50: "#161618",
100: "#1c1c1f",
200: "#232326",
300: "#2a2a2e",
400: "#38383d",
500: "#4a4a50",
600: "#6b6966",
700: "#8a8783",
800: "#b0ada8",
900: "#e8e5e0",
},
gold: {
DEFAULT: "#e8a44a",
dim: "#e8a44a80",
glow: "#e8a44a33",
muted: "#c4884a",
},
mint: {
DEFAULT: "#4ae8a8",
dim: "#4ae8a880",
glow: "#4ae8a833",
},
cherry: {
DEFAULT: "#e85a5a",
dim: "#e85a5a80",
glow: "#e85a5a33",
},
iris: {
DEFAULT: "#a87aec",
dim: "#a87aec80",
glow: "#a87aec33",
},
azure: {
DEFAULT: "#5ab4e8",
dim: "#5ab4e880",
glow: "#5ab4e833",
},
},
fontFamily: {
serif: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
sans: ['"IBM Plex Sans"', "system-ui", "sans-serif"],
mono: ['"IBM Plex Mono"', "Menlo", "monospace"],
},
animation: {
"fade-in": "fadeIn 0.4s ease-out both",
"slide-in": "slideIn 0.3s ease-out both",
"scan": "scan 1.5s ease-in-out infinite",
"glow-pulse": "glowPulse 2s ease-in-out infinite",
"modal-in": "modalIn 0.25s ease-out both",
},
keyframes: {
fadeIn: {
"0%": { opacity: "0", transform: "translateY(6px)" },
"100%": { opacity: "1", transform: "translateY(0)" },
},
slideIn: {
"0%": { opacity: "0", transform: "translateX(-8px)" },
"100%": { opacity: "1", transform: "translateX(0)" },
},
scan: {
"0%, 100%": { transform: "translateX(-100%)" },
"50%": { transform: "translateX(100%)" },
},
glowPulse: {
"0%, 100%": { opacity: "0.5" },
"50%": { opacity: "1" },
},
modalIn: {
"0%": { opacity: "0", transform: "scale(0.95) translateY(8px)" },
"100%": { opacity: "1", transform: "scale(1) translateY(0)" },
},
},
},
},
plugins: [],
};